@bendyline/squisq-react 2.11.0 → 2.11.2

package/dist/{chunk-G6FVNYNW.js → chunk-4MP7CH3C.js}

@@ -594,7 +594,7 @@ function RichTextLayer({ layer, viewport, blockTime }) {
   };
   const cls = `squisq-rich-text-${cssId(layer.id)}`;
   const listStylePosition = style.textAlign === "center" || style.textAlign === "right" ? "inside" : "outside";
-  const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .7em;padding-left:1.2em;list-style-position:${listStylePosition}}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
+  const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .7em;padding-left:1.2em;list-style-position:${listStylePosition}}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} table{width:100%;margin:.65em 0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.${cls} th,.${cls} td{box-sizing:border-box;padding:.38em .55em;border:1px solid rgba(127,127,127,.55);border-color:color-mix(in srgb,currentColor 32%,transparent);vertical-align:top;white-space:normal;overflow-wrap:anywhere}.${cls} th{background:rgba(127,127,127,.16);background:color-mix(in srgb,currentColor 12%,transparent);font-weight:600}.${cls} tbody tr:nth-child(even){background:rgba(127,127,127,.07);background:color-mix(in srgb,currentColor 5%,transparent)}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
   return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3(
     "foreignObject",
     {

package/dist/{chunk-VKXOZTYP.js → chunk-HK7TY64K.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-R44JIBV3.js";
+} from "./chunk-ZC7LI5UF.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -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,
@@ -3631,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/{chunk-R44JIBV3.js → chunk-ZC7LI5UF.js}

@@ -9,7 +9,7 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-G6FVNYNW.js";
+} from "./chunk-4MP7CH3C.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";

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';
@@ -105,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-VKXOZTYP.js";
+} from "./chunk-HK7TY64K.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -23,7 +23,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-R44JIBV3.js";
+} from "./chunk-ZC7LI5UF.js";
 import {
   ImageLayer,
   MapLayer,
@@ -36,7 +36,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-G6FVNYNW.js";
+} from "./chunk-4MP7CH3C.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";

package/dist/layers/index.js

@@ -8,7 +8,7 @@ import {
   TextLayer,
   TreeLayer,
   VideoLayer
-} from "../chunk-G6FVNYNW.js";
+} from "../chunk-4MP7CH3C.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/page/index.js

@@ -4,8 +4,8 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-R44JIBV3.js";
-import "../chunk-G6FVNYNW.js";
+} from "../chunk-ZC7LI5UF.js";
+import "../chunk-4MP7CH3C.js";
 import "../chunk-TT6ENR6T.js";
 import "../chunk-ZY5N3JPM.js";
 import "../chunk-WLUZTUNZ.js";