@zync/zync-screnplay-player 0.1.238 → 0.1.239

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,19 +164,20 @@ 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 text = _ref5.text,
+    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);
@@ -171,14 +185,19 @@ export var TextFullCover = function TextFullCover(_ref4) {
   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 +234,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 +253,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/package.json

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