Stabilize modal rendering and sequential Gemini flow

frontend/app.js

@@ -43,6 +43,9 @@ const resultModalSource = document.getElementById("resultModalSource");
 const resultModalSnippet = document.getElementById("resultModalSnippet");
 const resultModalReason = document.getElementById("resultModalReason");
 const resultModalFrame = document.getElementById("resultModalFrame");
+const resultModalMediaFrame = document.getElementById("resultModalMediaFrame");
+const resultModalVideo = document.getElementById("resultModalVideo");
+const resultModalThumbnail = document.getElementById("resultModalThumbnail");
 const resultModalOpenExternal = document.getElementById("resultModalOpenExternal");
 const resultModalDownload = document.getElementById("resultModalDownload");
 const closeResultModal = document.getElementById("closeResultModal");
@@ -53,6 +56,9 @@ const resultModalReady = Boolean(
   resultModalSnippet &&
   resultModalReason &&
   resultModalFrame &&
+  resultModalMediaFrame &&
+  resultModalVideo &&
+  resultModalThumbnail &&
   resultModalOpenExternal &&
   resultModalDownload &&
   closeResultModal,
@@ -157,6 +163,23 @@ function toClock(totalSeconds) {
   return `${hours}:${minutes}:${secs}`;
 }
 
+function extractYouTubeID(link) {
+  if (!link) {
+    return "";
+  }
+  const patterns = [
+    /(?:v=|\/shorts\/|\/embed\/)([A-Za-z0-9_-]{11})/,
+    /youtu\.be\/([A-Za-z0-9_-]{11})/,
+  ];
+  for (const pattern of patterns) {
+    const match = link.match(pattern);
+    if (match?.[1]) {
+      return match[1];
+    }
+  }
+  return "";
+}
+
 function syncRanges() {
   let start = cropStart;
   let end = cropEnd;
@@ -373,7 +396,36 @@ function resetResultModalMedia() {
   if (!resultModalReady) {
     return;
   }
+  resultModalVideo.pause();
+  detachVideoSource(resultModalVideo);
   resultModalFrame.src = "about:blank";
+  resultModalThumbnail.removeAttribute("src");
+  setHidden(resultModalFrame, true, "");
+  setHidden(resultModalVideo, true, "");
+  setHidden(resultModalThumbnail, true, "");
+  resultModalMediaFrame.style.aspectRatio = "";
+}
+
+function showResultModalFrame(src) {
+  if (!src) {
+    return;
+  }
+  resultModalFrame.src = src;
+  setHidden(resultModalFrame, false, "");
+}
+
+function showResultModalVideo(src) {
+  if (!src) {
+    return;
+  }
+  attachVideoSource(resultModalVideo, src);
+  setHidden(resultModalVideo, false, "");
+}
+
+function showResultModalThumbnail(src, alt) {
+  resultModalThumbnail.src = src || PREVIEW_PLACEHOLDER;
+  resultModalThumbnail.alt = alt || "";
+  setHidden(resultModalThumbnail, false, "");
 }
 
 function renderResults(results) {
@@ -452,7 +504,13 @@ function openResultModal(item) {
   const canDirectDownload = item.source === "Google Video" && item.link;
   resultModalDownload.classList.toggle("hidden", !canDirectDownload);
   resetResultModalMedia();
-  resultModalFrame.src = buildResultModalEmbedURL(item);
+  if (item.source === "Google Video") {
+    showResultModalFrame(buildResultModalEmbedURL(item));
+  } else if (item.previewVideoUrl) {
+    showResultModalVideo(item.previewVideoUrl);
+  } else {
+    showResultModalThumbnail(item.thumbnailUrl, item.title || "");
+  }
   showModal(resultModal);
   logEvent("result:modal:open", { title: item.title, source: item.source, link: item.link });
 }
@@ -683,6 +741,18 @@ 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 (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;

frontend/index.html

@@ -162,8 +162,10 @@
           </div>
         </div>
         <div class="border-b border-white/10 bg-black/40 p-4">
-          <div class="aspect-video overflow-hidden rounded-2xl border border-white/10 bg-black">
-            <iframe id="resultModalFrame" class="h-full w-full bg-white" referrerpolicy="no-referrer" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>
+          <div id="resultModalMediaFrame" class="aspect-video overflow-hidden rounded-2xl border border-white/10 bg-black">
+            <iframe id="resultModalFrame" class="hidden h-full w-full bg-white" referrerpolicy="no-referrer" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>
+            <video id="resultModalVideo" class="hidden h-full w-full bg-black object-contain" controls playsinline></video>
+            <img id="resultModalThumbnail" class="hidden h-full w-full object-contain" alt="" />
           </div>
         </div>
         <div class="grid gap-5 px-5 py-5 lg:grid-cols-[1.6fr_0.8fr]">
@@ -200,6 +202,6 @@
       </button>
     </template>
 
-    <script src="/app.js?v=20260316c" defer></script>
+    <script src="/app.js?v=20260316d" defer></script>
   </body>
 </html>