@zync/zync-screnplay-player 0.1.235 → 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.
Files changed (5) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/screenplay/RemotionRenderer/components/layouts/BrollInset.js +75 -51
  3. package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillInset.js +74 -53
  4. package/dist/screenplay/RemotionRenderer/development.js +1 -1
  5. package/package.json +1 -1
package/dist/screenplay/RemotionRenderer/components/layouts/BrollInset.js CHANGED
@@ -1,13 +1,36 @@
1
1
  import React from "react";
2
2
  import { AbsoluteFill, Audio, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig, Video } from "remotion";
3
3
  import { useOrientationBased } from "../../hooks/useOrientationBased.js";
4
+ import { useTheme } from "../../theme/hooks/useTheme.js";
4
5
  import FaceCenteredVideo from "../utils/FaceCenteredVideo";
5
6
  var ANIMATION_SECONDS = 1.2;
6
7
  var INSET_ASPECT_RATIO = 9 / 16;
7
- var getInsetMetrics = function getInsetMetrics(_ref) {
8
- var width = _ref.width,
9
- height = _ref.height,
10
- outputOrientation = _ref.outputOrientation;
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;
11
34
  var padding = Math.max(32, Math.min(width, height) * 0.045);
12
35
  var rawWidth = width * 0.24;
13
36
  var maxWidthByHeight = (height - padding * 2) * INSET_ASPECT_RATIO;
@@ -22,15 +45,15 @@ var getInsetMetrics = function getInsetMetrics(_ref) {
22
45
  width: finalWidth
23
46
  };
24
47
  };
25
- var SourceVideo = function SourceVideo(_ref2) {
26
- var faceMetadata = _ref2.faceMetadata,
27
- height = _ref2.height,
28
- noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
29
- sourceVideoOrientation = _ref2.sourceVideoOrientation,
30
- src = _ref2.src,
31
- startVideoFrom = _ref2.startVideoFrom,
32
- transparent = _ref2.transparent,
33
- width = _ref2.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;
34
57
  if (!src) {
35
58
  return null;
36
59
  }
@@ -66,31 +89,30 @@ var SourceVideo = function SourceVideo(_ref2) {
66
89
  }
67
90
  });
68
91
  };
69
- var BrollInsetContent = function BrollInsetContent(_ref3) {
70
- var brollUrl = _ref3.brollUrl,
71
- children = _ref3.children,
72
- disableTransitionSounds = _ref3.disableTransitionSounds,
73
- faceMetadata = _ref3.faceMetadata,
74
- frameColor = _ref3.frameColor,
75
- height = _ref3.height,
76
- noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
77
- noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
78
- outputOrientation = _ref3.outputOrientation,
79
- sourceVideoOrientation = _ref3.sourceVideoOrientation,
80
- startVideoFrom = _ref3.startVideoFrom,
81
- videoUrl = _ref3.videoUrl,
82
- width = _ref3.width;
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 animationFrames = fps * ANIMATION_SECONDS;
87
- var progress = interpolate(frame, [0, animationFrames], [0, 1], {
88
- easing: Easing.out(Easing.cubic),
89
- extrapolateLeft: "clamp",
90
- extrapolateRight: "clamp"
109
+ var progress = getInsetProgress({
110
+ durationInFrames: durationInFrames,
111
+ frame: frame,
112
+ fps: fps
91
113
  });
92
- var sourceSrc = noBackgroundVideoUrl || videoUrl;
93
- var sourceTransparent = Boolean(noBackgroundVideoUrl);
114
+ var _useTheme = useTheme(),
115
+ accentColor = _useTheme.accentColor;
94
116
  var inset = getInsetMetrics({
95
117
  width: width,
96
118
  height: height,
@@ -123,11 +145,13 @@ var BrollInsetContent = function BrollInsetContent(_ref3) {
123
145
  }) : null, /*#__PURE__*/React.createElement("div", {
124
146
  style: {
125
147
  borderRadius: sourceBorderRadius,
148
+ border: accentColor ? "4px solid ".concat(accentColor) : undefined,
126
149
  boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
127
150
  height: sourceHeight,
128
151
  left: sourceLeft,
129
152
  overflow: "hidden",
130
153
  position: "absolute",
154
+ boxSizing: "border-box",
131
155
  top: sourceTop,
132
156
  width: sourceWidth,
133
157
  zIndex: 2
@@ -137,9 +161,9 @@ var BrollInsetContent = function BrollInsetContent(_ref3) {
137
161
  height: sourceHeight,
138
162
  noBackgroundVideoEffects: noBackgroundVideoEffects,
139
163
  sourceVideoOrientation: sourceVideoOrientation,
140
- src: sourceSrc,
164
+ src: videoUrl,
141
165
  startVideoFrom: startVideoFrom,
142
- transparent: sourceTransparent,
166
+ transparent: false,
143
167
  width: sourceWidth
144
168
  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
145
169
  style: {
@@ -147,21 +171,21 @@ var BrollInsetContent = function BrollInsetContent(_ref3) {
147
171
  }
148
172
  }, children)));
149
173
  };
150
- export var BrollInset = function BrollInset(_ref4) {
174
+ export var BrollInset = function BrollInset(_ref5) {
151
175
  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
152
- var brollUrl = _ref4.brollUrl,
153
- children = _ref4.children,
154
- _ref4$disableTransiti = _ref4.disableTransitionSounds,
155
- disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
156
- faceMetadata = _ref4.faceMetadata,
157
- frameColor = _ref4.frameColor,
158
- noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
159
- noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
160
- sourceVideoOrientation = _ref4.sourceVideoOrientation,
161
- startVideoFrom = _ref4.startVideoFrom,
162
- _ref4$useSquareInLand = _ref4.useSquareInLandscape,
163
- useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand,
164
- videoUrl = _ref4.videoUrl;
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;
165
189
  var _useVideoConfig2 = useVideoConfig(),
166
190
  outputWidth = _useVideoConfig2.width,
167
191
  outputHeight = _useVideoConfig2.height,
@@ -189,11 +213,11 @@ export var BrollInset = function BrollInset(_ref4) {
189
213
  var content = /*#__PURE__*/React.createElement(BrollInsetContent, {
190
214
  brollUrl: brollUrl,
191
215
  disableTransitionSounds: disableTransitionSounds,
216
+ durationInFrames: durationInFrames,
192
217
  faceMetadata: faceMetadata,
193
218
  frameColor: frameColor,
194
219
  height: height,
195
220
  noBackgroundVideoEffects: noBackgroundVideoEffects,
196
- noBackgroundVideoUrl: noBackgroundVideoUrl,
197
221
  outputOrientation: activeOrientation,
198
222
  sourceVideoOrientation: sourceVideoOrientation,
199
223
  startVideoFrom: startVideoFrom,
package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillInset.js CHANGED
@@ -1,13 +1,36 @@
1
1
  import React from "react";
2
2
  import { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
3
3
  import { useOrientationBased } from "../../hooks/useOrientationBased.js";
4
+ import { useTheme } from "../../theme/hooks/useTheme.js";
4
5
  import FaceCenteredVideo from "../utils/FaceCenteredVideo";
5
6
  var ANIMATION_SECONDS = 1.2;
6
7
  var INSET_ASPECT_RATIO = 9 / 16;
7
- var getInsetMetrics = function getInsetMetrics(_ref) {
8
- var width = _ref.width,
9
- height = _ref.height,
10
- outputOrientation = _ref.outputOrientation;
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;
11
34
  var padding = Math.max(32, Math.min(width, height) * 0.045);
12
35
  var rawWidth = width * 0.24;
13
36
  var maxWidthByHeight = (height - padding * 2) * INSET_ASPECT_RATIO;
@@ -22,15 +45,15 @@ var getInsetMetrics = function getInsetMetrics(_ref) {
22
45
  width: finalWidth
23
46
  };
24
47
  };
25
- var SourceVideo = function SourceVideo(_ref2) {
26
- var faceMetadata = _ref2.faceMetadata,
27
- height = _ref2.height,
28
- noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
29
- sourceVideoOrientation = _ref2.sourceVideoOrientation,
30
- src = _ref2.src,
31
- startVideoFrom = _ref2.startVideoFrom,
32
- transparent = _ref2.transparent,
33
- width = _ref2.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;
34
57
  if (!src) {
35
58
  return null;
36
59
  }
@@ -66,32 +89,30 @@ var SourceVideo = function SourceVideo(_ref2) {
66
89
  }
67
90
  });
68
91
  };
69
- var MotionStillInsetContent = function MotionStillInsetContent(_ref3) {
70
- var children = _ref3.children,
71
- disableTransitionSounds = _ref3.disableTransitionSounds,
72
- durationInFrames = _ref3.durationInFrames,
73
- faceMetadata = _ref3.faceMetadata,
74
- frameColor = _ref3.frameColor,
75
- height = _ref3.height,
76
- imageUrl = _ref3.imageUrl,
77
- noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
78
- noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
79
- outputOrientation = _ref3.outputOrientation,
80
- sourceVideoOrientation = _ref3.sourceVideoOrientation,
81
- startVideoFrom = _ref3.startVideoFrom,
82
- videoUrl = _ref3.videoUrl,
83
- width = _ref3.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 animationFrames = fps * ANIMATION_SECONDS;
88
- var progress = interpolate(frame, [0, animationFrames], [0, 1], {
89
- easing: Easing.out(Easing.cubic),
90
- extrapolateLeft: "clamp",
91
- extrapolateRight: "clamp"
109
+ var progress = getInsetProgress({
110
+ durationInFrames: durationInFrames,
111
+ frame: frame,
112
+ fps: fps
92
113
  });
93
- var sourceSrc = noBackgroundVideoUrl || videoUrl;
94
- var sourceTransparent = Boolean(noBackgroundVideoUrl);
114
+ var _useTheme = useTheme(),
115
+ accentColor = _useTheme.accentColor;
95
116
  var inset = getInsetMetrics({
96
117
  width: width,
97
118
  height: height,
@@ -132,11 +153,13 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref3) {
132
153
  }) : null, /*#__PURE__*/React.createElement("div", {
133
154
  style: {
134
155
  borderRadius: sourceBorderRadius,
156
+ border: accentColor ? "4px solid ".concat(accentColor) : undefined,
135
157
  boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
136
158
  height: sourceHeight,
137
159
  left: sourceLeft,
138
160
  overflow: "hidden",
139
161
  position: "absolute",
162
+ boxSizing: "border-box",
140
163
  top: sourceTop,
141
164
  width: sourceWidth,
142
165
  zIndex: 2
@@ -146,9 +169,9 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref3) {
146
169
  height: sourceHeight,
147
170
  noBackgroundVideoEffects: noBackgroundVideoEffects,
148
171
  sourceVideoOrientation: sourceVideoOrientation,
149
- src: sourceSrc,
172
+ src: videoUrl,
150
173
  startVideoFrom: startVideoFrom,
151
- transparent: sourceTransparent,
174
+ transparent: false,
152
175
  width: sourceWidth
153
176
  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
154
177
  style: {
@@ -156,22 +179,21 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref3) {
156
179
  }
157
180
  }, children)));
158
181
  };
159
- export var MotionStillInset = function MotionStillInset(_ref4) {
182
+ export var MotionStillInset = function MotionStillInset(_ref5) {
160
183
  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
161
- var children = _ref4.children,
162
- _ref4$disableTransiti = _ref4.disableTransitionSounds,
163
- disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
164
- durationInFrames = _ref4.durationInFrames,
165
- faceMetadata = _ref4.faceMetadata,
166
- frameColor = _ref4.frameColor,
167
- imageUrl = _ref4.imageUrl,
168
- noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
169
- noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
170
- sourceVideoOrientation = _ref4.sourceVideoOrientation,
171
- startVideoFrom = _ref4.startVideoFrom,
172
- _ref4$useSquareInLand = _ref4.useSquareInLandscape,
173
- useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand,
174
- videoUrl = _ref4.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;
175
197
  var _useVideoConfig2 = useVideoConfig(),
176
198
  outputWidth = _useVideoConfig2.width,
177
199
  outputHeight = _useVideoConfig2.height,
@@ -204,7 +226,6 @@ export var MotionStillInset = function MotionStillInset(_ref4) {
204
226
  height: height,
205
227
  imageUrl: imageUrl,
206
228
  noBackgroundVideoEffects: noBackgroundVideoEffects,
207
- noBackgroundVideoUrl: noBackgroundVideoUrl,
208
229
  outputOrientation: activeOrientation,
209
230
  sourceVideoOrientation: sourceVideoOrientation,
210
231
  startVideoFrom: startVideoFrom,
package/dist/screenplay/RemotionRenderer/development.js CHANGED
@@ -1723,7 +1723,7 @@ var renderer = new RemotionRenderer({
1723
1723
  }]
1724
1724
  }],
1725
1725
  output: {
1726
- orientation: "portrait",
1726
+ orientation: "landscape",
1727
1727
  fps: 60,
1728
1728
  callbackUrl: "https://contentkit.zync.ai/api/processor/callback",
1729
1729
  callbackMetadata: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zync/zync-screnplay-player",
3
- "version": "0.1.235",
3
+ "version": "0.1.237",
4
4
  "files": [
5
5
  "dist"
6
6
  ],