@bendyline/squisq-react 1.4.1 → 1.4.2

package/dist/index.d.ts

@@ -131,6 +131,12 @@ interface PlaybackState$1 {
     currentSegmentName: string | null;
     /** Current block data (for extracting image info, etc.) */
     currentBlock: Block | null;
+    /** Optional display label for non-block slides, e.g. the managed cover. */
+    currentSlideLabel?: string;
+    /** Optional human-facing slide number, separate from internal nav index. */
+    currentSlideNumber?: number;
+    /** Optional human-facing slide total, separate from internal nav total. */
+    totalSlideNumber?: number;
 }
 /** Playback actions exposed to external control components */
 interface PlaybackActions$1 {
@@ -280,6 +286,11 @@ interface DocPlayerProps {
      *   template-annotated sections as inline SVG cards. No audio, no timeline.
      */
     displayMode?: DisplayMode;
+    /**
+     * Whether to synthesize and show the managed cover slide from
+     * `doc.startBlock`. Defaults to true for existing documents.
+     */
+    showCoverSlide?: boolean;
     /** Caption display style (default: 'standard').
      *  'social' shows large centered words with the active word highlighted. */
     captionStyle?: CaptionStyle;

package/dist/index.js

@@ -2712,9 +2712,16 @@ function DocControlsOverlay({
 // src/DocControlsSlideshow.tsx
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function DocControlsSlideshow({ state, slideNav }) {
-  const { currentBlockIndex, totalBlocks } = state;
+  const {
+    currentBlockIndex,
+    currentSlideLabel,
+    currentSlideNumber,
+    totalBlocks,
+    totalSlideNumber
+  } = state;
   const isFirst = currentBlockIndex <= 0;
   const isLast = currentBlockIndex >= totalBlocks - 1;
+  const counterText = totalBlocks > 0 ? currentSlideLabel ?? `${currentSlideNumber ?? currentBlockIndex + 1} / ${totalSlideNumber ?? totalBlocks}` : "\u2014";
   return /* @__PURE__ */ jsxs10(
     "div",
     {
@@ -2782,7 +2789,7 @@ function DocControlsSlideshow({ state, slideNav }) {
               padding: "0 4px",
               letterSpacing: "0.02em"
             },
-            children: totalBlocks > 0 ? `${currentBlockIndex + 1} / ${totalBlocks}` : "\u2014"
+            children: counterText
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -3641,6 +3648,7 @@ function DocPlayerContent({
   onBlockMarkers,
   forceViewport,
   displayMode = "video",
+  showCoverSlide = true,
   theme,
   surface,
   captionStyle = "standard",
@@ -3732,6 +3740,7 @@ function DocPlayerContent({
   } = useDocPlayback(doc, currentTime, activeViewport, renderMode, effectiveTheme);
   const coverBlock = useMemo9(() => {
     const startBlockConfig = doc.startBlock;
+    if (!showCoverSlide) return null;
     if (!startBlockConfig) return null;
     const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
     const layers = expandCoverBlock(startBlockConfig, context);
@@ -3744,24 +3753,43 @@ function DocPlayerContent({
       audioSegment: -1,
       layers
     };
-  }, [doc.startBlock, activeViewport, effectiveTheme]);
+  }, [doc.startBlock, activeViewport, effectiveTheme, showCoverSlide]);
+  const hasManagedCover = !!coverBlock;
+  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState7(false);
+  const slideshowCoverInitKeyRef = useRef7("");
+  useEffect8(() => {
+    const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
+    if (slideshowCoverInitKeyRef.current === initKey) return;
+    slideshowCoverInitKeyRef.current = initKey;
+    if (isSlideshowMode && hasManagedCover && !renderMode) {
+      setSlideshowCoverVisible(true);
+      pause();
+    } else {
+      setSlideshowCoverVisible(false);
+    }
+  }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
   const [coverForced, setCoverForced] = useState7(false);
   const [coverGraceActive, setCoverGraceActive] = useState7(false);
   const coverGraceTimer = useRef7();
   const coverWasShowing = useRef7(false);
   const hasPlayedOnce = useRef7(false);
-  const atRest = !!(coverBlock && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const atRest = !!(coverBlock && !isSlideshowMode && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
   useEffect8(() => {
-    if (isPlaying && coverWasShowing.current && coverBlock && !renderMode) {
+    if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
       setCoverGraceActive(true);
       coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
     }
-  }, [isPlaying, coverBlock, renderMode]);
+  }, [isPlaying, coverBlock, renderMode, isSlideshowMode]);
   useEffect8(() => () => clearTimeout(coverGraceTimer.current), []);
-  const showCoverBlock = !isSlideshowMode && !isLinearMode && coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && slideshowCoverVisible);
+  const showCoverBlock = showVideoCoverBlock || showSlideshowCover;
+  const slideshowHasCover = !!(isSlideshowMode && !renderMode && coverBlock);
+  const slideshowSlideIndex = slideshowHasCover ? slideshowCoverVisible ? 0 : currentBlockIndex + 1 : currentBlockIndex;
+  const slideshowTotalSlides = slideshowHasCover ? expandedBlocks.length + 1 : expandedBlocks.length;
   const hasAutoPlayed = useRef7(false);
   useEffect8(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
@@ -3938,8 +3966,8 @@ function DocPlayerContent({
       isPlaying,
       currentTime,
       totalDuration,
-      currentBlockIndex,
-      totalBlocks: expandedBlocks.length,
+      currentBlockIndex: slideshowSlideIndex,
+      totalBlocks: slideshowTotalSlides,
       docProgress,
       hasCaptions: !!hasCaptions,
       captionsEnabled,
@@ -3947,15 +3975,18 @@ function DocPlayerContent({
       isFullscreen,
       currentSegmentIndex: currentSegment,
       currentSegmentName: segmentTitleMap.get(currentSegment) ?? doc.audio.segments[currentSegment]?.name ?? null,
-      currentBlock: currentBlock ?? null
+      currentBlock: showSlideshowCover ? coverBlock : currentBlock ?? null,
+      currentSlideLabel: showSlideshowCover ? "Cover" : void 0,
+      currentSlideNumber: slideshowHasCover && !showSlideshowCover ? currentBlockIndex + 1 : void 0,
+      totalSlideNumber: slideshowHasCover ? expandedBlocks.length : void 0
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- doc.audio.segments is stable within a given doc
     [
       isPlaying,
       currentTime,
       totalDuration,
-      currentBlockIndex,
-      expandedBlocks.length,
+      slideshowSlideIndex,
+      slideshowTotalSlides,
       docProgress,
       hasCaptions,
       captionsEnabled,
@@ -3963,7 +3994,12 @@ function DocPlayerContent({
       isFullscreen,
       currentSegment,
       segmentTitleMap,
-      currentBlock
+      currentBlock,
+      currentBlockIndex,
+      showSlideshowCover,
+      coverBlock,
+      slideshowHasCover,
+      expandedBlocks.length
     ]
   );
   const playbackActions = useMemo9(
@@ -3980,24 +4016,56 @@ function DocPlayerContent({
   const slideNavActions = useMemo9(
     () => ({
       nextSlide: () => {
+        if (slideshowHasCover && slideshowCoverVisible) {
+          const target = expandedBlocks[0];
+          if (target) {
+            setSlideshowCoverVisible(false);
+            seekTo(target.startTime);
+            pause();
+          }
+          return;
+        }
         if (currentBlockIndex < expandedBlocks.length - 1) {
           const target = expandedBlocks[currentBlockIndex + 1];
           if (target) {
+            setSlideshowCoverVisible(false);
             seekTo(target.startTime);
             pause();
           }
         }
       },
       prevSlide: () => {
+        if (slideshowHasCover && !slideshowCoverVisible && currentBlockIndex <= 0) {
+          setSlideshowCoverVisible(true);
+          seekTo(0);
+          pause();
+          return;
+        }
         if (currentBlockIndex > 0) {
           const target = expandedBlocks[currentBlockIndex - 1];
           if (target) {
+            setSlideshowCoverVisible(false);
             seekTo(target.startTime);
             pause();
           }
         }
       },
       goToSlide: (index) => {
+        if (slideshowHasCover) {
+          if (index === 0) {
+            setSlideshowCoverVisible(true);
+            seekTo(0);
+            pause();
+            return;
+          }
+          const target = expandedBlocks[index - 1];
+          if (target) {
+            setSlideshowCoverVisible(false);
+            seekTo(target.startTime);
+            pause();
+          }
+          return;
+        }
         if (index >= 0 && index < expandedBlocks.length) {
           const target = expandedBlocks[index];
           if (target) {
@@ -4007,14 +4075,14 @@ function DocPlayerContent({
         }
       }
     }),
-    [currentBlockIndex, expandedBlocks, seekTo, pause]
+    [currentBlockIndex, expandedBlocks, seekTo, pause, slideshowHasCover, slideshowCoverVisible]
   );
   const swipeEnabled = isSlideshowMode && !isLinearMode && !renderMode && enableSwipe;
   const swipe = useSlideSwipe({
     enabled: swipeEnabled,
     containerRef,
-    canGoNext: currentBlockIndex < expandedBlocks.length - 1,
-    canGoPrev: currentBlockIndex > 0,
+    canGoNext: slideshowSlideIndex < slideshowTotalSlides - 1,
+    canGoPrev: slideshowSlideIndex > 0,
     onNext: slideNavActions.nextSlide,
     onPrev: slideNavActions.prevSlide
   });
@@ -4068,7 +4136,7 @@ function DocPlayerContent({
       onBlockMarkers?.(blockMarkers);
     }
   }, [blockMarkers, onBlockMarkers]);
-  expandedBlocksLenRef.current = expandedBlocks.length;
+  expandedBlocksLenRef.current = isSlideshowMode ? slideshowTotalSlides : expandedBlocks.length;
   const handleKeyDown = useCallback6(
     (e) => {
       const activeEl = document.activeElement;