From 6f141ef1c56dc0114e8dbd0c460167fadb771293 Mon Sep 17 00:00:00 2001
From: yibo <bboonnee@gmail.com>
Date: Wed, 2 Sep 2026 20:02:02 +0800
Subject: [PATCH] Show a first-frame thumbnail on each preview player

---
 admin.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/admin.html b/admin.html
index bb12a63..8af7ecb 100644
--- a/admin.html
+++ b/admin.html
@@ -182,6 +182,17 @@ function videoHref(c) {
   return `/lib/video/${c.id}`;
 }
 
+const previewObserver = new IntersectionObserver(
+  (entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      e.target.src = e.target.dataset.src;
+      previewObserver.unobserve(e.target);
+    }
+  },
+  { rootMargin: "200px" }
+);
+
 function render() {
   const rows = filteredSorted();
   const channelTotal = library.filter(inChannel).length;
@@ -202,7 +213,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 class="preview"><video controls preload="none" src="${videoHref(c)}"></video></td>
+          <td class="preview"><video controls preload="metadata" data-src="${videoHref(c)}"></video></td>
           <td>
             <select data-field="channel">
               <option value="video" ${c.channel === "dance" ? "" : "selected"}>视频直播间</option>
@@ -227,7 +238,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 class="preview"><video controls preload="none" src="${videoHref(c)}"></video></td>
+          <td class="preview"><video controls preload="metadata" data-src="${videoHref(c)}"></video></td>
           <td>${c.channel === "dance" ? "跳舞直播间" : "视频直播间"}</td>
           <td>${escapeHtml(traceability(c))}</td>
           <td>${c.duration ?? "-"}s</td>
@@ -243,6 +254,11 @@ function render() {
     })
     .join("");
 
+  // Loading preload="metadata" for all 361 rows at once would hammer the
+  // /lib/video proxy (each clip is a fresh H3 Console fetch); only pull a
+  // row's first frame once it's actually scrolled into view.
+  tbody.querySelectorAll("td.preview video[data-src]").forEach((v) => previewObserver.observe(v));
+
   tbody.querySelectorAll("[data-edit]").forEach((b) => b.addEventListener("click", () => { editingId = b.dataset.edit; render(); }));
   tbody.querySelectorAll("[data-cancel]").forEach((b) => b.addEventListener("click", () => { editingId = null; render(); }));
   tbody.querySelectorAll("[data-save]").forEach((b) =>
--
libgit2 0.21.4