Add download preview flow and search fallback

frontend/app.js

@@ -13,6 +13,15 @@ const startTime = document.getElementById("startTime");
 const endTime = document.getElementById("endTime");
 const downloadResult = document.getElementById("downloadResult");
 const cardTemplate = document.getElementById("searchCardTemplate");
+const previewModal = document.getElementById("previewModal");
+const previewTitle = document.getElementById("previewTitle");
+const previewThumbnail = document.getElementById("previewThumbnail");
+const previewDuration = document.getElementById("previewDuration");
+const qualitySelect = document.getElementById("qualitySelect");
+const confirmDownload = document.getElementById("confirmDownload");
+const closePreviewModal = document.getElementById("closePreviewModal");
+
+let pendingDownload = null;
 
 function setStatus(label, progress) {
   statusLabel.textContent = label;
@@ -97,7 +106,35 @@ async function uploadFile(file) {
   const formData = new FormData();
   formData.append("file", file);
   uploadResult.textContent = "uploading...";
-  await api("/api/upload", { method: "POST", body: formData });
+  try {
+    await api("/api/upload", { method: "POST", body: formData });
+  } catch (error) {
+    uploadResult.textContent = error.message;
+  }
+}
+
+function openPreviewModal(preview) {
+  previewTitle.textContent = preview.title;
+  previewThumbnail.src = preview.thumbnail;
+  previewThumbnail.alt = preview.title;
+  previewDuration.textContent = preview.duration;
+  qualitySelect.innerHTML = "";
+  for (const item of preview.qualities || []) {
+    const option = document.createElement("option");
+    option.value = item.value;
+    option.textContent = item.label;
+    qualitySelect.appendChild(option);
+  }
+  startTime.value = preview.startDefault || "00:00:00";
+  endTime.value = preview.endDefault || "00:00:00";
+  previewModal.classList.remove("hidden");
+  previewModal.classList.add("flex");
+}
+
+function closeModal() {
+  previewModal.classList.add("hidden");
+  previewModal.classList.remove("flex");
+  pendingDownload = null;
 }
 
 dropzone.addEventListener("dragover", (event) => {
@@ -138,21 +175,49 @@ downloadForm.addEventListener("submit", async (event) => {
         return;
       }
     }
+    pendingDownload = { url: downloadUrl.value, force };
+    downloadResult.textContent = "loading preview...";
+    const preview = await api("/api/download/preview", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url: downloadUrl.value }),
+    });
+    openPreviewModal(preview);
+    downloadResult.textContent = "preview loaded";
+  } catch (error) {
+    downloadResult.textContent = error.message;
+  }
+});
+
+confirmDownload.addEventListener("click", async () => {
+  if (!pendingDownload) {
+    return;
+  }
+  try {
     const data = await api("/api/download", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        url: downloadUrl.value,
+        url: pendingDownload.url,
         start: startTime.value,
         end: endTime.value,
-        force,
+        quality: qualitySelect.value,
+        force: pendingDownload.force,
       }),
     });
+    closeModal();
     downloadResult.textContent = data.message;
   } catch (error) {
     downloadResult.textContent = error.message;
   }
 });
 
+closePreviewModal.addEventListener("click", closeModal);
+previewModal.addEventListener("click", (event) => {
+  if (event.target === previewModal) {
+    closeModal();
+  }
+});
+
 connectWS();
 setStatus("idle", 0);