@bendyline/squisq-react 2.4.1 → 2.4.3

package/dist/{chunk-EKD6JMJN.js → chunk-7YFNL63X.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-M2HEFJZP.js";
+} from "./chunk-EJMUO6VX.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -185,6 +185,7 @@ function MediaClipElement({
     src,
     preload: "auto",
     "data-clip-id": clip.id,
+    "data-active": active ? "true" : "false",
     "data-abs-start": clip.absoluteStart,
     "data-abs-end": clip.absoluteEnd,
     "data-source-in": clip.sourceIn
@@ -195,7 +196,6 @@ function MediaClipElement({
       {
         ...common,
         className: `doc-player__media-video${active ? " doc-player__media-video--active" : ""}`,
-        "data-active": active ? "true" : "false",
         "data-video-placement": clip.placement ?? "default",
         muted: renderMode || muted,
         playsInline: true,
@@ -1757,6 +1757,27 @@ function DocPlayerContent({
     () => resolveMediaSchedule(doc, { intrinsicDuration: (clip) => clipDurations.get(clip.src) }),
     [doc, clipDurations]
   );
+  const startActiveTimelineMedia = useCallback4(() => {
+    if (renderMode) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const activeMedia = root.querySelectorAll(
+      '.doc-player__block--active video[data-clip-start], [data-clip-id][data-active="true"]'
+    );
+    activeMedia.forEach((element) => {
+      const playPromise = element.play();
+      if (playPromise) playPromise.catch(() => {
+      });
+    });
+  }, [renderMode]);
+  const playWithTimelineMedia = useCallback4(() => {
+    startActiveTimelineMedia();
+    return play();
+  }, [play, startActiveTimelineMedia]);
+  const toggleWithTimelineMedia = useCallback4(() => {
+    if (!isPlaying) startActiveTimelineMedia();
+    return toggle();
+  }, [isPlaying, startActiveTimelineMedia, toggle]);
   const currentTimeRef = useRef5(currentTime);
   currentTimeRef.current = currentTime;
   const committedRenderTimeRef = useRef5(currentTime);
@@ -1803,13 +1824,13 @@ function DocPlayerContent({
       ))
         return;
       containerRef.current?.focus({ preventScroll: true });
-      toggle();
+      toggleWithTimelineMedia();
       const nextState = isPlaying ? "pause" : "play";
       setTapFeedback(nextState);
       clearTimeout(tapFeedbackTimer.current);
       tapFeedbackTimer.current = setTimeout(() => setTapFeedback(null), 600);
     },
-    [renderMode, toggle, isPlaying, isSlideshowMode, isLinearMode]
+    [renderMode, toggleWithTimelineMedia, isPlaying, isSlideshowMode, isLinearMode]
   );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
@@ -1932,9 +1953,9 @@ function DocPlayerContent({
   useEffect5(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
-      play();
+      playWithTimelineMedia();
     }
-  }, [isAudioReady, autoPlay, play]);
+  }, [isAudioReady, autoPlay, playWithTimelineMedia]);
   useEffect5(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
@@ -2173,14 +2194,21 @@ function DocPlayerContent({
   );
   const playbackActions = useMemo3(
     () => ({
-      toggle,
+      toggle: toggleWithTimelineMedia,
       restart,
       seekTo,
       setCaptionsEnabled,
       cycleCaptionMode,
       toggleFullscreen: onFullscreenToggle
     }),
-    [toggle, restart, seekTo, setCaptionsEnabled, cycleCaptionMode, onFullscreenToggle]
+    [
+      toggleWithTimelineMedia,
+      restart,
+      seekTo,
+      setCaptionsEnabled,
+      cycleCaptionMode,
+      onFullscreenToggle
+    ]
   );
   const slideNavActions = useMemo3(
     () => ({
@@ -2275,8 +2303,8 @@ function DocPlayerContent({
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
   useEffect5(() => {
-    onControlsReady?.({ play, pause, ...playbackActions });
-  }, [play, pause, playbackActions, onControlsReady]);
+    onControlsReady?.({ play: playWithTimelineMedia, pause, ...playbackActions });
+  }, [playWithTimelineMedia, pause, playbackActions, onControlsReady]);
   const getBlockTitle = useCallback4((block) => {
     const docBlock = block;
     if (isTemplateBlock2(docBlock)) {
@@ -2390,7 +2418,7 @@ function DocPlayerContent({
         switch (e.key) {
           case " ":
             e.preventDefault();
-            toggle();
+            toggleWithTimelineMedia();
             break;
           case "ArrowRight":
             e.preventDefault();
@@ -2403,7 +2431,14 @@ function DocPlayerContent({
         }
       }
     },
-    [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions, onFullscreenToggle]
+    [
+      isSlideshowMode,
+      isLinearMode,
+      toggleWithTimelineMedia,
+      seekTo,
+      slideNavActions,
+      onFullscreenToggle
+    ]
   );
   const handleKeyDown = useCallback4(
     (e) => handleKeyboardShortcut(e, false),
@@ -2498,6 +2533,7 @@ function DocPlayerContent({
               basePath,
               isEntering: false,
               viewport: activeViewport,
+              muted: renderMode || muted,
               animationsEnabled,
               theme: effectiveTheme
             }
@@ -2515,15 +2551,20 @@ function DocPlayerContent({
               isExiting: true,
               transition: currentBlock?.transition,
               viewport: activeViewport,
+              muted: renderMode || muted,
               animationsEnabled,
               theme: effectiveTheme
             }
           ) }, previousBlock.id),
-          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx7(
+          currentBlock && /* @__PURE__ */ jsx7(
             "div",
             {
               className: `doc-player__block doc-player__block--active${swipe.phase !== "idle" ? ` doc-player__block--${swipe.phase}` : ""}`,
-              style: swipe.phase !== "idle" ? { transform: `translateX(${swipe.offsetPx}px)` } : void 0,
+              "aria-hidden": showCoverBlock || void 0,
+              style: showCoverBlock || swipe.phase !== "idle" ? {
+                ...swipe.phase !== "idle" ? { transform: `translateX(${swipe.offsetPx}px)` } : {},
+                ...showCoverBlock ? { opacity: 0, pointerEvents: "none" } : {}
+              } : void 0,
               children: /* @__PURE__ */ jsx7(
                 BlockRenderer,
                 {
@@ -2533,6 +2574,7 @@ function DocPlayerContent({
                   isEntering: animationsEnabled && isEntering,
                   viewport: activeViewport,
                   isPlaying,
+                  muted: renderMode || muted,
                   animationsEnabled,
                   theme: effectiveTheme
                 }

package/dist/{chunk-M2HEFJZP.js → chunk-EJMUO6VX.js}

@@ -9,7 +9,7 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-XYS7HMP4.js";
+} from "./chunk-TI5X7SBC.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -38,6 +38,7 @@ function BlockRenderer({
   transition,
   viewport = DEFAULT_VIEWPORT,
   isPlaying,
+  muted = false,
   animationsEnabled = true,
   theme
 }) {
@@ -72,6 +73,7 @@ function BlockRenderer({
             viewport,
             blockTime,
             isPlaying,
+            muted,
             animationsEnabled,
             theme
           },
@@ -87,6 +89,7 @@ function LayerRenderer({
   viewport,
   blockTime,
   isPlaying,
+  muted,
   animationsEnabled,
   theme
 }) {
@@ -127,7 +130,8 @@ function LayerRenderer({
           basePath,
           viewport,
           blockTime,
-          isPlaying
+          isPlaying,
+          muted
         }
       );
     case "table":

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

@@ -543,25 +543,41 @@ function RichTextLayer({ layer, viewport, blockTime }) {
   };
   const cls = `squisq-rich-text-${cssId(layer.id)}`;
   const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .4em;padding-left:1.2em;list-style-position:inside}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
-  return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3("foreignObject", { x: boxX, y: boxY, width: boxWidth, height: boxHeight, children: /* @__PURE__ */ jsxs2(
-    "div",
+  return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3(
+    "foreignObject",
     {
-      ...{ xmlns: "http://www.w3.org/1999/xhtml" },
-      style: boxStyle,
-      children: [
-        /* @__PURE__ */ jsx3("style", { children: scopedCss }),
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            className: cls,
-            "aria-label": content.text,
-            style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
-            dangerouslySetInnerHTML: { __html: safeHtml }
-          }
-        )
-      ]
+      x: boxX,
+      y: boxY,
+      width: boxWidth,
+      height: boxHeight,
+      color: style.color,
+      style: { color: style.color },
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          style: boxStyle,
+          children: [
+            /* @__PURE__ */ jsx3("style", { children: scopedCss }),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: cls,
+                "aria-label": content.text,
+                style: {
+                  width: "100%",
+                  color: style.color,
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word"
+                },
+                dangerouslySetInnerHTML: { __html: safeHtml }
+              }
+            )
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 function cssId(id) {
   return id.replace(/[^a-zA-Z0-9_-]/g, "-");
@@ -1229,7 +1245,14 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
 import { useRef, useEffect as useEffect2 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var VIDEO_SYNC_DRIFT_SECONDS = 0.2;
-function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
+function VideoLayer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  isPlaying,
+  muted = false
+}) {
   const { content, position } = layer;
   const videoRef = useRef(null);
   const hasStartedRef = useRef(false);
@@ -1300,7 +1323,7 @@ function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
       ref: videoRef,
       src,
       poster: posterSrc,
-      muted: true,
+      muted,
       playsInline: true,
       preload: "auto",
       "data-clip-start": content.clipStart,

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-EKD6JMJN.js";
+} from "./chunk-7YFNL63X.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -20,7 +20,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-M2HEFJZP.js";
+} from "./chunk-EJMUO6VX.js";
 import {
   ImageLayer,
   MapLayer,
@@ -33,7 +33,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-XYS7HMP4.js";
+} from "./chunk-TI5X7SBC.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";

package/dist/layers/index.d.ts

@@ -70,8 +70,10 @@ interface VideoLayerProps {
     blockTime: number;
     /** Whether the doc is currently playing */
     isPlaying?: boolean;
+    /** Silence the video's own audio track. */
+    muted?: boolean;
 }
-declare function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }: VideoLayerProps): react_jsx_runtime.JSX.Element;
+declare function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying, muted, }: VideoLayerProps): react_jsx_runtime.JSX.Element;
 
 interface TableLayerProps {
     layer: TableLayer$1;

package/dist/layers/index.js

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

package/dist/page/index.js

@@ -4,8 +4,8 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-M2HEFJZP.js";
-import "../chunk-XYS7HMP4.js";
+} from "../chunk-EJMUO6VX.js";
+import "../chunk-TI5X7SBC.js";
 import "../chunk-TT6ENR6T.js";
 import "../chunk-D7KN4CRG.js";
 import "../chunk-WLUZTUNZ.js";

package/dist/player/index.d.ts

@@ -269,6 +269,8 @@ interface BlockRendererProps {
     viewport?: ViewportDimensions;
     /** Whether the doc is currently playing (controls video playback) */
     isPlaying?: boolean;
+    /** Silence audio carried by video layers. */
+    muted?: boolean;
     /**
      * Whether to render block transitions and layer animations (default: true).
      * Disabling this only removes authored/render-style motion; timed video
@@ -278,7 +280,7 @@ interface BlockRendererProps {
     /** Resolved theme inherited by rich-media renderers such as Mermaid. */
     theme?: Theme;
 }
-declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, transition, viewport, isPlaying, animationsEnabled, theme, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
+declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, transition, viewport, isPlaying, muted, animationsEnabled, theme, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
 
 interface CaptionOverlayProps {
     /** Caption track with timestamped phrases */

package/dist/player/index.js

@@ -10,11 +10,11 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-EKD6JMJN.js";
+} from "../chunk-7YFNL63X.js";
 import {
   BlockRenderer
-} from "../chunk-M2HEFJZP.js";
-import "../chunk-XYS7HMP4.js";
+} from "../chunk-EJMUO6VX.js";
+import "../chunk-TI5X7SBC.js";
 import "../chunk-BOZJ655L.js";
 import "../chunk-TT6ENR6T.js";
 import {