Add anime metadata providers

public/assets/app.js

@@ -119,7 +119,10 @@ function renderDetails(title) {
             <h2>${escapeHtml(title.title)}</h2>
             <p>${escapeHtml(title.folder)} · ${title.count} file${title.count === 1 ? "" : "s"} · ${bytes(title.size)}</p>
           </div>
-          <button id="makeThumbBtn" type="button">Thumbnail</button>
+          <div class="summary__actions">
+            <button id="fetchMetadataBtn" type="button">Metadata</button>
+            <button id="makeThumbBtn" type="button">Thumbnail</button>
+          </div>
         </div>
         <form id="metaForm" class="meta-form">
           <label>
@@ -169,6 +172,19 @@ function renderDetails(title) {
       event.currentTarget.textContent = "Thumbnail";
     }
   });
+
+  document.querySelector("#fetchMetadataBtn").addEventListener("click", async (event) => {
+    event.currentTarget.disabled = true;
+    event.currentTarget.textContent = "Fetching";
+    try {
+      await api(`/api/titles/${encodeURIComponent(title.id)}/metadata`, { method: "POST", body: "{}" });
+      await loadLibrary();
+    } catch (err) {
+      alert(err.message);
+      event.currentTarget.disabled = false;
+      event.currentTarget.textContent = "Metadata";
+    }
+  });
 }
 
 function renderSeason(season) {

public/assets/styles.css

@@ -434,6 +434,13 @@ label {
   margin-bottom: 1rem;
 }
 
+.summary__actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
 .summary h2 {
   font-size: clamp(1.8rem, 4vw, 3.4rem);
   line-height: 1.02;