@bendyline/squisq-react 1.3.1 → 1.3.2

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 (187) hide show
  1. package/dist/index.d.ts +710 -35
  2. package/dist/index.js +4288 -33
  3. package/dist/index.js.map +1 -1
  4. package/dist/squisq-player.global.js +1 -1
  5. package/dist/standalone-source.js +1 -1
  6. package/package.json +2 -2
  7. package/dist/BlockRenderer.d.ts +0 -37
  8. package/dist/BlockRenderer.d.ts.map +0 -1
  9. package/dist/BlockRenderer.js +0 -54
  10. package/dist/BlockRenderer.js.map +0 -1
  11. package/dist/CaptionOverlay.d.ts +0 -33
  12. package/dist/CaptionOverlay.d.ts.map +0 -1
  13. package/dist/CaptionOverlay.js +0 -44
  14. package/dist/CaptionOverlay.js.map +0 -1
  15. package/dist/DocControlsBottom.d.ts +0 -28
  16. package/dist/DocControlsBottom.d.ts.map +0 -1
  17. package/dist/DocControlsBottom.js +0 -27
  18. package/dist/DocControlsBottom.js.map +0 -1
  19. package/dist/DocControlsOverlay.d.ts +0 -28
  20. package/dist/DocControlsOverlay.d.ts.map +0 -1
  21. package/dist/DocControlsOverlay.js +0 -80
  22. package/dist/DocControlsOverlay.js.map +0 -1
  23. package/dist/DocControlsSidebar.d.ts +0 -27
  24. package/dist/DocControlsSidebar.d.ts.map +0 -1
  25. package/dist/DocControlsSidebar.js +0 -10
  26. package/dist/DocControlsSidebar.js.map +0 -1
  27. package/dist/DocControlsSlideshow.d.ts +0 -20
  28. package/dist/DocControlsSlideshow.d.ts.map +0 -1
  29. package/dist/DocControlsSlideshow.js +0 -69
  30. package/dist/DocControlsSlideshow.js.map +0 -1
  31. package/dist/DocPlayer.d.ts +0 -97
  32. package/dist/DocPlayer.d.ts.map +0 -1
  33. package/dist/DocPlayer.js +0 -657
  34. package/dist/DocPlayer.js.map +0 -1
  35. package/dist/DocPlayerWithSidebar.d.ts +0 -41
  36. package/dist/DocPlayerWithSidebar.d.ts.map +0 -1
  37. package/dist/DocPlayerWithSidebar.js +0 -69
  38. package/dist/DocPlayerWithSidebar.js.map +0 -1
  39. package/dist/DocProgressBar.d.ts +0 -31
  40. package/dist/DocProgressBar.d.ts.map +0 -1
  41. package/dist/DocProgressBar.js +0 -122
  42. package/dist/DocProgressBar.js.map +0 -1
  43. package/dist/InlineAudioPlayer.d.ts +0 -15
  44. package/dist/InlineAudioPlayer.d.ts.map +0 -1
  45. package/dist/InlineAudioPlayer.js +0 -22
  46. package/dist/InlineAudioPlayer.js.map +0 -1
  47. package/dist/InlineVideoPlayer.d.ts +0 -21
  48. package/dist/InlineVideoPlayer.d.ts.map +0 -1
  49. package/dist/InlineVideoPlayer.js +0 -29
  50. package/dist/InlineVideoPlayer.js.map +0 -1
  51. package/dist/LinearDocView.d.ts +0 -73
  52. package/dist/LinearDocView.d.ts.map +0 -1
  53. package/dist/LinearDocView.js +0 -451
  54. package/dist/LinearDocView.js.map +0 -1
  55. package/dist/MarkdownRenderer.d.ts +0 -32
  56. package/dist/MarkdownRenderer.d.ts.map +0 -1
  57. package/dist/MarkdownRenderer.js +0 -259
  58. package/dist/MarkdownRenderer.js.map +0 -1
  59. package/dist/SocialCaptionOverlay.d.ts +0 -27
  60. package/dist/SocialCaptionOverlay.d.ts.map +0 -1
  61. package/dist/SocialCaptionOverlay.js +0 -185
  62. package/dist/SocialCaptionOverlay.js.map +0 -1
  63. package/dist/__tests__/BlockRenderer.test.d.ts +0 -2
  64. package/dist/__tests__/BlockRenderer.test.d.ts.map +0 -1
  65. package/dist/__tests__/BlockRenderer.test.js +0 -82
  66. package/dist/__tests__/BlockRenderer.test.js.map +0 -1
  67. package/dist/__tests__/DocControlsSlideshow.test.d.ts +0 -2
  68. package/dist/__tests__/DocControlsSlideshow.test.d.ts.map +0 -1
  69. package/dist/__tests__/DocControlsSlideshow.test.js +0 -89
  70. package/dist/__tests__/DocControlsSlideshow.test.js.map +0 -1
  71. package/dist/__tests__/JsonView.test.d.ts +0 -2
  72. package/dist/__tests__/JsonView.test.d.ts.map +0 -1
  73. package/dist/__tests__/JsonView.test.js +0 -93
  74. package/dist/__tests__/JsonView.test.js.map +0 -1
  75. package/dist/__tests__/LinearDocView.test.d.ts +0 -2
  76. package/dist/__tests__/LinearDocView.test.d.ts.map +0 -1
  77. package/dist/__tests__/LinearDocView.test.js +0 -250
  78. package/dist/__tests__/LinearDocView.test.js.map +0 -1
  79. package/dist/__tests__/MarkdownRenderer.test.d.ts +0 -2
  80. package/dist/__tests__/MarkdownRenderer.test.d.ts.map +0 -1
  81. package/dist/__tests__/MarkdownRenderer.test.js +0 -208
  82. package/dist/__tests__/MarkdownRenderer.test.js.map +0 -1
  83. package/dist/__tests__/TableLayer.test.d.ts +0 -2
  84. package/dist/__tests__/TableLayer.test.d.ts.map +0 -1
  85. package/dist/__tests__/TableLayer.test.js +0 -121
  86. package/dist/__tests__/TableLayer.test.js.map +0 -1
  87. package/dist/__tests__/exports.test.d.ts +0 -2
  88. package/dist/__tests__/exports.test.d.ts.map +0 -1
  89. package/dist/__tests__/exports.test.js +0 -48
  90. package/dist/__tests__/exports.test.js.map +0 -1
  91. package/dist/hooks/AudioProvider.d.ts +0 -71
  92. package/dist/hooks/AudioProvider.d.ts.map +0 -1
  93. package/dist/hooks/AudioProvider.js +0 -52
  94. package/dist/hooks/AudioProvider.js.map +0 -1
  95. package/dist/hooks/MediaContext.d.ts +0 -35
  96. package/dist/hooks/MediaContext.d.ts.map +0 -1
  97. package/dist/hooks/MediaContext.js +0 -72
  98. package/dist/hooks/MediaContext.js.map +0 -1
  99. package/dist/hooks/index.d.ts +0 -6
  100. package/dist/hooks/index.d.ts.map +0 -1
  101. package/dist/hooks/index.js +0 -5
  102. package/dist/hooks/index.js.map +0 -1
  103. package/dist/hooks/useAudioSync.d.ts +0 -18
  104. package/dist/hooks/useAudioSync.d.ts.map +0 -1
  105. package/dist/hooks/useAudioSync.js +0 -340
  106. package/dist/hooks/useAudioSync.js.map +0 -1
  107. package/dist/hooks/useAutoSurface.d.ts +0 -11
  108. package/dist/hooks/useAutoSurface.d.ts.map +0 -1
  109. package/dist/hooks/useAutoSurface.js +0 -24
  110. package/dist/hooks/useAutoSurface.js.map +0 -1
  111. package/dist/hooks/useDocPlayback.d.ts +0 -47
  112. package/dist/hooks/useDocPlayback.d.ts.map +0 -1
  113. package/dist/hooks/useDocPlayback.js +0 -179
  114. package/dist/hooks/useDocPlayback.js.map +0 -1
  115. package/dist/hooks/useViewportOrientation.d.ts +0 -31
  116. package/dist/hooks/useViewportOrientation.d.ts.map +0 -1
  117. package/dist/hooks/useViewportOrientation.js +0 -92
  118. package/dist/hooks/useViewportOrientation.js.map +0 -1
  119. package/dist/index.d.ts.map +0 -1
  120. package/dist/jsonView/JsonView.d.ts +0 -26
  121. package/dist/jsonView/JsonView.d.ts.map +0 -1
  122. package/dist/jsonView/JsonView.js +0 -12
  123. package/dist/jsonView/JsonView.js.map +0 -1
  124. package/dist/jsonView/RenderNode.d.ts +0 -22
  125. package/dist/jsonView/RenderNode.d.ts.map +0 -1
  126. package/dist/jsonView/RenderNode.js +0 -30
  127. package/dist/jsonView/RenderNode.js.map +0 -1
  128. package/dist/jsonView/index.d.ts +0 -3
  129. package/dist/jsonView/index.d.ts.map +0 -1
  130. package/dist/jsonView/index.js +0 -2
  131. package/dist/jsonView/index.js.map +0 -1
  132. package/dist/jsonView/useJsonViewTokens.d.ts +0 -14
  133. package/dist/jsonView/useJsonViewTokens.d.ts.map +0 -1
  134. package/dist/jsonView/useJsonViewTokens.js +0 -34
  135. package/dist/jsonView/useJsonViewTokens.js.map +0 -1
  136. package/dist/jsonView/viewers.d.ts +0 -30
  137. package/dist/jsonView/viewers.d.ts.map +0 -1
  138. package/dist/jsonView/viewers.js +0 -226
  139. package/dist/jsonView/viewers.js.map +0 -1
  140. package/dist/layers/ImageLayer.d.ts +0 -23
  141. package/dist/layers/ImageLayer.d.ts.map +0 -1
  142. package/dist/layers/ImageLayer.js +0 -104
  143. package/dist/layers/ImageLayer.js.map +0 -1
  144. package/dist/layers/MapLayer.d.ts +0 -29
  145. package/dist/layers/MapLayer.d.ts.map +0 -1
  146. package/dist/layers/MapLayer.js +0 -97
  147. package/dist/layers/MapLayer.js.map +0 -1
  148. package/dist/layers/ShapeLayer.d.ts +0 -20
  149. package/dist/layers/ShapeLayer.d.ts.map +0 -1
  150. package/dist/layers/ShapeLayer.js +0 -39
  151. package/dist/layers/ShapeLayer.js.map +0 -1
  152. package/dist/layers/TableLayer.d.ts +0 -23
  153. package/dist/layers/TableLayer.d.ts.map +0 -1
  154. package/dist/layers/TableLayer.js +0 -58
  155. package/dist/layers/TableLayer.js.map +0 -1
  156. package/dist/layers/TextLayer.d.ts +0 -23
  157. package/dist/layers/TextLayer.d.ts.map +0 -1
  158. package/dist/layers/TextLayer.js +0 -126
  159. package/dist/layers/TextLayer.js.map +0 -1
  160. package/dist/layers/VideoLayer.d.ts +0 -40
  161. package/dist/layers/VideoLayer.d.ts.map +0 -1
  162. package/dist/layers/VideoLayer.js +0 -105
  163. package/dist/layers/VideoLayer.js.map +0 -1
  164. package/dist/layers/index.d.ts +0 -6
  165. package/dist/layers/index.d.ts.map +0 -1
  166. package/dist/layers/index.js +0 -6
  167. package/dist/layers/index.js.map +0 -1
  168. package/dist/standalone-entry.d.ts +0 -69
  169. package/dist/standalone-entry.d.ts.map +0 -1
  170. package/dist/standalone-entry.js +0 -185
  171. package/dist/standalone-entry.js.map +0 -1
  172. package/dist/types.d.ts +0 -154
  173. package/dist/types.d.ts.map +0 -1
  174. package/dist/types.js +0 -21
  175. package/dist/types.js.map +0 -1
  176. package/dist/utils/animationUtils.d.ts +0 -8
  177. package/dist/utils/animationUtils.d.ts.map +0 -1
  178. package/dist/utils/animationUtils.js +0 -8
  179. package/dist/utils/animationUtils.js.map +0 -1
  180. package/dist/utils/layerUtils.d.ts +0 -17
  181. package/dist/utils/layerUtils.d.ts.map +0 -1
  182. package/dist/utils/layerUtils.js +0 -37
  183. package/dist/utils/layerUtils.js.map +0 -1
  184. package/dist/utils/mapTileUtils.d.ts +0 -105
  185. package/dist/utils/mapTileUtils.d.ts.map +0 -1
  186. package/dist/utils/mapTileUtils.js +0 -268
  187. package/dist/utils/mapTileUtils.js.map +0 -1
@@ -1,58 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
3
- import { getAnimationStyle } from '../utils/animationUtils';
4
- export function TableLayer({ layer, viewport, blockTime }) {
5
- const { content, position, animation } = layer;
6
- const { headers, rows, align, style } = content;
7
- // Resolve position values to pixels
8
- const x = resolveValue(position.x, viewport.width);
9
- const y = resolveValue(position.y, viewport.height);
10
- const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
11
- const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
12
- // Apply anchor offset
13
- const offset = getAnchorOffset(position.anchor, width, height);
14
- const finalX = x + offset.x;
15
- const finalY = y + offset.y;
16
- // Build animation style
17
- const animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
18
- const cellAlign = (ci) => {
19
- const a = align?.[ci];
20
- return a ? { textAlign: a } : undefined;
21
- };
22
- const borderRadius = style.borderRadius ?? 8;
23
- return (_jsx("foreignObject", { x: finalX, y: finalY, width: width, height: height, style: animStyle, children: _jsx("div", { ...{ xmlns: 'http://www.w3.org/1999/xhtml' }, style: {
24
- width: `${width}px`,
25
- height: `${height}px`,
26
- display: 'flex',
27
- alignItems: 'center',
28
- justifyContent: 'center',
29
- padding: '16px',
30
- boxSizing: 'border-box',
31
- }, children: _jsxs("table", { style: {
32
- width: '100%',
33
- borderCollapse: 'separate',
34
- borderSpacing: 0,
35
- fontSize: `${style.fontSize}px`,
36
- fontFamily: style.fontFamily ?? 'system-ui, sans-serif',
37
- overflow: 'hidden',
38
- borderRadius: `${borderRadius}px`,
39
- border: `1px solid ${style.borderColor}`,
40
- }, children: [headers.length > 0 && (_jsx("thead", { children: _jsx("tr", { children: headers.map((header, ci) => (_jsx("th", { style: {
41
- background: style.headerBackground,
42
- color: style.headerColor,
43
- fontFamily: style.headerFontFamily ?? style.fontFamily ?? 'system-ui, sans-serif',
44
- fontWeight: 600,
45
- padding: '12px 16px',
46
- borderBottom: `2px solid ${style.borderColor}`,
47
- borderRight: ci < headers.length - 1 ? `1px solid ${style.borderColor}` : undefined,
48
- ...cellAlign(ci),
49
- }, children: header }, ci))) }) })), rows.length > 0 && (_jsx("tbody", { children: rows.map((row, ri) => (_jsx("tr", { children: row.map((cell, ci) => (_jsx("td", { style: {
50
- background: style.cellBackground,
51
- color: style.cellColor,
52
- padding: '10px 16px',
53
- borderBottom: ri < rows.length - 1 ? `1px solid ${style.borderColor}` : undefined,
54
- borderRight: ci < row.length - 1 ? `1px solid ${style.borderColor}` : undefined,
55
- ...cellAlign(ci),
56
- }, children: cell }, ci))) }, ri))) }))] }) }) }));
57
- }
58
- //# sourceMappingURL=TableLayer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableLayer.js","sourceRoot":"","sources":["../../src/layers/TableLayer.tsx"],"names":[],"mappings":"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"}
@@ -1,23 +0,0 @@
1
- /**
2
- * TextLayer Component
3
- *
4
- * Renders a text layer within an SVG block. Supports multi-line text,
5
- * styling options (font, color, shadow), and animations like fadeIn
6
- * and typewriter effects.
7
- *
8
- * Text is rendered using SVG <text> elements with <tspan> for line breaks.
9
- */
10
- import type { TextLayer as TextLayerType } from '@bendyline/squisq/schemas';
11
- interface TextLayerProps {
12
- layer: TextLayerType;
13
- /** Viewport dimensions for percentage calculations */
14
- viewport: {
15
- width: number;
16
- height: number;
17
- };
18
- /** Current time relative to block start */
19
- blockTime: number;
20
- }
21
- export declare function TextLayer({ layer, viewport, blockTime }: TextLayerProps): import("react/jsx-runtime").JSX.Element;
22
- export default TextLayer;
23
- //# sourceMappingURL=TextLayer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextLayer.d.ts","sourceRoot":"","sources":["../../src/layers/TextLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK5E,UAAU,cAAc;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAwFvE;AAqFD,eAAe,SAAS,CAAC"}
@@ -1,126 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { DEFAULT_DOC_FONT } from '@bendyline/squisq/schemas';
3
- import { getAnimationStyle } from '../utils/animationUtils';
4
- import { resolveValue } from '../utils/layerUtils';
5
- export function TextLayer({ layer, viewport, blockTime }) {
6
- const { content, position, animation } = layer;
7
- const { text, style } = content;
8
- // Resolve position values to pixels
9
- const x = resolveValue(position.x, viewport.width);
10
- const y = resolveValue(position.y, viewport.height);
11
- const maxWidth = position.width ? resolveValue(position.width, viewport.width) : undefined;
12
- // Apply anchor offset for text alignment
13
- const textAnchor = getTextAnchor(style.textAlign, position.anchor);
14
- const dominantBaseline = getDominantBaseline(position.anchor);
15
- // Get animation styles
16
- const animStyle = getAnimationStyle(animation, blockTime);
17
- // Split text into lines, and wrap if maxWidth is specified
18
- const rawLines = (text ?? '').split('\n');
19
- let lines = maxWidth
20
- ? rawLines.reduce((acc, line) => acc.concat(wrapText(line, style.fontSize, maxWidth)), [])
21
- : rawLines;
22
- // Truncate to maxLines if specified
23
- if (style.maxLines && lines.length > style.maxLines) {
24
- lines = lines.slice(0, style.maxLines);
25
- // Add ellipsis to last visible line
26
- const last = lines[lines.length - 1];
27
- lines[lines.length - 1] = last.replace(/\s*$/, '') + '...';
28
- }
29
- const lineHeight = style.lineHeight || 1.4;
30
- const lineHeightPx = style.fontSize * lineHeight;
31
- // Build text styles
32
- const textStyles = {
33
- fontSize: `${style.fontSize}px`,
34
- fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
35
- fontWeight: style.fontWeight || 'normal',
36
- fill: style.color,
37
- ...animStyle.style,
38
- };
39
- // Add shadow filter if requested
40
- const filterId = style.shadow ? `shadow-${layer.id}` : undefined;
41
- return (_jsxs("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [style.shadow && (_jsx("defs", { children: _jsx("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) })), style.background && (_jsx("rect", { x: x - (style.padding || 16), y: y - style.fontSize - (style.padding || 16), width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2, height: lines.length * lineHeightPx + (style.padding || 16) * 2, fill: style.background, rx: 4, ry: 4 })), _jsx("text", { x: x, y: y, textAnchor: textAnchor, dominantBaseline: dominantBaseline, style: textStyles, filter: filterId ? `url(#${filterId})` : undefined, children: lines.map((line, i) => (_jsxs("tspan", { x: x, dy: i === 0 ? 0 : lineHeightPx, children: [line || '\u00A0', " "] }, i))) })] }));
42
- }
43
- /**
44
- * Map text alignment to SVG text-anchor.
45
- */
46
- function getTextAnchor(align, anchor) {
47
- // Explicit alignment takes precedence
48
- if (align === 'center')
49
- return 'middle';
50
- if (align === 'right')
51
- return 'end';
52
- if (align === 'left')
53
- return 'start';
54
- // Otherwise infer from position anchor
55
- if (anchor?.includes('right'))
56
- return 'end';
57
- if (anchor === 'center')
58
- return 'middle';
59
- return 'start';
60
- }
61
- /**
62
- * Map position anchor to SVG dominant-baseline.
63
- */
64
- function getDominantBaseline(anchor) {
65
- if (anchor?.includes('bottom'))
66
- return 'text-after-edge';
67
- if (anchor === 'center')
68
- return 'middle';
69
- return 'text-before-edge';
70
- }
71
- /**
72
- * Estimate text box width based on content (rough approximation).
73
- */
74
- function getTextBoxWidth(lines, style) {
75
- const maxLineLength = Math.max(...lines.map((l) => l.length));
76
- // Rough estimate: average character width is ~0.5 * fontSize
77
- return maxLineLength * style.fontSize * 0.55;
78
- }
79
- /**
80
- * Wrap text to fit within a maximum width.
81
- * Uses character-based estimation for line breaking.
82
- */
83
- function wrapText(text, fontSize, maxWidth) {
84
- if (!text.trim())
85
- return [''];
86
- // Estimate characters per line (average char width ~0.5 * fontSize for most fonts)
87
- const avgCharWidth = fontSize * 0.5;
88
- const charsPerLine = Math.floor(maxWidth / avgCharWidth);
89
- if (charsPerLine <= 0)
90
- return [text];
91
- const words = text.split(/\s+/);
92
- const lines = [];
93
- let currentLine = '';
94
- for (const word of words) {
95
- const testLine = currentLine ? `${currentLine} ${word}` : word;
96
- if (testLine.length <= charsPerLine) {
97
- currentLine = testLine;
98
- }
99
- else {
100
- // Current line is full, start new line
101
- if (currentLine) {
102
- lines.push(currentLine);
103
- }
104
- // Handle words longer than a line
105
- if (word.length > charsPerLine) {
106
- // Break long word
107
- let remaining = word;
108
- while (remaining.length > charsPerLine) {
109
- lines.push(remaining.slice(0, charsPerLine));
110
- remaining = remaining.slice(charsPerLine);
111
- }
112
- currentLine = remaining;
113
- }
114
- else {
115
- currentLine = word;
116
- }
117
- }
118
- }
119
- // Add remaining text
120
- if (currentLine) {
121
- lines.push(currentLine);
122
- }
123
- return lines.length > 0 ? lines : [''];
124
- }
125
- export default TextLayer;
126
- //# sourceMappingURL=TextLayer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextLayer.js","sourceRoot":"","sources":["../../src/layers/TextLayer.tsx"],"names":[],"mappings":"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"}
@@ -1,40 +0,0 @@
1
- /**
2
- * VideoLayer Component
3
- *
4
- * Renders a video clip layer within an SVG block. Uses an HTML5 <video> element
5
- * inside a <foreignObject> (same pattern as ImageLayer for cover-mode images).
6
- * Videos are always muted — narration audio is the only sound track.
7
- *
8
- * Two modes of operation:
9
- * 1. Normal playback: Video auto-plays from clipStart to clipEnd on mount,
10
- * pausing when the clip ends or when the block is no longer active.
11
- * 2. Render/seekTo mode (Playwright frame capture): Video is paused and seeked
12
- * programmatically via data attributes read by DocPlayer's seekTo handler.
13
- *
14
- * The <video> element carries data-clip-start and data-clip-end attributes so
15
- * the seekTo handler can calculate the correct video time for any doc time.
16
- *
17
- * Related Files:
18
- * - schemas/Doc.ts — VideoLayer type definition
19
- * - shared/doc/templates/videoWithCaption.ts — template producing VideoLayers
20
- * - site/src/components/doc/DocPlayer.tsx — seekTo handler for video sync
21
- * - site/src/components/doc/layers/ImageLayer.tsx — similar foreignObject pattern
22
- */
23
- import type { VideoLayer as VideoLayerType } from '@bendyline/squisq/schemas';
24
- interface VideoLayerProps {
25
- layer: VideoLayerType;
26
- /** Base path for resolving relative video URLs */
27
- basePath: string;
28
- /** Viewport dimensions for percentage calculations */
29
- viewport: {
30
- width: number;
31
- height: number;
32
- };
33
- /** Current time relative to block start (for playback sync) */
34
- blockTime: number;
35
- /** Whether the doc is currently playing */
36
- isPlaying?: boolean;
37
- }
38
- export declare function VideoLayer({ layer, basePath, viewport, blockTime: _blockTime, isPlaying, }: VideoLayerProps): import("react/jsx-runtime").JSX.Element;
39
- export default VideoLayer;
40
- //# sourceMappingURL=VideoLayer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"VideoLayer.d.ts","sourceRoot":"","sources":["../../src/layers/VideoLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI9E,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,CAAC;IACtB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,SAAS,GACV,EAAE,eAAe,2CAqGjB;AAED,eAAe,UAAU,CAAC"}
@@ -1,105 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * VideoLayer Component
4
- *
5
- * Renders a video clip layer within an SVG block. Uses an HTML5 <video> element
6
- * inside a <foreignObject> (same pattern as ImageLayer for cover-mode images).
7
- * Videos are always muted — narration audio is the only sound track.
8
- *
9
- * Two modes of operation:
10
- * 1. Normal playback: Video auto-plays from clipStart to clipEnd on mount,
11
- * pausing when the clip ends or when the block is no longer active.
12
- * 2. Render/seekTo mode (Playwright frame capture): Video is paused and seeked
13
- * programmatically via data attributes read by DocPlayer's seekTo handler.
14
- *
15
- * The <video> element carries data-clip-start and data-clip-end attributes so
16
- * the seekTo handler can calculate the correct video time for any doc time.
17
- *
18
- * Related Files:
19
- * - schemas/Doc.ts — VideoLayer type definition
20
- * - shared/doc/templates/videoWithCaption.ts — template producing VideoLayers
21
- * - site/src/components/doc/DocPlayer.tsx — seekTo handler for video sync
22
- * - site/src/components/doc/layers/ImageLayer.tsx — similar foreignObject pattern
23
- */
24
- import { useRef, useEffect } from 'react';
25
- import { useMediaUrl } from '../hooks/MediaContext';
26
- import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
27
- export function VideoLayer({ layer, basePath, viewport, blockTime: _blockTime, isPlaying, }) {
28
- const { content, position } = layer;
29
- const videoRef = useRef(null);
30
- const hasStartedRef = useRef(false);
31
- // Resolve position values to pixels
32
- const x = resolveValue(position.x, viewport.width);
33
- const y = resolveValue(position.y, viewport.height);
34
- const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
35
- const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
36
- // Apply anchor offset
37
- const offset = getAnchorOffset(position.anchor, width, height);
38
- const finalX = x + offset.x;
39
- const finalY = y + offset.y;
40
- // Resolve video URL via MediaProvider (if available), falling back to basePath
41
- const src = useMediaUrl(content.src, basePath);
42
- // Always call the hook (Rules of Hooks), but pass empty string when no poster
43
- const resolvedPoster = useMediaUrl(content.posterSrc || '', basePath);
44
- const posterSrc = content.posterSrc ? resolvedPoster : undefined;
45
- // On mount: seek to clipStart and set up clipEnd boundary.
46
- // The video will be muted and play silently alongside the narration.
47
- useEffect(() => {
48
- const video = videoRef.current;
49
- if (!video)
50
- return;
51
- // Set initial time to clipStart
52
- video.currentTime = content.clipStart;
53
- hasStartedRef.current = true;
54
- // Start playing if doc is already playing
55
- if (isPlaying) {
56
- const playPromise = video.play();
57
- if (playPromise) {
58
- playPromise.catch(() => {
59
- // Autoplay blocked — fine for Playwright seekTo mode
60
- });
61
- }
62
- }
63
- // Monitor timeupdate to pause at clipEnd
64
- const handleTimeUpdate = () => {
65
- if (video.currentTime >= content.clipEnd) {
66
- video.pause();
67
- video.currentTime = content.clipEnd;
68
- }
69
- };
70
- video.addEventListener('timeupdate', handleTimeUpdate);
71
- return () => {
72
- video.removeEventListener('timeupdate', handleTimeUpdate);
73
- video.pause();
74
- };
75
- // eslint-disable-next-line react-hooks/exhaustive-deps -- isPlaying is handled by the separate sync effect below
76
- }, [content.src, content.clipStart, content.clipEnd]);
77
- // Sync video play/pause with doc playback state
78
- useEffect(() => {
79
- const video = videoRef.current;
80
- if (!video || !hasStartedRef.current)
81
- return;
82
- // Don't resume if clip has already reached its end
83
- if (video.currentTime >= content.clipEnd)
84
- return;
85
- if (isPlaying) {
86
- const playPromise = video.play();
87
- if (playPromise) {
88
- playPromise.catch(() => { });
89
- }
90
- }
91
- else {
92
- video.pause();
93
- }
94
- }, [isPlaying, content.clipEnd]);
95
- return (_jsx("g", { className: "block-layer block-layer--video", "data-layer-id": layer.id, children: _jsx("foreignObject", { x: finalX, y: finalY, width: width, height: height, children: _jsx("video", { ref: videoRef, src: src, poster: posterSrc, muted: true, playsInline: true, preload: "auto", "data-clip-start": content.clipStart, "data-clip-end": content.clipEnd, style: {
96
- width: `${width}px`,
97
- height: `${height}px`,
98
- objectFit: content.fit || 'cover',
99
- objectPosition: 'center',
100
- display: 'block',
101
- pointerEvents: 'none',
102
- } }) }) }));
103
- }
104
- export default VideoLayer;
105
- //# sourceMappingURL=VideoLayer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"VideoLayer.js","sourceRoot":"","sources":["../../src/layers/VideoLayer.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- export { ImageLayer } from './ImageLayer';
2
- export { TextLayer } from './TextLayer';
3
- export { ShapeLayer } from './ShapeLayer';
4
- export { VideoLayer } from './VideoLayer';
5
- export { MapLayer } from './MapLayer';
6
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -1,6 +0,0 @@
1
- export { ImageLayer } from './ImageLayer';
2
- export { TextLayer } from './TextLayer';
3
- export { ShapeLayer } from './ShapeLayer';
4
- export { VideoLayer } from './VideoLayer';
5
- export { MapLayer } from './MapLayer';
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -1,69 +0,0 @@
1
- /**
2
- * Standalone Entry Point — IIFE bundle for self-contained HTML rendering.
3
- *
4
- * This file is the entry point for the standalone `squisq-player.iife.js` bundle.
5
- * It bundles Preact (via preact/compat), squisq core, and all rendering components
6
- * into a single self-contained script that can be loaded in any HTML page.
7
- *
8
- * The bundle exposes a global `SquisqPlayer` object with methods to mount
9
- * interactive or static document views into any DOM element.
10
- *
11
- * Usage (in HTML):
12
- * <script src="squisq-player.iife.js"></script>
13
- * <div id="root"></div>
14
- * <script>
15
- * SquisqPlayer.mount(document.getElementById('root'), docJson, {
16
- * mode: 'slideshow',
17
- * images: { 'hero.jpg': 'data:image/jpeg;base64,...' }
18
- * });
19
- * </script>
20
- */
21
- import type { Doc } from '@bendyline/squisq/schemas';
22
- import type { Theme } from '@bendyline/squisq/schemas';
23
- export interface MountOptions {
24
- /** Rendering mode: 'slideshow' (interactive, default) or 'static' (scrollable) */
25
- mode?: 'slideshow' | 'static';
26
- /** Base path for resolving relative media URLs */
27
- basePath?: string;
28
- /**
29
- * Map of relative image paths to data URIs or blob URLs.
30
- * Used in single-HTML exports where images are inlined as base64.
31
- * Example: { 'hero.jpg': 'data:image/jpeg;base64,...' }
32
- */
33
- images?: Record<string, string>;
34
- /**
35
- * Map of audio segment names/paths to URLs (data URIs, blob URLs, or relative paths).
36
- * Used in ZIP exports where audio files are included alongside the HTML.
37
- */
38
- audio?: Record<string, string>;
39
- /** Optional theme override */
40
- theme?: Theme;
41
- /** Auto-play on mount (only for slideshow mode, default: false) */
42
- autoPlay?: boolean;
43
- /**
44
- * Enable render mode for headless frame capture.
45
- * Exposes window.seekTo(), getDuration(), getCaptions(), etc.
46
- * Disables controls and auto-play. Used by Playwright video export.
47
- */
48
- renderMode?: boolean;
49
- /** Caption style: 'standard' or 'social'. Omit or set to undefined for no captions. */
50
- captionStyle?: 'standard' | 'social';
51
- }
52
- /**
53
- * Mount a SquisqPlayer into a DOM element.
54
- *
55
- * @param element - The DOM element to render into
56
- * @param doc - A Doc object (parsed JSON)
57
- * @param options - Rendering options
58
- */
59
- export declare function mount(element: Element, doc: Doc, options?: MountOptions): void;
60
- /**
61
- * Mount a static scrollable document view (alias for mount with mode='static').
62
- */
63
- export declare function mountStatic(element: Element, doc: Doc, options?: Omit<MountOptions, 'mode'>): void;
64
- /**
65
- * Unmount a previously mounted SquisqPlayer from an element.
66
- */
67
- export declare function unmount(element: Element): void;
68
- export declare const version: string;
69
- //# sourceMappingURL=standalone-entry.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"standalone-entry.d.ts","sourceRoot":"","sources":["../src/standalone-entry.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAWvD,MAAM,WAAW,YAAY;IAC3B,kFAAkF;IAClF,IAAI,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAC9B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uFAAuF;IACvF,YAAY,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;CACtC;AA4GD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,GAAE,YAAiB,GAAG,IAAI,CAsDlF;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAM,GACvC,IAAI,CAEN;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAM9C;AAID,eAAO,MAAM,OAAO,EAAE,MACoD,CAAC"}