@bendyline/squisq-react 2.3.2 → 2.4.0

package/dist/{chunk-NWZQGZIJ.js → chunk-BOZJ655L.js}

@@ -483,7 +483,12 @@ import {
   VIEWPORT_PRESETS
 } from "@bendyline/squisq/doc";
 function useDocPlayback(script, currentTime, options = {}) {
-  const { viewport = VIEWPORT_PRESETS.landscape, theme, onSeek } = options;
+  const {
+    viewport = VIEWPORT_PRESETS.landscape,
+    theme,
+    onSeek,
+    useAudioSegmentTiming = true
+  } = options;
   const blocks = useMemo2(() => {
     if (!script?.blocks) {
       return [];
@@ -497,10 +502,10 @@ function useDocPlayback(script, currentTime, options = {}) {
       resolvedTheme
     );
     if (hasTemplates) {
-      const audioSegments = script.audio?.segments?.map((seg) => ({
+      const audioSegments = useAudioSegmentTiming ? script.audio?.segments?.map((seg) => ({
         startTime: seg.startTime,
         duration: seg.duration
-      }));
+      })) : void 0;
       const expanded = expandDocBlocks(flatBlocks, {
         audioSegments,
         viewport,
@@ -524,7 +529,8 @@ function useDocPlayback(script, currentTime, options = {}) {
     script?.persistentLayers,
     script?.customTemplates,
     viewport,
-    theme
+    theme,
+    useAudioSegmentTiming
   ]);
   const currentBlock = useMemo2(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
   const currentBlockIndex = useMemo2(

package/dist/{chunk-KLYYVRHA.js → chunk-HML6PFH2.js}

@@ -1,13 +1,13 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-TQH6RTTV.js";
+} from "./chunk-M2HEFJZP.js";
 import {
   useAudioSync,
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-NWZQGZIJ.js";
+} from "./chunk-BOZJ655L.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -17,7 +17,7 @@ import {
 
 // src/MediaClipLayer.tsx
 import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 var DRIFT = 0.25;
 function MediaClipLayer({
   schedule,
@@ -25,22 +25,44 @@ function MediaClipLayer({
   isPlaying,
   basePath,
   renderMode = false,
-  muted = false
+  muted = false,
+  presentation = "background",
+  pipShape = "rounded",
+  pipPosition = "bottom-right",
+  honorClipPresentation = true
 }) {
   const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
   if (renderClips.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "doc-player__media-clips", "aria-hidden": true, children: renderClips.map((clip) => /* @__PURE__ */ jsx(
-    MediaClipElement,
+  const groups = /* @__PURE__ */ new Map();
+  for (const clip of renderClips) {
+    const clipPresentation = honorClipPresentation && clip.kind === "video" ? clip.placement === "picture-in-picture" ? "picture-in-picture" : clip.placement === "overlay" ? "full-frame" : presentation : presentation;
+    const group = groups.get(clipPresentation) ?? [];
+    group.push(clip);
+    groups.set(clipPresentation, group);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: [...groups].map(([groupPresentation, clips]) => /* @__PURE__ */ jsx(
+    "div",
     {
-      clip,
-      active: activeIds.has(clip.id),
-      currentTime,
-      isPlaying,
-      basePath,
-      renderMode,
-      muted
+      className: `doc-player__media-clips doc-player__media-clips--${groupPresentation}`,
+      "data-presentation": groupPresentation,
+      "data-pip-shape": pipShape,
+      "data-pip-position": pipPosition,
+      "aria-hidden": true,
+      children: clips.map((clip) => /* @__PURE__ */ jsx(
+        MediaClipElement,
+        {
+          clip,
+          active: activeIds.has(clip.id),
+          currentTime,
+          isPlaying,
+          basePath,
+          renderMode,
+          muted
+        },
+        clip.id
+      ))
     },
-    clip.id
+    groupPresentation
   )) });
 }
 function MediaClipElement({
@@ -62,7 +84,7 @@ function MediaClipElement({
       return;
     }
     const target = Math.max(0, clip.sourceIn + (currentTime - clip.absoluteStart));
-    if (renderMode || Math.abs(el.currentTime - target) > DRIFT) {
+    if (renderMode || !isPlaying || Math.abs(el.currentTime - target) > DRIFT) {
       try {
         el.currentTime = target;
       } catch {
@@ -91,17 +113,12 @@ function MediaClipElement({
       "video",
       {
         ...common,
-        muted: true,
+        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,
-        style: {
-          position: "absolute",
-          inset: 0,
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          zIndex: 0,
-          pointerEvents: "none"
-        }
+        style: { pointerEvents: "none" }
       }
     );
   }
@@ -1022,7 +1039,7 @@ function DocControlsSlideshow({
 }
 
 // src/DocPlayer.tsx
-import { Fragment, useId as useId2, useRef as useRef5, useState as useState4, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import { Fragment as Fragment2, useId as useId2, useRef as useRef5, useState as useState4, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo2 } from "react";
 import {
   isTemplateBlock as isTemplateBlock2,
   getCaptionAtTime as getCaptionAtTime2,
@@ -1279,6 +1296,7 @@ function DocPlayerContent({
   renderMode = false,
   animationsEnabled = true,
   autoPlay = false,
+  loop = false,
   onEnded,
   onTimeUpdate,
   audioController: externalAudioController,
@@ -1301,6 +1319,9 @@ function DocPlayerContent({
   theme,
   surface,
   captionStyle = "standard",
+  videoPresentation = "background",
+  pipShape = "rounded",
+  pipPosition = "bottom-right",
   enableSwipe = true,
   globalKeyboardShortcuts = false
 }) {
@@ -1405,7 +1426,11 @@ function DocPlayerContent({
   } = useDocPlayback(doc, currentTime, {
     viewport: activeViewport,
     theme: effectiveTheme,
-    onSeek: seekTo
+    onSeek: seekTo,
+    // 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.
+    useAudioSegmentTiming: audioMode !== "synthetic"
   });
   const coverBlock = useMemo2(() => {
     const startBlockConfig = doc.startBlock;
@@ -1488,8 +1513,11 @@ function DocPlayerContent({
   useEffect4(() => {
     if (isEnded) {
       onEnded?.();
+      if (loop && !isSlideshowMode && !isLinearMode) {
+        void restart();
+      }
     }
-  }, [isEnded, onEnded]);
+  }, [isEnded, isLinearMode, isSlideshowMode, loop, onEnded, restart]);
   const liveRenderAPIRef = useRef5(null);
   const stableRenderAPIRef = useRef5(null);
   if (!stableRenderAPIRef.current) {
@@ -2000,6 +2028,7 @@ function DocPlayerContent({
     {
       ref: containerRef,
       "data-player-id": playerId,
+      "data-orientation": orientation,
       tabIndex: renderMode ? -1 : 0,
       "aria-label": "Document player",
       onKeyDown: renderMode ? void 0 : handleKeyDown,
@@ -2027,7 +2056,10 @@ function DocPlayerContent({
             isPlaying,
             basePath,
             renderMode,
-            muted
+            muted,
+            presentation: videoPresentation,
+            pipShape,
+            pipPosition
           }
         ),
         /* @__PURE__ */ jsxs4("div", { className: "doc-player__viewport", children: [
@@ -2192,7 +2224,7 @@ function DocPlayerContent({
                 hasCaptions && (() => {
                   const debugPhrase = getCaptionAtTime2(doc.captions, currentTime);
                   const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
-                  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+                  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
                     /* @__PURE__ */ jsxs4("div", { children: [
                       /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
@@ -2465,6 +2497,7 @@ function DocPlayerWithSidebar({
   doc,
   basePath,
   autoPlay = false,
+  loop = false,
   onEnded,
   onTimeUpdate,
   audioController,
@@ -2515,6 +2548,7 @@ function DocPlayerWithSidebar({
         theme,
         basePath,
         autoPlay,
+        loop,
         onEnded,
         onTimeUpdate,
         audioController,

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

@@ -434,10 +434,11 @@ function CardGridSection({ section }) {
   ] });
 }
 function ItemListSection({ section }) {
+  const { theme } = usePageView();
   const items = section.slots.items ?? [];
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title squisq-page-items-title", children: section.slots.title }),
-    /* @__PURE__ */ jsx3("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx3("li", { children: item.body }, i)) })
+    /* @__PURE__ */ jsx3("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx3("li", { children: item.markdown ? /* @__PURE__ */ jsx3(MarkdownRenderer, { nodes: item.markdown, theme }) : item.body }, i)) })
   ] });
 }
 function TimelineRailSection({ section }) {

package/dist/hooks/index.d.ts

@@ -116,6 +116,13 @@ interface UseDocPlaybackOptions {
     theme?: Theme;
     /** Host seek callback used by block navigation actions. */
     onSeek?: (time: number) => void;
+    /**
+     * Whether real audio-segment timing should reshape the authored block
+     * sequence. Synthetic preview tracks are only a playback clock; treating
+     * them as narration can merge short authored slides to satisfy narration
+     * pacing rules.
+     */
+    useAudioSegmentTiming?: 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-NWZQGZIJ.js";
+} from "../chunk-BOZJ655L.js";
 import {
   useAutoSurface
 } from "../chunk-TT6ENR6T.js";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { SquisqRenderAPI } from './player/index.js';
-export { BlockMarker, BlockRenderer, CaptionMode, CaptionOverlay, CaptionStyle, ControlsLayout, DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, InlineAudioPlayerProps, InlineVideoPlayer, InlineVideoPlayerProps, MediaClipLayer, MediaClipLayerProps, PlaybackActions, PlaybackState, RenderAudioSegmentInfo, RenderBlockInfo, RenderCaptionInfo, RenderChapterInfo, SlideNavActions, SocialCaptionOverlay, formatTime } from './player/index.js';
+export { BlockMarker, BlockRenderer, CaptionMode, CaptionOverlay, CaptionStyle, ControlsLayout, DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, InlineAudioPlayerProps, InlineVideoPlayer, InlineVideoPlayerProps, MediaClipLayer, MediaClipLayerProps, PipPosition, PipShape, PlaybackActions, PlaybackState, RenderAudioSegmentInfo, RenderBlockInfo, RenderCaptionInfo, RenderChapterInfo, SlideNavActions, SocialCaptionOverlay, VideoPresentation, formatTime } from './player/index.js';
 import { Theme } from '@bendyline/squisq/schemas';
 export { MarkdownRenderer, MermaidDiagram, MermaidDiagramProps } from './markdown/index.js';
 export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, usePageView } from './page/index.js';

package/dist/index.js

@@ -10,7 +10,7 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "./chunk-KLYYVRHA.js";
+} from "./chunk-HML6PFH2.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -18,7 +18,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-TQH6RTTV.js";
+} from "./chunk-M2HEFJZP.js";
 import {
   ImageLayer,
   MapLayer,
@@ -40,7 +40,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-NWZQGZIJ.js";
+} from "./chunk-BOZJ655L.js";
 import {
   JsonView
 } from "./chunk-NANF7REM.js";

package/dist/page/index.js

@@ -4,7 +4,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-TQH6RTTV.js";
+} from "../chunk-M2HEFJZP.js";
 import "../chunk-XYS7HMP4.js";
 import "../chunk-TT6ENR6T.js";
 import "../chunk-D7KN4CRG.js";

package/dist/player/index.d.ts

@@ -20,6 +20,17 @@ import { a as AudioController } from '../AudioController-DwMsPe38.js';
 
 /** Layout mode for doc player controls */
 type ControlsLayout = 'overlay' | 'sidebar' | 'bottom';
+/**
+ * Placement of scheduled video relative to the rendered slide.
+ *
+ * `'background'` preserves the legacy full-bleed treatment behind the
+ * content. The other variants render above the content for presenter video.
+ */
+type VideoPresentation = 'background' | 'full-frame' | 'picture-in-picture';
+/** Shape of a picture-in-picture presenter video. */
+type PipShape = 'square' | 'rounded' | 'circle';
+/** Corner occupied by a picture-in-picture presenter video. */
+type PipPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 /**
  * Display mode for DocPlayer.
  *
@@ -178,6 +189,8 @@ interface DocPlayerProps {
     /** Receives the instance-scoped render API, and `null` on cleanup. */
     onRenderAPIReady?: (api: SquisqRenderAPI | null) => void;
     autoPlay?: boolean;
+    /** Restart Video-mode playback automatically when the timeline ends. */
+    loop?: boolean;
     onEnded?: () => void;
     onTimeUpdate?: (time: number) => void;
     /** Optional host-owned audio controller. */
@@ -205,6 +218,15 @@ interface DocPlayerProps {
     showCoverSlide?: boolean;
     coverVisible?: boolean;
     captionStyle?: CaptionStyle;
+    /**
+     * Placement of scheduled video relative to the slide content.
+     * Defaults to `'background'` for backward compatibility.
+     */
+    videoPresentation?: VideoPresentation;
+    /** Shape of presenter video in picture-in-picture mode. */
+    pipShape?: PipShape;
+    /** Corner used by presenter video in picture-in-picture mode. */
+    pipPosition?: PipPosition;
     enableSwipe?: boolean;
     globalKeyboardShortcuts?: boolean;
 }
@@ -327,6 +349,8 @@ interface DocPlayerWithSidebarProps {
     /** Base path for resolving media URLs (default: `'.'`) */
     basePath?: string;
     autoPlay?: boolean;
+    /** Restart playback automatically when the video timeline ends. */
+    loop?: boolean;
     onEnded?: () => void;
     onTimeUpdate?: (time: number) => void;
     /** Optional audio controller (if not provided, uses default HTML5 audio) */
@@ -349,7 +373,7 @@ interface DocPlayerWithSidebarProps {
      */
     theme?: Theme;
 }
-declare function DocPlayerWithSidebar({ doc, basePath, autoPlay, onEnded, onTimeUpdate, audioController, animationsEnabled, muted, captionsEnabled, isFullscreen, onFullscreenToggle, forceViewport, onPlayingChange, theme, }: DocPlayerWithSidebarProps): react_jsx_runtime.JSX.Element;
+declare function DocPlayerWithSidebar({ doc, basePath, autoPlay, loop, onEnded, onTimeUpdate, audioController, animationsEnabled, muted, captionsEnabled, isFullscreen, onFullscreenToggle, forceViewport, onPlayingChange, theme, }: DocPlayerWithSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface DocProgressBarProps {
     state: PlaybackState;
@@ -404,7 +428,15 @@ interface MediaClipLayerProps {
     renderMode?: boolean;
     /** Silence every scheduled clip during live playback. */
     muted?: boolean;
+    /** Placement of video clips relative to the rendered document. */
+    presentation?: VideoPresentation;
+    /** Shape of a picture-in-guide? */
+    pipShape?: PipShape;
+    /** Corner occupied by picture-in-picture video. */
+    pipPosition?: PipPosition;
+    /** Honor each scheduled video's authored placement override. Default true. */
+    honorClipPresentation?: boolean;
 }
-declare function MediaClipLayer({ schedule, currentTime, isPlaying, basePath, renderMode, muted, }: MediaClipLayerProps): react_jsx_runtime.JSX.Element | null;
+declare function MediaClipLayer({ schedule, currentTime, isPlaying, basePath, renderMode, muted, presentation, pipShape, pipPosition, honorClipPresentation, }: MediaClipLayerProps): react_jsx_runtime.JSX.Element | null;
 
-export { type BlockMarker, BlockRenderer, type CaptionMode, CaptionOverlay, type CaptionStyle, type ControlsLayout, type DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, type DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, type InlineAudioPlayerProps, InlineVideoPlayer, type InlineVideoPlayerProps, MediaClipLayer, type MediaClipLayerProps, type PlaybackActions, type PlaybackState, type RenderAudioSegmentInfo, type RenderBlockInfo, type RenderCaptionInfo, type RenderChapterInfo, type SlideNavActions, SocialCaptionOverlay, type SquisqRenderAPI, formatTime };
+export { type BlockMarker, BlockRenderer, type CaptionMode, CaptionOverlay, type CaptionStyle, type ControlsLayout, type DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, type DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, type InlineAudioPlayerProps, InlineVideoPlayer, type InlineVideoPlayerProps, MediaClipLayer, type MediaClipLayerProps, type PipPosition, type PipShape, type PlaybackActions, type PlaybackState, type RenderAudioSegmentInfo, type RenderBlockInfo, type RenderCaptionInfo, type RenderChapterInfo, type SlideNavActions, SocialCaptionOverlay, type SquisqRenderAPI, type VideoPresentation, formatTime };

package/dist/player/index.js

@@ -10,12 +10,12 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-KLYYVRHA.js";
+} from "../chunk-HML6PFH2.js";
 import {
   BlockRenderer
-} from "../chunk-TQH6RTTV.js";
+} from "../chunk-M2HEFJZP.js";
 import "../chunk-XYS7HMP4.js";
-import "../chunk-NWZQGZIJ.js";
+import "../chunk-BOZJ655L.js";
 import "../chunk-TT6ENR6T.js";
 import {
   InlineAudioPlayer,