@bendyline/squisq-react 2.10.1 → 2.11.1

package/dist/{chunk-NNJLSQPW.js → chunk-FTXPC5QW.js}

@@ -343,6 +343,16 @@ 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) {
+  switch (position) {
+    case "top":
+      return { top: "8%" };
+    case "center":
+      return { top: "50%", transform: "translateY(-50%)" };
+    default:
+      return { bottom: "18%" };
+  }
+}
 var TARGET_CHUNK_SIZE = 4;
 var MIN_CHUNK_SIZE = 2;
 var MAX_CHUNK_SIZE = 6;
@@ -394,7 +404,8 @@ function SocialCaptionOverlay({
   currentTime,
   enabled = true,
   theme,
-  viewport
+  viewport,
+  position = "bottom"
 }) {
   const { chunks } = useMemo2(
     () => captions ? buildWordStream(captions) : { words: [], chunks: [] },
@@ -407,7 +418,7 @@ function SocialCaptionOverlay({
         className: "social-caption-overlay",
         style: {
           position: "absolute",
-          bottom: "18%",
+          ...positionStyle(position),
           left: 0,
           right: 0,
           zIndex: 50,
@@ -469,7 +480,7 @@ function SocialCaptionOverlay({
       className: "social-caption-overlay",
       style: {
         position: "absolute",
-        bottom: "18%",
+        ...positionStyle(position),
         left: 0,
         right: 0,
         zIndex: 50,
@@ -516,12 +527,23 @@ function SocialCaptionOverlay({
 // src/CaptionOverlay.tsx
 import { getCaptionAtTime } from "@bendyline/squisq/schemas";
 import { jsx as jsx3 } from "react/jsx-runtime";
+function standardPositionStyle(position) {
+  switch (position) {
+    case "bottom":
+      return { bottom: "6px", left: "50%", transform: "translateX(-50%)" };
+    case "center":
+      return { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+    default:
+      return { top: "6px", left: "50%", transform: "translateX(-50%)" };
+  }
+}
 function CaptionOverlay({
   captions,
   currentTime,
   enabled = true,
   fontSize = 16,
   captionStyle = "standard",
+  captionPosition,
   theme,
   viewport
 }) {
@@ -533,7 +555,8 @@ function CaptionOverlay({
         currentTime,
         enabled,
         theme,
-        viewport
+        viewport,
+        position: captionPosition ?? "bottom"
       }
     );
   }
@@ -545,9 +568,7 @@ function CaptionOverlay({
       className: "caption-overlay",
       style: {
         position: "absolute",
-        top: "6px",
-        left: "50%",
-        transform: "translateX(-50%)",
+        ...standardPositionStyle(captionPosition ?? "top"),
         zIndex: 50,
         pointerEvents: "none",
         maxWidth: "100%",
@@ -2663,6 +2684,7 @@ function DocPlayerContent({
   theme,
   surface,
   captionStyle = "standard",
+  captionPosition,
   videoPresentation,
   pipSize,
   pipShape,
@@ -2904,10 +2926,7 @@ function DocPlayerContent({
   const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState6(false);
   const slideshowCoverInitKeyRef = useRef7("");
   useEffect7(() => {
-    slideshowCoverInitKeyRef.current = "";
-  }, [doc]);
-  useEffect7(() => {
-    const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
+    const initKey = `${doc.articleId}:${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
     if (slideshowCoverInitKeyRef.current === initKey) return;
     slideshowCoverInitKeyRef.current = initKey;
     if (isSlideshowMode && hasManagedCover && !renderMode) {
@@ -2916,7 +2935,7 @@ function DocPlayerContent({
     } else {
       setSlideshowCoverVisible(false);
     }
-  }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
+  }, [doc.articleId, isSlideshowMode, hasManagedCover, renderMode, pause]);
   const [coverForced, setCoverForced] = useState6(false);
   const [coverGraceActive, setCoverGraceActive] = useState6(false);
   const coverGraceTimer = useRef7();
@@ -3634,8 +3653,9 @@ function DocPlayerContent({
               captions: doc.captions,
               currentTime,
               enabled: captionsEnabled && (renderMode || isPlaying || currentTime > 0),
-              fontSize: 16,
+              fontSize: Math.min(34, Math.max(16, Math.round(activeViewport.height * 0.026))),
               captionStyle: activeCaptionStyle,
+              captionPosition,
               theme: effectiveTheme,
               viewport: activeViewport
             }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { SquisqRenderAPI, VideoPresentation as VideoPresentation$1, PipSize, PipShape, PipPosition } from './player/index.js';
-export { BlockMarker, BlockRenderer, CaptionMode, CaptionOverlay, CaptionStyle, ControlsLayout, DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, FlashcardFaceView, FlashcardFaceViewProps, FlashcardView, FlashcardViewProps, InlineAudioPlayer, InlineAudioPlayerProps, InlineVideoPlayer, InlineVideoPlayerProps, MediaClipLayer, MediaClipLayerProps, PlaybackActions, PlaybackState, RenderAudioSegmentInfo, RenderBlockInfo, RenderCaptionInfo, RenderChapterInfo, SlideNavActions, SocialCaptionOverlay, formatTime } from './player/index.js';
+import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-DSMhm8SL.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 SlideNavActions, G as SocialCaptionOverlay, H as formatTime } from './player-DSMhm8SL.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';
@@ -43,11 +43,14 @@ import '@bendyline/squisq/jsonForm';
 
 interface MountOptions {
     /**
-     * Rendering mode: 'slideshow' (interactive, default), 'static'
+     * Rendering mode: 'slideshow' (interactive, default), 'video' (timed
+     * auto-advance playback with scrubber — the movie mode), 'static'
      * (scrollable page), 'dashboard' (one canvas of arranged blocks), or
      * 'flashcards' (progressively revealed study deck).
      */
-    mode?: 'slideshow' | 'static' | 'dashboard' | 'flashcards';
+    mode?: 'slideshow' | 'video' | 'static' | 'dashboard' | 'flashcards';
+    /** Loop playback when the timeline ends (video mode only, default: false). */
+    loop?: boolean;
     /** Dashboard-mode options (ignored by the other modes). */
     dashboard?: {
         /** Layout id or 'auto'. Overrides doc frontmatter. */
@@ -102,6 +105,8 @@ interface MountOptions {
     animationsEnabled?: boolean;
     /** Caption style: 'standard' or 'social'. Omit or set to undefined for no captions. */
     captionStyle?: 'standard' | 'social';
+    /** Caption placement over the frame; omit for the style's classic spot. */
+    captionPosition?: 'top' | 'center' | 'bottom';
     /** Show a Copy button on fenced code blocks in static mode (default: false). */
     showCodeCopyButton?: boolean;
     /** Optional host clipboard adapter; otherwise the browser Clipboard API is used. */

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-NNJLSQPW.js";
+} from "./chunk-FTXPC5QW.js";
 import {
   BlockRenderer,
   CanvasSection,