@bendyline/squisq-react 1.4.2 → 2.0.1

package/src/styles/doc-animations.css

@@ -178,6 +178,26 @@
   }
 }
 
+/* Portrait framing for dominant cover photos. Animating object-position scans
+   exactly across the crop overflow without adding another scale transform. */
+@keyframes portraitCoverPanRight {
+  from {
+    object-position: left center;
+  }
+  to {
+    object-position: right center;
+  }
+}
+
+@keyframes portraitCoverPanLeft {
+  from {
+    object-position: right center;
+  }
+  to {
+    object-position: left center;
+  }
+}
+
 @keyframes slideInLeft {
   from {
     transform: translateX(-100%);
@@ -2170,6 +2190,18 @@
     forwards;
 }
 
+.squisq-image--portrait-pan-right {
+  animation: portraitCoverPanRight var(--portrait-pan-duration, 12s)
+    var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) forwards;
+  will-change: object-position;
+}
+
+.squisq-image--portrait-pan-left {
+  animation: portraitCoverPanLeft var(--portrait-pan-duration, 12s)
+    var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) forwards;
+  will-change: object-position;
+}
+
 .anim-typewriter {
   animation: typewriter var(--anim-duration, 2s) var(--anim-easing, steps(40, end))
     var(--anim-delay, 0s) forwards;
@@ -2369,6 +2401,10 @@
   .anim-slowZoom-out,
   .anim-slowZoom-panLeft,
   .anim-slowZoom-panRight,
+  .anim-panLeft,
+  .anim-panRight,
+  .squisq-image--portrait-pan-left,
+  .squisq-image--portrait-pan-right,
   .anim-drift {
     animation: none;
   }

package/src/types.ts

@@ -33,8 +33,12 @@ export type ControlsLayout = 'overlay' | 'sidebar' | 'bottom';
  *   `markdownDocToPlainHtml` export produces. No SquisqPlayer, no SVG
  *   cards — just `<h1>`/`<p>`/`<ul>` etc. inside a sandboxed iframe.
  *   Use when you want a WYSIWYG view of the simple HTML export.
+ * - `'narrate'` — Teleprompter/performance surface. DocPlayer does not
+ *   implement this mode; it is owned by the editor package
+ *   (`@bendyline/squisq-editor-react`), which renders its own
+ *   voice-paced teleprompter view for it.
  */
-export type DisplayMode = 'video' | 'slideshow' | 'linear' | 'page';
+export type DisplayMode = 'video' | 'slideshow' | 'linear' | 'page' | 'narrate';
 
 /**
  * Caption display style.
@@ -68,6 +72,8 @@ export interface PlaybackState {
   isPlaying: boolean;
   currentTime: number;
   totalDuration: number;
+  /** Whether the managed cover is the visual currently shown. */
+  isCoverVisible?: boolean;
   currentBlockIndex: number;
   totalBlocks: number;
   docProgress: number;
@@ -146,15 +152,15 @@ export interface RenderChapterInfo {
 }
 
 /**
- * API surface exposed on `window` in render mode and debug mode.
- * Used by Playwright for video export and by ?debug=true for testing.
+ * Instance-scoped API created in render mode and debug mode.
+ * React hosts receive it via `DocPlayer.onRenderAPIReady`; standalone hosts
+ * receive it from their mount handle.
  *
  * @example
  * ```ts
- * // In Playwright:
- * const w = window as unknown as SquisqWindow;
- * await w.seekTo!(5.0);
- * const blocks = w.getBlocks!();
+ * const handle = SquisqPlayer.getHandle(rootElement);
+ * const api = await handle?.renderAPI;
+ * await api?.seekTo(5.0);
  * ```
  */
 export interface SquisqRenderAPI {
@@ -169,12 +175,6 @@ export interface SquisqRenderAPI {
   hasCoverBlock: () => boolean;
 }
 
-/**
- * Window augmented with optional SquisqRenderAPI properties.
- * Each property is optional because they're only present in render/debug mode.
- */
-export type SquisqWindow = Window & typeof globalThis & Partial<SquisqRenderAPI>;
-
 /** Format time in seconds to MM:SS string */
 export function formatTime(seconds: number): string {
   const mins = Math.floor(seconds / 60);