From 3ef2f7b09d440551f8cf14e4b061a8a12e9fa32b Mon Sep 17 00:00:00 2001
From: yibo <bboonnee@gmail.com>
Date: Wed, 2 Sep 2026 19:52:18 +0800
Subject: [PATCH] Add per-clip video preview modal to admin.html

---
 admin.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+), 0 deletions(-)

diff --git a/admin.html b/admin.html
index ec53b57..298ec96 100644
--- a/admin.html
+++ b/admin.html
@@ -25,6 +25,9 @@
   .count-hint { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
   .channel-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
   .channel-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+  #previewDialog { padding: 0; border: none; border-radius: var(--radius); background: #000; }
+  #previewDialog::backdrop { background: rgba(0,0,0,.6); }
+  #previewDialog video { display: block; max-width: 80vw; max-height: 80vh; }
 </style>
 </head>
 <body>
@@ -84,6 +87,7 @@
           <th data-sort="promptEn">名称(英)</th>
           <th data-sort="fullPrompt">Prompt</th>
           <th>视频地址</th>
+          <th>预览</th>
           <th>直播间</th>
           <th>溯源（人物×衣服×参考视频）</th>
           <th data-sort="duration">时长</th>
@@ -99,6 +103,10 @@
   </div>
 </main>
 
+<dialog id="previewDialog">
+  <video id="previewVideo" controls autoplay></video>
+</dialog>
+
 <script>
 // Redirect to login whenever any /api/admin/* call comes back 401 (T6 auth
 // gate) — a single interceptor instead of touching every fetch call site.
@@ -200,6 +208,7 @@ function render() {
           <td class="name"><input data-field="promptEn" value="${escapeHtml(c.promptEn || "")}" /></td>
           <td class="prompt"><textarea data-field="fullPrompt">${escapeHtml(c.fullPrompt || "")}</textarea></td>
           <td><input data-field="videoUrl" value="${escapeHtml(c.videoUrl || "")}" placeholder="留空=保持原有播放源" /></td>
+          <td><button class="secondary" data-preview="${c.id}">▶ 预览</button></td>
           <td>
             <select data-field="channel">
               <option value="video" ${c.channel === "dance" ? "" : "selected"}>视频直播间</option>
@@ -224,6 +233,7 @@ function render() {
           <td class="name">${escapeHtml(c.promptEn || "")}</td>
           <td class="prompt" title="${escapeHtml(c.fullPrompt || "")}">${escapeHtml((c.fullPrompt || "").slice(0, 80))}${(c.fullPrompt || "").length > 80 ? "…" : ""}</td>
           <td><a class="video-link" href="${videoHref(c)}" target="_blank">${videoHref(c)}</a></td>
+          <td><button class="secondary" data-preview="${c.id}">▶ 预览</button></td>
           <td>${c.channel === "dance" ? "跳舞直播间" : "视频直播间"}</td>
           <td>${escapeHtml(traceability(c))}</td>
           <td>${c.duration ?? "-"}s</td>
@@ -257,6 +267,12 @@ function render() {
       }
     })
   );
+  tbody.querySelectorAll("[data-preview]").forEach((b) =>
+    b.addEventListener("click", () => {
+      previewVideo.src = videoHref(rows.find((c) => c.id === b.dataset.preview));
+      previewDialog.showModal();
+    })
+  );
   tbody.querySelectorAll("[data-del]").forEach((b) =>
     b.addEventListener("click", async () => {
       if (!confirm("确认删除这条片段？（如果来自 H3 Console 会同步从那边删除）")) return;
@@ -277,6 +293,11 @@ document.querySelectorAll("th[data-sort]").forEach((th) => {
   });
 });
 
+const previewDialog = document.getElementById("previewDialog");
+const previewVideo = document.getElementById("previewVideo");
+previewDialog.addEventListener("click", (e) => { if (e.target === previewDialog) previewDialog.close(); });
+previewDialog.addEventListener("close", () => { previewVideo.pause(); previewVideo.src = ""; });
+
 document.getElementById("searchInput").addEventListener("input", render);
 document.getElementById("sourceFilter").addEventListener("change", render);
 
--
libgit2 0.21.4