@zync/zync-screnplay-player 0.1.238 → 0.1.240

package/dist/screenplay/RemotionRenderer/components/layouts/TextFullCover.js

@@ -16,8 +16,9 @@ var TEXT_COLOR = "#0a3567";
 var BACKGROUND_COLORS = ["#fff200", "#22f3d0", "#ff8a00", "#ff78a8", "#b9ff4a", "#f7f7f2"];
 var HORIZONTAL_SAFE_AREA = 0.86;
 var VERTICAL_SAFE_AREA = 0.5;
-var BACKGROUND_WIPE_FRAMES = 7;
-var WORD_STEP_FRAMES = 18;
+var MAX_BACKGROUND_WIPE_FRAMES = 7;
+var MAX_WORD_STEP_FRAMES = 18;
+var WORD_REVEAL_SECONDS = 3;
 var splitWords = function splitWords() {
   var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
   return String(text).trim().split(/\s+/).filter(Boolean);
@@ -83,13 +84,25 @@ var getFontSizeForFullText = function getFontSizeForFullText(_ref2) {
 var getBackgroundColor = function getBackgroundColor(index) {
   return BACKGROUND_COLORS[index % BACKGROUND_COLORS.length];
 };
-var PositionedWords = function PositionedWords(_ref3) {
-  var fontSize = _ref3.fontSize,
-    frame = _ref3.frame,
-    staticUntilIndex = _ref3.staticUntilIndex,
-    visibleUntilIndex = _ref3.visibleUntilIndex,
-    width = _ref3.width,
-    words = _ref3.words;
+var getWordStepFrames = function getWordStepFrames(_ref3) {
+  var fps = _ref3.fps,
+    wordCount = _ref3.wordCount;
+  if (wordCount <= 1) {
+    return MAX_WORD_STEP_FRAMES;
+  }
+  var revealFrames = fps * WORD_REVEAL_SECONDS;
+  var maxStepFrames = Math.floor(revealFrames / (wordCount - 1));
+  return Math.max(1, Math.min(MAX_WORD_STEP_FRAMES, maxStepFrames));
+};
+var PositionedWords = function PositionedWords(_ref4) {
+  var backgroundWipeFrames = _ref4.backgroundWipeFrames,
+    fontSize = _ref4.fontSize,
+    frame = _ref4.frame,
+    staticUntilIndex = _ref4.staticUntilIndex,
+    visibleUntilIndex = _ref4.visibleUntilIndex,
+    width = _ref4.width,
+    wordStepFrames = _ref4.wordStepFrames,
+    words = _ref4.words;
   return /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       alignItems: "center",
@@ -120,8 +133,8 @@ var PositionedWords = function PositionedWords(_ref3) {
       }, word);
     }
     var shouldAnimate = index > staticUntilIndex;
-    var wordFrame = frame - index * WORD_STEP_FRAMES;
-    var progress = shouldAnimate ? interpolate(wordFrame, [0, BACKGROUND_WIPE_FRAMES + 5], [0, 1], {
+    var wordFrame = frame - index * wordStepFrames;
+    var progress = shouldAnimate ? interpolate(wordFrame, [0, backgroundWipeFrames + 5], [0, 1], {
       easing: Easing.out(Easing.cubic),
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp"
@@ -151,34 +164,44 @@ var PositionedWords = function PositionedWords(_ref3) {
     }, word);
   })));
 };
-export var TextFullCover = function TextFullCover(_ref4) {
-  var text = _ref4.text,
-    children = _ref4.children,
-    muted = _ref4.muted,
-    _ref4$startVideoFrom = _ref4.startVideoFrom,
-    startVideoFrom = _ref4$startVideoFrom === void 0 ? 0 : _ref4$startVideoFrom,
-    videoUrl = _ref4.videoUrl,
-    _ref4$videoZoom = _ref4.videoZoom,
-    videoZoom = _ref4$videoZoom === void 0 ? 1 : _ref4$videoZoom,
-    _ref4$disableTransiti = _ref4.disableTransitionSounds,
-    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti;
+export var TextFullCover = function TextFullCover(_ref5) {
+  var _ref6, _ref7;
+  var text = _ref5.text,
+    sentence = _ref5.sentence,
+    sentenceText = _ref5.sentenceText,
+    children = _ref5.children,
+    muted = _ref5.muted,
+    _ref5$startVideoFrom = _ref5.startVideoFrom,
+    startVideoFrom = _ref5$startVideoFrom === void 0 ? 0 : _ref5$startVideoFrom,
+    videoUrl = _ref5.videoUrl,
+    _ref5$videoZoom = _ref5.videoZoom,
+    videoZoom = _ref5$videoZoom === void 0 ? 1 : _ref5$videoZoom,
+    _ref5$disableTransiti = _ref5.disableTransitionSounds,
+    disableTransitionSounds = _ref5$disableTransiti === void 0 ? false : _ref5$disableTransiti;
   var frame = useCurrentFrame();
   var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps,
     width = _useVideoConfig.width,
     height = _useVideoConfig.height;
-  var words = splitWords(text);
+  var displayText = (_ref6 = (_ref7 = text !== null && text !== void 0 ? text : sentenceText) !== null && _ref7 !== void 0 ? _ref7 : sentence) !== null && _ref6 !== void 0 ? _ref6 : "";
+  var words = splitWords(displayText);
   var fallbackWords = words.length ? words : [""];
   var uppercaseWords = fallbackWords.map(function (word) {
     return word.toLocaleUpperCase();
   });
+  var wordStepFrames = getWordStepFrames({
+    fps: fps,
+    wordCount: fallbackWords.length
+  });
+  var backgroundWipeFrames = Math.min(MAX_BACKGROUND_WIPE_FRAMES, Math.max(1, wordStepFrames - 1));
   var lastStepIndex = fallbackWords.length - 1;
-  var stepIndex = Math.min(lastStepIndex, Math.floor(frame / WORD_STEP_FRAMES));
+  var stepIndex = Math.min(lastStepIndex, Math.floor(frame / wordStepFrames));
   var previousStepIndex = Math.max(0, stepIndex - 1);
-  var frameInWord = frame - stepIndex * WORD_STEP_FRAMES;
+  var frameInWord = frame - stepIndex * wordStepFrames;
   var currentBackgroundColor = getBackgroundColor(stepIndex);
   var previousBackgroundColor = getBackgroundColor(Math.max(0, stepIndex - 1));
-  var shouldWipe = stepIndex > 0 && frameInWord < BACKGROUND_WIPE_FRAMES;
-  var wipeProgress = shouldWipe ? interpolate(frameInWord, [0, BACKGROUND_WIPE_FRAMES], [0, 1], {
+  var shouldWipe = stepIndex > 0 && frameInWord < backgroundWipeFrames;
+  var wipeProgress = shouldWipe ? interpolate(frameInWord, [0, backgroundWipeFrames], [0, 1], {
     easing: Easing.out(Easing.cubic),
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
@@ -215,11 +238,13 @@ export var TextFullCover = function TextFullCover(_ref4) {
       width: "100%"
     }
   })) : null, shouldWipe ? /*#__PURE__*/React.createElement(PositionedWords, {
+    backgroundWipeFrames: backgroundWipeFrames,
     fontSize: fontSize,
     frame: frame,
     staticUntilIndex: previousStepIndex,
     visibleUntilIndex: previousStepIndex,
     width: width,
+    wordStepFrames: wordStepFrames,
     words: uppercaseWords
   }) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -232,11 +257,13 @@ export var TextFullCover = function TextFullCover(_ref4) {
       zIndex: 1
     }
   }, /*#__PURE__*/React.createElement(PositionedWords, {
+    backgroundWipeFrames: backgroundWipeFrames,
     fontSize: fontSize,
     frame: frame,
     staticUntilIndex: previousStepIndex,
     visibleUntilIndex: stepIndex,
     width: width,
+    wordStepFrames: wordStepFrames,
     words: uppercaseWords
   })), !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
     src: "https://cdn.zync.ai/assets/static/swoosh.mp3",

package/dist/screenplay/RemotionRenderer/main/lib/layouts/LayoutFactory.js

@@ -7,7 +7,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { SimpleFrameLayout } from "./SimpleFrameLayout.js";
 import { Layout } from "./DefaultLayout.js";
 import { TextWithVideoLayout } from "./TextWithVideoLayout.js";
-import { TextFullCoverLayout } from "./TextFullCoverLayout.js";
 import { HandoffLayout } from "./HandoffLayout.js";
 import { CreatorCollabSplitLayout } from "./CreatorCollabSplitLayout.js";
 import { CreatorCollabColdOpenLayout } from "./CreatorCollabColdOpenLayout.js";
@@ -36,11 +35,6 @@ export var LayoutFactory = /*#__PURE__*/function () {
             layout = new TextWithVideoLayout(props).flatten();
             break;
           }
-        case "text_full_cover":
-          {
-            layout = new TextFullCoverLayout(props).flatten();
-            break;
-          }
         case "broll_background":
         case "simple_frame_broll":
         case "simple_frame_sentence":
@@ -49,6 +43,7 @@ export var LayoutFactory = /*#__PURE__*/function () {
         case "broll_studio_backdrop":
         case "broll_inset":
         case "key_point_overlay_depth":
+        case "text_full_cover":
         case "simple_frame":
           {
             layout = new SimpleFrameLayout(props).flatten();

package/dist/screenplay/RemotionRenderer/registeredComponents.js

@@ -49,8 +49,8 @@ import { HookVideo } from "./components/layouts/HookVideo";
 import { BrollInset } from "./components/layouts/BrollInset";
 import { MotionStillInset } from "./components/layouts/MotionStillInset";
 
-/** Update this so that Remotion knows which component to render when it is passed via screenplay. Ex. "title" will have rendered "Title" component
- *  Here we are mapping directly types and component names. Types are snake_case and components PascalCase.
+/** Update this so that Remotion knows which component to render when it is passed via screenplay. Ex. "title" will have rendered "Title" component
+ *  Here we are mapping directly types and component names. Types are snake_case and components PascalCase.
  * */
 export var RegisteredComponents = {
   // Layouts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zync/zync-screnplay-player",
-  "version": "0.1.238",
+  "version": "0.1.240",
   "files": [
     "dist"
   ],

package/dist/screenplay/RemotionRenderer/main/lib/layouts/TextFullCoverLayout.js

@@ -1,22 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-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); }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import { TextWithVideoLayout } from "./TextWithVideoLayout.js";
-export var TextFullCoverLayout = /*#__PURE__*/function (_TextWithVideoLayout) {
-  function TextFullCoverLayout() {
-    _classCallCheck(this, TextFullCoverLayout);
-    return _callSuper(this, TextFullCoverLayout, arguments);
-  }
-  _inherits(TextFullCoverLayout, _TextWithVideoLayout);
-  return _createClass(TextFullCoverLayout);
-}(TextWithVideoLayout);