@bendyline/squisq-react 2.11.10 → 2.11.11

package/dist/{chunk-MVJQL2W2.js → chunk-3SKOLZUA.js}

@@ -494,7 +494,8 @@ function useDocPlayback(script, currentTime, options = {}) {
     viewport = VIEWPORT_PRESETS.landscape,
     theme,
     onSeek,
-    useAudioSegmentTiming = true
+    useAudioSegmentTiming = true,
+    deterministicTransitions = false
   } = options;
   const blocks = useMemo3(() => {
     if (!script?.blocks) {
@@ -577,7 +578,7 @@ function useDocPlayback(script, currentTime, options = {}) {
   lastRenderedBlockRef.current = currentBlock;
   const transitionDuration = currentBlock?.transition ? resolveTransitionDuration(currentBlock.transition) : 0;
   const isEntering = !!currentBlock && transitionDuration > 0 && blockTime < transitionDuration;
-  const outgoingBlock = outgoingBlockRef.current;
+  const outgoingBlock = deterministicTransitions ? currentBlockIndex > 0 ? blocks[currentBlockIndex - 1] ?? null : null : outgoingBlockRef.current;
   const isExiting = isEntering && outgoingBlock != null && outgoingBlock.id !== currentBlock?.id;
   const previousBlock = isExiting ? outgoingBlock : null;
   const goToBlock = useCallback2(

package/dist/{chunk-4KBT2CXQ.js → chunk-HERX7GUP.js}

@@ -11,7 +11,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-MVJQL2W2.js";
+} from "./chunk-3SKOLZUA.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -451,16 +451,26 @@ function useMediaClipDurations(schedule, basePath, mediaProviderOverride) {
 import { useMemo as useMemo2 } from "react";
 import { resolveFontFamily } from "@bendyline/squisq/schemas";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function positionStyle(position) {
+function positionStyle(position, portrait) {
   switch (position) {
     case "top":
-      return { top: "8%" };
+      return { top: portrait ? "12%" : "8%" };
     case "center":
       return { top: "50%", transform: "translateY(-50%)" };
     default:
-      return { bottom: "18%" };
+      return { bottom: portrait ? "24%" : "16%" };
   }
 }
+function contrastText(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return "#ffffff";
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luma > 150 ? "#111111" : "#ffffff";
+}
 var TARGET_CHUNK_SIZE = 4;
 var MIN_CHUNK_SIZE = 2;
 var MAX_CHUNK_SIZE = 6;
@@ -526,7 +536,7 @@ function SocialCaptionOverlay({
         className: "social-caption-overlay",
         style: {
           position: "absolute",
-          ...positionStyle(position),
+          ...positionStyle(position, (viewport?.height ?? 0) > (viewport?.width ?? 1)),
           left: 0,
           right: 0,
           zIndex: 50,
@@ -579,22 +589,25 @@ function SocialCaptionOverlay({
   }
   const primaryColor = theme?.colors?.primary ?? "#5b9bd5";
   const fontFamily = theme?.typography?.titleFont ? resolveFontFamily(theme.typography.titleFont, '"PT Serif", Georgia, serif') : '"PT Serif", Georgia, serif';
+  const viewportWidth = viewport?.width ?? 1280;
   const viewportHeight = viewport?.height ?? 720;
-  const baseFontSize = Math.round(viewportHeight * 0.055);
-  const fontSize = Math.max(24, Math.min(72, baseFontSize));
+  const portrait = viewportHeight > viewportWidth;
+  const baseFontSize = Math.min(viewportHeight * 0.055, viewportWidth * 0.082);
+  const fontSize = Math.max(22, Math.min(96, Math.round(baseFontSize)));
   return /* @__PURE__ */ jsx2(
     "div",
     {
       className: "social-caption-overlay",
       style: {
         position: "absolute",
-        ...positionStyle(position),
+        ...positionStyle(position, portrait),
         left: 0,
         right: 0,
         zIndex: 50,
         pointerEvents: "none",
-        textAlign: "center",
-        padding: "0 8%",
+        display: "flex",
+        justifyContent: "center",
+        padding: portrait ? "0 7%" : "0 10%",
         boxSizing: "border-box",
         opacity: 1,
         transition: "opacity 0.15s ease-in-out"
@@ -602,24 +615,44 @@ function SocialCaptionOverlay({
       children: /* @__PURE__ */ jsx2(
         "div",
         {
+          className: "social-caption-overlay__chunk",
           style: {
-            display: "inline-block",
-            lineHeight: 1.3
+            display: "inline-flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            alignItems: "baseline",
+            maxWidth: "100%",
+            rowGap: "0.12em",
+            columnGap: "0.28em",
+            padding: "0.22em 0.55em",
+            borderRadius: "0.4em",
+            background: "rgba(10, 10, 12, 0.42)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+            fontFamily,
+            fontSize: `${fontSize}px`,
+            lineHeight: 1.18,
+            textTransform: "uppercase",
+            letterSpacing: "0.01em",
+            whiteSpace: "normal"
           },
           children: activeChunk.words.map((word, i) => {
             const isActive = i === activeWordIndex;
             return /* @__PURE__ */ jsx2(
               "span",
               {
+                className: isActive ? "social-caption-overlay__word is-active" : "social-caption-overlay__word",
                 style: {
-                  fontFamily,
-                  fontSize: `${fontSize}px`,
-                  fontWeight: isActive ? 800 : 600,
-                  color: isActive ? primaryColor : "rgba(255, 255, 255, 0.9)",
-                  textShadow: "0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4)",
-                  marginRight: i < activeChunk.words.length - 1 ? "0.3em" : void 0,
-                  transition: "color 0.1s ease, font-weight 0.1s ease",
-                  textTransform: "uppercase"
+                  display: "inline-block",
+                  whiteSpace: "nowrap",
+                  padding: "0 0.16em",
+                  borderRadius: "0.18em",
+                  fontWeight: 800,
+                  color: isActive ? contrastText(primaryColor) : "rgba(255, 255, 255, 0.95)",
+                  background: isActive ? primaryColor : "transparent",
+                  textShadow: isActive ? "none" : "0 2px 6px rgba(0,0,0,0.75), 0 0 18px rgba(0,0,0,0.45)",
+                  transform: isActive ? "scale(1.05)" : "none",
+                  transition: "color 0.1s ease, background-color 0.1s ease, transform 0.1s ease"
                 },
                 children: word.text
               },
@@ -1457,6 +1490,7 @@ function DashboardView({
       },
       getRenderedTime: () => 0,
       getDuration: () => 0,
+      getViewport: () => ({ width: activeViewport.width, height: activeViewport.height }),
       getBlocks: () => materialization.cells.map((cell) => ({
         id: String(cell.block.id),
         template: cell.block.template ?? "content",
@@ -1474,7 +1508,7 @@ function DashboardView({
     };
     onRenderAPIReady(api);
     return () => onRenderAPIReady(null);
-  }, [renderMode, onRenderAPIReady, materialization]);
+  }, [activeViewport, renderMode, onRenderAPIReady, materialization]);
   const canvasDimensions = { width: activeViewport.width, height: activeViewport.height };
   const coverStyle = { position: "absolute", inset: 0 };
   const canvasStyle = {
@@ -2770,6 +2804,9 @@ function DocPlayerContent({
     viewport: activeViewport,
     theme: effectiveTheme,
     onSeek: seekTo,
+    // Offline capture may visit frames out of order; derive the crossfade
+    // partner from block order rather than from what was rendered last.
+    deterministicTransitions: renderMode,
     // A synthetic track is only the timer used by an unnarrated preview.
     // Narration pacing may compact short visual beats, but it must never
     // remove authored slides from the default loss-averse projection.
@@ -2839,7 +2876,7 @@ function DocPlayerContent({
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode, appearance.coverSlideDuration]);
   useEffect7(() => () => clearTimeout(coverGraceTimer.current), []);
   useEffect7(() => () => clearTimeout(tapFeedbackTimer.current), []);
-  const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const showVideoCoverBlock = !isLinearMode && !!coverBlock && (coverForced || !isSlideshowMode && (coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay));
   const effectiveSlideshowCoverVisible = coverVisible ?? slideshowCoverVisible;
   const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && effectiveSlideshowCoverVisible);
   const showCoverBlock = coverVisible === void 0 ? showVideoCoverBlock || showSlideshowCover : !!coverBlock && coverVisible;
@@ -2879,6 +2916,7 @@ function DocPlayerContent({
       seekTo: (time) => current().seekTo(time),
       getRenderedTime: () => current().getRenderedTime(),
       getDuration: () => current().getDuration(),
+      getViewport: () => current().getViewport(),
       getBlocks: () => current().getBlocks(),
       getAudioSegments: () => current().getAudioSegments(),
       getCaptions: () => current().getCaptions(),
@@ -2908,27 +2946,39 @@ function DocPlayerContent({
       } else {
         await seekTo(time);
       }
-      let blockStartTime = 0;
+      let activeIndex = -1;
       for (let i = expandedBlocks.length - 1; i >= 0; i--) {
         if (time >= expandedBlocks[i].startTime) {
-          blockStartTime = expandedBlocks[i].startTime;
+          activeIndex = i;
           break;
         }
       }
+      const blockStartTime = activeIndex >= 0 ? expandedBlocks[activeIndex].startTime : 0;
+      const previousStartTime = activeIndex > 0 ? expandedBlocks[activeIndex - 1].startTime : blockStartTime;
       const elapsedMs = (time - blockStartTime) * 1e3;
+      const previousElapsedMs = (time - previousStartTime) * 1e3;
       const selectVideoFrame = async (video, targetTime) => {
         const selector = renderMode ? renderVideoFrameSelectorRef.current : void 0;
         if (selector && await selector(video, targetTime)) return;
         await seekVideoToFrame(video, targetTime);
       };
-      (root.getAnimations?.() ?? []).forEach((anim) => {
+      (root.getAnimations?.({ subtree: true }) ?? []).forEach((anim) => {
         const target = anim.effect?.target;
         if (!target) return;
-        if (target.closest(".doc-player__block--active")) {
-          anim.currentTime = Math.max(0, elapsedMs);
-        } else if (target.closest(".doc-player__block--previous")) {
-          anim.currentTime = Math.max(0, elapsedMs);
+        let position;
+        if (target.closest(".doc-player__block--previous")) {
+          position = target.classList.contains("block-svg") ? elapsedMs : previousElapsedMs;
+        } else if (target.closest(".doc-player__block--active")) {
+          position = elapsedMs;
+        } else if (target.closest(".doc-player__block--cover")) {
+          position = 0;
+        } else {
+          position = time * 1e3;
+        }
+        if (renderMode && typeof anim.pause === "function" && anim.playState !== "paused") {
+          anim.pause();
         }
+        anim.currentTime = Math.max(0, position);
       });
       const blockElapsed = time - blockStartTime;
       const videoSeekPromises = [];
@@ -3005,10 +3055,12 @@ function DocPlayerContent({
       return waitForVisualUpdate();
     };
     const hasCoverBlock = () => !!coverBlock;
+    const getViewport = () => ({ width: activeViewport.width, height: activeViewport.height });
     const api = {
       seekTo: renderSeekTo,
       getRenderedTime: () => committedRenderTimeRef.current,
       getDuration,
+      getViewport,
       getBlocks,
       getAudioSegments,
       getCaptions,
@@ -3031,7 +3083,8 @@ function DocPlayerContent({
     doc,
     externalAudioController,
     waitForRenderCommit,
-    isDashboardMode
+    isDashboardMode,
+    activeViewport
   ]);
   useEffect7(() => {
     if (isDashboardMode) return;
@@ -3445,7 +3498,7 @@ function DocPlayerContent({
       role: "region",
       "aria-label": "Document player",
       onKeyDown: renderMode ? void 0 : handleKeyDown,
-      className: `doc-player${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,
+      className: `doc-player${renderMode ? " doc-player--render-mode" : ""}${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,
       onClick: handleContainerClick,
       onPointerDown: swipe.onPointerDown,
       style: {
@@ -3701,7 +3754,7 @@ function DocPlayerContent({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs6(
+        !renderMode && !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "doc-player__unavailable",

package/dist/hooks/index.d.ts

@@ -127,6 +127,14 @@ interface UseDocPlaybackOptions {
      * pacing rules.
      */
     useAudioSegmentTiming?: boolean;
+    /**
+     * Derive the outgoing (exiting) block from block order instead of from the
+     * block rendered last. Offline capture seeks frames out of order (resume,
+     * dedupe, sampling), so the crossfade partner must be a pure function of
+     * time. Live playback keeps the render-history path so swipes and manual
+     * jumps crossfade from what the viewer actually saw.
+     */
+    deterministicTransitions?: boolean;
 }
 declare function useDocPlayback(script: Doc | null, currentTime: number, options?: UseDocPlaybackOptions): PlaybackState & PlaybackActions;
 

package/dist/hooks/index.js

@@ -6,7 +6,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "../chunk-MVJQL2W2.js";
+} from "../chunk-3SKOLZUA.js";
 import {
   useAutoSurface
 } from "../chunk-TT6ENR6T.js";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-5j10MhBq.js';
-export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, e as CaptionPosition, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as RenderVideoFrameSelector, G as SlideNavActions, H as SocialCaptionOverlay, J as formatTime } from './player-5j10MhBq.js';
+import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-DOdWRK4X.js';
+export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, e as CaptionPosition, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as RenderVideoFrameSelector, G as SlideNavActions, H as SocialCaptionOverlay, J as formatTime } from './player-DOdWRK4X.js';
 import { Theme, VideoPresentation, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, ScheduledClip, MediaProvider } from '@bendyline/squisq/schemas';
 import { DashboardStyleId, ViewportConfig, CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
 export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
@@ -100,6 +100,18 @@ interface MountOptions {
      * auto-play.
      */
     renderMode?: boolean;
+    /**
+     * Viewport the player composes for, in CSS pixels. Render pages pass their
+     * export dimensions so portrait and custom sizes are laid out natively
+     * instead of letterboxed inside the landscape preset. Omit for live hosts
+     * (the player sizes to its element) and for dashboard mounts, which always
+     * fill the host box.
+     */
+    viewport?: {
+        width: number;
+        height: number;
+        name?: string;
+    };
     /**
      * Whether to render slide transitions and per-layer animations (default: true).
      * Timed media continues to play when disabled.

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-4KBT2CXQ.js";
+} from "./chunk-HERX7GUP.js";
 import {
   PaginatedDocView
 } from "./chunk-X4I6Y3OP.js";
@@ -48,7 +48,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-MVJQL2W2.js";
+} from "./chunk-3SKOLZUA.js";
 import {
   JsonView,
   createJsonFormFenceRenderer

package/dist/player/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, b as PipPosition, a as PipShape, P as PipSize, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, G as SlideNavActions, H as SocialCaptionOverlay, S as SquisqRenderAPI, V as VideoPresentation, J as formatTime } from '../player-5j10MhBq.js';
+export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, b as PipPosition, a as PipShape, P as PipSize, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, G as SlideNavActions, H as SocialCaptionOverlay, S as SquisqRenderAPI, V as VideoPresentation, J as formatTime } from '../player-DOdWRK4X.js';
 export { a as CodeBlockCopyContext, C as CodeBlockCopyHandler } from '../MarkdownRenderer-CC9dOc6b.js';
 import 'react/jsx-runtime';
 import '@bendyline/squisq/schemas';

package/dist/player/index.js

@@ -12,12 +12,12 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-4KBT2CXQ.js";
+} from "../chunk-HERX7GUP.js";
 import {
   BlockRenderer
 } from "../chunk-CLP3VWJ2.js";
 import "../chunk-W6MKRWL6.js";
-import "../chunk-MVJQL2W2.js";
+import "../chunk-3SKOLZUA.js";
 import "../chunk-TT6ENR6T.js";
 import {
   InlineAudioPlayer,

package/dist/{player-5j10MhBq.d.ts → player-DOdWRK4X.d.ts}

@@ -185,6 +185,11 @@ interface SquisqRenderAPI {
     /** Timeline time most recently committed to the player DOM. */
     getRenderedTime: () => number;
     getDuration: () => number;
+    /** Viewport (CSS px) the blocks were composed for; capture hosts verify it matches their export size. */
+    getViewport: () => {
+        width: number;
+        height: number;
+    };
     getBlocks: () => RenderBlockInfo[];
     getAudioSegments: () => RenderAudioSegmentInfo[];
     getCaptions: () => RenderCaptionInfo[];