@zync/zync-screnplay-player 0.1.229 → 0.1.230

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 (10) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/bundle.js.LICENSE.txt +13 -26
  3. package/dist/screenplay/RemotionRenderer/components/layouts/HookVideo.js +23 -42
  4. package/dist/screenplay/RemotionRenderer/development.js +1 -1
  5. package/dist/screenplay/RemotionRenderer/main/lib/layouts/HookVideoLayout.js +2 -4
  6. package/dist/screenplay/RemotionRenderer/main/lib/layouts/SimpleFrameLayout.js +1 -0
  7. package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js +153 -254
  8. package/package.json +6 -11
  9. package/dist/renderer.cjs +0 -1
  10. package/dist/screenplay/RemotionRenderer/components/layouts/HookThreeGlitchOverlay.js +0 -141
package/dist/bundle.js.LICENSE.txt CHANGED
@@ -1,20 +1,10 @@
1
- /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
2
-
3
- /**
4
- * @license
5
- * Copyright 2010-2025 Three.js Authors
6
- * SPDX-License-Identifier: MIT
7
- */
1
+ /*
2
+ object-assign
3
+ (c) Sindre Sorhus
4
+ @license MIT
5
+ */
8
6
 
9
- /**
10
- * @license React
11
- * react-dom.production.min.js
12
- *
13
- * Copyright (c) Facebook, Inc. and its affiliates.
14
- *
15
- * This source code is licensed under the MIT license found in the
16
- * LICENSE file in the root directory of this source tree.
17
- */
7
+ /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
18
8
 
19
9
  /**
20
10
  * @license React
@@ -28,7 +18,7 @@
28
18
 
29
19
  /**
30
20
  * @license React
31
- * react-reconciler-constants.production.min.js
21
+ * react.production.min.js
32
22
  *
33
23
  * Copyright (c) Facebook, Inc. and its affiliates.
34
24
  *
@@ -36,9 +26,8 @@
36
26
  * LICENSE file in the root directory of this source tree.
37
27
  */
38
28
 
39
- /**
40
- * @license React
41
- * react-reconciler.production.min.js
29
+ /** @license React v0.19.1
30
+ * scheduler.production.min.js
42
31
  *
43
32
  * Copyright (c) Facebook, Inc. and its affiliates.
44
33
  *
@@ -46,9 +35,8 @@
46
35
  * LICENSE file in the root directory of this source tree.
47
36
  */
48
37
 
49
- /**
50
- * @license React
51
- * react.production.min.js
38
+ /** @license React v16.14.0
39
+ * react-dom.production.min.js
52
40
  *
53
41
  * Copyright (c) Facebook, Inc. and its affiliates.
54
42
  *
@@ -56,9 +44,8 @@
56
44
  * LICENSE file in the root directory of this source tree.
57
45
  */
58
46
 
59
- /**
60
- * @license React
61
- * scheduler.production.min.js
47
+ /** @license React v16.14.0
48
+ * react.production.min.js
62
49
  *
63
50
  * Copyright (c) Facebook, Inc. and its affiliates.
64
51
  *
package/dist/screenplay/RemotionRenderer/components/layouts/HookVideo.js CHANGED
@@ -15,7 +15,6 @@ import FaceCenteredVideo from "../utils/FaceCenteredVideo";
15
15
  import PausableImg from "../utils/PausableImg";
16
16
  import { useVirtualBackground } from "../../hooks/useVirtualBackground";
17
17
  import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
18
- import { HookThreeGlitchOverlay } from "./HookThreeGlitchOverlay";
19
18
  var _loadHeadlineFont = loadHeadlineFont(),
20
19
  headlineFontFamily = _loadHeadlineFont.fontFamily;
21
20
  var HOOK_STYLE_PRESETS = {
@@ -25,9 +24,6 @@ var HOOK_STYLE_PRESETS = {
25
24
  border_alarm: "border_alarm",
26
25
  split_reveal: "split_reveal"
27
26
  };
28
- var coerceBoolean = function coerceBoolean(value) {
29
- return value === true || value === "true" || value === 1 || value === "1";
30
- };
31
27
  var normalizeWordForMatch = function normalizeWordForMatch(word) {
32
28
  return word.toLowerCase().replace(/^[^a-z0-9]+|[^a-z0-9]+$/gi, "");
33
29
  };
@@ -222,8 +218,9 @@ var HookHeadline = function HookHeadline(_ref3) {
222
218
  extrapolateLeft: "clamp",
223
219
  extrapolateRight: "clamp"
224
220
  });
221
+ var glitchOffset = style === HOOK_STYLE_PRESETS.glitch_verdict ? (frame % 2 === 0 ? 1 : -1) * 4 : 0;
225
222
  var headlineColor = style === HOOK_STYLE_PRESETS.mono_shock ? "rgba(255, 255, 255, 0.98)" : primaryContrast || "#ffffff";
226
- var headlineTextShadow = style === HOOK_STYLE_PRESETS.mono_shock ? "0 3px 0 rgba(0, 0, 0, 0.48), 0 14px 36px rgba(0, 0, 0, 0.62)" : "0 12px 36px rgba(0, 0, 0, 0.45)";
223
+ var headlineTextShadow = style === HOOK_STYLE_PRESETS.glitch_verdict ? "3px 0 rgba(255, 40, 95, 0.9), -3px 0 rgba(0, 240, 255, 0.9), 0 10px 40px rgba(0, 0, 0, 0.55)" : style === HOOK_STYLE_PRESETS.mono_shock ? "0 3px 0 rgba(0, 0, 0, 0.48), 0 14px 36px rgba(0, 0, 0, 0.62)" : "0 12px 36px rgba(0, 0, 0, 0.45)";
227
224
  var containerStyle = style === HOOK_STYLE_PRESETS.mono_shock ? {
228
225
  display: "inline-flex",
229
226
  flexDirection: "column",
@@ -237,7 +234,7 @@ var HookHeadline = function HookHeadline(_ref3) {
237
234
  return /*#__PURE__*/React.createElement("div", {
238
235
  style: {
239
236
  opacity: reveal * outroOpacity,
240
- transform: "translate3d(0, ".concat((1 - reveal) * 24, "px, 0) scale(").concat(0.94 + reveal * 0.06, ")"),
237
+ transform: "translate3d(".concat(glitchOffset, "px, ").concat((1 - reveal) * 24, "px, 0) scale(").concat(0.94 + reveal * 0.06, ")"),
241
238
  willChange: "transform, opacity",
242
239
  maxWidth: maxWidth
243
240
  }
@@ -435,11 +432,7 @@ export var HookVideo = function HookVideo(_ref5) {
435
432
  _ref5$disableHookSoun = _ref5.disableHookSounds,
436
433
  disableHookSounds = _ref5$disableHookSoun === void 0 ? false : _ref5$disableHookSoun,
437
434
  _ref5$hookExitEffectE = _ref5.hookExitEffectEnabled,
438
- hookExitEffectEnabled = _ref5$hookExitEffectE === void 0 ? false : _ref5$hookExitEffectE,
439
- _ref5$hookThreeGlitch = _ref5.hookThreeGlitchEffectEnabled,
440
- hookThreeGlitchEffectEnabled = _ref5$hookThreeGlitch === void 0 ? false : _ref5$hookThreeGlitch,
441
- _ref5$disableHookThre = _ref5.disableHookThreeGlitchEffect,
442
- disableHookThreeGlitchEffect = _ref5$disableHookThre === void 0 ? false : _ref5$disableHookThre;
435
+ hookExitEffectEnabled = _ref5$hookExitEffectE === void 0 ? false : _ref5$hookExitEffectE;
443
436
  var frame = useCurrentFrame();
444
437
  var _useVideoConfig = useVideoConfig(),
445
438
  outputWidth = _useVideoConfig.width,
@@ -465,7 +458,6 @@ export var HookVideo = function HookVideo(_ref5) {
465
458
  primaryColor = _useTheme.primaryColor,
466
459
  primaryContrast = _useTheme.primaryContrast;
467
460
  var style = Object.values(HOOK_STYLE_PRESETS).includes(hookStyle) ? hookStyle : HOOK_STYLE_PRESETS.punch_zoom;
468
- var titleStyle = style === HOOK_STYLE_PRESETS.glitch_verdict ? HOOK_STYLE_PRESETS.mono_shock : style;
469
461
  var baseZoom = videoZoom || 1;
470
462
  var _getHookTiming = getHookTiming({
471
463
  durationInFrames: durationInFrames,
@@ -477,28 +469,28 @@ export var HookVideo = function HookVideo(_ref5) {
477
469
  shortSegment = _getHookTiming.shortSegment;
478
470
  var preset = useOrientationBased({
479
471
  landscape: {
480
- textBoxWidth: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? width * 0.38 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? width * 0.46 : width * 0.58,
481
- textBoxHeight: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.38 : height * 0.54,
482
- maxFontSize: 148,
483
- top: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.17 : height * 0.19,
484
- left: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? CHROME_PADDING * 2.2 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? CHROME_PADDING * 2.1 : width * 0.21,
485
- align: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
472
+ textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.38 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.46 : width * 0.58,
473
+ textBoxHeight: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.38 : height * 0.54,
474
+ maxFontSize: style === HOOK_STYLE_PRESETS.glitch_verdict ? 138 : 148,
475
+ top: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.17 : height * 0.19,
476
+ left: style === HOOK_STYLE_PRESETS.split_reveal ? CHROME_PADDING * 2.2 : style === HOOK_STYLE_PRESETS.mono_shock || style === HOOK_STYLE_PRESETS.glitch_verdict ? CHROME_PADDING * 2.1 : width * 0.21,
477
+ align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
486
478
  },
487
479
  portrait: {
488
- textBoxWidth: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? width * 0.78 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? width * 0.76 : width * 0.84,
489
- textBoxHeight: titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.28 : height * 0.36,
490
- maxFontSize: 126,
491
- top: titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : height * 0.16,
492
- left: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? width * 0.08 : CHROME_PADDING * 1.8,
493
- align: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
480
+ textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.78 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.76 : width * 0.84,
481
+ textBoxHeight: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.28 : height * 0.36,
482
+ maxFontSize: style === HOOK_STYLE_PRESETS.glitch_verdict ? 118 : 126,
483
+ top: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : height * 0.16,
484
+ left: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? width * 0.08 : CHROME_PADDING * 1.8,
485
+ align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
494
486
  },
495
487
  square: {
496
- textBoxWidth: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? width * 0.46 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? width * 0.52 : width * 0.72,
497
- textBoxHeight: titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.32 : height * 0.42,
488
+ textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.46 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.52 : width * 0.72,
489
+ textBoxHeight: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.32 : height * 0.42,
498
490
  maxFontSize: 116,
499
- top: titleStyle === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : titleStyle === HOOK_STYLE_PRESETS.split_reveal ? height * 0.16 : height * 0.18,
500
- left: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? width * 0.14 : CHROME_PADDING * 1.8,
501
- align: titleStyle === HOOK_STYLE_PRESETS.punch_zoom || titleStyle === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
491
+ top: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.16 : height * 0.18,
492
+ left: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? width * 0.14 : CHROME_PADDING * 1.8,
493
+ align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
502
494
  }
503
495
  }, orientationOverride);
504
496
  var monoOverlayHoldFrames = style === HOOK_STYLE_PRESETS.mono_shock ? Math.round(fps * 0.55) : 0;
@@ -545,9 +537,6 @@ export var HookVideo = function HookVideo(_ref5) {
545
537
  extrapolateLeft: "clamp",
546
538
  extrapolateRight: "clamp"
547
539
  }) : 0;
548
- var threeGlitchDurationInFrames = Math.max(12, Math.min(24, Math.round(fps * 0.55), durationInFrames));
549
- var threeGlitchStartFrame = Math.max(0, effectiveHookFrames - Math.round(threeGlitchDurationInFrames * 0.62));
550
- var showThreeGlitch = !shortSegment && !coerceBoolean(disableHookThreeGlitchEffect) && (style === HOOK_STYLE_PRESETS.glitch_verdict || coerceBoolean(hookThreeGlitchEffectEnabled));
551
540
  var _getVideoTreatment = getVideoTreatment({
552
541
  frame: frame,
553
542
  style: style,
@@ -788,15 +777,7 @@ export var HookVideo = function HookVideo(_ref5) {
788
777
  objectFit: "cover",
789
778
  opacity: frame % 2 === 0 ? 0.35 : 0.12
790
779
  }
791
- })) : null, showThreeGlitch ? /*#__PURE__*/React.createElement(HookThreeGlitchOverlay, {
792
- width: contentWidth,
793
- height: contentHeight,
794
- startFrame: threeGlitchStartFrame,
795
- durationInFrames: threeGlitchDurationInFrames,
796
- accentColor: accentColor,
797
- intensity: style === HOOK_STYLE_PRESETS.glitch_verdict ? 1 : 0.72,
798
- zIndex: 19
799
- }) : null, flashOpacity > 0 ? /*#__PURE__*/React.createElement(AbsoluteFill, {
780
+ })) : null, flashOpacity > 0 ? /*#__PURE__*/React.createElement(AbsoluteFill, {
800
781
  style: {
801
782
  zIndex: 18,
802
783
  opacity: flashOpacity,
@@ -828,7 +809,7 @@ export var HookVideo = function HookVideo(_ref5) {
828
809
  accentColor: accentColor,
829
810
  accentContrast: accentContrast,
830
811
  primaryContrast: primaryContrast,
831
- style: titleStyle,
812
+ style: style,
832
813
  frame: frame,
833
814
  fps: fps,
834
815
  hookFrames: effectiveHookFrames
package/dist/screenplay/RemotionRenderer/development.js CHANGED
@@ -51,7 +51,7 @@ var renderer = new RemotionRenderer({
51
51
  },
52
52
  hookText: "Send a personal thank you note",
53
53
  hookAccentText: "thank you note",
54
- hookStyle: "glitch_verdict",
54
+ hookStyle: "mono_shock",
55
55
  hookDurationSeconds: 14.805,
56
56
  paddingLeft: 8.72,
57
57
  paddingRight: 39.366822,
package/dist/screenplay/RemotionRenderer/main/lib/layouts/HookVideoLayout.js CHANGED
@@ -27,7 +27,7 @@ export var HookVideoLayout = /*#__PURE__*/function (_Layout) {
27
27
  return _createClass(HookVideoLayout, [{
28
28
  key: "getVideoProps",
29
29
  value: function getVideoProps(props) {
30
- var _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3, _props$data4, _props$data$hookDurat, _props$data5, _props$data6, _props$data7, _props$data8, _props$data9, _props$data10, _props$data11;
30
+ var _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3, _props$data4, _props$data$hookDurat, _props$data5, _props$data6, _props$data7, _props$data8, _props$data9;
31
31
  this.props = {
32
32
  videoUrl: (_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.videoUrl,
33
33
  videoZoom: ((_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.zoom) || 1,
@@ -39,9 +39,7 @@ export var HookVideoLayout = /*#__PURE__*/function (_Layout) {
39
39
  hookAccentText: (_props$data6 = props.data) === null || _props$data6 === void 0 ? void 0 : _props$data6.hookAccentText,
40
40
  hookSubtext: (_props$data7 = props.data) === null || _props$data7 === void 0 ? void 0 : _props$data7.hookSubtext,
41
41
  disableHookSounds: ((_props$data8 = props.data) === null || _props$data8 === void 0 ? void 0 : _props$data8.disableHookSounds) || false,
42
- disableHookExitEffect: coerceBool((_props$data9 = props.data) === null || _props$data9 === void 0 ? void 0 : _props$data9.disableHookExitEffect),
43
- hookThreeGlitchEffectEnabled: coerceBool((_props$data10 = props.data) === null || _props$data10 === void 0 ? void 0 : _props$data10.hookThreeGlitchEffectEnabled),
44
- disableHookThreeGlitchEffect: coerceBool((_props$data11 = props.data) === null || _props$data11 === void 0 ? void 0 : _props$data11.disableHookThreeGlitchEffect)
42
+ disableHookExitEffect: coerceBool((_props$data9 = props.data) === null || _props$data9 === void 0 ? void 0 : _props$data9.disableHookExitEffect)
45
43
  };
46
44
  }
47
45
  }]);
package/dist/screenplay/RemotionRenderer/main/lib/layouts/SimpleFrameLayout.js CHANGED
@@ -13,6 +13,7 @@ function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new T
13
13
  function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
14
14
  import { Layout } from "./DefaultLayout.js";
15
15
  import { cleanFacemetadata } from "../../../helpers/cleanFacemetadata";
16
+ import { SimpleFrameSentence } from "../../../components/layouts/SimpleFrameSentence";
16
17
  export var SimpleFrameLayout = /*#__PURE__*/function (_Layout) {
17
18
  function SimpleFrameLayout(props) {
18
19
  var _this;