Fix dance.html playback: slow H3 video proxy left rooms stuck/muted/choppy

/lib/video/:id proxied every clip live through H3 console's file endpoint, which is slow even for already-finished files (~35KB/s, confirmed 2026-09) — the 10s server-clock playlist kept advancing before a clip ever finished loading, so rooms looked dead, sound silently got re-muted on transient play() rejections, and a failed load just froze forever. - server.js: local disk cache (video-cache/) for H3-proxied clips, warmed ahead of time by /api/dance/live/state for the current + next-up clip; /lib/video/:id serves cache hits instantly with Range support - dance.html: only fall back to muted autoplay on a real NotAllowedError, not any play() rejection (e.g. AbortError from a mid-switch load); auto-skip to the next clip on a video load error instead of freezing; drop the now-playing garment-prompt text under the video - dance-channel.test.js: mock H3 server no longer conflates the new cache warm-up request with job-status polling Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AHPGtozYFzo39AX2CdV5ZY

Fix dance.html playback: slow H3 video proxy left rooms stuck/muted/choppy
/lib/video/:id proxied every clip live through H3 console's file endpoint, which is slow even for already-finished files (~35KB/s, confirmed 2026-09) — the 10s server-clock playlist kept advancing before a clip ever finished loading, so rooms looked dead, sound silently got re-muted on transient play() rejections, and a failed load just froze forever. - server.js: local disk cache (video-cache/) for H3-proxied clips, warmed ahead of time by /api/dance/live/state for the current + next-up clip; /lib/video/:id serves cache hits instantly with Range support - dance.html: only fall back to muted autoplay on a real NotAllowedError, not any play() rejection (e.g. AbortError from a mid-switch load); auto-skip to the next clip on a video load error instead of freezing; drop the now-playing garment-prompt text under the video - dance-channel.test.js: mock H3 server no longer conflates the new cache warm-up request with job-status polling Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AHPGtozYFzo39AX2CdV5ZY
yibo
1 parent 9a84fd7b
Showing 4 changed files with 152 additions and 46 deletions
.gitignore
dance-channel.test.js
dance.html
server.js
@@ -19,3 +19,8 @@ uploads/
 # local raw asset library (persona/clothes/musicvideo/withclothes source
 # material, ~11GB) — way too large for git, lives on disk only
 H3assest/
+
+# server.js's disk cache of H3-console-proxied dance clip bytes
+# (ensureVideoCached) — fully rebuildable from the console on demand, not
+# source
+video-cache/
@@ -62,7 +62,16 @@ function startMockH3() {
           res.end(JSON.stringify({ id }));
           return;
         }
-        const pollMatch = req.method === "GET" && req.url.match(/^\/v1\/videos\/(.+)$/);
+        // /lib/video/:id's cache-warming (ensureVideoCached, server.js) hits
+        // this same mock's GET /v1/videos/:id/file — must not match the
+        // status-poll regex below, or its background requests get counted
+        // as extra "job polls" and trip the dedupe test's job-count assert.
+        if (req.method === "GET" && /^\/v1\/videos\/[^/]+\/file$/.test(req.url)) {
+          res.writeHead(200, { "Content-Type": "video/mp4" });
+          res.end("fake-mp4-bytes");
+          return;
+        }
+        const pollMatch = req.method === "GET" && req.url.match(/^\/v1\/videos\/([^/]+)$/);
         if (pollMatch) {
           const id = pollMatch[1];
           const seen = (videoPollCounts.get(id) || 0) + 1;
@@ -47,7 +47,6 @@
         <div class="now-playing-box" id="nowPlayingBox" hidden>
           <span class="np-nick" id="nowPlayingNick"></span>
           <span class="np-time" id="nowPlayingTime"></span>
-          <div class="np-text" id="nowPlayingText">加载中…</div>
           <div><button class="like-btn" id="likeBtn" hidden>❤️ <span id="likeCount">0</span></button></div>
         </div>
         <video id="player" autoplay playsinline></video>
@@ -142,7 +141,6 @@ const roomTitle = document.getElementById(&quot;roomTitle&quot;);
 const nowPlayingBox = document.getElementById("nowPlayingBox");
 const nowPlayingNick = document.getElementById("nowPlayingNick");
 const nowPlayingTime = document.getElementById("nowPlayingTime");
-const nowPlayingText = document.getElementById("nowPlayingText");
 const likeBtn = document.getElementById("likeBtn");
 const likeCount = document.getElementById("likeCount");
 const watchingCount = document.getElementById("watchingCount");
@@ -393,7 +391,14 @@ muteBtn.addEventListener(&quot;click&quot;, () =&gt; {
 // 有声自动播放，unmuted play() 被拒绝就退回静音自动播放，再靠下面的点击进入
 // 蒙版拿到那次手势，切回有声。
 function tryPlay() {
-  player.play().catch(() => {
+  player.play().catch((err) => {
+    // Only fall back to muted autoplay for an actual autoplay-policy
+    // rejection. tryPlay() re-runs on every clip switch (every ~10s), and a
+    // switch mid-load commonly throws AbortError ("interrupted by a new
+    // load request") — treating that the same as a policy block used to
+    // silently flip sound back off even after the viewer had explicitly
+    // unmuted via the splash click or 🔈 button.
+    if (err && err.name !== "NotAllowedError") return;
     player.muted = true;
     muteBtn.textContent = "🔇 静音";
     player.play().catch(() => {});
@@ -404,8 +409,14 @@ splash.addEventListener(&quot;click&quot;, () =&gt; {
   splash.remove();
   const desktop = matchMedia("(min-width: 769px)").matches;
   player.muted = !desktop; // 手机进入后仍保持静音，同 live.html 的理由
-  player.play().catch(() => {
-    player.muted = true;
+  player.play().catch((err) => {
+    // Same guard as tryPlay(): only a genuine autoplay-policy rejection
+    // should force muted — this click IS the user gesture, so a rejection
+    // here is almost always something else (e.g. the clip's src still
+    // mid-switch from a just-arrived pollState) and shouldn't silently
+    // override the sound-on choice this click just made.
+    if (!err || err.name === "NotAllowedError") player.muted = true;
+    muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
   });
   muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
 });
@@ -719,13 +730,12 @@ async function voteQueueItem(id, btn) {
 }
  
 // ---- 播放器：跟 live.html 一样，服务端 endAt 是权威时钟，轮询只是纠偏 ----
-function setNowPlaying(nick, time, text, clip) {
+function setNowPlaying(nick, time, clip) {
   nowPlayingBox.hidden = false;
   nowPlayingNick.hidden = !nick;
   nowPlayingNick.textContent = nick || "";
   nowPlayingTime.hidden = !time;
   nowPlayingTime.textContent = time || "";
-  nowPlayingText.textContent = text;
   likeBtn.hidden = !clip;
   if (clip) {
     likeCount.textContent = clip.likes || 0;
@@ -736,6 +746,16 @@ function setNowPlaying(nick, time, text, clip) {
   }
 }
  
+// A clip whose /lib/video request errors out (e.g. a transient 401/502 from
+// the upstream H3 console) would otherwise just sit there frozen until the
+// server-clock advanceTimer eventually fires — skip ahead immediately
+// instead of leaving the room looking dead.
+player.addEventListener("error", () => {
+  if (player.currentSrc && currentClipId && player.currentSrc.endsWith(`/lib/video/${currentClipId}`) && upNextCache.length) {
+    switchToClip(upNextCache[0], 0, upNextCache[0].requestedBy);
+  }
+});
+
 function switchToClip(clip, offsetSec, requestedBy) {
   currentClipId = clip.id;
   player.src = `/lib/video/${clip.id}`;
@@ -749,7 +769,7 @@ function switchToClip(clip, offsetSec, requestedBy) {
     );
   }
   tryPlay();
-  setNowPlaying(requestedBy, fmtClock(Date.now()), clip.prompt, clip);
+  setNowPlaying(requestedBy, fmtClock(Date.now()), clip);
 }
  
 async function pollState() {
@@ -781,8 +801,7 @@ async function pollState() {
         advanceTimer = setTimeout(() => switchToClip(upNextCache[0], 0, upNextCache[0].requestedBy), Math.max(0, msUntilEnd));
       }
     } else if (!currentClipId) {
-      nowPlayingText.textContent = "还没有可播放的内容，去右边选一件衣服开播吧";
-      nowPlayingBox.hidden = false;
+      setNowPlaying("还没有可播放的内容，去右边选一件衣服开播吧", null, null);
     }
   } catch {
     // transient — next poll retries
@@ -930,6 +930,93 @@ function h3ConsoleFetch(pathAndQuery, options) {
   });
 }
  
+// Local disk cache for H3-console-proxied clip video bytes. The shared H3
+// cluster is slow enough at serving already-finished files (confirmed
+// 2026-09: ~5s to first byte, ~50s total for a 1.7MB/10s clip, ~35KB/s) that
+// a dance room's <video> tag can never finish loading one clip before the
+// server-clock-driven playlist already advances to the next — the room
+// looks stuck/muted/choppy because nothing ever actually finishes buffering.
+// Caching once and reusing forever sidesteps that; /api/dance/live/state
+// warms this ahead of time for the current + next-up clip (see below).
+const VIDEO_CACHE_DIR = path.join(__dirname, "video-cache");
+fs.mkdirSync(VIDEO_CACHE_DIR, { recursive: true });
+const videoCacheInFlight = new Map(); // clipId -> in-flight Promise, dedupes concurrent fetches of the same clip
+
+function cachedVideoPath(id) {
+  return path.join(VIDEO_CACHE_DIR, `${id}.mp4`);
+}
+
+function ensureVideoCached(id) {
+  if (fs.existsSync(cachedVideoPath(id))) return Promise.resolve();
+  if (videoCacheInFlight.has(id)) return videoCacheInFlight.get(id);
+  if (!H3_CONSOLE_URL) return Promise.reject(new Error("H3_CONSOLE_BASE not configured"));
+  const tmpPath = `${cachedVideoPath(id)}.tmp-${crypto.randomUUID()}`;
+  const promise = new Promise((resolve, reject) => {
+    const proxyReq = http.request(
+      {
+        hostname: H3_CONSOLE_URL.hostname,
+        port: H3_CONSOLE_URL.port || 80,
+        path: `${H3_CONSOLE_URL.pathname}/v1/videos/${id}/file`,
+        method: "GET",
+        headers: { Authorization: `Bearer ${H3_CONSOLE_TOKEN}` },
+      },
+      (proxyRes) => {
+        if (proxyRes.statusCode !== 200) {
+          proxyRes.resume();
+          reject(new Error(`H3 console returned HTTP ${proxyRes.statusCode} for video ${id}`));
+          return;
+        }
+        const out = fs.createWriteStream(tmpPath);
+        proxyRes.pipe(out);
+        out.on("finish", () => fs.rename(tmpPath, cachedVideoPath(id), (err) => (err ? reject(err) : resolve())));
+        out.on("error", reject);
+      }
+    );
+    proxyReq.on("error", reject);
+    proxyReq.end();
+  }).finally(() => {
+    videoCacheInFlight.delete(id);
+    fs.rm(tmpPath, { force: true }, () => {});
+  });
+  videoCacheInFlight.set(id, promise);
+  return promise;
+}
+
+// Shared by /lib/video/:id (cache hit) and /uploads/:path — Range support is
+// required, not optional: <video> elements probe duration/seekability with a
+// Range request, and without a 206 reply (plus Content-Length) Chrome's
+// media pipeline can get stuck at readyState 0 forever.
+function serveFileWithRange(req, res, absPath, contentType) {
+  fs.stat(absPath, (err, stat) => {
+    if (err || !stat.isFile()) {
+      res.writeHead(404);
+      res.end("Not found");
+      return;
+    }
+    const range = req.headers.range;
+    const match = range && /^bytes=(\d*)-(\d*)$/.exec(range);
+    if (match) {
+      const start = match[1] ? parseInt(match[1], 10) : 0;
+      const end = match[2] ? parseInt(match[2], 10) : stat.size - 1;
+      if (start > end || end >= stat.size) {
+        res.writeHead(416, { "Content-Range": `bytes */${stat.size}` });
+        res.end();
+        return;
+      }
+      res.writeHead(206, {
+        "Content-Type": contentType,
+        "Content-Length": end - start + 1,
+        "Content-Range": `bytes ${start}-${end}/${stat.size}`,
+        "Accept-Ranges": "bytes",
+      });
+      fs.createReadStream(absPath, { start, end }).pipe(res);
+      return;
+    }
+    res.writeHead(200, { "Content-Type": contentType, "Content-Length": stat.size, "Accept-Ranges": "bytes" });
+    fs.createReadStream(absPath).pipe(res);
+  });
+}
+
 // timeoutMs default matches the original text-only prompt-optimize use —
 // the QC caller (multi-image, much bigger payload) passes a longer one.
 function glmChat(messages, timeoutMs = 15000) {
@@ -2879,13 +2966,22 @@ http
       const cur = room.schedule[idx];
       const lib = getLibrary();
       const joinClip = (videoId) => lib.find((c) => c.id === videoId) || null;
+      const currentClip = cur ? joinClip(cur.videoId) : null;
+      const upNextList = room.schedule.slice(idx + 1, idx + 4).map((s) => ({ ...(joinClip(s.videoId) || {}), requestedBy: s.requestedBy || null }));
+      // Warm the video cache ahead of playback: by the time a clip becomes
+      // "current" it should already be sitting on disk, not being fetched
+      // for the first time against H3's slow file endpoint (see
+      // ensureVideoCached's comment).
+      for (const c of [currentClip, upNextList[0]]) {
+        if (c && c.source === "h3console" && !c.videoUrl) ensureVideoCached(c.id).catch(() => {});
+      }
       res.writeHead(200, { "Content-Type": "application/json" });
       res.end(
         JSON.stringify({
           now,
           watching: getRoomViewers(characterId).size,
-          current: cur ? { clip: joinClip(cur.videoId), startAt: cur.startAt, endAt: cur.endAt, requestedBy: cur.requestedBy || null } : null,
-          upNext: room.schedule.slice(idx + 1, idx + 4).map((s) => ({ ...(joinClip(s.videoId) || {}), requestedBy: s.requestedBy || null })),
+          current: cur ? { clip: currentClip, startAt: cur.startAt, endAt: cur.endAt, requestedBy: cur.requestedBy || null } : null,
+          upNext: upNextList,
           queue: room.queue
             .filter((q) => ["generating", "failed"].includes(q.status))
             .slice()
@@ -3821,39 +3917,7 @@ http
         res.end("Forbidden");
         return;
       }
-      // Range support is required here, not optional: <video> elements probe
-      // duration/seekability with a Range request, and without a 206 reply
-      // (plus Content-Length) Chrome's media pipeline can get stuck at
-      // readyState 0 forever — the video never becomes playable.
-      fs.stat(abs, (err, stat) => {
-        if (err || !stat.isFile()) {
-          res.writeHead(404);
-          res.end("Not found");
-          return;
-        }
-        const contentType = MIME[path.extname(abs)] || "application/octet-stream";
-        const range = req.headers.range;
-        const match = range && /^bytes=(\d*)-(\d*)$/.exec(range);
-        if (match) {
-          const start = match[1] ? parseInt(match[1], 10) : 0;
-          const end = match[2] ? parseInt(match[2], 10) : stat.size - 1;
-          if (start > end || end >= stat.size) {
-            res.writeHead(416, { "Content-Range": `bytes */${stat.size}` });
-            res.end();
-            return;
-          }
-          res.writeHead(206, {
-            "Content-Type": contentType,
-            "Content-Length": end - start + 1,
-            "Content-Range": `bytes ${start}-${end}/${stat.size}`,
-            "Accept-Ranges": "bytes",
-          });
-          fs.createReadStream(abs, { start, end }).pipe(res);
-          return;
-        }
-        res.writeHead(200, { "Content-Type": contentType, "Content-Length": stat.size, "Accept-Ranges": "bytes" });
-        fs.createReadStream(abs).pipe(res);
-      });
+      serveFileWithRange(req, res, abs, MIME[path.extname(abs)] || "application/octet-stream");
       return;
     }
  
@@ -3865,6 +3929,15 @@ http
         res.end();
         return;
       }
+      if (fs.existsSync(cachedVideoPath(id))) {
+        serveFileWithRange(req, res, cachedVideoPath(id), "video/mp4");
+        return;
+      }
+      // Cache miss — warm it in the background for next time (dedup'd by
+      // ensureVideoCached itself) without making this request wait for the
+      // whole file; fall through to the direct (slow) proxy below so this
+      // viewer still gets the clip, just at H3's own pace.
+      ensureVideoCached(id).catch(() => {});
       if (!H3_CONSOLE_URL) {
         res.writeHead(500, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ error: "H3_CONSOLE_BASE not configured" }));