Improve result modal and Envato previews

2026-03-16 11:57:12 +09:00
parent 8101f17f5b
commit 45ff5b860c
7 changed files with 167 additions and 16 deletions
@@ -42,10 +42,13 @@ 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");

 let pendingDownload = null;
 let cropStart = 0;
@@ -345,6 +348,15 @@ function hideModal(element) {
  setHidden(element, true);
 }

+function resetResultModalMedia() {
+  resultModalVideo.pause();
+  detachVideoSource(resultModalVideo);
+  resultModalMediaFrame.style.aspectRatio = "";
+  setHidden(resultModalVideo, true, "");
+  setHidden(resultModalThumbnail, true, "");
+  setHidden(resultModalEmbedNotice, false, "");
+}
+
 function renderResults(results) {
  searchResults.innerHTML = "";
  if (!results.length) {
@@ -359,8 +371,8 @@ function renderResults(results) {
    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 || "";
-    node.querySelector(".result-reason").textContent = item.reason ? `AI 노트: ${item.reason}` : "";
+    node.querySelector(".result-snippet").textContent = item.reason || item.snippet || item.source || "";
+    node.querySelector(".result-reason").textContent = item.snippet ? `Source: ${item.snippet}` : "";
    node.querySelector(".source-badge").textContent = item.source;
    node.addEventListener("click", () => openResultModal(item));
    previewVideo.poster = item.thumbnailUrl || "";
@@ -385,6 +397,7 @@ function renderResults(results) {
 }

 async function prepareDirectDownload(targetUrl) {
+  downloadUrl.value = targetUrl;
  downloadResult.textContent = "checking duplicate history...";
  const dup = await api(`/api/history/check?url=${encodeURIComponent(targetUrl)}`);
  let force = false;
@@ -410,12 +423,22 @@ 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";
+  resultModalSnippet.textContent = item.snippet || "원본 페이지에서 사용할 수 있는 설명이 없습니다.";
  resultModalOpenExternal.href = item.link || "#";
  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, "");
+  }
  showModal(resultModal);
  logEvent("result:modal:open", { title: item.title, source: item.source, link: item.link });
 }
@@ -425,7 +448,7 @@ function closeResultViewer() {
    logEvent("result:modal:close", { title: activeResultItem?.title || "" });
  }
  activeResultItem = null;
-  resultModalFrame.src = "about:blank";
+  resetResultModalMedia();
  hideModal(resultModal);
 }

@@ -640,6 +663,16 @@ previewThumbnail.addEventListener("load", () => {
    previewMediaFrame.style.aspectRatio = `${previewThumbnail.naturalWidth} / ${previewThumbnail.naturalHeight}`;
  }
 });
+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;
@@ -158,23 +158,31 @@
          </div>
          <div class="flex items-center gap-2">
            <a id="resultModalOpenExternal" target="_blank" rel="noreferrer" class="rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Open</a>
-            <button id="resultModalDownload" type="button" class="hidden rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Direct Download</button>
            <button id="closeResultModal" type="button" class="rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Close</button>
          </div>
        </div>
        <div class="grid min-h-0 flex-1 gap-0 lg:grid-cols-[1.5fr_0.85fr]">
          <div class="min-h-0 border-b border-white/10 lg:border-b-0 lg:border-r">
-            <iframe id="resultModalFrame" class="h-full w-full bg-white" referrerpolicy="no-referrer"></iframe>
+            <div id="resultModalMediaFrame" class="flex h-full min-h-[320px] items-center justify-center overflow-hidden bg-black/40 p-4">
+              <video id="resultModalVideo" class="hidden max-h-full w-full rounded-2xl bg-black object-contain" controls playsinline></video>
+              <img id="resultModalThumbnail" class="hidden max-h-full w-full rounded-2xl object-contain" alt="" />
+              <div id="resultModalEmbedNotice" class="max-w-md rounded-3xl border border-white/10 bg-white/[0.03] p-6 text-center text-sm leading-7 text-zinc-300">
+                외부 사이트 임베딩 차단 문제를 피하기 위해 내부 미리보기만 표시합니다.
+              </div>
+            </div>
          </div>
          <div class="min-h-0 overflow-auto px-5 py-5">
            <div class="space-y-5">
-              <div>
-                <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Source Summary</p>
-                <p id="resultModalSnippet" class="mt-2 text-sm leading-7 text-zinc-300"></p>
-              </div>
              <div>
                <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">AI Note</p>
                <p id="resultModalReason" class="mt-2 whitespace-pre-wrap text-sm leading-7 text-zinc-200"></p>
+                <button id="resultModalDownload" type="button" class="mt-4 hidden w-full rounded-2xl border border-white bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-zinc-200">
+                  Direct Download
+                </button>
+              </div>
+              <div>
+                <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Source Summary</p>
+                <p id="resultModalSnippet" class="mt-2 text-sm leading-7 text-zinc-300"></p>
              </div>
            </div>
          </div>