Refine result modal and Gemini recovery

frontend/app.js

@@ -42,26 +42,20 @@ const resultModalTitle = document.getElementById("resultModalTitle");
 const resultModalSource = document.getElementById("resultModalSource");
 const resultModalSnippet = document.getElementById("resultModalSnippet");
 const resultModalReason = document.getElementById("resultModalReason");
+const resultModalFrame = document.getElementById("resultModalFrame");
 const resultModalOpenExternal = document.getElementById("resultModalOpenExternal");
 const resultModalDownload = document.getElementById("resultModalDownload");
 const closeResultModal = document.getElementById("closeResultModal");
-const resultModalMediaFrame = document.getElementById("resultModalMediaFrame");
-const resultModalVideo = document.getElementById("resultModalVideo");
-const resultModalThumbnail = document.getElementById("resultModalThumbnail");
-const resultModalEmbedNotice = document.getElementById("resultModalEmbedNotice");
 const resultModalReady = Boolean(
   resultModal &&
   resultModalTitle &&
   resultModalSource &&
   resultModalSnippet &&
   resultModalReason &&
+  resultModalFrame &&
   resultModalOpenExternal &&
   resultModalDownload &&
-  closeResultModal &&
-  resultModalMediaFrame &&
-  resultModalVideo &&
-  resultModalThumbnail &&
-  resultModalEmbedNotice,
+  closeResultModal,
 );
 
 let pendingDownload = null;
@@ -362,16 +356,24 @@ function hideModal(element) {
   setHidden(element, true);
 }
 
+function buildResultModalEmbedURL(item) {
+  if (!item?.link) {
+    return "about:blank";
+  }
+  if (item.source === "Google Video") {
+    const videoId = extractYouTubeID(item.link);
+    if (videoId) {
+      return `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
+    }
+  }
+  return item.link;
+}
+
 function resetResultModalMedia() {
   if (!resultModalReady) {
     return;
   }
-  resultModalVideo.pause();
-  detachVideoSource(resultModalVideo);
-  resultModalMediaFrame.style.aspectRatio = "";
-  setHidden(resultModalVideo, true, "");
-  setHidden(resultModalThumbnail, true, "");
-  setHidden(resultModalEmbedNotice, false, "");
+  resultModalFrame.src = "about:blank";
 }
 
 function renderResults(results) {
@@ -450,16 +452,7 @@ function openResultModal(item) {
   const canDirectDownload = item.source === "Google Video" && item.link;
   resultModalDownload.classList.toggle("hidden", !canDirectDownload);
   resetResultModalMedia();
-  if (item.previewVideoUrl) {
-    attachVideoSource(resultModalVideo, item.previewVideoUrl);
-    setHidden(resultModalVideo, false, "");
-    setHidden(resultModalEmbedNotice, true, "");
-  } else if (item.thumbnailUrl) {
-    resultModalThumbnail.src = item.thumbnailUrl;
-    resultModalThumbnail.alt = item.title || "";
-    setHidden(resultModalThumbnail, false, "");
-    setHidden(resultModalEmbedNotice, true, "");
-  }
+  resultModalFrame.src = buildResultModalEmbedURL(item);
   showModal(resultModal);
   logEvent("result:modal:open", { title: item.title, source: item.source, link: item.link });
 }
@@ -690,18 +683,6 @@ previewThumbnail.addEventListener("load", () => {
     previewMediaFrame.style.aspectRatio = `${previewThumbnail.naturalWidth} / ${previewThumbnail.naturalHeight}`;
   }
 });
-if (resultModalReady) {
-  resultModalVideo.addEventListener("loadedmetadata", () => {
-    if (resultModalVideo.videoWidth > 0 && resultModalVideo.videoHeight > 0) {
-      resultModalMediaFrame.style.aspectRatio = `${resultModalVideo.videoWidth} / ${resultModalVideo.videoHeight}`;
-    }
-  });
-  resultModalThumbnail.addEventListener("load", () => {
-    if (!resultModalVideo.src && resultModalThumbnail.naturalWidth > 0 && resultModalThumbnail.naturalHeight > 0) {
-      resultModalMediaFrame.style.aspectRatio = `${resultModalThumbnail.naturalWidth} / ${resultModalThumbnail.naturalHeight}`;
-    }
-  });
-}
 for (const button of platformToggles) {
   button.addEventListener("click", () => {
     const platform = button.dataset.platformToggle;