@zync/zync-screnplay-player 0.1.203 → 0.1.204

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 (7) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/screenplay/RemotionRenderer/RemotionRenderer.js +13 -12
  3. package/dist/screenplay/RemotionRenderer/components/layouts/Handoff.js +26 -10
  4. package/dist/screenplay/RemotionRenderer/development.js +786 -1737
  5. package/dist/screenplay/RemotionRenderer/main/lib/layouts/HandoffLayout.js +3 -2
  6. package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag.js +20 -6
  7. package/package.json +1 -1
package/dist/screenplay/RemotionRenderer/RemotionRenderer.js CHANGED
@@ -90,26 +90,27 @@ export var RemotionRenderer = /*#__PURE__*/function () {
90
90
  }, {
91
91
  key: "toRemotionFragment",
92
92
  value: function toRemotionFragment(screenPlaySegment, layout) {
93
- var _screenPlaySegment$da, _screenPlaySegment$da2, _layout$data, _screenPlaySegment$da3, _toFrames, _screenPlaySegment$da4, _screenPlaySegment$da5;
93
+ var _screenPlaySegment$da, _screenPlaySegment$da2, _layout$data, _screenPlaySegment$da3, _screenPlaySegment$da4, _layout$data2, _screenPlaySegment$da5, _toFrames, _screenPlaySegment$da6, _screenPlaySegment$da7;
94
94
  var trimLeft = 0;
95
95
  if (layout) {
96
96
  trimLeft = layout.data.trimLeft || 0;
97
97
  }
98
98
  var component = toPascalCase(screenPlaySegment.type);
99
99
  var inheritedProps = component === "HandoffNametag" ? {
100
- handoffNametagVariant: (_screenPlaySegment$da = (_screenPlaySegment$da2 = screenPlaySegment.data) === null || _screenPlaySegment$da2 === void 0 ? void 0 : _screenPlaySegment$da2.handoffNametagVariant) !== null && _screenPlaySegment$da !== void 0 ? _screenPlaySegment$da : layout === null || layout === void 0 ? void 0 : (_layout$data = layout.data) === null || _layout$data === void 0 ? void 0 : _layout$data.handoffNametagVariant
100
+ handoffNametagVariant: (_screenPlaySegment$da = (_screenPlaySegment$da2 = screenPlaySegment.data) === null || _screenPlaySegment$da2 === void 0 ? void 0 : _screenPlaySegment$da2.handoffNametagVariant) !== null && _screenPlaySegment$da !== void 0 ? _screenPlaySegment$da : layout === null || layout === void 0 ? void 0 : (_layout$data = layout.data) === null || _layout$data === void 0 ? void 0 : _layout$data.handoffNametagVariant,
101
+ useSquareInLandscapeFirstVideo: (_screenPlaySegment$da3 = (_screenPlaySegment$da4 = screenPlaySegment.data) === null || _screenPlaySegment$da4 === void 0 ? void 0 : _screenPlaySegment$da4.useSquareInLandscapeFirstVideo) !== null && _screenPlaySegment$da3 !== void 0 ? _screenPlaySegment$da3 : layout === null || layout === void 0 ? void 0 : (_layout$data2 = layout.data) === null || _layout$data2 === void 0 ? void 0 : _layout$data2.useSquareInLandscapeFirstVideo
101
102
  } : {};
102
103
  var from = this.fps * (screenPlaySegment.data.offset - trimLeft) || 0;
103
104
  var durationInFrames = toFrames(this.fps * screenPlaySegment.data.duration);
104
105
  var to = from + durationInFrames;
105
106
  return _objectSpread(_objectSpread(_objectSpread({}, screenPlaySegment.data), inheritedProps), {}, {
106
107
  component: component,
107
- videoUrl: (_screenPlaySegment$da3 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da3 === void 0 ? void 0 : _screenPlaySegment$da3.videoUrl,
108
- startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da4 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da4 === void 0 ? void 0 : _screenPlaySegment$da4.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
108
+ videoUrl: (_screenPlaySegment$da5 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da5 === void 0 ? void 0 : _screenPlaySegment$da5.videoUrl,
109
+ startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da6 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da6 === void 0 ? void 0 : _screenPlaySegment$da6.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
109
110
  durationInFrames: durationInFrames,
110
111
  from: from,
111
112
  to: to,
112
- videoZoom: (_screenPlaySegment$da5 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da5 === void 0 ? void 0 : _screenPlaySegment$da5.zoom,
113
+ videoZoom: (_screenPlaySegment$da7 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da7 === void 0 ? void 0 : _screenPlaySegment$da7.zoom,
113
114
  offset: toFrames(this.fps * (screenPlaySegment.data.offset - trimLeft)) || 0,
114
115
  theme: screenPlaySegment.theme,
115
116
  themeSettings: screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : screenPlaySegment.themeSettings
@@ -118,20 +119,20 @@ export var RemotionRenderer = /*#__PURE__*/function () {
118
119
  }, {
119
120
  key: "toRemotionAudioFragment",
120
121
  value: function toRemotionAudioFragment(screenPlaySegment) {
121
- var _screenPlaySegment$da6, _toFrames2, _screenPlaySegment$da7, _screenPlaySegment$da8, _screenPlaySegment$da9, _screenPlaySegment$da10, _screenPlaySegment$da11, _screenPlaySegment$da12;
122
+ var _screenPlaySegment$da8, _toFrames2, _screenPlaySegment$da9, _screenPlaySegment$da10, _screenPlaySegment$da11, _screenPlaySegment$da12, _screenPlaySegment$da13, _screenPlaySegment$da14;
122
123
  var from = this.fps * screenPlaySegment.data.offset || 0;
123
124
  var durationInFrames = toFrames(this.fps * screenPlaySegment.data.duration) || undefined;
124
125
  var to = from + durationInFrames;
125
126
  return _objectSpread(_objectSpread({}, screenPlaySegment.data), {}, {
126
127
  component: toPascalCase(screenPlaySegment.type),
127
- src: (_screenPlaySegment$da6 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da6 === void 0 ? void 0 : _screenPlaySegment$da6.url,
128
- startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da7 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da7 === void 0 ? void 0 : _screenPlaySegment$da7.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
128
+ src: (_screenPlaySegment$da8 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da8 === void 0 ? void 0 : _screenPlaySegment$da8.url,
129
+ startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da9 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da9 === void 0 ? void 0 : _screenPlaySegment$da9.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
129
130
  durationInFrames: durationInFrames,
130
131
  from: from,
131
132
  to: to,
132
133
  offset: this.fps * screenPlaySegment.data.offset || 0,
133
- volume: (_screenPlaySegment$da8 = (_screenPlaySegment$da9 = screenPlaySegment.data) === null || _screenPlaySegment$da9 === void 0 ? void 0 : (_screenPlaySegment$da10 = _screenPlaySegment$da9.sourceAudio) === null || _screenPlaySegment$da10 === void 0 ? void 0 : _screenPlaySegment$da10.volume) !== null && _screenPlaySegment$da8 !== void 0 ? _screenPlaySegment$da8 : 1,
134
- loop: ((_screenPlaySegment$da11 = screenPlaySegment.data) === null || _screenPlaySegment$da11 === void 0 ? void 0 : (_screenPlaySegment$da12 = _screenPlaySegment$da11.sourceAudio) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.loop) || false
134
+ volume: (_screenPlaySegment$da10 = (_screenPlaySegment$da11 = screenPlaySegment.data) === null || _screenPlaySegment$da11 === void 0 ? void 0 : (_screenPlaySegment$da12 = _screenPlaySegment$da11.sourceAudio) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.volume) !== null && _screenPlaySegment$da10 !== void 0 ? _screenPlaySegment$da10 : 1,
135
+ loop: ((_screenPlaySegment$da13 = screenPlaySegment.data) === null || _screenPlaySegment$da13 === void 0 ? void 0 : (_screenPlaySegment$da14 = _screenPlaySegment$da13.sourceAudio) === null || _screenPlaySegment$da14 === void 0 ? void 0 : _screenPlaySegment$da14.loop) || false
135
136
  });
136
137
  }
137
138
  }, {
@@ -163,10 +164,10 @@ export var RemotionRenderer = /*#__PURE__*/function () {
163
164
  key: "toRemotionCaptionSegment",
164
165
  value: function toRemotionCaptionSegment(screenPlaySegment, screenplayLayout) {
165
166
  var _screenplayLayout$dat,
166
- _screenPlaySegment$da13,
167
+ _screenPlaySegment$da15,
167
168
  _this3 = this;
168
169
  var trimLeft = (screenplayLayout === null || screenplayLayout === void 0 ? void 0 : (_screenplayLayout$dat = screenplayLayout.data) === null || _screenplayLayout$dat === void 0 ? void 0 : _screenplayLayout$dat.trimLeft) || 0;
169
- var segmentOffset = Number(screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : (_screenPlaySegment$da13 = screenPlaySegment.data) === null || _screenPlaySegment$da13 === void 0 ? void 0 : _screenPlaySegment$da13.offset);
170
+ var segmentOffset = Number(screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : (_screenPlaySegment$da15 = screenPlaySegment.data) === null || _screenPlaySegment$da15 === void 0 ? void 0 : _screenPlaySegment$da15.offset);
170
171
  var from = Number.isFinite(segmentOffset) ? this.fps * (segmentOffset + trimLeft) : 0;
171
172
  var transcripts = screenPlaySegment.data.transcript_text;
172
173
  if (!transcripts) {
package/dist/screenplay/RemotionRenderer/components/layouts/Handoff.js CHANGED
@@ -10,6 +10,7 @@ var TOTAL_X_PADDING = 20;
10
10
  var GAP_BETWEEN_VIDEOS = 5;
11
11
  var MIN_HANDOFF_OVERLAP = 0.5;
12
12
  export var Handoff = function Handoff(_ref) {
13
+ var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
13
14
  var startFirstVideoFrom = _ref.startFirstVideoFrom,
14
15
  startSecondVideoFrom = _ref.startSecondVideoFrom,
15
16
  firstVideoFile = _ref.firstVideoFile,
@@ -22,11 +23,18 @@ export var Handoff = function Handoff(_ref) {
22
23
  secondNoBackgroundVideoUrl = _ref.secondNoBackgroundVideoUrl,
23
24
  secondNoBackgroundFaceMetadata = _ref.secondNoBackgroundFaceMetadata,
24
25
  noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
25
- handoffOverlapSeconds = _ref.handoffOverlapSeconds;
26
- var _useVideoConfig = useVideoConfig(),
27
- width = _useVideoConfig.width,
28
- height = _useVideoConfig.height,
29
- fps = _useVideoConfig.fps;
26
+ handoffOverlapSeconds = _ref.handoffOverlapSeconds,
27
+ _ref$useSquareInLands = _ref.useSquareInLandscapeFirstVideo,
28
+ useSquareInLandscapeFirstVideo = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands;
29
+ var videoConfig = useVideoConfig();
30
+ var width = videoConfig.width,
31
+ height = videoConfig.height,
32
+ fps = videoConfig.fps,
33
+ _videoConfig$props = videoConfig.props,
34
+ compositionProps = _videoConfig$props === void 0 ? {} : _videoConfig$props;
35
+ var outputOrientation = (compositionProps === null || compositionProps === void 0 ? void 0 : (_compositionProps$out = compositionProps.output) === null || _compositionProps$out === void 0 ? void 0 : _compositionProps$out.orientation) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : (_window$screenplayPro2 = _window$screenplayPro.output) === null || _window$screenplayPro2 === void 0 ? void 0 : _window$screenplayPro2.orientation : undefined);
36
+ var shouldUseSquareInLandscapeFirstVideo = Boolean(useSquareInLandscapeFirstVideo) && outputOrientation === "landscape";
37
+ var squareSize = 1080;
30
38
  var frame = useCurrentFrame();
31
39
  var _useTheme = useTheme(),
32
40
  primaryColor = _useTheme.primaryColor;
@@ -68,6 +76,10 @@ export var Handoff = function Handoff(_ref) {
68
76
  var secondVideoWidth = useTimeInterpolate(inputRangeInSeconds, secondTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS);
69
77
  var firstVideoHeight = useTimeInterpolate(inputRangeInSeconds, firstTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
70
78
  var secondVideoHeight = useTimeInterpolate(inputRangeInSeconds, secondTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
79
+ var firstRenderVideoWidth = shouldUseSquareInLandscapeFirstVideo ? Math.min(firstVideoWidth, squareSize) : firstVideoWidth;
80
+ var firstRenderVideoHeight = shouldUseSquareInLandscapeFirstVideo ? Math.min(firstVideoHeight, squareSize) : firstVideoHeight;
81
+ var firstVideoCenteredOffsetX = shouldUseSquareInLandscapeFirstVideo ? Math.max(0, (width - TOTAL_X_PADDING - firstRenderVideoWidth) / 2) : 0;
82
+ var firstVideoTranslateX = useTimeInterpolate(inputRangeInSeconds, [firstVideoCenteredOffsetX, 0, 0, 0], DEFAULT_TIME_INTERPOLATE_OPTIONS);
71
83
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
72
84
  style: {
73
85
  width: width,
@@ -90,24 +102,28 @@ export var Handoff = function Handoff(_ref) {
90
102
  }, /*#__PURE__*/React.createElement(Freeze, {
91
103
  frame: firstVideoDurationInFrames,
92
104
  active: frame >= firstVideoDurationInFrames
105
+ }, /*#__PURE__*/React.createElement("div", {
106
+ style: {
107
+ transform: "translateX(".concat(firstVideoTranslateX, "px)")
108
+ }
93
109
  }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
94
110
  startFrom: startFirstVideoFrom,
95
111
  src: firstVideoFile,
96
112
  faceMetadata: firstNoBackgroundFaceMetadata,
97
113
  aspectRatio: orientation,
98
- containerWidth: firstVideoWidth,
99
- containerHeight: firstVideoHeight,
114
+ containerWidth: firstRenderVideoWidth,
115
+ containerHeight: firstRenderVideoHeight,
100
116
  useAveragePosition: true
101
117
  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
102
118
  startFrom: startFirstVideoFrom,
103
119
  src: firstVideoFile,
104
120
  style: {
105
- height: firstVideoHeight,
121
+ height: firstRenderVideoHeight,
106
122
  objectFit: "cover",
107
- width: firstVideoWidth,
123
+ width: firstRenderVideoWidth,
108
124
  borderRadius: "40px"
109
125
  }
110
- })), /*#__PURE__*/React.createElement(Sequence, {
126
+ }))), /*#__PURE__*/React.createElement(Sequence, {
111
127
  from: delayInFrames,
112
128
  layout: "none"
113
129
  }, secondNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {