Add in-app result viewer and expand Gemini review

frontend/app.js

@@ -37,12 +37,22 @@ const clearLogs = document.getElementById("clearLogs");
 const downloadLogs = document.getElementById("downloadLogs");
 const debugLogList = document.getElementById("debugLogList");
 const debugSummary = document.getElementById("debugSummary");
+const resultModal = document.getElementById("resultModal");
+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");
 
 let pendingDownload = null;
 let cropStart = 0;
 let cropEnd = 0;
 let cropMax = 0;
 let activeThumb = null;
+let activeResultItem = null;
 const activePlatforms = new Set(["envato", "artgrid", "google video"]);
 const hlsInstances = new WeakMap();
 const debugEntries = [];
@@ -319,13 +329,13 @@ function renderResults(results) {
     const image = node.querySelector("img");
     const previewVideo = node.querySelector(".preview-hover");
     const overlays = node.querySelectorAll(".preview-overlay");
-    node.href = item.link;
     image.src = item.thumbnailUrl || "https://placehold.co/1280x720/0a0a0a/ffffff?text=Preview";
     image.alt = item.title;
     node.querySelector("h3").textContent = item.title;
     node.querySelector(".result-snippet").textContent = item.snippet || item.reason || item.source || "";
-    node.querySelector(".result-reason").textContent = item.reason ? `AI note: ${item.reason}` : "";
+    node.querySelector(".result-reason").textContent = item.reason ? `AI 노트: ${item.reason}` : "";
     node.querySelector(".source-badge").textContent = item.source;
+    node.addEventListener("click", () => openResultModal(item));
     previewVideo.poster = item.thumbnailUrl || "";
     if (item.previewVideoUrl) {
       const mediaArea = node.querySelector(".relative");
@@ -347,6 +357,53 @@ function renderResults(results) {
   }
 }
 
+async function prepareDirectDownload(targetUrl) {
+  downloadResult.textContent = "checking duplicate history...";
+  const dup = await api(`/api/history/check?url=${encodeURIComponent(targetUrl)}`);
+  let force = false;
+  if (dup.exists) {
+    force = window.confirm("동일 URL 다운로드 이력이 있습니다. 계속 진행할까요?");
+    if (!force) {
+      downloadResult.textContent = "cancelled";
+      return;
+    }
+  }
+  pendingDownload = { url: targetUrl, force };
+  downloadResult.textContent = "loading preview...";
+  const preview = await api("/api/download/preview", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ url: targetUrl }),
+  });
+  openPreviewModal(preview);
+  downloadResult.textContent = "preview loaded";
+}
+
+function openResultModal(item) {
+  activeResultItem = item;
+  resultModalTitle.textContent = item.title || "Untitled";
+  resultModalSource.textContent = item.source || "";
+  resultModalSnippet.textContent = item.snippet || "원본 페이지에서 사용할 수 있는 설명이 없습니다.";
+  resultModalReason.textContent = item.reason || "AI 노트가 없습니다.";
+  resultModalFrame.src = item.link || "about:blank";
+  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");
+  logEvent("result:modal:open", { title: item.title, source: item.source, link: item.link });
+}
+
+function closeResultViewer() {
+  if (!resultModal.classList.contains("hidden")) {
+    logEvent("result:modal:close", { title: activeResultItem?.title || "" });
+  }
+  activeResultItem = null;
+  resultModalFrame.src = "about:blank";
+  resultModal.classList.add("hidden");
+  resultModal.classList.remove("flex");
+}
+
 searchForm.addEventListener("submit", async (event) => {
   event.preventDefault();
   setStatus("preparing search", 5);
@@ -458,26 +515,8 @@ fileInput.addEventListener("change", async () => {
 
 downloadForm.addEventListener("submit", async (event) => {
   event.preventDefault();
-  downloadResult.textContent = "checking duplicate history...";
   try {
-    const dup = await api(`/api/history/check?url=${encodeURIComponent(downloadUrl.value)}`);
-    let force = false;
-    if (dup.exists) {
-      force = window.confirm("동일 URL 다운로드 이력이 있습니다. 계속 진행할까요?");
-      if (!force) {
-        downloadResult.textContent = "cancelled";
-        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";
+    await prepareDirectDownload(downloadUrl.value);
   } catch (error) {
     downloadResult.textContent = error.message;
     logEvent("download:preview:error", { message: error.message, data: error.data || null });
@@ -509,6 +548,24 @@ confirmDownload.addEventListener("click", async () => {
 });
 
 closePreviewModal.addEventListener("click", closeModal);
+closeResultModal.addEventListener("click", closeResultViewer);
+resultModal.addEventListener("click", (event) => {
+  if (event.target === resultModal) {
+    closeResultViewer();
+  }
+});
+resultModalDownload.addEventListener("click", async () => {
+  if (!activeResultItem?.link) {
+    return;
+  }
+  try {
+    closeResultViewer();
+    await prepareDirectDownload(activeResultItem.link);
+  } catch (error) {
+    downloadResult.textContent = error.message;
+    logEvent("download:preview:error", { message: error.message, data: error.data || null, source: activeResultItem?.source || "" });
+  }
+});
 previewModal.addEventListener("click", (event) => {
   if (event.target === previewModal) {
     closeModal();