@bendyline/squisq-react 2.4.5 → 2.4.7

package/NOTICE.md

@@ -6,12 +6,13 @@ Third-party components remain under their respective license terms.
 
 ## Runtime, peer, and bundled dependencies
 
-| Package            | Version              | License | Repository                            |
-| ------------------ | -------------------- | ------- | ------------------------------------- |
-| mermaid            | 11.16.0              | MIT     | https://github.com/mermaid-js/mermaid |
-| preact _(bundled)_ | 10.29.0              | MIT     | https://github.com/preactjs/preact    |
-| react _(peer)_     | ^18.0.0 \|\| ^19.0.0 | MIT     | https://github.com/facebook/react     |
-| react-dom _(peer)_ | ^18.0.0 \|\| ^19.0.0 | MIT     | https://github.com/facebook/react     |
+| Package                       | Version              | License                       | Repository                                  |
+| ----------------------------- | -------------------- | ----------------------------- | ------------------------------------------- |
+| @fortawesome/fontawesome-free | 7.2.0                | CC-BY-4.0 AND OFL-1.1 AND MIT | https://github.com/FortAwesome/Font-Awesome |
+| mermaid                       | 11.16.0              | MIT                           | https://github.com/mermaid-js/mermaid       |
+| preact _(bundled)_            | 10.29.0              | MIT                           | https://github.com/preactjs/preact          |
+| react _(peer)_                | ^18.0.0 \|\| ^19.0.0 | MIT                           | https://github.com/facebook/react           |
+| react-dom _(peer)_            | ^18.0.0 \|\| ^19.0.0 | MIT                           | https://github.com/facebook/react           |
 
 Mermaid is Copyright (c) 2014-2022 Knut Sveidqvist and is distributed under
 the MIT License. Preact is used by the standalone browser bundles. Exact

package/README.md

@@ -91,9 +91,10 @@ useDocPlayback(doc, currentTime, { viewport, theme, onSeek });
 
 ## Standalone Player
 
-A self-contained global build is available for non-React environments. It
-exposes a `SquisqPlayer` global with `mount`, `getHandle`, `unmount`, and
-`version`. `mount` returns an instance handle.
+A global build is available for non-React environments. It exposes a
+`SquisqPlayer` global with `mount`, `getHandle`, `unmount`, and `version`.
+`mount` returns an instance handle. Load the package stylesheet alongside the
+raw global build so authored Font Awesome icons can use the shared webfonts.
 
 The default build is the light player and omits Mermaid's multi-megabyte parser
 and layout engines. Documents that contain Mermaid fences should use the full
@@ -108,6 +109,7 @@ top-level `window.seekTo` / `window.getDuration` properties.
 Interactive mount:
 
 ```html
+<link rel="stylesheet" href="https://unpkg.com/@bendyline/squisq-react/dist/styles/index.css" />
 <script src="https://unpkg.com/@bendyline/squisq-react/dist/squisq-player.global.js"></script>
 <div id="player"></div>
 <script>
@@ -138,12 +140,13 @@ content. Embedded video, timed media, captions, audio, and document timing stay
 active; this makes the option suitable for compact MP4 and animated-GIF export.
 
 For build-time embedding, `@bendyline/squisq-react/standalone-source` exports
-the same bundle as a string constant (`PLAYER_BUNDLE`) — used by
-`@bendyline/squisq-formats` and the CLI to produce single-file HTML exports.
+the player as a self-contained string constant (`PLAYER_BUNDLE`) with the
+shared icon styles composed once. It is used by `@bendyline/squisq-formats`
+and the CLI to produce single-file HTML and rendered video exports.
 
 ## Styles
 
-Import the animation CSS for block transitions:
+Import the package CSS for block transitions and Font Awesome inline icons:
 
 ```ts
 import '@bendyline/squisq-react/styles';

package/dist/{chunk-EJMUO6VX.js → chunk-3HYSWEKG.js}

@@ -9,14 +9,14 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-TI5X7SBC.js";
+} from "./chunk-MKWVJYUS.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-D7KN4CRG.js";
+} from "./chunk-VMPQEUJH.js";
 import {
   useMediaUrl
 } from "./chunk-LR3AIGDD.js";

package/dist/{chunk-NANF7REM.js → chunk-DJRYQQXB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-D7KN4CRG.js";
+} from "./chunk-VMPQEUJH.js";
 
 // src/jsonView/useJsonViewTokens.ts
 import { useMemo } from "react";

package/dist/{chunk-A4VLH2US.js → chunk-KF4DTT46.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-EJMUO6VX.js";
+} from "./chunk-3HYSWEKG.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -165,7 +165,7 @@ function MediaClipElement({
       return;
     }
     const target = Math.max(0, clip.sourceIn + (currentTime - clip.absoluteStart));
-    if (renderMode || !isPlaying || Math.abs(el.currentTime - target) > DRIFT) {
+    if (el.dataset.captureSequential !== "true" && (renderMode || !isPlaying || Math.abs(el.currentTime - target) > DRIFT)) {
       try {
         el.currentTime = target;
       } catch {
@@ -175,7 +175,7 @@ function MediaClipElement({
       const p = el.play();
       if (p) p.catch(() => {
       });
-    } else {
+    } else if (el.dataset.captureSequential !== "true") {
       el.pause();
     }
   }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
@@ -1542,6 +1542,8 @@ function buildSegmentTitleMap(doc) {
 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 formatMediaTime(time) {
   return Number.isFinite(time) ? `${time.toFixed(3)}s` : String(time);
 }
@@ -1565,10 +1567,8 @@ function isVisiblyPresented(video) {
   }
   return true;
 }
-function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
+function seekVideoByAssignment(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
   video.pause();
-  const alreadyReady = !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && isAtReachableMediaTime(video, targetTime);
-  if (alreadyReady) return Promise.resolve();
   return new Promise((resolve, reject) => {
     let settled = false;
     let videoFrameRequest = null;
@@ -1630,6 +1630,125 @@ function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIM
     }
   });
 }
+function advanceSequentialCaptureVideo(video, targetTime, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let timeout = null;
+    const ownerDocument = video.ownerDocument;
+    const isInactive = () => ownerDocument.visibilityState !== "visible";
+    const clearWatchdog = () => {
+      if (timeout === null) return;
+      clearTimeout(timeout);
+      timeout = null;
+    };
+    const cleanup = () => {
+      clearWatchdog();
+      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 armWatchdog = () => {
+      clearWatchdog();
+      if (settled || isInactive()) return;
+      timeout = setTimeout(fail, timeoutMs);
+    };
+    const pauseWhileInactive = () => {
+      video.pause();
+      clearWatchdog();
+    };
+    const resumeWhenActive = () => {
+      if (settled || isInactive()) return;
+      check();
+      if (settled) return;
+      startPlayback();
+      armWatchdog();
+    };
+    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/DocPlayer.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";

package/dist/{chunk-TI5X7SBC.js → chunk-MKWVJYUS.js}

@@ -1296,7 +1296,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 (Math.abs(video.currentTime - targetTime) > VIDEO_SYNC_DRIFT_SECONDS) {
+    if (video.dataset.captureSequential !== "true" && Math.abs(video.currentTime - targetTime) > VIDEO_SYNC_DRIFT_SECONDS) {
       video.currentTime = targetTime;
     }
     if (gated) {
@@ -1313,7 +1313,7 @@ function VideoLayer({
         playPromise.catch(() => {
         });
       }
-    } else {
+    } else if (video.dataset.captureSequential !== "true") {
       video.pause();
     }
   }, [isPlaying, gated, blockTime, startAt, src, content.clipStart, content.clipEnd]);

package/dist/{chunk-D7KN4CRG.js → chunk-VMPQEUJH.js}

@@ -103,6 +103,16 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         return /* @__PURE__ */ jsx3("br", {}, key);
       case "inlineMath":
         return /* @__PURE__ */ jsx3("code", { className: "squisq-md-inline-math", children: node.value }, key);
+      case "inlineIcon":
+        return /* @__PURE__ */ jsx3(
+          "i",
+          {
+            className: `fa-${node.family} fa-${node.name}`,
+            "data-icon": node.token,
+            "aria-hidden": "true"
+          },
+          key
+        );
       case "htmlInline":
         if (ctx.htmlPolicy === "strip") return null;
         return /* @__PURE__ */ jsx3("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);

package/dist/index.d.ts

@@ -17,8 +17,9 @@ import '@bendyline/squisq/jsonForm';
  * Standalone Entry Point — IIFE bundle for self-contained HTML rendering.
  *
  * This file is the entry point for the standalone `squisq-player.iife.js` bundle.
- * It bundles Preact (via preact/compat), squisq core, and all rendering components
- * into a single self-contained script that can be loaded in any HTML page.
+ * It bundles Preact (via preact/compat), squisq core, rendering components, and
+ * animation CSS. Raw-script consumers load the package stylesheet for shared
+ * icon webfonts; standalone-source and the CLI compose those styles once.
  *
  * The bundle exposes a global `SquisqPlayer` object with methods to mount
  * interactive or static document views into any DOM element.

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-A4VLH2US.js";
+} from "./chunk-KF4DTT46.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -20,7 +20,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-EJMUO6VX.js";
+} from "./chunk-3HYSWEKG.js";
 import {
   ImageLayer,
   MapLayer,
@@ -33,7 +33,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-TI5X7SBC.js";
+} from "./chunk-MKWVJYUS.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";
@@ -45,7 +45,7 @@ import {
 } from "./chunk-BOZJ655L.js";
 import {
   JsonView
-} from "./chunk-NANF7REM.js";
+} from "./chunk-DJRYQQXB.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -53,7 +53,7 @@ import {
   InlineAudioPlayer,
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-D7KN4CRG.js";
+} from "./chunk-VMPQEUJH.js";
 import {
   MermaidDiagram
 } from "./chunk-WLUZTUNZ.js";

package/dist/json-view/index.js

@@ -1,8 +1,8 @@
 import {
   JsonView
-} from "../chunk-NANF7REM.js";
+} from "../chunk-DJRYQQXB.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-D7KN4CRG.js";
+import "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/layers/index.js

@@ -8,7 +8,7 @@ import {
   TextLayer,
   TreeLayer,
   VideoLayer
-} from "../chunk-TI5X7SBC.js";
+} from "../chunk-MKWVJYUS.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/markdown/index.js

@@ -1,6 +1,6 @@
 import {
   MarkdownRenderer
-} from "../chunk-D7KN4CRG.js";
+} from "../chunk-VMPQEUJH.js";
 import {
   MermaidDiagram
 } from "../chunk-WLUZTUNZ.js";

package/dist/page/index.js

@@ -4,10 +4,10 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-EJMUO6VX.js";
-import "../chunk-TI5X7SBC.js";
+} from "../chunk-3HYSWEKG.js";
+import "../chunk-MKWVJYUS.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-D7KN4CRG.js";
+import "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/player/index.js

@@ -10,17 +10,17 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-A4VLH2US.js";
+} from "../chunk-KF4DTT46.js";
 import {
   BlockRenderer
-} from "../chunk-EJMUO6VX.js";
-import "../chunk-TI5X7SBC.js";
+} from "../chunk-3HYSWEKG.js";
+import "../chunk-MKWVJYUS.js";
 import "../chunk-BOZJ655L.js";
 import "../chunk-TT6ENR6T.js";
 import {
   InlineAudioPlayer,
   InlineVideoPlayer
-} from "../chunk-D7KN4CRG.js";
+} from "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {