@zync/zync-screnplay-player 0.1.236 → 0.1.237
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.
|
@@ -5,10 +5,32 @@ import { useTheme } from "../../theme/hooks/useTheme.js";
|
|
|
5
5
|
import FaceCenteredVideo from "../utils/FaceCenteredVideo";
|
|
6
6
|
var ANIMATION_SECONDS = 1.2;
|
|
7
7
|
var INSET_ASPECT_RATIO = 9 / 16;
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
var getInsetProgress = function getInsetProgress(_ref) {
|
|
9
|
+
var durationInFrames = _ref.durationInFrames,
|
|
10
|
+
frame = _ref.frame,
|
|
11
|
+
fps = _ref.fps;
|
|
12
|
+
var animationFrames = fps * ANIMATION_SECONDS;
|
|
13
|
+
var hasDuration = Number.isFinite(durationInFrames) && durationInFrames > 1;
|
|
14
|
+
var transitionFrames = hasDuration ? Math.min(animationFrames, Math.max(1, durationInFrames / 2)) : animationFrames;
|
|
15
|
+
var introProgress = interpolate(frame, [0, transitionFrames], [0, 1], {
|
|
16
|
+
easing: Easing.out(Easing.cubic),
|
|
17
|
+
extrapolateLeft: "clamp",
|
|
18
|
+
extrapolateRight: "clamp"
|
|
19
|
+
});
|
|
20
|
+
if (!hasDuration) {
|
|
21
|
+
return introProgress;
|
|
22
|
+
}
|
|
23
|
+
var outroProgress = interpolate(frame, [Math.max(0, durationInFrames - transitionFrames), durationInFrames - 1], [1, 0], {
|
|
24
|
+
easing: Easing.inOut(Easing.cubic),
|
|
25
|
+
extrapolateLeft: "clamp",
|
|
26
|
+
extrapolateRight: "clamp"
|
|
27
|
+
});
|
|
28
|
+
return Math.min(introProgress, outroProgress);
|
|
29
|
+
};
|
|
30
|
+
var getInsetMetrics = function getInsetMetrics(_ref2) {
|
|
31
|
+
var width = _ref2.width,
|
|
32
|
+
height = _ref2.height,
|
|
33
|
+
outputOrientation = _ref2.outputOrientation;
|
|
12
34
|
var padding = Math.max(32, Math.min(width, height) * 0.045);
|
|
13
35
|
var rawWidth = width * 0.24;
|
|
14
36
|
var maxWidthByHeight = (height - padding * 2) * INSET_ASPECT_RATIO;
|
|
@@ -23,15 +45,15 @@ var getInsetMetrics = function getInsetMetrics(_ref) {
|
|
|
23
45
|
width: finalWidth
|
|
24
46
|
};
|
|
25
47
|
};
|
|
26
|
-
var SourceVideo = function SourceVideo(
|
|
27
|
-
var faceMetadata =
|
|
28
|
-
height =
|
|
29
|
-
noBackgroundVideoEffects =
|
|
30
|
-
sourceVideoOrientation =
|
|
31
|
-
src =
|
|
32
|
-
startVideoFrom =
|
|
33
|
-
transparent =
|
|
34
|
-
width =
|
|
48
|
+
var SourceVideo = function SourceVideo(_ref3) {
|
|
49
|
+
var faceMetadata = _ref3.faceMetadata,
|
|
50
|
+
height = _ref3.height,
|
|
51
|
+
noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
|
|
52
|
+
sourceVideoOrientation = _ref3.sourceVideoOrientation,
|
|
53
|
+
src = _ref3.src,
|
|
54
|
+
startVideoFrom = _ref3.startVideoFrom,
|
|
55
|
+
transparent = _ref3.transparent,
|
|
56
|
+
width = _ref3.width;
|
|
35
57
|
if (!src) {
|
|
36
58
|
return null;
|
|
37
59
|
}
|
|
@@ -67,27 +89,27 @@ var SourceVideo = function SourceVideo(_ref2) {
|
|
|
67
89
|
}
|
|
68
90
|
});
|
|
69
91
|
};
|
|
70
|
-
var BrollInsetContent = function BrollInsetContent(
|
|
71
|
-
var brollUrl =
|
|
72
|
-
children =
|
|
73
|
-
disableTransitionSounds =
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
92
|
+
var BrollInsetContent = function BrollInsetContent(_ref4) {
|
|
93
|
+
var brollUrl = _ref4.brollUrl,
|
|
94
|
+
children = _ref4.children,
|
|
95
|
+
disableTransitionSounds = _ref4.disableTransitionSounds,
|
|
96
|
+
durationInFrames = _ref4.durationInFrames,
|
|
97
|
+
faceMetadata = _ref4.faceMetadata,
|
|
98
|
+
frameColor = _ref4.frameColor,
|
|
99
|
+
height = _ref4.height,
|
|
100
|
+
noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
|
|
101
|
+
outputOrientation = _ref4.outputOrientation,
|
|
102
|
+
sourceVideoOrientation = _ref4.sourceVideoOrientation,
|
|
103
|
+
startVideoFrom = _ref4.startVideoFrom,
|
|
104
|
+
videoUrl = _ref4.videoUrl,
|
|
105
|
+
width = _ref4.width;
|
|
83
106
|
var frame = useCurrentFrame();
|
|
84
107
|
var _useVideoConfig = useVideoConfig(),
|
|
85
108
|
fps = _useVideoConfig.fps;
|
|
86
|
-
var
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
extrapolateRight: "clamp"
|
|
109
|
+
var progress = getInsetProgress({
|
|
110
|
+
durationInFrames: durationInFrames,
|
|
111
|
+
frame: frame,
|
|
112
|
+
fps: fps
|
|
91
113
|
});
|
|
92
114
|
var _useTheme = useTheme(),
|
|
93
115
|
accentColor = _useTheme.accentColor;
|
|
@@ -149,20 +171,21 @@ var BrollInsetContent = function BrollInsetContent(_ref3) {
|
|
|
149
171
|
}
|
|
150
172
|
}, children)));
|
|
151
173
|
};
|
|
152
|
-
export var BrollInset = function BrollInset(
|
|
174
|
+
export var BrollInset = function BrollInset(_ref5) {
|
|
153
175
|
var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
|
|
154
|
-
var brollUrl =
|
|
155
|
-
children =
|
|
156
|
-
|
|
157
|
-
disableTransitionSounds =
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
176
|
+
var brollUrl = _ref5.brollUrl,
|
|
177
|
+
children = _ref5.children,
|
|
178
|
+
_ref5$disableTransiti = _ref5.disableTransitionSounds,
|
|
179
|
+
disableTransitionSounds = _ref5$disableTransiti === void 0 ? false : _ref5$disableTransiti,
|
|
180
|
+
durationInFrames = _ref5.durationInFrames,
|
|
181
|
+
faceMetadata = _ref5.faceMetadata,
|
|
182
|
+
frameColor = _ref5.frameColor,
|
|
183
|
+
noBackgroundVideoEffects = _ref5.noBackgroundVideoEffects,
|
|
184
|
+
sourceVideoOrientation = _ref5.sourceVideoOrientation,
|
|
185
|
+
startVideoFrom = _ref5.startVideoFrom,
|
|
186
|
+
_ref5$useSquareInLand = _ref5.useSquareInLandscape,
|
|
187
|
+
useSquareInLandscape = _ref5$useSquareInLand === void 0 ? false : _ref5$useSquareInLand,
|
|
188
|
+
videoUrl = _ref5.videoUrl;
|
|
166
189
|
var _useVideoConfig2 = useVideoConfig(),
|
|
167
190
|
outputWidth = _useVideoConfig2.width,
|
|
168
191
|
outputHeight = _useVideoConfig2.height,
|
|
@@ -190,6 +213,7 @@ export var BrollInset = function BrollInset(_ref4) {
|
|
|
190
213
|
var content = /*#__PURE__*/React.createElement(BrollInsetContent, {
|
|
191
214
|
brollUrl: brollUrl,
|
|
192
215
|
disableTransitionSounds: disableTransitionSounds,
|
|
216
|
+
durationInFrames: durationInFrames,
|
|
193
217
|
faceMetadata: faceMetadata,
|
|
194
218
|
frameColor: frameColor,
|
|
195
219
|
height: height,
|
|
@@ -5,10 +5,32 @@ import { useTheme } from "../../theme/hooks/useTheme.js";
|
|
|
5
5
|
import FaceCenteredVideo from "../utils/FaceCenteredVideo";
|
|
6
6
|
var ANIMATION_SECONDS = 1.2;
|
|
7
7
|
var INSET_ASPECT_RATIO = 9 / 16;
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
var getInsetProgress = function getInsetProgress(_ref) {
|
|
9
|
+
var durationInFrames = _ref.durationInFrames,
|
|
10
|
+
frame = _ref.frame,
|
|
11
|
+
fps = _ref.fps;
|
|
12
|
+
var animationFrames = fps * ANIMATION_SECONDS;
|
|
13
|
+
var hasDuration = Number.isFinite(durationInFrames) && durationInFrames > 1;
|
|
14
|
+
var transitionFrames = hasDuration ? Math.min(animationFrames, Math.max(1, durationInFrames / 2)) : animationFrames;
|
|
15
|
+
var introProgress = interpolate(frame, [0, transitionFrames], [0, 1], {
|
|
16
|
+
easing: Easing.out(Easing.cubic),
|
|
17
|
+
extrapolateLeft: "clamp",
|
|
18
|
+
extrapolateRight: "clamp"
|
|
19
|
+
});
|
|
20
|
+
if (!hasDuration) {
|
|
21
|
+
return introProgress;
|
|
22
|
+
}
|
|
23
|
+
var outroProgress = interpolate(frame, [Math.max(0, durationInFrames - transitionFrames), durationInFrames - 1], [1, 0], {
|
|
24
|
+
easing: Easing.inOut(Easing.cubic),
|
|
25
|
+
extrapolateLeft: "clamp",
|
|
26
|
+
extrapolateRight: "clamp"
|
|
27
|
+
});
|
|
28
|
+
return Math.min(introProgress, outroProgress);
|
|
29
|
+
};
|
|
30
|
+
var getInsetMetrics = function getInsetMetrics(_ref2) {
|
|
31
|
+
var width = _ref2.width,
|
|
32
|
+
height = _ref2.height,
|
|
33
|
+
outputOrientation = _ref2.outputOrientation;
|
|
12
34
|
var padding = Math.max(32, Math.min(width, height) * 0.045);
|
|
13
35
|
var rawWidth = width * 0.24;
|
|
14
36
|
var maxWidthByHeight = (height - padding * 2) * INSET_ASPECT_RATIO;
|
|
@@ -23,15 +45,15 @@ var getInsetMetrics = function getInsetMetrics(_ref) {
|
|
|
23
45
|
width: finalWidth
|
|
24
46
|
};
|
|
25
47
|
};
|
|
26
|
-
var SourceVideo = function SourceVideo(
|
|
27
|
-
var faceMetadata =
|
|
28
|
-
height =
|
|
29
|
-
noBackgroundVideoEffects =
|
|
30
|
-
sourceVideoOrientation =
|
|
31
|
-
src =
|
|
32
|
-
startVideoFrom =
|
|
33
|
-
transparent =
|
|
34
|
-
width =
|
|
48
|
+
var SourceVideo = function SourceVideo(_ref3) {
|
|
49
|
+
var faceMetadata = _ref3.faceMetadata,
|
|
50
|
+
height = _ref3.height,
|
|
51
|
+
noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
|
|
52
|
+
sourceVideoOrientation = _ref3.sourceVideoOrientation,
|
|
53
|
+
src = _ref3.src,
|
|
54
|
+
startVideoFrom = _ref3.startVideoFrom,
|
|
55
|
+
transparent = _ref3.transparent,
|
|
56
|
+
width = _ref3.width;
|
|
35
57
|
if (!src) {
|
|
36
58
|
return null;
|
|
37
59
|
}
|
|
@@ -67,28 +89,27 @@ var SourceVideo = function SourceVideo(_ref2) {
|
|
|
67
89
|
}
|
|
68
90
|
});
|
|
69
91
|
};
|
|
70
|
-
var MotionStillInsetContent = function MotionStillInsetContent(
|
|
71
|
-
var children =
|
|
72
|
-
disableTransitionSounds =
|
|
73
|
-
durationInFrames =
|
|
74
|
-
faceMetadata =
|
|
75
|
-
frameColor =
|
|
76
|
-
height =
|
|
77
|
-
imageUrl =
|
|
78
|
-
noBackgroundVideoEffects =
|
|
79
|
-
outputOrientation =
|
|
80
|
-
sourceVideoOrientation =
|
|
81
|
-
startVideoFrom =
|
|
82
|
-
videoUrl =
|
|
83
|
-
width =
|
|
92
|
+
var MotionStillInsetContent = function MotionStillInsetContent(_ref4) {
|
|
93
|
+
var children = _ref4.children,
|
|
94
|
+
disableTransitionSounds = _ref4.disableTransitionSounds,
|
|
95
|
+
durationInFrames = _ref4.durationInFrames,
|
|
96
|
+
faceMetadata = _ref4.faceMetadata,
|
|
97
|
+
frameColor = _ref4.frameColor,
|
|
98
|
+
height = _ref4.height,
|
|
99
|
+
imageUrl = _ref4.imageUrl,
|
|
100
|
+
noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
|
|
101
|
+
outputOrientation = _ref4.outputOrientation,
|
|
102
|
+
sourceVideoOrientation = _ref4.sourceVideoOrientation,
|
|
103
|
+
startVideoFrom = _ref4.startVideoFrom,
|
|
104
|
+
videoUrl = _ref4.videoUrl,
|
|
105
|
+
width = _ref4.width;
|
|
84
106
|
var frame = useCurrentFrame();
|
|
85
107
|
var _useVideoConfig = useVideoConfig(),
|
|
86
108
|
fps = _useVideoConfig.fps;
|
|
87
|
-
var
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
extrapolateRight: "clamp"
|
|
109
|
+
var progress = getInsetProgress({
|
|
110
|
+
durationInFrames: durationInFrames,
|
|
111
|
+
frame: frame,
|
|
112
|
+
fps: fps
|
|
92
113
|
});
|
|
93
114
|
var _useTheme = useTheme(),
|
|
94
115
|
accentColor = _useTheme.accentColor;
|
|
@@ -158,21 +179,21 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref3) {
|
|
|
158
179
|
}
|
|
159
180
|
}, children)));
|
|
160
181
|
};
|
|
161
|
-
export var MotionStillInset = function MotionStillInset(
|
|
182
|
+
export var MotionStillInset = function MotionStillInset(_ref5) {
|
|
162
183
|
var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
|
|
163
|
-
var children =
|
|
164
|
-
|
|
165
|
-
disableTransitionSounds =
|
|
166
|
-
durationInFrames =
|
|
167
|
-
faceMetadata =
|
|
168
|
-
frameColor =
|
|
169
|
-
imageUrl =
|
|
170
|
-
noBackgroundVideoEffects =
|
|
171
|
-
sourceVideoOrientation =
|
|
172
|
-
startVideoFrom =
|
|
173
|
-
|
|
174
|
-
useSquareInLandscape =
|
|
175
|
-
videoUrl =
|
|
184
|
+
var children = _ref5.children,
|
|
185
|
+
_ref5$disableTransiti = _ref5.disableTransitionSounds,
|
|
186
|
+
disableTransitionSounds = _ref5$disableTransiti === void 0 ? false : _ref5$disableTransiti,
|
|
187
|
+
durationInFrames = _ref5.durationInFrames,
|
|
188
|
+
faceMetadata = _ref5.faceMetadata,
|
|
189
|
+
frameColor = _ref5.frameColor,
|
|
190
|
+
imageUrl = _ref5.imageUrl,
|
|
191
|
+
noBackgroundVideoEffects = _ref5.noBackgroundVideoEffects,
|
|
192
|
+
sourceVideoOrientation = _ref5.sourceVideoOrientation,
|
|
193
|
+
startVideoFrom = _ref5.startVideoFrom,
|
|
194
|
+
_ref5$useSquareInLand = _ref5.useSquareInLandscape,
|
|
195
|
+
useSquareInLandscape = _ref5$useSquareInLand === void 0 ? false : _ref5$useSquareInLand,
|
|
196
|
+
videoUrl = _ref5.videoUrl;
|
|
176
197
|
var _useVideoConfig2 = useVideoConfig(),
|
|
177
198
|
outputWidth = _useVideoConfig2.width,
|
|
178
199
|
outputHeight = _useVideoConfig2.height,
|