@bendyline/squisq-react 1.0.2 → 1.1.0

package/src/standalone-entry.tsx

@@ -53,6 +53,14 @@ export interface MountOptions {
   theme?: Theme;
   /** Auto-play on mount (only for slideshow mode, default: false) */
   autoPlay?: boolean;
+  /**
+   * Enable render mode for headless frame capture.
+   * Exposes window.seekTo(), getDuration(), getCaptions(), etc.
+   * Disables controls and auto-play. Used by Playwright video export.
+   */
+  renderMode?: boolean;
+  /** Caption style: 'standard' or 'social'. Omit or set to undefined for no captions. */
+  captionStyle?: 'standard' | 'social';
 }
 
 // ── CSS Injection ──────────────────────────────────────────────────
@@ -159,7 +167,16 @@ const roots = new WeakMap<Element, Root>();
 export function mount(element: Element, doc: Doc, options: MountOptions = {}): void {
   injectCss();
 
-  const { mode = 'slideshow', basePath = '.', images, audio, autoPlay = false, theme } = options;
+  const {
+    mode = 'slideshow',
+    basePath = '.',
+    images,
+    audio,
+    autoPlay = false,
+    theme,
+    renderMode = false,
+    captionStyle,
+  } = options;
 
   // Rewrite audio URLs if map provided
   const finalDoc = audio ? rewriteAudioUrls(doc, audio) : doc;
@@ -180,9 +197,12 @@ export function mount(element: Element, doc: Doc, options: MountOptions = {}): v
       script: finalDoc,
       basePath,
       displayMode: 'slideshow',
-      autoPlay,
-      showControls: true,
+      autoPlay: renderMode ? false : autoPlay,
+      showControls: !renderMode,
+      renderMode,
       theme,
+      captionsEnabled: !!captionStyle,
+      captionStyle: captionStyle ?? 'standard',
     });
   }
 

package/src/types.ts

@@ -32,6 +32,23 @@ export type ControlsLayout = 'overlay' | 'sidebar' | 'bottom';
  */
 export type DisplayMode = 'video' | 'slideshow' | 'linear';
 
+/**
+ * Caption display style.
+ *
+ * - `'standard'` — Traditional broadcast-style captions: small white text
+ *   on a semi-transparent black badge at the top of the player.
+ * - `'social'` — Social media-style (Instagram/TikTok): large centered words
+ *   showing 3-5 words at a time with the active word highlighted in the
+ *   theme's primary color. Font and colors pulled from the active theme.
+ */
+export type CaptionStyle = 'standard' | 'social';
+
+/**
+ * Caption display mode — combines enable/disable with style selection.
+ * The CC button cycles through: off → standard → social → off.
+ */
+export type CaptionMode = 'off' | 'standard' | 'social';
+
 /** Slide navigation actions for slideshow display mode */
 export interface SlideNavActions {
   /** Navigate to the next slide */
@@ -52,6 +69,8 @@ export interface PlaybackState {
   docProgress: number;
   hasCaptions: boolean;
   captionsEnabled: boolean;
+  /** Current caption display mode (off, standard, social). */
+  captionMode: CaptionMode;
   isFullscreen?: boolean;
   /** Current audio segment index (0-based) */
   currentSegmentIndex: number;
@@ -67,6 +86,8 @@ export interface PlaybackActions {
   restart: () => void;
   seekTo: (time: number) => void;
   setCaptionsEnabled: (enabled: boolean) => void;
+  /** Cycle caption mode: off → standard → social → off */
+  cycleCaptionMode: () => void;
   toggleFullscreen?: () => void;
 }