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;