@zync/zync-screnplay-player 0.1.214 → 0.1.215
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.
- package/dist/bundle.js +1 -1
- package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js +21 -21
- package/dist/screenplay/RemotionRenderer/components/effects/BrollFullscreen.js +1 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/BrollGreenScreen.js +8 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/BrollSplitScreen.js +6 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/BrollStudioBackdrop.js +6 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabColdOpenVisual.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabConversationSpine.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabDocumentaryInset.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabRackFocus.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabSplit.js +5 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabStudioSet.js +4 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/DynamicTriangle.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/Handoff.js +2 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/IntroVideo.js +6 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/KeyPointOverlayDepth.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/Keyword.js +5 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/KeywordStudioBackdrop.js +3 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/MotionStill.js +2 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillFullScreen.js +2 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillGreenScreen.js +5 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillGreenScreenV2.js +8 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillStudioBackdrop.js +6 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/SimpleFrame.js +2 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/SimpleFrameBroll.js +2 -0
- package/dist/screenplay/RemotionRenderer/components/layouts/TextWithVideo.js +2 -0
- package/dist/screenplay/RemotionRenderer/components/utils/ChromaKeyedVideo.js +3 -1
- package/dist/screenplay/RemotionRenderer/components/utils/FaceCenteredVideo.js +51 -50
- package/dist/screenplay/RemotionRenderer/components/utils/PausableImg.js +4 -4
- package/dist/screenplay/RemotionRenderer/components/utils/README.md +80 -80
- package/dist/screenplay/RemotionRenderer/components/utils/StretchTextDemo.js +3 -3
- package/dist/screenplay/RemotionRenderer/helpers/convertToSeconds.js +8 -8
- package/dist/screenplay/RemotionRenderer/helpers/faceBasedVideoStyles.js +4 -4
- package/dist/screenplay/RemotionRenderer/helpers/faceCenteredVideoTransforms.js +46 -46
- package/dist/screenplay/RemotionRenderer/main/screenplaySchema.js +51 -51
- package/dist/screenplay/RemotionRenderer/registeredComponents.js +2 -2
- package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js +20 -20
- 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({
|
|
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,
|