Replace preview modal with inline video player per row

The modal (previous commit) meant an extra click and a popup just to see the clip. Swap it for a native <video controls preload="none"> directly in the 预览 column — preload="none" keeps the 361-row table from firing off thumbnails for every row on load, and clicking the player's own play button starts it right there, no dialog involved. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo

Replace preview modal with inline video player per row
The modal (previous commit) meant an extra click and a popup just to see the clip. Swap it for a native <video controls preload="none"> directly in the 预览 column — preload="none" keeps the 361-row table from firing off thumbnails for every row on load, and clicking the player's own play button starts it right there, no dialog involved. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo
yibo
1 parent af536bdd
Showing 1 changed file with 3 additions and 20 deletions
admin.html
@@ -25,9 +25,7 @@
   .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; }
+  td.preview video { display: block; width: 180px; max-height: 200px; background: #000; border-radius: 4px; }
 </style>
 </head>
 <body>
@@ -103,10 +101,6 @@
   </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.
@@ -208,7 +202,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 class="preview"><video controls preload="none" src="${videoHref(c)}"></video></td>
           <td>
             <select data-field="channel">
               <option value="video" ${c.channel === "dance" ? "" : "selected"}>视频直播间</option>
@@ -233,7 +227,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 class="preview"><video controls preload="none" src="${videoHref(c)}"></video></td>
           <td>${c.channel === "dance" ? "跳舞直播间" : "视频直播间"}</td>
           <td>${escapeHtml(traceability(c))}</td>
           <td>${c.duration ?? "-"}s</td>
@@ -267,12 +261,6 @@ 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;
@@ -293,11 +281,6 @@ 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);