Refactor search fallback and preview flows

frontend/app.js

@@ -56,6 +56,7 @@ let activeResultItem = null;
 const activePlatforms = new Set(["envato", "artgrid", "google video"]);
 const hlsInstances = new WeakMap();
 const debugEntries = [];
+const PREVIEW_PLACEHOLDER = "https://placehold.co/1280x720/0a0a0a/ffffff?text=Preview";
 
 function setStatus(label, progress) {
   statusLabel.textContent = label;
@@ -63,6 +64,18 @@ function setStatus(label, progress) {
   logEvent("status", { label, progress });
 }
 
+function setHidden(element, hidden, visibleDisplayClass = "flex") {
+  element.classList.toggle("hidden", hidden);
+  if (visibleDisplayClass) {
+    element.classList.toggle(visibleDisplayClass, !hidden);
+  }
+}
+
+function showWarning(message) {
+  searchWarning.textContent = message;
+  setHidden(searchWarning, !message, "");
+}
+
 function logEvent(type, payload) {
   const entry = {
     ts: new Date().toISOString(),
@@ -318,6 +331,20 @@ function detachVideoSource(video) {
   video.load();
 }
 
+function resetPreviewPlayer() {
+  previewVideo.pause();
+  detachVideoSource(previewVideo);
+  previewMediaFrame.style.aspectRatio = "";
+}
+
+function showModal(element) {
+  setHidden(element, false);
+}
+
+function hideModal(element) {
+  setHidden(element, true);
+}
+
 function renderResults(results) {
   searchResults.innerHTML = "";
   if (!results.length) {
@@ -329,7 +356,7 @@ function renderResults(results) {
     const image = node.querySelector("img");
     const previewVideo = node.querySelector(".preview-hover");
     const overlays = node.querySelectorAll(".preview-overlay");
-    image.src = item.thumbnailUrl || "https://placehold.co/1280x720/0a0a0a/ffffff?text=Preview";
+    image.src = item.thumbnailUrl || PREVIEW_PLACEHOLDER;
     image.alt = item.title;
     node.querySelector("h3").textContent = item.title;
     node.querySelector(".result-snippet").textContent = item.snippet || item.reason || item.source || "";
@@ -389,8 +416,7 @@ function openResultModal(item) {
   resultModalOpenExternal.href = item.link || "#";
   const canDirectDownload = item.source === "Google Video" && item.link;
   resultModalDownload.classList.toggle("hidden", !canDirectDownload);
-  resultModal.classList.remove("hidden");
-  resultModal.classList.add("flex");
+  showModal(resultModal);
   logEvent("result:modal:open", { title: item.title, source: item.source, link: item.link });
 }
 
@@ -400,14 +426,13 @@ function closeResultViewer() {
   }
   activeResultItem = null;
   resultModalFrame.src = "about:blank";
-  resultModal.classList.add("hidden");
-  resultModal.classList.remove("flex");
+  hideModal(resultModal);
 }
 
 searchForm.addEventListener("submit", async (event) => {
   event.preventDefault();
   setStatus("preparing search", 5);
-  searchWarning.classList.add("hidden");
+  showWarning("");
   try {
     const data = await api("/api/search", {
       method: "POST",
@@ -416,15 +441,11 @@ searchForm.addEventListener("submit", async (event) => {
     });
     renderResults(data.results || []);
     renderQueryVariants(data.queries || []);
-    if (data.warning) {
-      searchWarning.textContent = data.warning;
-      searchWarning.classList.remove("hidden");
-    }
+    showWarning(data.warning || "");
     logEvent("search:completed", { results: data.results?.length || 0, queries: data.queries || [] });
     setStatus("search complete", 100);
   } catch (error) {
-    searchWarning.textContent = error.message;
-    searchWarning.classList.remove("hidden");
+    showWarning(error.message);
     renderQueryVariants([]);
     setStatus("search failed", 100);
   }
@@ -445,18 +466,16 @@ async function uploadFile(file) {
 function openPreviewModal(preview) {
   logEvent("preview:modal:open", preview);
   previewTitle.textContent = preview.title;
-  previewThumbnail.src = preview.thumbnail;
+  previewThumbnail.src = preview.thumbnail || PREVIEW_PLACEHOLDER;
   previewThumbnail.alt = preview.title;
-  previewVideo.pause();
-  detachVideoSource(previewVideo);
-  previewMediaFrame.style.aspectRatio = "";
+  resetPreviewPlayer();
   if (preview.previewStreamUrl) {
     attachVideoSource(previewVideo, preview.previewStreamUrl);
-    previewVideo.classList.remove("hidden");
-    previewThumbnail.classList.add("hidden");
+    setHidden(previewVideo, false, "");
+    setHidden(previewThumbnail, true, "");
   } else {
-    previewVideo.classList.add("hidden");
-    previewThumbnail.classList.remove("hidden");
+    setHidden(previewVideo, true, "");
+    setHidden(previewThumbnail, false, "");
   }
   previewDuration.textContent = preview.duration;
   qualitySelect.innerHTML = "";
@@ -470,17 +489,13 @@ function openPreviewModal(preview) {
   cropStart = 0;
   cropEnd = cropMax;
   syncRanges();
-  previewModal.classList.remove("hidden");
-  previewModal.classList.add("flex");
+  showModal(previewModal);
 }
 
 function closeModal() {
   logEvent("preview:modal:close", { title: previewTitle.textContent });
-  previewVideo.pause();
-  detachVideoSource(previewVideo);
-  previewMediaFrame.style.aspectRatio = "";
-  previewModal.classList.add("hidden");
-  previewModal.classList.remove("flex");
+  resetPreviewPlayer();
+  hideModal(previewModal);
   cropStart = 0;
   cropEnd = 0;
   cropMax = 0;