Add per-clip video preview modal to admin.html

Browsing a clip previously meant opening /lib/video/:id in a new tab via the raw address link. Add a 预览 button per row that opens a native <dialog> with an inline <video> player instead — closes on Esc, backdrop click, or its own close button, and clears the src on close so playback/buffering stops. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo

Add per-clip video preview modal to admin.html
Browsing a clip previously meant opening /lib/video/:id in a new tab via the raw address link. Add a 预览 button per row that opens a native <dialog> with an inline <video> player instead — closes on Esc, backdrop click, or its own close button, and clears the src on close so playback/buffering stops. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo
yibo
1 parent 79a2a1e9
Showing 1 changed file with 21 additions and 0 deletions
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(&quot;th[data-sort]&quot;).forEach((th) =&gt; {
   });
 });
+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);