@zync/zync-screnplay-player 0.1.214 → 0.1.216

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 (39) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js +21 -21
  3. package/dist/screenplay/RemotionRenderer/components/effects/BrollFullscreen.js +1 -0
  4. package/dist/screenplay/RemotionRenderer/components/layouts/BrollGreenScreen.js +8 -0
  5. package/dist/screenplay/RemotionRenderer/components/layouts/BrollSplitScreen.js +6 -0
  6. package/dist/screenplay/RemotionRenderer/components/layouts/BrollStudioBackdrop.js +6 -0
  7. package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabColdOpenVisual.js +3 -0
  8. package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabConversationSpine.js +3 -0
  9. package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabDocumentaryInset.js +3 -0
  10. package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabRackFocus.js +3 -0
  11. package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabSplit.js +5 -0
  12. package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabStudioSet.js +4 -0
  13. package/dist/screenplay/RemotionRenderer/components/layouts/DynamicTriangle.js +3 -0
  14. package/dist/screenplay/RemotionRenderer/components/layouts/Handoff.js +2 -0
  15. package/dist/screenplay/RemotionRenderer/components/layouts/IntroVideo.js +6 -0
  16. package/dist/screenplay/RemotionRenderer/components/layouts/KeyPointOverlayDepth.js +3 -0
  17. package/dist/screenplay/RemotionRenderer/components/layouts/Keyword.js +5 -0
  18. package/dist/screenplay/RemotionRenderer/components/layouts/KeywordStudioBackdrop.js +3 -0
  19. package/dist/screenplay/RemotionRenderer/components/layouts/MotionStill.js +2 -0
  20. package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillFullScreen.js +2 -0
  21. package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillGreenScreen.js +5 -0
  22. package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillGreenScreenV2.js +8 -0
  23. package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillStudioBackdrop.js +6 -0
  24. package/dist/screenplay/RemotionRenderer/components/layouts/SimpleFrame.js +2 -0
  25. package/dist/screenplay/RemotionRenderer/components/layouts/SimpleFrameBroll.js +2 -0
  26. package/dist/screenplay/RemotionRenderer/components/layouts/TextWithVideo.js +2 -0
  27. package/dist/screenplay/RemotionRenderer/components/utils/ChromaKeyedVideo.js +3 -1
  28. package/dist/screenplay/RemotionRenderer/components/utils/FaceCenteredVideo.js +51 -50
  29. package/dist/screenplay/RemotionRenderer/components/utils/PausableImg.js +4 -4
  30. package/dist/screenplay/RemotionRenderer/components/utils/README.md +80 -80
  31. package/dist/screenplay/RemotionRenderer/components/utils/StretchTextDemo.js +3 -3
  32. package/dist/screenplay/RemotionRenderer/helpers/convertToSeconds.js +8 -8
  33. package/dist/screenplay/RemotionRenderer/helpers/faceBasedVideoStyles.js +4 -4
  34. package/dist/screenplay/RemotionRenderer/helpers/faceCenteredVideoTransforms.js +46 -46
  35. package/dist/screenplay/RemotionRenderer/main/screenplaySchema.js +51 -51
  36. package/dist/screenplay/RemotionRenderer/registeredComponents.js +2 -2
  37. package/dist/screenplay/RemotionRenderer/tracks/DynamicVideoComposition.js +63 -2
  38. package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js +20 -20
  39. package/package.json +47 -47
@@ -87,6 +87,7 @@ var Square = function Square(_ref) {
87
87
  centerHorizontally: true,
88
88
  transparent: true
89
89
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
90
+ pauseWhenBuffering: true,
90
91
  startFrom: startVideoFrom,
91
92
  src: noBackgroundVideoUrl,
92
93
  muted: false,
@@ -122,6 +123,7 @@ var Square = function Square(_ref) {
122
123
  filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
123
124
  }
124
125
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
126
+ pauseWhenBuffering: true,
125
127
  startFrom: startVideoFrom,
126
128
  src: videoUrl,
127
129
  muted: true,
@@ -171,6 +173,7 @@ var Square = function Square(_ref) {
171
173
  zIndex: 9
172
174
  }
173
175
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
176
+ pauseWhenBuffering: true,
174
177
  startFrom: startVideoFrom,
175
178
  src: noBackgroundVideoUrl,
176
179
  muted: true,
@@ -290,6 +293,7 @@ var Portrait = function Portrait(_ref2) {
290
293
  centerHorizontally: false,
291
294
  transparent: true
292
295
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
296
+ pauseWhenBuffering: true,
293
297
  startFrom: startVideoFrom,
294
298
  src: noBackgroundVideoUrl,
295
299
  muted: false,
@@ -326,6 +330,7 @@ var Portrait = function Portrait(_ref2) {
326
330
  zIndex: 0
327
331
  }
328
332
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
333
+ pauseWhenBuffering: true,
329
334
  startFrom: startVideoFrom,
330
335
  src: videoUrl,
331
336
  muted: true,
@@ -379,6 +384,7 @@ var Portrait = function Portrait(_ref2) {
379
384
  zIndex: 9
380
385
  }
381
386
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
387
+ pauseWhenBuffering: true,
382
388
  startFrom: startVideoFrom,
383
389
  src: noBackgroundVideoUrl,
384
390
  muted: true,
@@ -491,6 +497,7 @@ var Landscape = function Landscape(_ref3) {
491
497
  useAveragePosition: true,
492
498
  transparent: true
493
499
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
500
+ pauseWhenBuffering: true,
494
501
  startFrom: startVideoFrom,
495
502
  src: noBackgroundVideoUrl,
496
503
  muted: false,
@@ -540,6 +547,7 @@ var Landscape = function Landscape(_ref3) {
540
547
  zIndex: 9
541
548
  }
542
549
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
550
+ pauseWhenBuffering: true,
543
551
  startFrom: startVideoFrom,
544
552
  src: noBackgroundVideoUrl,
545
553
  muted: true,
@@ -70,6 +70,7 @@ var Square = function Square(_ref) {
70
70
  useAveragePosition: true,
71
71
  centerHorizontally: false
72
72
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
73
+ pauseWhenBuffering: true,
73
74
  startFrom: startVideoFrom,
74
75
  src: videoUrl,
75
76
  muted: true,
@@ -136,6 +137,7 @@ var Square = function Square(_ref) {
136
137
  centerHorizontally: false,
137
138
  noBackgroundVideoEffects: noBackgroundVideoEffects
138
139
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
140
+ pauseWhenBuffering: true,
139
141
  startFrom: startVideoFrom,
140
142
  src: noBackgroundVideoUrl,
141
143
  muted: false,
@@ -231,6 +233,7 @@ var Portrait = function Portrait(_ref2) {
231
233
  useAveragePosition: true,
232
234
  centerHorizontally: false
233
235
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
236
+ pauseWhenBuffering: true,
234
237
  startFrom: startVideoFrom,
235
238
  src: videoUrl,
236
239
  muted: true,
@@ -296,6 +299,7 @@ var Portrait = function Portrait(_ref2) {
296
299
  centerHorizontally: false,
297
300
  noBackgroundVideoEffects: noBackgroundVideoEffects
298
301
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
302
+ pauseWhenBuffering: true,
299
303
  startFrom: startVideoFrom,
300
304
  src: noBackgroundVideoUrl,
301
305
  muted: false,
@@ -391,6 +395,7 @@ var Landscape = function Landscape(_ref3) {
391
395
  useAveragePosition: true,
392
396
  centerHorizontally: false
393
397
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
398
+ pauseWhenBuffering: true,
394
399
  startFrom: startVideoFrom,
395
400
  src: videoUrl,
396
401
  muted: true,
@@ -457,6 +462,7 @@ var Landscape = function Landscape(_ref3) {
457
462
  centerHorizontally: false,
458
463
  noBackgroundVideoEffects: noBackgroundVideoEffects
459
464
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
465
+ pauseWhenBuffering: true,
460
466
  startFrom: startVideoFrom,
461
467
  src: noBackgroundVideoUrl,
462
468
  muted: false,
@@ -84,6 +84,7 @@ export var SimpleFrame = function SimpleFrame(_ref) {
84
84
  filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
85
85
  }
86
86
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
87
+ pauseWhenBuffering: true,
87
88
  startFrom: startVideoFrom,
88
89
  src: videoUrl,
89
90
  muted: muted,
@@ -156,6 +157,7 @@ export var SimpleFrame = function SimpleFrame(_ref) {
156
157
  height: "100%"
157
158
  }
158
159
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
160
+ pauseWhenBuffering: true,
159
161
  startFrom: startVideoFrom,
160
162
  src: noBackgroundVideoUrl,
161
163
  muted: true,
@@ -67,6 +67,7 @@ export var SimpleFrameBroll = function SimpleFrameBroll(_ref) {
67
67
  filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
68
68
  }
69
69
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
70
+ pauseWhenBuffering: true,
70
71
  startFrom: startVideoFrom,
71
72
  src: videoUrl,
72
73
  muted: muted,
@@ -131,6 +132,7 @@ export var SimpleFrameBroll = function SimpleFrameBroll(_ref) {
131
132
  zIndex: 11
132
133
  }
133
134
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
135
+ pauseWhenBuffering: true,
134
136
  startFrom: startVideoFrom,
135
137
  src: noBackgroundVideoUrl,
136
138
  muted: true,
@@ -272,6 +272,7 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
272
272
  containerWidth: isPortrait ? width - CHROME_PADDING * 2 : videoWidth,
273
273
  containerHeight: isPortrait ? videoHeight : height - CHROME_PADDING * 2
274
274
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
275
+ pauseWhenBuffering: true,
275
276
  startFrom: startVideoFrom,
276
277
  src: videoUrl,
277
278
  muted: muted,
@@ -352,6 +353,7 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
352
353
  overflow: "hidden"
353
354
  }
354
355
  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
356
+ pauseWhenBuffering: true,
355
357
  startFrom: startVideoFrom,
356
358
  src: noBackgroundVideoUrl,
357
359
  muted: true,
@@ -38,7 +38,9 @@ export var ChromaKeyedVideo = function ChromaKeyedVideo(props) {
38
38
  }
39
39
  context.putImageData(imageFrame, 0, 0);
40
40
  }, [height, width]);
41
- return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(OffthreadVideo, _extends({}, props, {
41
+ return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(OffthreadVideo, _extends({
42
+ pauseWhenBuffering: true
43
+ }, props, {
42
44
  onVideoFrame: onVideoFrame
43
45
  }))), /*#__PURE__*/React.createElement(AbsoluteFill, {
44
46
  style: {
@@ -8,34 +8,34 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
8
8
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
9
  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
10
10
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
11
- /**
12
- * Face-Centered Video Component
13
- *
14
- * A reusable component that wraps OffthreadVideo to ensure the video is always
15
- * centered on a person's face within a flexible container.
16
- *
17
- * The video maintains its source dimensions and is positioned using translateX/translateY
18
- * to center the face within the container, regardless of container size.
11
+ /**
12
+ * Face-Centered Video Component
13
+ *
14
+ * A reusable component that wraps OffthreadVideo to ensure the video is always
15
+ * centered on a person's face within a flexible container.
16
+ *
17
+ * The video maintains its source dimensions and is positioned using translateX/translateY
18
+ * to center the face within the container, regardless of container size.
19
19
  */
20
20
 
21
21
  import React from "react";
22
22
  import { OffthreadVideo, useCurrentFrame } from "remotion";
23
23
  import { useOrientationBased } from "../../hooks/useOrientationBased.js";
24
24
 
25
- /**
26
- * Calculate face-centered translation for flexible container
27
- * @param {Object} params - Configuration object
28
- * @param {Object} params.faceMetadata - Face detection metadata
29
- * @param {number} params.containerWidth - Container width in pixels
30
- * @param {number} params.containerHeight - Container height in pixels
31
- * @param {number} params.currentFrame - Current frame number (optional)
32
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
33
- * @param {boolean} params.useAveragePosition - Whether to use average face position
34
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally
35
- * @param {number} params.translateX - Additional translateX offset
36
- * @param {number} params.translateY - Additional translateY offset
37
- * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
38
- * @returns {Object} Transform styles and debug info
25
+ /**
26
+ * Calculate face-centered translation for flexible container
27
+ * @param {Object} params - Configuration object
28
+ * @param {Object} params.faceMetadata - Face detection metadata
29
+ * @param {number} params.containerWidth - Container width in pixels
30
+ * @param {number} params.containerHeight - Container height in pixels
31
+ * @param {number} params.currentFrame - Current frame number (optional)
32
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
33
+ * @param {boolean} params.useAveragePosition - Whether to use average face position
34
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally
35
+ * @param {number} params.translateX - Additional translateX offset
36
+ * @param {number} params.translateY - Additional translateY offset
37
+ * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
38
+ * @returns {Object} Transform styles and debug info
39
39
  */
40
40
  var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation(_ref) {
41
41
  var _faceMetadata$metadat, _faceMetadata$metadat2;
@@ -214,8 +214,8 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
214
214
  };
215
215
  };
216
216
 
217
- /**
218
- * Get face data for a specific frame with optional interpolation
217
+ /**
218
+ * Get face data for a specific frame with optional interpolation
219
219
  */
220
220
  function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
221
221
  var _prevFrame, _nextFrame;
@@ -274,8 +274,8 @@ function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
274
274
  return ((_prevFrame = prevFrame) === null || _prevFrame === void 0 ? void 0 : _prevFrame.data) || ((_nextFrame = nextFrame) === null || _nextFrame === void 0 ? void 0 : _nextFrame.data) || null;
275
275
  }
276
276
 
277
- /**
278
- * Calculate average face position from all frames with face data
277
+ /**
278
+ * Calculate average face position from all frames with face data
279
279
  */
280
280
  function getAverageFaceData(frames) {
281
281
  if (!frames || frames.length === 0) return null;
@@ -310,14 +310,14 @@ function getAverageFaceData(frames) {
310
310
  };
311
311
  }
312
312
 
313
- /**
314
- * Calculate the negative space offset when face-centering a video
315
- *
316
- * @param {Object} faceMetadata - Face detection metadata object
317
- * @param {number} containerWidth - Container width in pixels
318
- * @param {number} containerHeight - Container height in pixels
319
- * @param {number} scale - Scale factor applied to the video
320
- * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
313
+ /**
314
+ * Calculate the negative space offset when face-centering a video
315
+ *
316
+ * @param {Object} faceMetadata - Face detection metadata object
317
+ * @param {number} containerWidth - Container width in pixels
318
+ * @param {number} containerHeight - Container height in pixels
319
+ * @param {number} scale - Scale factor applied to the video
320
+ * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
321
321
  */
322
322
  export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(faceMetadata, containerWidth, containerHeight) {
323
323
  var _faceMetadata$metadat4, _faceMetadata$metadat5;
@@ -415,22 +415,22 @@ export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(
415
415
  };
416
416
  };
417
417
 
418
- /**
419
- * FaceCenteredVideo Component
420
- * @param {Object} props - Component props
421
- * @param {string} props.src - Video source URL
422
- * @param {Object} props.faceMetadata - Face detection metadata
423
- * @param {number} props.containerWidth - Container width in pixels (required)
424
- * @param {number} props.containerHeight - Container height in pixels (required)
425
- * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
426
- * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
427
- * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
428
- * @param {number} props.translateX - Additional translateX offset (optional)
429
- * @param {number} props.translateY - Additional translateY offset (optional)
430
- * @param {boolean} props.showDebugInfo - Whether to show debug information
431
- * @param {Object} props.style - Additional styles to apply to video
432
- * @param {string} props.className - CSS class name
433
- * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
418
+ /**
419
+ * FaceCenteredVideo Component
420
+ * @param {Object} props - Component props
421
+ * @param {string} props.src - Video source URL
422
+ * @param {Object} props.faceMetadata - Face detection metadata
423
+ * @param {number} props.containerWidth - Container width in pixels (required)
424
+ * @param {number} props.containerHeight - Container height in pixels (required)
425
+ * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
426
+ * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
427
+ * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
428
+ * @param {number} props.translateX - Additional translateX offset (optional)
429
+ * @param {number} props.translateY - Additional translateY offset (optional)
430
+ * @param {boolean} props.showDebugInfo - Whether to show debug information
431
+ * @param {Object} props.style - Additional styles to apply to video
432
+ * @param {string} props.className - CSS class name
433
+ * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
434
434
  */
435
435
  export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
436
436
  var _faceMetadata$metadat7, _faceMetadata$metadat8, _faceMetadata$metadat9, _faceMetadata$metadat10;
@@ -516,6 +516,7 @@ export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
516
516
  isolation: "isolate"
517
517
  }, containerStyle)
518
518
  }, /*#__PURE__*/React.createElement(OffthreadVideo, _extends({
519
+ pauseWhenBuffering: true,
519
520
  src: src,
520
521
  style: videoStyle,
521
522
  transparent: transparent
@@ -15,10 +15,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
15
15
  import React, { useEffect, useState } from "react";
16
16
  import { Img, delayRender, continueRender } from "remotion";
17
17
 
18
- /**
19
- * PausableImg component that extends Remotion's Img with fetch validation.
20
- * It delays rendering until the image source can be successfully fetched.
21
- * If there's an error fetching the image, it renders nothing.
18
+ /**
19
+ * PausableImg component that extends Remotion's Img with fetch validation.
20
+ * It delays rendering until the image source can be successfully fetched.
21
+ * If there's an error fetching the image, it renders nothing.
22
22
  */
23
23
  export var PausableImg = /*#__PURE__*/React.memo(function (_ref) {
24
24
  var src = _ref.src,
@@ -1,80 +1,80 @@
1
- # StretchText Component
2
-
3
- A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
4
-
5
- ## Usage
6
-
7
- ```jsx
8
- import StretchText from './StretchText';
9
-
10
- // Basic usage
11
- <StretchText text="Hello World" />
12
-
13
- // With custom styling
14
- <StretchText
15
- text="Contribution"
16
- color="#1a73e8"
17
- fontFamily="Arial"
18
- maxFontSize={200}
19
- minFontSize={10}
20
- style={{ fontWeight: 'bold' }}
21
- />
22
-
23
- // With text stroke
24
- <StretchText
25
- text="Outlined Text"
26
- color="transparent"
27
- textStrokeColor="white"
28
- textStrokeWidth="2px"
29
- style={{ fontWeight: 'bold' }}
30
- />
31
- ```
32
-
33
- ## Props
34
-
35
- | Prop | Type | Default | Description |
36
- |------|------|---------|-------------|
37
- | `text` | string | required | The text to display |
38
- | `color` | string | '#000000' | Text color |
39
- | `fontFamily` | string | 'Arial' | Font family |
40
- | `maxFontSize` | number | 100 | Maximum font size in pixels |
41
- | `minFontSize` | number | 10 | Minimum font size in pixels |
42
- | `textStrokeColor` | string | undefined | Color of the text stroke |
43
- | `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
44
- | `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
45
- | `style` | object | {} | Additional style properties |
46
-
47
- ## Examples
48
-
49
- The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
50
-
51
- - "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
52
- - The text will always be contained within the parent container and will not overflow.
53
- - The component recalculates the font size when the window is resized.
54
-
55
- ## Demo
56
-
57
- You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
58
-
59
- The demo shows several words of different lengths rendered in containers of the same width:
60
-
61
- - "Contribution" (longer word, smaller font)
62
- - "Work" (shorter word, larger font)
63
- - "Hello" (medium length word, medium font)
64
- - "Supercalifragilisticexpialidocious" (very long word, very small font)
65
-
66
- Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
67
-
68
- ## Implementation Details
69
-
70
- The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
71
-
72
- The component uses SVG for rendering text, which provides several advantages:
73
- - Proper text-stroke rendering in headless mode
74
- - Better control over text positioning and alignment
75
- - Consistent rendering across different browsers and environments
76
- - Support for advanced SVG features like filters for text shadows
77
-
78
- For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
79
-
80
- The component also includes a resize listener to recalculate the font size when the window size changes.
1
+ # StretchText Component
2
+
3
+ A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
4
+
5
+ ## Usage
6
+
7
+ ```jsx
8
+ import StretchText from './StretchText';
9
+
10
+ // Basic usage
11
+ <StretchText text="Hello World" />
12
+
13
+ // With custom styling
14
+ <StretchText
15
+ text="Contribution"
16
+ color="#1a73e8"
17
+ fontFamily="Arial"
18
+ maxFontSize={200}
19
+ minFontSize={10}
20
+ style={{ fontWeight: 'bold' }}
21
+ />
22
+
23
+ // With text stroke
24
+ <StretchText
25
+ text="Outlined Text"
26
+ color="transparent"
27
+ textStrokeColor="white"
28
+ textStrokeWidth="2px"
29
+ style={{ fontWeight: 'bold' }}
30
+ />
31
+ ```
32
+
33
+ ## Props
34
+
35
+ | Prop | Type | Default | Description |
36
+ |------|------|---------|-------------|
37
+ | `text` | string | required | The text to display |
38
+ | `color` | string | '#000000' | Text color |
39
+ | `fontFamily` | string | 'Arial' | Font family |
40
+ | `maxFontSize` | number | 100 | Maximum font size in pixels |
41
+ | `minFontSize` | number | 10 | Minimum font size in pixels |
42
+ | `textStrokeColor` | string | undefined | Color of the text stroke |
43
+ | `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
44
+ | `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
45
+ | `style` | object | {} | Additional style properties |
46
+
47
+ ## Examples
48
+
49
+ The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
50
+
51
+ - "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
52
+ - The text will always be contained within the parent container and will not overflow.
53
+ - The component recalculates the font size when the window is resized.
54
+
55
+ ## Demo
56
+
57
+ You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
58
+
59
+ The demo shows several words of different lengths rendered in containers of the same width:
60
+
61
+ - "Contribution" (longer word, smaller font)
62
+ - "Work" (shorter word, larger font)
63
+ - "Hello" (medium length word, medium font)
64
+ - "Supercalifragilisticexpialidocious" (very long word, very small font)
65
+
66
+ Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
67
+
68
+ ## Implementation Details
69
+
70
+ The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
71
+
72
+ The component uses SVG for rendering text, which provides several advantages:
73
+ - Proper text-stroke rendering in headless mode
74
+ - Better control over text positioning and alignment
75
+ - Consistent rendering across different browsers and environments
76
+ - Support for advanced SVG features like filters for text shadows
77
+
78
+ For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
79
+
80
+ The component also includes a resize listener to recalculate the font size when the window size changes.
@@ -2,9 +2,9 @@ import React from "react";
2
2
  import { AbsoluteFill } from "remotion";
3
3
  import StretchText from "./StretchText";
4
4
 
5
- /**
6
- * Demo component to showcase the StretchText component
7
- * Shows how different words stretch to the same width with different font sizes
5
+ /**
6
+ * Demo component to showcase the StretchText component
7
+ * Shows how different words stretch to the same width with different font sizes
8
8
  */
9
9
  var StretchTextDemo = function StretchTextDemo() {
10
10
  var containerStyle = {
@@ -1,11 +1,11 @@
1
- /**
2
- * Converts seconds and a portion of frames to a numeric value of seconds.
3
- *
4
- * @param {number} seconds - The number of full seconds.
5
- * @param {number} nthFrame - The current frame within the second.
6
- * @param {number} delayInSeconds - Optional delay that adds up to the calculation
7
- * @param {number} frameRate - The frame rate (frames per second).
8
- * @return {number} The total time in seconds (with decimals for frames).
1
+ /**
2
+ * Converts seconds and a portion of frames to a numeric value of seconds.
3
+ *
4
+ * @param {number} seconds - The number of full seconds.
5
+ * @param {number} nthFrame - The current frame within the second.
6
+ * @param {number} delayInSeconds - Optional delay that adds up to the calculation
7
+ * @param {number} frameRate - The frame rate (frames per second).
8
+ * @return {number} The total time in seconds (with decimals for frames).
9
9
  */
10
10
  export var convertToSeconds = function convertToSeconds(seconds, nthFrame) {
11
11
  var delayInSeconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -4,10 +4,10 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
4
4
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
5
5
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
6
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
- /**
8
- * Calculate video styles based on face detection metadata
9
- * This helper adjusts video positioning and transform origin to center faces in the viewport
10
- * when zooming, accounting for objectFit: "cover" behavior
7
+ /**
8
+ * Calculate video styles based on face detection metadata
9
+ * This helper adjusts video positioning and transform origin to center faces in the viewport
10
+ * when zooming, accounting for objectFit: "cover" behavior
11
11
  */
12
12
  export var getFaceBasedVideoStyles = function getFaceBasedVideoStyles(_ref) {
13
13
  var faceMetadata = _ref.faceMetadata,