@bendyline/squisq-react 2.11.6 → 2.11.8

package/dist/{chunk-5UGIE2QO.js → chunk-LDXH4FOY.js}

@@ -9,14 +9,14 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-XSOMFBH2.js";
+} from "./chunk-W6MKRWL6.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-ZY5N3JPM.js";
+} from "./chunk-6PUMLLJH.js";
 import {
   useMediaUrl
 } from "./chunk-LR3AIGDD.js";

package/dist/{chunk-7QA6EW6Y.js → chunk-SESRQ7XH.js}

@@ -1,6 +1,6 @@
 import {
   LinearDocView
-} from "./chunk-5UGIE2QO.js";
+} from "./chunk-LDXH4FOY.js";
 
 // src/PaginatedDocView.tsx
 import {

package/dist/{chunk-XSOMFBH2.js → chunk-W6MKRWL6.js}

@@ -1336,6 +1336,252 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
 
 // src/layers/VideoLayer.tsx
 import { useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// src/docPlayer/renderReadiness.ts
+var DEFAULT_VIDEO_FRAME_TIMEOUT_MS = 2e3;
+var VIDEO_FRAME_READINESS_POLL_MS = 16;
+var VIDEO_TIME_TOLERANCE_SECONDS = 0.01;
+var MAX_SEQUENTIAL_CAPTURE_STEP_SECONDS = 0.5;
+var SEQUENTIAL_CAPTURE_PLAYBACK_RATE = 1;
+function isCaptureDrivenVideo(video) {
+  return video.dataset.captureSequential === "true" || video.dataset.captureDecoded === "true";
+}
+function formatMediaTime(time) {
+  return Number.isFinite(time) ? `${time.toFixed(3)}s` : String(time);
+}
+function reachableMediaTime(video, targetTime) {
+  const duration = video.duration;
+  if (!Number.isFinite(duration)) return targetTime;
+  return Math.max(0, Math.min(targetTime, duration));
+}
+function isAtReachableMediaTime(video, targetTime) {
+  return Math.abs(video.currentTime - reachableMediaTime(video, targetTime)) <= VIDEO_TIME_TOLERANCE_SECONDS;
+}
+function isVisiblyPresented(video) {
+  if (!video.isConnected) return false;
+  const view = video.ownerDocument.defaultView;
+  if (!view) return false;
+  for (let element = video; element; element = element.parentElement) {
+    const style = view.getComputedStyle(element);
+    if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || Number.parseFloat(style.opacity || "1") <= 0) {
+      return false;
+    }
+  }
+  return true;
+}
+function createCaptureWatchdog(ownerDocument, timeoutMs, expire) {
+  let timeout = null;
+  const clear = () => {
+    if (timeout === null) return;
+    clearTimeout(timeout);
+    timeout = null;
+  };
+  return {
+    arm: () => {
+      clear();
+      if (ownerDocument.visibilityState !== "visible") return;
+      timeout = setTimeout(expire, timeoutMs);
+    },
+    clear
+  };
+}
+function seekVideoByAssignment(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
+  video.pause();
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let videoFrameRequest = null;
+    const ownerDocument = video.ownerDocument;
+    const isInactive = () => ownerDocument.visibilityState !== "visible";
+    const cleanup = () => {
+      watchdog.clear();
+      clearInterval(readinessPoll);
+      video.removeEventListener("seeked", handleMediaReady);
+      video.removeEventListener("loadeddata", handleMediaReady);
+      video.removeEventListener("canplay", handleMediaReady);
+      ownerDocument.removeEventListener("visibilitychange", handleVisibilityChange);
+      if (videoFrameRequest !== null && typeof video.cancelVideoFrameCallback === "function") {
+        video.cancelVideoFrameCallback(videoFrameRequest);
+      }
+    };
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve();
+    };
+    const fail = () => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      reject(
+        new Error(
+          `Video frame did not become ready at ${formatMediaTime(targetTime)} within ${timeoutMs}ms (currentTime=${formatMediaTime(video.currentTime)}, reachableTime=${formatMediaTime(reachableMediaTime(video, targetTime))}, duration=${formatMediaTime(video.duration)}, readyState=${video.readyState}, seeking=${String(video.seeking)}, visible=${String(isVisiblyPresented(video))}).`
+        )
+      );
+    };
+    const requestPresentedFrame = () => {
+      if (settled || video.seeking || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || !isAtReachableMediaTime(video, targetTime)) {
+        return;
+      }
+      if (typeof video.requestVideoFrameCallback !== "function" || !isVisiblyPresented(video)) {
+        finish();
+        return;
+      }
+      if (videoFrameRequest !== null) return;
+      videoFrameRequest = video.requestVideoFrameCallback(() => {
+        videoFrameRequest = null;
+        finish();
+      });
+    };
+    function handleMediaReady() {
+      requestPresentedFrame();
+    }
+    const watchdog = createCaptureWatchdog(ownerDocument, timeoutMs, fail);
+    const assignTargetTime = () => {
+      try {
+        video.currentTime = reachableMediaTime(video, targetTime);
+        queueMicrotask(requestPresentedFrame);
+        return true;
+      } catch (error) {
+        settled = true;
+        cleanup();
+        reject(error);
+        return false;
+      }
+    };
+    function handleVisibilityChange() {
+      if (settled) return;
+      if (isInactive()) {
+        watchdog.clear();
+        return;
+      }
+      requestPresentedFrame();
+      if (settled) return;
+      if (!video.seeking && !isAtReachableMediaTime(video, targetTime) && !assignTargetTime()) {
+        return;
+      }
+      watchdog.arm();
+    }
+    const readinessPoll = setInterval(requestPresentedFrame, VIDEO_FRAME_READINESS_POLL_MS);
+    video.addEventListener("seeked", handleMediaReady);
+    video.addEventListener("loadeddata", handleMediaReady);
+    video.addEventListener("canplay", handleMediaReady);
+    ownerDocument.addEventListener("visibilitychange", handleVisibilityChange);
+    watchdog.arm();
+    assignTargetTime();
+  });
+}
+function advanceSequentialCaptureVideo(video, targetTime, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const ownerDocument = video.ownerDocument;
+    const isInactive = () => ownerDocument.visibilityState !== "visible";
+    const cleanup = () => {
+      watchdog.clear();
+      clearInterval(readinessPoll);
+      video.removeEventListener("timeupdate", check);
+      video.removeEventListener("loadeddata", check);
+      video.removeEventListener("canplay", check);
+      video.removeEventListener("error", fail);
+      ownerDocument.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+    const finish = () => {
+      if (!settled) {
+        settled = true;
+        cleanup();
+        resolve();
+      }
+    };
+    const fallbackToSeek = () => {
+      if (settled) return;
+      settled = true;
+      video.pause();
+      cleanup();
+      void seekVideoByAssignment(video, targetTime, timeoutMs).then(resolve, reject);
+    };
+    const fail = () => {
+      if (settled) return;
+      settled = true;
+      video.pause();
+      cleanup();
+      reject(
+        new Error(
+          `Video frame did not advance to ${formatMediaTime(targetTime)} within ${timeoutMs}ms (currentTime=${formatMediaTime(video.currentTime)}, readyState=${video.readyState}).`
+        )
+      );
+    };
+    function check() {
+      if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.currentTime >= reachableMediaTime(video, targetTime)) {
+        video.pause();
+        finish();
+      }
+    }
+    const handlePlaybackFailure = () => {
+      if (settled || isInactive()) return;
+      fallbackToSeek();
+    };
+    const startPlayback = () => {
+      if (settled || isInactive()) return;
+      try {
+        video.playbackRate = SEQUENTIAL_CAPTURE_PLAYBACK_RATE;
+        if (video.paused) {
+          void video.play().catch(handlePlaybackFailure);
+        }
+      } catch {
+        handlePlaybackFailure();
+      }
+    };
+    const watchdog = createCaptureWatchdog(ownerDocument, timeoutMs, fail);
+    const pauseWhileInactive = () => {
+      video.pause();
+      watchdog.clear();
+    };
+    const resumeWhenActive = () => {
+      if (settled || isInactive()) return;
+      check();
+      if (settled) return;
+      startPlayback();
+      watchdog.arm();
+    };
+    function handleVisibilityChange() {
+      if (ownerDocument.visibilityState !== "visible") {
+        pauseWhileInactive();
+        return;
+      }
+      resumeWhenActive();
+    }
+    const readinessPoll = setInterval(check, VIDEO_FRAME_READINESS_POLL_MS);
+    video.addEventListener("timeupdate", check);
+    video.addEventListener("loadeddata", check);
+    video.addEventListener("canplay", check);
+    video.addEventListener("error", fail, { once: true });
+    ownerDocument.addEventListener("visibilitychange", handleVisibilityChange);
+    resumeWhenActive();
+  });
+}
+function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
+  if (video.readyState >= HTMLMediaElement.HAVE_METADATA && video.videoWidth <= 0 && video.videoHeight <= 0) {
+    video.pause();
+    return Promise.resolve();
+  }
+  const reachableTargetTime = reachableMediaTime(video, targetTime);
+  const step = reachableTargetTime - video.currentTime;
+  if (video.dataset.captureSequential === "true") {
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && step <= VIDEO_TIME_TOLERANCE_SECONDS) {
+      if (step < -VIDEO_TIME_TOLERANCE_SECONDS) video.pause();
+      return Promise.resolve();
+    }
+    if (step > 0 && step <= MAX_SEQUENTIAL_CAPTURE_STEP_SECONDS && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      return advanceSequentialCaptureVideo(video, targetTime, timeoutMs);
+    }
+  }
+  video.pause();
+  const alreadyReady = !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && isAtReachableMediaTime(video, targetTime);
+  if (alreadyReady) return Promise.resolve();
+  return seekVideoByAssignment(video, targetTime, timeoutMs);
+}
+
+// src/layers/VideoLayer.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 var VIDEO_SYNC_DRIFT_SECONDS = 0.2;
 function VideoLayer({
@@ -1389,7 +1635,7 @@ function VideoLayer({
     const video = videoRef.current;
     if (!video || !hasStartedRef.current) return;
     const targetTime = gated ? content.clipStart : Math.min(content.clipEnd, content.clipStart + Math.max(0, blockTime - startAt));
-    if (video.dataset.captureSequential !== "true" && Math.abs(video.currentTime - targetTime) > VIDEO_SYNC_DRIFT_SECONDS) {
+    if (!isCaptureDrivenVideo(video) && Math.abs(video.currentTime - targetTime) > VIDEO_SYNC_DRIFT_SECONDS) {
       video.currentTime = targetTime;
     }
     if (gated) {
@@ -1406,7 +1652,7 @@ function VideoLayer({
         playPromise.catch(() => {
         });
       }
-    } else if (video.dataset.captureSequential !== "true") {
+    } else if (!isCaptureDrivenVideo(video)) {
       video.pause();
     }
   }, [isPlaying, gated, blockTime, startAt, src, content.clipStart, content.clipEnd]);
@@ -1741,6 +1987,8 @@ function MermaidLayer({ layer, viewport, blockTime, theme }) {
 }
 
 export {
+  isCaptureDrivenVideo,
+  seekVideoToFrame,
   getAnimationStyle,
   getTransitionClass,
   ImageLayer,