beauticode-dsh 1.0.19 → 1.0.20

package/client.js

@@ -19,6 +19,7 @@
   const VIDEO_PROBE_TIMEOUT_MS = 2_000;
   const DSH_STRUCTURE_TIMEOUT_MS = CLIENT_APPLY_DEADLINE_MS;
   const FRAME_FALLBACK_MS = 120;
+  const VIDEO_FIRST_FRAME_PROGRESS_SEC = 0.03;
   const VIDEO_STABLE_FRAMES = 3;
   const VIDEO_STABLE_PROGRESS_SEC = 0.18;
   const CROSSFADE_MS = 180;
@@ -82,8 +83,11 @@ html[data-bc-fish="true"] #beauticode-bg-stage::after{background:transparent!imp
 #beauticode-bg-stage[data-bc-transitioning="true"] .beauticode-media-slot[data-bc-role="current"]{opacity:0}
 #beauticode-bg-stage[data-bc-transitioning="true"] .beauticode-media-slot[data-bc-role="candidate"]{opacity:1}
 #beauticode-bg-stage .beauticode-media-slot img,#beauticode-bg-stage .beauticode-media-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity 120ms ease}
-#beauticode-bg-stage .beauticode-media-slot img{z-index:0;opacity:1}
-#beauticode-bg-stage .beauticode-media-slot video{z-index:1;opacity:.001}
+#beauticode-bg-stage .beauticode-media-slot img{z-index:2;opacity:1}
+/* Keep cold candidate video paintable. Chromium may defer decoding media that
+   is nearly transparent, which deadlocks the first-frame gate. The poster
+   covers it until data-bc-video-ready is committed. */
+#beauticode-bg-stage .beauticode-media-slot video{z-index:1;opacity:1}
 #beauticode-bg-stage .beauticode-media-slot[data-bc-video-ready="true"] img{opacity:0}
 #beauticode-bg-stage .beauticode-media-slot[data-bc-video-ready="true"] video{opacity:1}
 @media (prefers-reduced-motion:reduce){#beauticode-bg-stage .beauticode-media-slot,#beauticode-bg-stage .beauticode-media-slot img,#beauticode-bg-stage .beauticode-media-slot video{transition:none!important}}
@@ -641,6 +645,89 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
     });
   }
 
+  function waitForPresentedFrame(video, signal, timeoutMs) {
+    return new Promise((resolve, reject) => {
+      const startedAt = performance.now();
+      const initialTime = Number.isFinite(video.currentTime) ? video.currentTime : 0;
+      let frameSeen = false;
+      let playingSeen =
+        !video.paused && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA;
+      let settled = false;
+      let frameRequest = null;
+      const hasFrameCallback = typeof video.requestVideoFrameCallback === "function";
+
+      const cleanup = () => {
+        clearInterval(timer);
+        video.removeEventListener("playing", onPlaying);
+        video.removeEventListener("timeupdate", check);
+        video.removeEventListener("loadeddata", check);
+        video.removeEventListener("canplay", check);
+        video.removeEventListener("error", failed);
+        video.removeEventListener("abort", aborted);
+        signal?.removeEventListener?.("abort", aborted);
+        if (frameRequest != null && typeof video.cancelVideoFrameCallback === "function") {
+          video.cancelVideoFrameCallback(frameRequest);
+        }
+      };
+      const finish = (error) => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        if (error) reject(error);
+        else resolve();
+      };
+      const failed = () => {
+        finish(new Error(describeVideoState(video, "视频解码器报告失败")));
+      };
+      const aborted = () => {
+        finish(signal?.aborted ? abortError() : new Error(describeVideoState(video, "视频播放已中止")));
+      };
+      const check = () => {
+        if (settled) return;
+        if (video.error) {
+          failed();
+          return;
+        }
+        if (!video.paused && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          playingSeen = true;
+        }
+        const current = Number.isFinite(video.currentTime) ? video.currentTime : initialTime;
+        const progressed = current >= initialTime + VIDEO_FIRST_FRAME_PROGRESS_SEC;
+        if (
+          video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA &&
+          !video.paused &&
+          playingSeen &&
+          (frameSeen || progressed)
+        ) {
+          finish();
+          return;
+        }
+        if (performance.now() - startedAt >= timeoutMs) {
+          finish(new Error(describeVideoState(video, "视频未在首帧窗口内完成呈现")));
+        }
+      };
+      const onPlaying = () => {
+        playingSeen = true;
+        check();
+      };
+      const onFrame = () => {
+        frameSeen = true;
+        check();
+      };
+      const timer = setInterval(check, 80);
+      video.addEventListener("playing", onPlaying);
+      video.addEventListener("timeupdate", check);
+      video.addEventListener("loadeddata", check);
+      video.addEventListener("canplay", check);
+      video.addEventListener("error", failed, { once: true });
+      video.addEventListener("abort", aborted, { once: true });
+      signal?.addEventListener?.("abort", aborted, { once: true });
+      if (hasFrameCallback) frameRequest = video.requestVideoFrameCallback(onFrame);
+      if (signal?.aborted) aborted();
+      check();
+    });
+  }
+
   function waitForStablePlayback(video, signal, timeoutMs) {
     return new Promise((resolve, reject) => {
       const startedAt = performance.now();
@@ -899,8 +986,8 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
     if (!slot || slot !== mountedCurrentSlot() || slot.dataset.bcMedia !== payload.media) {
       return false;
     }
-    if (slot.dataset.bcImageUrl !== payload.imageUrl) return false;
     if (payload.media !== "video") {
+      if (slot.dataset.bcImageUrl !== payload.imageUrl) return false;
       const image = slot.querySelector?.("img");
       return Boolean(
         image?.isConnected === true &&
@@ -921,11 +1008,10 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
     ) {
       return false;
     }
-    const requestedStartAt = Number(payload.startAt);
-    const normalizedStartAt =
-      Number.isFinite(requestedStartAt) && requestedStartAt >= 0 ? requestedStartAt : 0;
-    const appliedStartAt = Number(slot.dataset.bcStartAt);
-    return Number.isFinite(appliedStartAt) && Math.abs(appliedStartAt - normalizedStartAt) < 0.25;
+    // A local re-import can keep the exact same video handle while producing a
+    // new poster token and resetting startAt. Reuse the live decoder; the
+    // caller updates the poster metadata and seeks in place when needed.
+    return true;
   }
 
   function updateCommittedDom(payload) {
@@ -1115,7 +1201,23 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
     let reusable = slotMatchesPayload(currentSlot, payload);
     if (reusable && payload.media === "video") {
       try {
-        await waitForStablePlayback(activeVideo(), signal, Math.min(750, remaining()));
+        const reusableVideo = activeVideo();
+        const requestedStartAt = Number(payload.startAt);
+        const normalizedStartAt =
+          Number.isFinite(requestedStartAt) && requestedStartAt >= 0 ? requestedStartAt : 0;
+        const appliedStartAt = Number(currentSlot.dataset.bcStartAt);
+        if (
+          !Number.isFinite(appliedStartAt) ||
+          Math.abs(appliedStartAt - normalizedStartAt) >= 0.25
+        ) {
+          const nextStartAt = seekVideo(reusableVideo, normalizedStartAt);
+          currentSlot.dataset.bcStartAt = String(nextStartAt);
+          await waitForSeek(reusableVideo, signal, remaining());
+          await waitForVideo(reusableVideo, signal, remaining());
+          await waitForPresentedFrame(reusableVideo, signal, remaining());
+        } else {
+          await waitForStablePlayback(reusableVideo, signal, Math.min(750, remaining()));
+        }
       } catch (error) {
         if (isAbortError(error) || signal?.aborted) throw error;
         reusable = false;
@@ -1124,6 +1226,8 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
     if (reusable) {
       committedPayload = payload;
       currentSlot.dataset.bcGeneration = String(payload.generation);
+      currentSlot.dataset.bcImageUrl = payload.imageUrl;
+      if (payload.videoUrl) currentSlot.dataset.bcVideoUrl = payload.videoUrl;
       updateCommittedDom(payload);
       syncGallery(payload);
       await acknowledgeRender(payload, true, true);
@@ -1150,12 +1254,6 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
       if (payload.media !== "video" || typeof payload.videoUrl !== "string") {
         throw new Error("视频载荷无效");
       }
-      await probeVideoSource(
-        payload.videoUrl,
-        signal,
-        Math.min(VIDEO_PROBE_TIMEOUT_MS, remaining()),
-      );
-      throwIfAborted(signal);
       const video = document.createElement("video");
       video.autoplay = true;
       video.loop = true;
@@ -1172,11 +1270,20 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
       candidateVideo = video;
       video.src = payload.videoUrl;
       video.load();
+      // Start the real media request before the diagnostic Range probe. During
+      // a cold Chromium/decoder start, serial probing used part of the same
+      // eight-second budget without advancing the frame that users can see.
+      const sourceProbe = probeVideoSource(
+        payload.videoUrl,
+        signal,
+        Math.min(VIDEO_PROBE_TIMEOUT_MS, remaining()),
+      );
       const imageReady = loadImage(candidate, payload.imageUrl, signal, remaining());
       // play() is deliberately started alongside media readiness. Chromium is
       // allowed to ignore preload=auto for hidden/background media; waiting for
       // canplay before play() creates a circular stall at readyState=0.
       await Promise.all([
+        sourceProbe,
         imageReady,
         waitForVideo(video, signal, remaining()),
         startCandidatePlayback(video, signal, remaining()),
@@ -1186,7 +1293,10 @@ html[data-bc-fish="true"] #root{opacity:0!important;visibility:hidden!important;
       candidate.dataset.bcStartAt = String(appliedStartAt);
       await waitForSeek(video, signal, remaining());
       await waitForVideo(video, signal, remaining());
-      await waitForStablePlayback(video, signal, remaining());
+      // Transaction success means one frame was actually presented. Longer
+      // three-frame stability remains useful for reusing an existing slot, but
+      // must not turn a healthy cold decoder into a false first-frame failure.
+      await waitForPresentedFrame(video, signal, remaining());
       throwIfAborted(signal);
       candidate.dataset.bcVideoReady = "true";
       await commitCandidate(payload, candidate, signal, remaining);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beauticode-dsh",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Cordis plugin: image/video backgrounds for DeepSeek Harness web.",
   "type": "module",
   "main": "./index.mjs",