@bendyline/squisq-react 0.1.3 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/dist/BlockRenderer.d.ts +37 -0
  2. package/dist/BlockRenderer.d.ts.map +1 -0
  3. package/dist/BlockRenderer.js +51 -0
  4. package/dist/BlockRenderer.js.map +1 -0
  5. package/dist/CaptionOverlay.d.ts +24 -0
  6. package/dist/CaptionOverlay.d.ts.map +1 -0
  7. package/dist/CaptionOverlay.js +40 -0
  8. package/dist/CaptionOverlay.js.map +1 -0
  9. package/dist/DocControlsBottom.d.ts +28 -0
  10. package/dist/DocControlsBottom.d.ts.map +1 -0
  11. package/dist/DocControlsBottom.js +23 -0
  12. package/dist/DocControlsBottom.js.map +1 -0
  13. package/dist/DocControlsOverlay.d.ts +28 -0
  14. package/dist/DocControlsOverlay.d.ts.map +1 -0
  15. package/dist/DocControlsOverlay.js +75 -0
  16. package/dist/DocControlsOverlay.js.map +1 -0
  17. package/dist/DocControlsSidebar.d.ts +27 -0
  18. package/dist/DocControlsSidebar.d.ts.map +1 -0
  19. package/dist/DocControlsSidebar.js +6 -0
  20. package/dist/DocControlsSidebar.js.map +1 -0
  21. package/dist/DocControlsSlideshow.d.ts +20 -0
  22. package/dist/DocControlsSlideshow.d.ts.map +1 -0
  23. package/dist/DocControlsSlideshow.js +69 -0
  24. package/dist/DocControlsSlideshow.js.map +1 -0
  25. package/dist/DocPlayer.d.ts +87 -0
  26. package/dist/DocPlayer.d.ts.map +1 -0
  27. package/dist/DocPlayer.js +604 -0
  28. package/dist/DocPlayer.js.map +1 -0
  29. package/dist/DocPlayerWithSidebar.d.ts +41 -0
  30. package/dist/DocPlayerWithSidebar.d.ts.map +1 -0
  31. package/dist/DocPlayerWithSidebar.js +68 -0
  32. package/dist/DocPlayerWithSidebar.js.map +1 -0
  33. package/dist/DocProgressBar.d.ts +31 -0
  34. package/dist/DocProgressBar.d.ts.map +1 -0
  35. package/dist/DocProgressBar.js +122 -0
  36. package/dist/DocProgressBar.js.map +1 -0
  37. package/dist/LinearDocView.d.ts +47 -0
  38. package/dist/LinearDocView.d.ts.map +1 -0
  39. package/dist/LinearDocView.js +184 -0
  40. package/dist/LinearDocView.js.map +1 -0
  41. package/dist/MarkdownRenderer.d.ts +32 -0
  42. package/dist/MarkdownRenderer.d.ts.map +1 -0
  43. package/dist/MarkdownRenderer.js +133 -0
  44. package/dist/MarkdownRenderer.js.map +1 -0
  45. package/dist/__tests__/BlockRenderer.test.d.ts +2 -0
  46. package/dist/__tests__/BlockRenderer.test.d.ts.map +1 -0
  47. package/dist/__tests__/BlockRenderer.test.js +82 -0
  48. package/dist/__tests__/BlockRenderer.test.js.map +1 -0
  49. package/dist/__tests__/DocControlsSlideshow.test.d.ts +2 -0
  50. package/dist/__tests__/DocControlsSlideshow.test.d.ts.map +1 -0
  51. package/dist/__tests__/DocControlsSlideshow.test.js +88 -0
  52. package/dist/__tests__/DocControlsSlideshow.test.js.map +1 -0
  53. package/dist/__tests__/LinearDocView.test.d.ts +2 -0
  54. package/dist/__tests__/LinearDocView.test.d.ts.map +1 -0
  55. package/dist/__tests__/LinearDocView.test.js +160 -0
  56. package/dist/__tests__/LinearDocView.test.js.map +1 -0
  57. package/dist/__tests__/MarkdownRenderer.test.d.ts +2 -0
  58. package/dist/__tests__/MarkdownRenderer.test.d.ts.map +1 -0
  59. package/dist/__tests__/MarkdownRenderer.test.js +208 -0
  60. package/dist/__tests__/MarkdownRenderer.test.js.map +1 -0
  61. package/dist/__tests__/exports.test.d.ts +2 -0
  62. package/dist/__tests__/exports.test.d.ts.map +1 -0
  63. package/dist/__tests__/exports.test.js +48 -0
  64. package/dist/__tests__/exports.test.js.map +1 -0
  65. package/dist/hooks/AudioProvider.d.ts +71 -0
  66. package/dist/hooks/AudioProvider.d.ts.map +1 -0
  67. package/dist/hooks/AudioProvider.js +52 -0
  68. package/dist/hooks/AudioProvider.js.map +1 -0
  69. package/dist/hooks/MediaContext.d.ts +35 -0
  70. package/dist/hooks/MediaContext.d.ts.map +1 -0
  71. package/dist/hooks/MediaContext.js +66 -0
  72. package/dist/hooks/MediaContext.js.map +1 -0
  73. package/dist/hooks/index.d.ts +6 -0
  74. package/dist/hooks/index.d.ts.map +1 -0
  75. package/dist/hooks/index.js +5 -0
  76. package/dist/hooks/index.js.map +1 -0
  77. package/dist/hooks/useAudioSync.d.ts +18 -0
  78. package/dist/hooks/useAudioSync.d.ts.map +1 -0
  79. package/dist/hooks/useAudioSync.js +338 -0
  80. package/dist/hooks/useAudioSync.js.map +1 -0
  81. package/dist/hooks/useDocPlayback.d.ts +47 -0
  82. package/dist/hooks/useDocPlayback.d.ts.map +1 -0
  83. package/dist/hooks/useDocPlayback.js +176 -0
  84. package/dist/hooks/useDocPlayback.js.map +1 -0
  85. package/dist/hooks/useViewportOrientation.d.ts +31 -0
  86. package/dist/hooks/useViewportOrientation.d.ts.map +1 -0
  87. package/dist/hooks/useViewportOrientation.js +92 -0
  88. package/dist/hooks/useViewportOrientation.js.map +1 -0
  89. package/dist/index.d.ts +25 -563
  90. package/dist/index.d.ts.map +1 -0
  91. package/dist/index.js +26 -3179
  92. package/dist/index.js.map +1 -1
  93. package/dist/layers/ImageLayer.d.ts +23 -0
  94. package/dist/layers/ImageLayer.d.ts.map +1 -0
  95. package/dist/layers/ImageLayer.js +104 -0
  96. package/dist/layers/ImageLayer.js.map +1 -0
  97. package/dist/layers/MapLayer.d.ts +29 -0
  98. package/dist/layers/MapLayer.d.ts.map +1 -0
  99. package/dist/layers/MapLayer.js +97 -0
  100. package/dist/layers/MapLayer.js.map +1 -0
  101. package/dist/layers/ShapeLayer.d.ts +20 -0
  102. package/dist/layers/ShapeLayer.d.ts.map +1 -0
  103. package/dist/layers/ShapeLayer.js +35 -0
  104. package/dist/layers/ShapeLayer.js.map +1 -0
  105. package/dist/layers/TextLayer.d.ts +23 -0
  106. package/dist/layers/TextLayer.d.ts.map +1 -0
  107. package/dist/layers/TextLayer.js +126 -0
  108. package/dist/layers/TextLayer.js.map +1 -0
  109. package/dist/layers/VideoLayer.d.ts +40 -0
  110. package/dist/layers/VideoLayer.d.ts.map +1 -0
  111. package/dist/layers/VideoLayer.js +105 -0
  112. package/dist/layers/VideoLayer.js.map +1 -0
  113. package/dist/layers/index.d.ts +6 -0
  114. package/dist/layers/index.d.ts.map +1 -0
  115. package/dist/layers/index.js +6 -0
  116. package/dist/layers/index.js.map +1 -0
  117. package/dist/squisq-player.global.js +1 -1
  118. package/dist/standalone-entry.d.ts +61 -0
  119. package/dist/standalone-entry.d.ts.map +1 -0
  120. package/dist/standalone-entry.js +169 -0
  121. package/dist/standalone-entry.js.map +1 -0
  122. package/dist/standalone-source.js +1 -1
  123. package/dist/types.d.ts +131 -0
  124. package/dist/types.d.ts.map +1 -0
  125. package/dist/types.js +21 -0
  126. package/dist/types.js.map +1 -0
  127. package/dist/utils/animationUtils.d.ts +8 -0
  128. package/dist/utils/animationUtils.d.ts.map +1 -0
  129. package/dist/utils/animationUtils.js +8 -0
  130. package/dist/utils/animationUtils.js.map +1 -0
  131. package/dist/utils/layerUtils.d.ts +17 -0
  132. package/dist/utils/layerUtils.d.ts.map +1 -0
  133. package/dist/utils/layerUtils.js +37 -0
  134. package/dist/utils/layerUtils.js.map +1 -0
  135. package/dist/utils/mapTileUtils.d.ts +105 -0
  136. package/dist/utils/mapTileUtils.d.ts.map +1 -0
  137. package/dist/utils/mapTileUtils.js +268 -0
  138. package/dist/utils/mapTileUtils.js.map +1 -0
  139. package/package.json +3 -4
@@ -0,0 +1,37 @@
1
+ /**
2
+ * BlockRenderer Component
3
+ *
4
+ * Renders a single block as an SVG element with all its layers.
5
+ * Each layer is rendered back-to-front (first layer is background).
6
+ * Handles positioning, animations, and transitions.
7
+ */
8
+ import type { Block } from '@bendyline/squisq/schemas';
9
+ /** Default viewport dimensions (1080p landscape) - for backwards compatibility */
10
+ export declare const VIEWPORT: {
11
+ width: number;
12
+ height: number;
13
+ };
14
+ /** Viewport configuration type */
15
+ export interface ViewportDimensions {
16
+ width: number;
17
+ height: number;
18
+ }
19
+ interface BlockRendererProps {
20
+ /** The block to render */
21
+ block: Block;
22
+ /** Current time relative to block start (seconds) */
23
+ blockTime: number;
24
+ /** Base path for resolving media URLs */
25
+ basePath: string;
26
+ /** Whether this block is entering (for transition) */
27
+ isEntering?: boolean;
28
+ /** Whether this block is exiting (for transition) */
29
+ isExiting?: boolean;
30
+ /** Viewport dimensions (defaults to 1920x1080 landscape) */
31
+ viewport?: ViewportDimensions;
32
+ /** Whether the doc is currently playing (controls video playback) */
33
+ isPlaying?: boolean;
34
+ }
35
+ export declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, viewport, isPlaying, }: BlockRendererProps): import("react/jsx-runtime").JSX.Element;
36
+ export default BlockRenderer;
37
+ //# sourceMappingURL=BlockRenderer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BlockRenderer.d.ts","sourceRoot":"","sources":["../src/BlockRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAS,MAAM,2BAA2B,CAAC;AAQ9D,kFAAkF;AAElF,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,kCAAkC;AAClC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC1B,0BAA0B;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAkB,EAClB,SAAiB,EACjB,QAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,2CAgDpB;AA2CD,eAAe,aAAa,CAAC"}
@@ -0,0 +1,51 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ImageLayer } from './layers/ImageLayer';
3
+ import { TextLayer } from './layers/TextLayer';
4
+ import { ShapeLayer } from './layers/ShapeLayer';
5
+ import { MapLayer } from './layers/MapLayer';
6
+ import { VideoLayer } from './layers/VideoLayer';
7
+ import { getTransitionClass } from './utils/animationUtils';
8
+ /** Default viewport dimensions (1080p landscape) - for backwards compatibility */
9
+ // eslint-disable-next-line react-refresh/only-export-components
10
+ export const VIEWPORT = {
11
+ width: 1920,
12
+ height: 1080,
13
+ };
14
+ export function BlockRenderer({ block, blockTime, basePath, isEntering = false, isExiting = false, viewport = VIEWPORT, isPlaying, }) {
15
+ // Build transition class and inline style for dynamic duration
16
+ let transitionClass = '';
17
+ const transitionStyle = {};
18
+ if (block.transition && isEntering) {
19
+ transitionClass = getTransitionClass(block.transition.type, true);
20
+ transitionStyle['--transition-duration'] = `${block.transition.duration}s`;
21
+ }
22
+ else if (block.transition && isExiting) {
23
+ transitionClass = getTransitionClass(block.transition.type, false);
24
+ transitionStyle['--transition-duration'] = `${block.transition.duration}s`;
25
+ }
26
+ // Unique clip path ID per block to avoid conflicts when multiple blocks render simultaneously
27
+ const clipId = `vb-clip-${block.id}`;
28
+ return (_jsxs("svg", { className: `block-svg ${transitionClass}`, style: transitionStyle, viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "xMidYMid meet", overflow: "hidden", "data-block-id": block.id, children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }), _jsx("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => (_jsx(LayerRenderer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime, isPlaying: isPlaying }, layer.id))) })] }));
29
+ }
30
+ /**
31
+ * Dispatch to the appropriate layer component based on type.
32
+ */
33
+ function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
34
+ switch (layer.type) {
35
+ case 'image':
36
+ return (_jsx(ImageLayer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime }));
37
+ case 'text':
38
+ return _jsx(TextLayer, { layer: layer, viewport: viewport, blockTime: blockTime });
39
+ case 'shape':
40
+ return _jsx(ShapeLayer, { layer: layer, viewport: viewport, blockTime: blockTime });
41
+ case 'map':
42
+ return (_jsx(MapLayer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime }));
43
+ case 'video':
44
+ return (_jsx(VideoLayer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime, isPlaying: isPlaying }));
45
+ default:
46
+ console.warn(`Unknown layer type: ${layer.type}`);
47
+ return null;
48
+ }
49
+ }
50
+ export default BlockRenderer;
51
+ //# sourceMappingURL=BlockRenderer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BlockRenderer.js","sourceRoot":"","sources":["../src/BlockRenderer.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,24 @@
1
+ /**
2
+ * CaptionOverlay Component
3
+ *
4
+ * Displays closed captions synchronized with audio playback.
5
+ * Captions cross-fade smoothly using CSS transitions on a single
6
+ * persistent element (no mount/unmount flicker).
7
+ *
8
+ * The captions are generated by the postprocess-doc command based
9
+ * on article text and audio segment timing.
10
+ */
11
+ import type { CaptionTrack } from '@bendyline/squisq/schemas';
12
+ interface CaptionOverlayProps {
13
+ /** Caption track with timestamped phrases */
14
+ captions: CaptionTrack | undefined;
15
+ /** Current playback time in seconds */
16
+ currentTime: number;
17
+ /** Whether captions are enabled */
18
+ enabled?: boolean;
19
+ /** Font size in pixels (default: 16) */
20
+ fontSize?: number;
21
+ }
22
+ export declare function CaptionOverlay({ captions, currentTime, enabled, fontSize, }: CaptionOverlayProps): import("react/jsx-runtime").JSX.Element;
23
+ export default CaptionOverlay;
24
+ //# sourceMappingURL=CaptionOverlay.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CaptionOverlay.d.ts","sourceRoot":"","sources":["../src/CaptionOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAG9D,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAc,EACd,QAAa,GACd,EAAE,mBAAmB,2CAqDrB;AAED,eAAe,cAAc,CAAC"}
@@ -0,0 +1,40 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { getCaptionAtTime } from '@bendyline/squisq/schemas';
3
+ export function CaptionOverlay({ captions, currentTime, enabled = true, fontSize = 16, }) {
4
+ // Derive caption directly from currentTime -- pure computation, no hooks.
5
+ // This avoids race conditions between timeupdate events and async state updates.
6
+ const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
7
+ const captionText = phrase?.text ?? null;
8
+ return (_jsx("div", { className: "caption-overlay", style: {
9
+ position: 'absolute',
10
+ top: '6px',
11
+ left: '50%',
12
+ transform: 'translateX(-50%)',
13
+ zIndex: 50,
14
+ pointerEvents: 'none',
15
+ maxWidth: '100%',
16
+ width: '100%',
17
+ textAlign: 'center',
18
+ opacity: captionText ? 1 : 0,
19
+ transition: 'opacity 0.15s ease-in-out',
20
+ padding: '0 4px',
21
+ boxSizing: 'border-box',
22
+ }, children: captionText && (_jsx("div", { style: {
23
+ display: 'inline-block',
24
+ padding: '3px 10px',
25
+ background: 'rgba(0, 0, 0, 0.65)',
26
+ borderRadius: '4px',
27
+ backdropFilter: 'blur(4px)',
28
+ }, children: _jsx("span", { style: {
29
+ color: '#ffffff',
30
+ fontSize: `${fontSize}px`,
31
+ fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
32
+ fontWeight: 500,
33
+ lineHeight: 1.25,
34
+ textShadow: '0 1px 3px rgba(0,0,0,0.5)',
35
+ whiteSpace: 'pre-wrap',
36
+ wordWrap: 'break-word',
37
+ }, children: captionText }) })) }));
38
+ }
39
+ export default CaptionOverlay;
40
+ //# sourceMappingURL=CaptionOverlay.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CaptionOverlay.js","sourceRoot":"","sources":["../src/CaptionOverlay.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAa7D,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,EAAE,GACO;IACpB,0EAA0E;IAC1E,iFAAiF;IACjF,MAAM,MAAM,GAAG,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpF,MAAM,WAAW,GAAG,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC;IAEzC,OAAO,CACL,cACE,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,kBAAkB;YAC7B,MAAM,EAAE,EAAE;YACV,aAAa,EAAE,MAAM;YACrB,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5B,UAAU,EAAE,2BAA2B;YACvC,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,YAAY;SACxB,YAEA,WAAW,IAAI,CACd,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,cAAc;gBACvB,OAAO,EAAE,UAAU;gBACnB,UAAU,EAAE,qBAAqB;gBACjC,YAAY,EAAE,KAAK;gBACnB,cAAc,EAAE,WAAW;aAC5B,YAED,eACE,KAAK,EAAE;oBACL,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,GAAG,QAAQ,IAAI;oBACzB,UAAU,EAAE,yCAAyC;oBACrD,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,2BAA2B;oBACvC,UAAU,EAAE,UAAU;oBACtB,QAAQ,EAAE,YAAY;iBACvB,YAEA,WAAW,GACP,GACH,CACP,GACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,cAAc,CAAC"}
@@ -0,0 +1,28 @@
1
+ /**
2
+ * DocControlsBottom Component
3
+ *
4
+ * Horizontal control strip that renders below the doc player video.
5
+ * An alternative to the overlay for landscape mode -- controls sit in a
6
+ * separate bar below the video instead of overlapping the content.
7
+ *
8
+ * Contains: restart, play/pause, time display, progress bar, segment
9
+ * indicator, CC toggle. Same controls as the overlay but in an external bar.
10
+ *
11
+ * Related Files:
12
+ * - DocControlsOverlay.tsx -- Overlay variant (default landscape)
13
+ * - DocControlsSidebar.tsx -- Sidebar variant (portrait)
14
+ * - DocProgressBar.tsx -- Shared progress bar component
15
+ * - types.ts -- PlaybackState/PlaybackActions interfaces
16
+ */
17
+ import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
18
+ import type { Block } from '@bendyline/squisq/schemas';
19
+ interface DocControlsBottomProps {
20
+ state: PlaybackState;
21
+ actions: PlaybackActions;
22
+ blockMarkers: BlockMarker[];
23
+ expandedBlocks: Block[];
24
+ getBlockTitle?: (block: Block) => string;
25
+ }
26
+ export declare function DocControlsBottom({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }: DocControlsBottomProps): import("react/jsx-runtime").JSX.Element;
27
+ export {};
28
+ //# sourceMappingURL=DocControlsBottom.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsBottom.d.ts","sourceRoot":"","sources":["../src/DocControlsBottom.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;CAC1C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACd,EAAE,sBAAsB,2CAkExB"}
@@ -0,0 +1,23 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ /**
3
+ * DocControlsBottom Component
4
+ *
5
+ * Horizontal control strip that renders below the doc player video.
6
+ * An alternative to the overlay for landscape mode -- controls sit in a
7
+ * separate bar below the video instead of overlapping the content.
8
+ *
9
+ * Contains: restart, play/pause, time display, progress bar, segment
10
+ * indicator, CC toggle. Same controls as the overlay but in an external bar.
11
+ *
12
+ * Related Files:
13
+ * - DocControlsOverlay.tsx -- Overlay variant (default landscape)
14
+ * - DocControlsSidebar.tsx -- Sidebar variant (portrait)
15
+ * - DocProgressBar.tsx -- Shared progress bar component
16
+ * - types.ts -- PlaybackState/PlaybackActions interfaces
17
+ */
18
+ import { DocProgressBar } from './DocProgressBar';
19
+ import { formatTime } from './types';
20
+ export function DocControlsBottom({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }) {
21
+ return (_jsxs("div", { className: "doc-controls-bottom", children: [_jsx("button", { className: "bottom-ctrl-btn", onClick: actions.restart, title: "Restart", "aria-label": "Restart from beginning", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }) }), _jsx("button", { className: "bottom-ctrl-btn bottom-play-btn", onClick: actions.toggle, "aria-label": state.isPlaying ? 'Pause' : 'Play', children: state.isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { className: "bottom-time", children: [formatTime(state.currentTime), " / ", formatTime(state.totalDuration)] }), _jsx(DocProgressBar, { state: state, actions: actions, blockMarkers: blockMarkers, expandedBlocks: expandedBlocks, getBlockTitle: getBlockTitle }), _jsxs("span", { className: "bottom-segment", children: [state.currentBlockIndex + 1, "/", state.totalBlocks] }), state.hasCaptions && (_jsx("button", { className: `bottom-ctrl-btn ${state.captionsEnabled ? 'bottom-ctrl-btn--active' : ''}`, onClick: () => actions.setCaptionsEnabled(!state.captionsEnabled), title: state.captionsEnabled ? 'Hide captions' : 'Show captions', "aria-label": state.captionsEnabled ? 'Hide captions' : 'Show captions', children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }) }))] }));
22
+ }
23
+ //# sourceMappingURL=DocControlsBottom.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsBottom.js","sourceRoot":"","sources":["../src/DocControlsBottom.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACU;IACvB,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAElC,iBACE,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,KAAK,EAAC,SAAS,gBACJ,wBAAwB,YAEnC,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,uGAAuG,GAAG,GAC9G,GACC,EAGT,iBACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,CAAC,MAAM,gBACX,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAE7C,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,iCAAiC,GAAG,GACxC,CACP,CAAC,CAAC,CAAC,CACF,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,eAAe,GAAG,GACtB,CACP,GACM,EAGT,gBAAM,SAAS,EAAC,aAAa,aAC1B,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,SAAK,UAAU,CAAC,KAAK,CAAC,aAAa,CAAC,IAC7D,EAGP,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,GAC5B,EAGF,gBAAM,SAAS,EAAC,gBAAgB,aAC7B,KAAK,CAAC,iBAAiB,GAAG,CAAC,OAAG,KAAK,CAAC,WAAW,IAC3C,EAGN,KAAK,CAAC,WAAW,IAAI,CACpB,iBACE,SAAS,EAAE,mBAAmB,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,EACjE,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,gBACpD,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,YAErE,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,qPAAqP,GAAG,GAC5P,GACC,CACV,IACG,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,28 @@
1
+ /**
2
+ * DocControlsOverlay Component
3
+ *
4
+ * The default overlay controls that render at the bottom of the doc player
5
+ * video with a gradient background. Contains all playback controls: restart,
6
+ * play/pause, time display, progress bar with block markers, segment indicator,
7
+ * and caption toggle.
8
+ *
9
+ * This is the original control layout extracted from DocPlayer. It's used
10
+ * for the 'overlay' controls layout mode (Flow mode, landscape default).
11
+ *
12
+ * Related Files:
13
+ * - DocPlayer.tsx -- Parent component
14
+ * - DocProgressBar.tsx -- Progress bar sub-component
15
+ * - types.ts -- Shared type definitions
16
+ */
17
+ import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
18
+ import type { Block } from '@bendyline/squisq/schemas';
19
+ interface DocControlsOverlayProps {
20
+ state: PlaybackState;
21
+ actions: PlaybackActions;
22
+ blockMarkers: BlockMarker[];
23
+ expandedBlocks: Block[];
24
+ getBlockTitle?: (block: Block) => string;
25
+ }
26
+ export declare function DocControlsOverlay({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }: DocControlsOverlayProps): import("react/jsx-runtime").JSX.Element;
27
+ export {};
28
+ //# sourceMappingURL=DocControlsOverlay.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsOverlay.d.ts","sourceRoot":"","sources":["../src/DocControlsOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACd,EAAE,uBAAuB,2CA6IzB"}
@@ -0,0 +1,75 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ /**
3
+ * DocControlsOverlay Component
4
+ *
5
+ * The default overlay controls that render at the bottom of the doc player
6
+ * video with a gradient background. Contains all playback controls: restart,
7
+ * play/pause, time display, progress bar with block markers, segment indicator,
8
+ * and caption toggle.
9
+ *
10
+ * This is the original control layout extracted from DocPlayer. It's used
11
+ * for the 'overlay' controls layout mode (Flow mode, landscape default).
12
+ *
13
+ * Related Files:
14
+ * - DocPlayer.tsx -- Parent component
15
+ * - DocProgressBar.tsx -- Progress bar sub-component
16
+ * - types.ts -- Shared type definitions
17
+ */
18
+ import { DocProgressBar } from './DocProgressBar';
19
+ import { formatTime } from './types';
20
+ export function DocControlsOverlay({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }) {
21
+ return (_jsxs("div", { className: "doc-player__controls", style: {
22
+ position: 'absolute',
23
+ bottom: 0,
24
+ left: 0,
25
+ right: 0,
26
+ padding: '12px 16px',
27
+ background: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
28
+ display: 'flex',
29
+ alignItems: 'center',
30
+ gap: '8px',
31
+ zIndex: 100,
32
+ }, children: [_jsx("button", { onClick: actions.restart, style: {
33
+ background: 'none',
34
+ border: 'none',
35
+ color: 'rgba(255,255,255,0.7)',
36
+ cursor: 'pointer',
37
+ padding: '8px',
38
+ fontSize: '14px',
39
+ display: 'flex',
40
+ alignItems: 'center',
41
+ }, title: "Restart", "aria-label": "Restart from beginning", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }) }), _jsx("button", { onClick: actions.toggle, style: {
42
+ background: 'rgba(255,255,255,0.2)',
43
+ border: 'none',
44
+ borderRadius: '50%',
45
+ color: 'white',
46
+ cursor: 'pointer',
47
+ padding: '10px',
48
+ fontSize: '16px',
49
+ display: 'flex',
50
+ alignItems: 'center',
51
+ justifyContent: 'center',
52
+ width: '40px',
53
+ height: '40px',
54
+ }, "aria-label": state.isPlaying ? 'Pause' : 'Play', children: state.isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { style: { color: 'white', fontSize: '12px', minWidth: '80px', fontFamily: 'monospace' }, children: [formatTime(state.currentTime), " / ", formatTime(state.totalDuration)] }), _jsx(DocProgressBar, { state: state, actions: actions, blockMarkers: blockMarkers, expandedBlocks: expandedBlocks, getBlockTitle: getBlockTitle }), _jsxs("span", { style: { color: 'rgba(255,255,255,0.5)', fontSize: '11px', whiteSpace: 'nowrap' }, children: [state.currentBlockIndex + 1, "/", state.totalBlocks] }), state.hasCaptions && (_jsx("button", { onClick: () => actions.setCaptionsEnabled(!state.captionsEnabled), style: {
55
+ background: state.captionsEnabled ? 'rgba(255,255,255,0.2)' : 'none',
56
+ border: 'none',
57
+ color: state.captionsEnabled ? 'white' : 'rgba(255,255,255,0.5)',
58
+ cursor: 'pointer',
59
+ padding: '8px',
60
+ fontSize: '12px',
61
+ display: 'flex',
62
+ alignItems: 'center',
63
+ borderRadius: '4px',
64
+ }, title: state.captionsEnabled ? 'Hide captions' : 'Show captions', "aria-label": state.captionsEnabled ? 'Hide captions' : 'Show captions', children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }) })), actions.toggleFullscreen && (_jsx("button", { onClick: actions.toggleFullscreen, style: {
65
+ background: state.isFullscreen ? 'rgba(255,255,255,0.2)' : 'none',
66
+ border: 'none',
67
+ color: state.isFullscreen ? 'white' : 'rgba(255,255,255,0.5)',
68
+ cursor: 'pointer',
69
+ padding: '8px',
70
+ display: 'flex',
71
+ alignItems: 'center',
72
+ borderRadius: '4px',
73
+ }, title: state.isFullscreen ? 'Exit fullscreen (F)' : 'Fullscreen (F)', "aria-label": state.isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', children: state.isFullscreen ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })) }))] }));
74
+ }
75
+ //# sourceMappingURL=DocControlsOverlay.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsOverlay.js","sourceRoot":"","sources":["../src/DocControlsOverlay.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,27 @@
1
+ /**
2
+ * DocControlsSidebar Component
3
+ *
4
+ * Vertical control strip that renders alongside the doc player video.
5
+ * Used in portrait orientation to eliminate black bars -- controls sit in a
6
+ * "tab" to the right of the 9:16 video instead of overlaying it.
7
+ *
8
+ * Contains: restart, play/pause, time display, segment indicator, CC toggle.
9
+ * Does NOT contain the scrubber/progress bar (that stays in the video via
10
+ * DocPlayer's showScrubber prop).
11
+ *
12
+ * The sidebar stretches to match the full height of the video and has rounded
13
+ * corners on the right side to create a connected "tab" appearance.
14
+ *
15
+ * Related Files:
16
+ * - DocPlayerWithSidebar.tsx -- Wrapper that composes player + sidebar
17
+ * - DocPlayer.tsx -- Core player (renders with showScrubber=true)
18
+ * - types.ts -- PlaybackState/PlaybackActions interfaces
19
+ */
20
+ import type { PlaybackState, PlaybackActions } from './types';
21
+ interface DocControlsSidebarProps {
22
+ state: PlaybackState;
23
+ actions: PlaybackActions;
24
+ }
25
+ export declare function DocControlsSidebar({ state, actions }: DocControlsSidebarProps): import("react/jsx-runtime").JSX.Element;
26
+ export {};
27
+ //# sourceMappingURL=DocControlsSidebar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsSidebar.d.ts","sourceRoot":"","sources":["../src/DocControlsSidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG9D,UAAU,uBAAuB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,uBAAuB,2CA8E7E"}
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { formatTime } from './types';
3
+ export function DocControlsSidebar({ state, actions }) {
4
+ return (_jsxs("div", { className: "doc-controls-sidebar", children: [_jsx("button", { className: "sidebar-ctrl-btn", onClick: actions.restart, title: "Restart", "aria-label": "Restart from beginning", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }) }), _jsx("button", { className: "sidebar-ctrl-btn sidebar-play-btn", onClick: actions.toggle, "aria-label": state.isPlaying ? 'Pause' : 'Play', children: state.isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: _jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("div", { className: "sidebar-time", children: [_jsx("div", { children: formatTime(state.currentTime) }), _jsx("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })] }), _jsxs("div", { className: "sidebar-segment", children: [state.currentBlockIndex + 1, "/", state.totalBlocks] }), state.hasCaptions && (_jsx("button", { className: `sidebar-ctrl-btn ${state.captionsEnabled ? 'sidebar-ctrl-btn--active' : ''}`, onClick: () => actions.setCaptionsEnabled(!state.captionsEnabled), title: state.captionsEnabled ? 'Hide captions' : 'Show captions', "aria-label": state.captionsEnabled ? 'Hide captions' : 'Show captions', children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }) })), actions.toggleFullscreen && (_jsx("button", { className: `sidebar-ctrl-btn ${state.isFullscreen ? 'sidebar-ctrl-btn--active' : ''}`, onClick: actions.toggleFullscreen, title: state.isFullscreen ? 'Exit fullscreen (F)' : 'Fullscreen (F)', "aria-label": state.isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', children: state.isFullscreen ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })) }))] }));
5
+ }
6
+ //# sourceMappingURL=DocControlsSidebar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsSidebar.js","sourceRoot":"","sources":["../src/DocControlsSidebar.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,20 @@
1
+ /**
2
+ * DocControlsSlideshow Component
3
+ *
4
+ * Compact slide navigation controls for the DocPlayer slideshow display mode.
5
+ * Renders in the lower-right corner with previous / slide counter / next buttons,
6
+ * similar to PowerPoint/Keynote presentation navigation.
7
+ *
8
+ * Related Files:
9
+ * - DocPlayer.tsx — Parent component (renders this when displayMode='slideshow')
10
+ * - DocControlsOverlay.tsx — Video-mode controls (overlay layout)
11
+ * - types.ts — Shared type definitions
12
+ */
13
+ import type { PlaybackState, SlideNavActions } from './types';
14
+ interface DocControlsSlideshowProps {
15
+ state: PlaybackState;
16
+ slideNav: SlideNavActions;
17
+ }
18
+ export declare function DocControlsSlideshow({ state, slideNav }: DocControlsSlideshowProps): import("react/jsx-runtime").JSX.Element;
19
+ export {};
20
+ //# sourceMappingURL=DocControlsSlideshow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsSlideshow.d.ts","sourceRoot":"","sources":["../src/DocControlsSlideshow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE9D,UAAU,yBAAyB;IACjC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CA+GlF"}
@@ -0,0 +1,69 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export function DocControlsSlideshow({ state, slideNav }) {
3
+ const { currentBlockIndex, totalBlocks } = state;
4
+ const isFirst = currentBlockIndex <= 0;
5
+ const isLast = currentBlockIndex >= totalBlocks - 1;
6
+ return (_jsxs("div", { className: "doc-controls-slideshow", "data-testid": "slideshow-controls", style: {
7
+ position: 'absolute',
8
+ bottom: '16px',
9
+ right: '16px',
10
+ display: 'flex',
11
+ alignItems: 'center',
12
+ gap: '2px',
13
+ background: 'rgba(0, 0, 0, 0.65)',
14
+ borderRadius: '8px',
15
+ padding: '4px 6px',
16
+ zIndex: 100,
17
+ userSelect: 'none',
18
+ backdropFilter: 'blur(8px)',
19
+ WebkitBackdropFilter: 'blur(8px)',
20
+ }, children: [_jsx("button", { onClick: (e) => {
21
+ e.stopPropagation();
22
+ slideNav.prevSlide();
23
+ }, disabled: isFirst, "data-testid": "slide-prev", "aria-label": "Previous slide", title: "Previous slide", style: {
24
+ background: 'none',
25
+ border: 'none',
26
+ color: isFirst ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.9)',
27
+ cursor: isFirst ? 'default' : 'pointer',
28
+ padding: '6px 8px',
29
+ display: 'flex',
30
+ alignItems: 'center',
31
+ justifyContent: 'center',
32
+ borderRadius: '4px',
33
+ transition: 'background 0.15s',
34
+ }, onMouseEnter: (e) => {
35
+ if (!isFirst)
36
+ e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
37
+ }, onMouseLeave: (e) => {
38
+ e.currentTarget.style.background = 'none';
39
+ }, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }) }), _jsx("span", { "data-testid": "slide-counter", style: {
40
+ color: 'rgba(255,255,255,0.9)',
41
+ fontSize: '13px',
42
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
43
+ fontVariantNumeric: 'tabular-nums',
44
+ minWidth: '48px',
45
+ textAlign: 'center',
46
+ padding: '0 4px',
47
+ letterSpacing: '0.02em',
48
+ }, children: totalBlocks > 0 ? `${currentBlockIndex + 1} / ${totalBlocks}` : '—' }), _jsx("button", { onClick: (e) => {
49
+ e.stopPropagation();
50
+ slideNav.nextSlide();
51
+ }, disabled: isLast, "data-testid": "slide-next", "aria-label": "Next slide", title: "Next slide", style: {
52
+ background: 'none',
53
+ border: 'none',
54
+ color: isLast ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.9)',
55
+ cursor: isLast ? 'default' : 'pointer',
56
+ padding: '6px 8px',
57
+ display: 'flex',
58
+ alignItems: 'center',
59
+ justifyContent: 'center',
60
+ borderRadius: '4px',
61
+ transition: 'background 0.15s',
62
+ }, onMouseEnter: (e) => {
63
+ if (!isLast)
64
+ e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
65
+ }, onMouseLeave: (e) => {
66
+ e.currentTarget.style.background = 'none';
67
+ }, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }) })] }));
68
+ }
69
+ //# sourceMappingURL=DocControlsSlideshow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocControlsSlideshow.js","sourceRoot":"","sources":["../src/DocControlsSlideshow.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,87 @@
1
+ /**
2
+ * DocPlayer Component
3
+ *
4
+ * Main component for playing visual stories. Combines audio playback
5
+ * with synchronized SVG block animations. Supports both interactive
6
+ * browser playback and headless rendering for video export.
7
+ *
8
+ * Features:
9
+ * - Audio synchronization with multiple MP3 segments
10
+ * - Block transitions (fade, dissolve, slide)
11
+ * - Playback controls (play/pause, seek, next/prev)
12
+ * - Progress display
13
+ * - Render mode for video capture (via window.seekTo)
14
+ * - Pluggable audio provider for different environments (browser, EFB)
15
+ * - Multiple control layouts: overlay (default), sidebar, bottom
16
+ *
17
+ * Related Files:
18
+ * - DocControlsOverlay.tsx -- Default overlay controls
19
+ * - DocProgressBar.tsx -- Extracted progress bar
20
+ * - DocControlsSidebar.tsx -- Vertical sidebar controls
21
+ * - DocPlayerWithSidebar.tsx -- Wrapper for sidebar layout
22
+ * - types.ts -- Shared control types
23
+ */
24
+ import type { Doc } from '@bendyline/squisq/schemas';
25
+ import type { Theme } from '@bendyline/squisq/schemas';
26
+ import type { AudioProvider } from './hooks/AudioProvider';
27
+ import { type ViewportConfig } from '@bendyline/squisq/doc';
28
+ import type { PlaybackState, PlaybackActions, BlockMarker, DisplayMode } from './types';
29
+ interface DocPlayerProps {
30
+ /** Doc script to play */
31
+ script: Doc;
32
+ /** Base path for resolving media URLs */
33
+ basePath: string;
34
+ /** Render mode for video capture (hides controls, exposes seekTo) */
35
+ renderMode?: boolean;
36
+ /** Auto-play when loaded */
37
+ autoPlay?: boolean;
38
+ /** Callback when playback ends */
39
+ onEnded?: () => void;
40
+ /** Callback for time updates */
41
+ onTimeUpdate?: (time: number) => void;
42
+ /** Optional audio provider (if not provided, uses default HTML5 audio) */
43
+ audioProvider?: AudioProvider;
44
+ /** Show built-in controls (default: true). Set to false for custom controls. */
45
+ showControls?: boolean;
46
+ /** Show only the progress bar/scrubber at bottom (no other controls).
47
+ * Only takes effect when showControls is false. Allows external controls
48
+ * while keeping the scrubber in-video. */
49
+ showScrubber?: boolean;
50
+ /** Mute audio (default: false) */
51
+ muted?: boolean;
52
+ /** Enable captions (default: true) */
53
+ captionsEnabled?: boolean;
54
+ /** Callback when captions enabled state is toggled */
55
+ onCaptionsToggle?: (enabled: boolean) => void;
56
+ /** Callback for playback state changes (for external controls) */
57
+ onPlaybackStateChange?: (state: PlaybackState) => void;
58
+ /** Callback when playback controls are ready (for external controls) */
59
+ onControlsReady?: (controls: PlaybackActions & {
60
+ play: () => void;
61
+ pause: () => void;
62
+ }) => void;
63
+ /** Whether the player is currently in fullscreen mode */
64
+ isFullscreen?: boolean;
65
+ /** Callback to toggle fullscreen mode */
66
+ onFullscreenToggle?: () => void;
67
+ /** Callback when block markers are computed (for external progress bars) */
68
+ onBlockMarkers?: (markers: BlockMarker[]) => void;
69
+ /** Force a specific viewport preset, bypassing window-based orientation detection.
70
+ * Used when the player is rendered in a constrained container (e.g., map overlay panel)
71
+ * whose shape differs from the window's. */
72
+ forceViewport?: ViewportConfig;
73
+ /** Theme to use for rendering (default: DEFAULT_THEME from the theme library) */
74
+ theme?: Theme;
75
+ /**
76
+ * Display mode for the player.
77
+ * - `'video'` (default) — Traditional video playback with play/pause, scrub bar, auto-advance.
78
+ * - `'slideshow'` — PowerPoint-style with prev/next buttons. Blocks are static slides
79
+ * that only change on user click. No auto-advance, no scrub bar.
80
+ * - `'linear'` — Long-scrolling document view. Renders markdown as readable HTML with
81
+ * template-annotated sections as inline SVG cards. No audio, no timeline.
82
+ */
83
+ displayMode?: DisplayMode;
84
+ }
85
+ export declare function DocPlayer({ script, basePath, renderMode, autoPlay, onEnded, onTimeUpdate, audioProvider: externalAudioProvider, showControls, showScrubber, muted, captionsEnabled: captionsEnabledProp, onCaptionsToggle, onPlaybackStateChange, onControlsReady, isFullscreen, onFullscreenToggle, onBlockMarkers, forceViewport, displayMode, theme, }: DocPlayerProps): import("react/jsx-runtime").JSX.Element;
86
+ export default DocPlayer;
87
+ //# sourceMappingURL=DocPlayer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocPlayer.d.ts","sourceRoot":"","sources":["../src/DocPlayer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAgD,MAAM,2BAA2B,CAAC;AAEnG,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,WAAW,EACX,WAAW,EAGZ,MAAM,SAAS,CAAC;AA8DjB,UAAU,cAAc;IACtB,yBAAyB;IACzB,MAAM,EAAE,GAAG,CAAC;IACZ,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0EAA0E;IAC1E,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;+CAE2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,wEAAwE;IACxE,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,eAAe,GAAG;QAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KACE,IAAI,CAAC;IACV,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAClD;;iDAE6C;IAC7C,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,iFAAiF;IACjF,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,UAAkB,EAClB,QAAgB,EAChB,OAAO,EACP,YAAY,EACZ,aAAa,EAAE,qBAAqB,EACpC,YAAmB,EACnB,YAAoB,EACpB,KAAa,EACb,eAAe,EAAE,mBAAmB,EACpC,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,YAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,WAAqB,EACrB,KAAK,GACN,EAAE,cAAc,2CAwyBhB;AAED,eAAe,SAAS,CAAC"}