@zync/zync-screnplay-player 0.1.250 → 0.1.252

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionPunctuated.js

@@ -1,5 +1,6 @@
 import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
 import React from "react";
+import { CaptionWordObjectOverlay } from "../../../components/effects/CaptionWordObjectOverlay";
 import { FONT_FAMILIES } from "../../../fontRegistry.js";
 import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
@@ -7,9 +8,14 @@ import { useTheme } from "../../hooks/useTheme";
 import { getBrighterColor } from "../../../helpers/hexToRgb";
 import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
 var fontFamily = FONT_FAMILIES.POPPINS;
-export var CaptionPunctuated = function CaptionPunctuated(_ref) {
+var _CaptionPunctuated = function CaptionPunctuated(_ref) {
   var transcripts = _ref.transcripts,
-    color = _ref.color;
+    color = _ref.color,
+    wordObjectGeometry = _ref.wordObjectGeometry,
+    _ref$measurementRef = _ref.measurementRef,
+    measurementRef = _ref$measurementRef === void 0 ? null : _ref$measurementRef,
+    _ref$measurementFrame = _ref.measurementFrame,
+    measurementFrame = _ref$measurementFrame === void 0 ? null : _ref$measurementFrame;
   var _useVideoConfig = useVideoConfig(),
     width = _useVideoConfig.width;
   var _useOrientationBased = useOrientationBased({
@@ -34,7 +40,8 @@ export var CaptionPunctuated = function CaptionPunctuated(_ref) {
     accentColor = _useTheme.accentColor,
     accentContrast = _useTheme.accentContrast;
   var containerWidth = width * 0.8;
-  var frame = useCurrentFrame();
+  var currentFrame = useCurrentFrame();
+  var frame = measurementFrame !== null && measurementFrame !== void 0 ? measurementFrame : currentFrame;
   var brighterColor = getBrighterColor(primaryColor, accentColor);
   return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
     var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
@@ -42,9 +49,10 @@ export var CaptionPunctuated = function CaptionPunctuated(_ref) {
       textFontSize = _distributeTextToFit.fontSize;
     return /*#__PURE__*/React.createElement(Sequence, {
       key: index,
-      from: transcript.from,
-      durationInFrames: transcript.durationInFrames
+      from: measurementRef ? 0 : transcript.from,
+      durationInFrames: measurementRef ? undefined : transcript.durationInFrames
     }, /*#__PURE__*/React.createElement("p", {
+      ref: measurementRef,
       style: {
         display: "flex",
         alignItems: "center",
@@ -73,11 +81,26 @@ export var CaptionPunctuated = function CaptionPunctuated(_ref) {
       })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
       return /*#__PURE__*/React.createElement("span", {
         key: wordIndex,
+        "data-word-index": wordIndex,
         style: {
           color: isPunctuated ? color || brighterColor : "white",
           textShadow: "3px 3px 3px #000"
         }
       }, word);
     })));
+  }), !measurementRef && /*#__PURE__*/React.createElement(CaptionWordObjectOverlay, {
+    transcripts: transcripts,
+    geometry: wordObjectGeometry,
+    fontFamily: fontFamily,
+    color: color,
+    renderSource: function renderSource(transcript, wordIndex, at, ref) {
+      return /*#__PURE__*/React.createElement(_CaptionPunctuated, {
+        transcripts: [transcript],
+        color: color,
+        measurementRef: ref,
+        measurementFrame: at
+      });
+    }
   }));
-};
+};
+export { _CaptionPunctuated as CaptionPunctuated };

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionWordBoom.js

@@ -1,5 +1,6 @@
 import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
 import React from "react";
+import { CaptionWordObjectOverlay } from "../../../components/effects/CaptionWordObjectOverlay";
 import { FONT_FAMILIES } from "../../../fontRegistry.js";
 import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
@@ -7,9 +8,14 @@ import { useTheme } from "../../hooks/useTheme";
 import { getBrighterColor } from "../../../helpers/hexToRgb";
 import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
 var fontFamily = FONT_FAMILIES.TITAN_ONE;
-export var CaptionWordBoom = function CaptionWordBoom(_ref) {
+var _CaptionWordBoom = function CaptionWordBoom(_ref) {
   var transcripts = _ref.transcripts,
-    color = _ref.color;
+    color = _ref.color,
+    wordObjectGeometry = _ref.wordObjectGeometry,
+    _ref$measurementRef = _ref.measurementRef,
+    measurementRef = _ref$measurementRef === void 0 ? null : _ref$measurementRef,
+    _ref$measurementFrame = _ref.measurementFrame,
+    measurementFrame = _ref$measurementFrame === void 0 ? null : _ref$measurementFrame;
   var _useVideoConfig = useVideoConfig(),
     width = _useVideoConfig.width;
   var _useOrientationBased = useOrientationBased({
@@ -34,7 +40,8 @@ export var CaptionWordBoom = function CaptionWordBoom(_ref) {
     accentColor = _useTheme.accentColor,
     accentContrast = _useTheme.accentContrast;
   var containerWidth = width * 0.8;
-  var frame = useCurrentFrame();
+  var currentFrame = useCurrentFrame();
+  var frame = measurementFrame !== null && measurementFrame !== void 0 ? measurementFrame : currentFrame;
   var brighterColor = getBrighterColor(primaryColor, accentColor);
   return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
     var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
@@ -42,9 +49,10 @@ export var CaptionWordBoom = function CaptionWordBoom(_ref) {
       textFontSize = _distributeTextToFit.fontSize;
     return /*#__PURE__*/React.createElement(Sequence, {
       key: index,
-      from: transcript.from,
-      durationInFrames: transcript.durationInFrames
+      from: measurementRef ? 0 : transcript.from,
+      durationInFrames: measurementRef ? undefined : transcript.durationInFrames
     }, /*#__PURE__*/React.createElement("p", {
+      ref: measurementRef,
       style: {
         display: "flex",
         alignItems: "center",
@@ -75,13 +83,28 @@ export var CaptionWordBoom = function CaptionWordBoom(_ref) {
       })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
       return /*#__PURE__*/React.createElement("span", {
         key: wordIndex,
+        "data-word-index": wordIndex,
         style: {
           color: isPunctuated ? color || accentColor : "white",
           transform: "scaleX(".concat(isPunctuated ? 1.15 : 1, ") scaleY(").concat(isPunctuated ? 1.3 : 1, ")"),
-          transition: "transform 0.2s",
+          transition: measurementRef ? undefined : "transform 0.2s",
           textShadow: "0px 0px 4px #000000, 0px 0px 4px #000000, 0px 0px 4px #000000, 0px 0px 10px #000000, 0px 0px 10px #000000"
         }
       }, word);
     })));
+  }), !measurementRef && /*#__PURE__*/React.createElement(CaptionWordObjectOverlay, {
+    transcripts: transcripts,
+    geometry: wordObjectGeometry,
+    fontFamily: fontFamily,
+    color: color,
+    renderSource: function renderSource(transcript, wordIndex, at, ref) {
+      return /*#__PURE__*/React.createElement(_CaptionWordBoom, {
+        transcripts: [transcript],
+        color: color,
+        measurementRef: ref,
+        measurementFrame: at
+      });
+    }
   }));
-};
+};
+export { _CaptionWordBoom as CaptionWordBoom };

package/dist/screenplay/RemotionRenderer/theme/themes/default/CaptionWordBubble.js

@@ -1,5 +1,6 @@
 import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
 import React from "react";
+import { CaptionWordObjectOverlay } from "../../../components/effects/CaptionWordObjectOverlay";
 import { FONT_FAMILIES } from "../../../fontRegistry.js";
 import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
@@ -7,9 +8,14 @@ import { useTheme } from "../../hooks/useTheme";
 import { getBrighterColor } from "../../../helpers/hexToRgb";
 import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
 var fontFamily = FONT_FAMILIES.MONTSERRAT;
-export var CaptionWordBubble = function CaptionWordBubble(_ref) {
+var _CaptionWordBubble = function CaptionWordBubble(_ref) {
   var transcripts = _ref.transcripts,
-    color = _ref.color;
+    color = _ref.color,
+    wordObjectGeometry = _ref.wordObjectGeometry,
+    _ref$measurementRef = _ref.measurementRef,
+    measurementRef = _ref$measurementRef === void 0 ? null : _ref$measurementRef,
+    _ref$measurementFrame = _ref.measurementFrame,
+    measurementFrame = _ref$measurementFrame === void 0 ? null : _ref$measurementFrame;
   var _useVideoConfig = useVideoConfig(),
     width = _useVideoConfig.width;
   var _useOrientationBased = useOrientationBased({
@@ -34,7 +40,8 @@ export var CaptionWordBubble = function CaptionWordBubble(_ref) {
     accentColor = _useTheme.accentColor,
     accentContrast = _useTheme.accentContrast;
   var containerWidth = width * 0.8;
-  var frame = useCurrentFrame();
+  var currentFrame = useCurrentFrame();
+  var frame = measurementFrame !== null && measurementFrame !== void 0 ? measurementFrame : currentFrame;
   var brighterColor = getBrighterColor(primaryColor, accentColor);
   return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
     var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
@@ -42,9 +49,10 @@ export var CaptionWordBubble = function CaptionWordBubble(_ref) {
       textFontSize = _distributeTextToFit.fontSize;
     return /*#__PURE__*/React.createElement(Sequence, {
       key: index,
-      from: transcript.from,
-      durationInFrames: transcript.durationInFrames
+      from: measurementRef ? 0 : transcript.from,
+      durationInFrames: measurementRef ? undefined : transcript.durationInFrames
     }, /*#__PURE__*/React.createElement("p", {
+      ref: measurementRef,
       style: {
         display: "flex",
         gap: textFontSize / 2,
@@ -75,16 +83,31 @@ export var CaptionWordBubble = function CaptionWordBubble(_ref) {
       })) === null || _transcript$punctuati2 === void 0 ? void 0 : _transcript$punctuati2.end));
       return /*#__PURE__*/React.createElement("span", {
         key: wordIndex,
+        "data-word-index": wordIndex,
         style: {
           borderRadius: "10px",
           padding: "0.5rem 0.75rem 0.5rem 0.75rem",
           color: isPunctuated ? color || accentColor : "white",
           background: isPunctuated ? accentContrast : "transparent",
           transform: "scaleX(".concat(isPunctuated ? 1.15 : 1, ") scaleY(").concat(isPunctuated ? 1.3 : 1, ")"),
-          transition: "transform 0.2s",
+          transition: measurementRef ? undefined : "transform 0.2s",
           textShadow: isPunctuated ? "" : "-3px 0 black, 0 3px black, 3px 0 black, 0 -3px black"
         }
       }, word);
     })));
+  }), !measurementRef && /*#__PURE__*/React.createElement(CaptionWordObjectOverlay, {
+    transcripts: transcripts,
+    geometry: wordObjectGeometry,
+    fontFamily: fontFamily,
+    color: color,
+    renderSource: function renderSource(transcript, wordIndex, at, ref) {
+      return /*#__PURE__*/React.createElement(_CaptionWordBubble, {
+        transcripts: [transcript],
+        color: color,
+        measurementRef: ref,
+        measurementFrame: at
+      });
+    }
   }));
-};
+};
+export { _CaptionWordBubble as CaptionWordBubble };

package/dist/screenplay/RemotionRenderer/theme/themes/default/Sentence/AnimatedSentence.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
 var ANIMATION_DELAY_FACTOR = 0.25;
 var ANIMATION_DURATION = 60;

package/dist/screenplay/RemotionRenderer/theme/themes/default/Sentence.js

@@ -17,7 +17,9 @@ export var Sentence = function Sentence(_ref) {
   var lines = _ref.lines,
     fontSize = _ref.fontSize,
     maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight;
+    maxHeight = _ref.maxHeight,
+    headingTextColor = _ref.headingTextColor,
+    headingBackgroundColor = _ref.headingBackgroundColor;
   var opacity = useTimeInterpolate([0, 0.5], [0, 1]);
   var _useOrientationBased = useOrientationBased({
       landscape: {
@@ -58,11 +60,13 @@ export var Sentence = function Sentence(_ref) {
       opacity: opacity
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       borderRadius: "30px",
       textAlign: "right",
       padding: CHROME_PADDING
-    }, defaultGlassmorphismStyles)
+    }, defaultGlassmorphismStyles), headingBackgroundColor ? {
+      background: headingBackgroundColor
+    } : {})
   }, lines.map(function (line, index) {
     return /*#__PURE__*/React.createElement(AnimatedSentenceDefault, {
       key: index,
@@ -71,7 +75,7 @@ export var Sentence = function Sentence(_ref) {
     }, /*#__PURE__*/React.createElement("p", {
       style: {
         animationDelay: "".concat(index * 1000, "ms"),
-        color: "#000",
+        color: headingTextColor || "#000",
         fontWeight: 700,
         fontSize: fontSize,
         textTransform: "uppercase",

package/dist/screenplay/RemotionRenderer/theme/themes/fullcover/TextFullCover.js

@@ -91,7 +91,8 @@ var getWordStepFrames = function getWordStepFrames(_ref3) {
   return Math.max(1, Math.min(MAX_WORD_STEP_FRAMES, maxStepFrames));
 };
 var PositionedWords = function PositionedWords(_ref4) {
-  var backgroundWipeFrames = _ref4.backgroundWipeFrames,
+  var headingTextColor = _ref4.headingTextColor,
+    backgroundWipeFrames = _ref4.backgroundWipeFrames,
     fontSize = _ref4.fontSize,
     frame = _ref4.frame,
     staticUntilIndex = _ref4.staticUntilIndex,
@@ -147,7 +148,7 @@ var PositionedWords = function PositionedWords(_ref4) {
     return /*#__PURE__*/React.createElement("span", {
       key: "".concat(word, "-").concat(index),
       style: {
-        color: TEXT_COLOR,
+        color: headingTextColor || TEXT_COLOR,
         fontFamily: fontFamily,
         fontSize: fontSize,
         fontWeight: 900,
@@ -162,7 +163,9 @@ var PositionedWords = function PositionedWords(_ref4) {
 };
 export var TextFullCover = function TextFullCover(_ref5) {
   var _ref6, _ref7;
-  var text = _ref5.text,
+  var headingTextColor = _ref5.headingTextColor,
+    headingBackgroundColor = _ref5.headingBackgroundColor,
+    text = _ref5.text,
     sentence = _ref5.sentence,
     sentenceText = _ref5.sentenceText,
     children = _ref5.children,
@@ -194,8 +197,8 @@ export var TextFullCover = function TextFullCover(_ref5) {
   var stepIndex = Math.min(lastStepIndex, Math.floor(frame / wordStepFrames));
   var previousStepIndex = Math.max(0, stepIndex - 1);
   var frameInWord = frame - stepIndex * wordStepFrames;
-  var currentBackgroundColor = getBackgroundColor(stepIndex);
-  var previousBackgroundColor = getBackgroundColor(Math.max(0, stepIndex - 1));
+  var currentBackgroundColor = headingBackgroundColor || getBackgroundColor(stepIndex);
+  var previousBackgroundColor = headingBackgroundColor || getBackgroundColor(Math.max(0, stepIndex - 1));
   var shouldWipe = stepIndex > 0 && frameInWord < backgroundWipeFrames;
   var wipeProgress = shouldWipe ? interpolate(frameInWord, [0, backgroundWipeFrames], [0, 1], {
     easing: Easing.out(Easing.cubic),
@@ -235,6 +238,7 @@ export var TextFullCover = function TextFullCover(_ref5) {
       width: "100%"
     }
   })) : null, shouldWipe ? /*#__PURE__*/React.createElement(PositionedWords, {
+    headingTextColor: headingTextColor,
     backgroundWipeFrames: backgroundWipeFrames,
     fontSize: fontSize,
     frame: frame,
@@ -254,6 +258,7 @@ export var TextFullCover = function TextFullCover(_ref5) {
       zIndex: 1
     }
   }, /*#__PURE__*/React.createElement(PositionedWords, {
+    headingTextColor: headingTextColor,
     backgroundWipeFrames: backgroundWipeFrames,
     fontSize: fontSize,
     frame: frame,

package/dist/screenplay/RemotionRenderer/theme/themes/glassmorphism/Sentence.js

@@ -1,3 +1,9 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, 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); }
 import { AbsoluteFill } from "remotion";
 import { useTimeInterpolate } from "../../../hooks/useTimeInterpolate.js";
 import { AnimatedSentence } from "../default/Sentence/AnimatedSentence";
@@ -8,7 +14,9 @@ export var Sentence = function Sentence(_ref) {
   var lines = _ref.lines,
     fontSize = _ref.fontSize,
     maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight;
+    maxHeight = _ref.maxHeight,
+    headingTextColor = _ref.headingTextColor,
+    headingBackgroundColor = _ref.headingBackgroundColor;
   var opacity = useTimeInterpolate([0, 0.5], [0, 1]);
   return /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -19,7 +27,7 @@ export var Sentence = function Sentence(_ref) {
     style: {
       width: maxWidth,
       height: maxHeight,
-      background: "rgba(255, 255, 255, 0.75)",
+      background: headingBackgroundColor || "rgba(255, 255, 255, 0.75)",
       borderRadius: "30px",
       display: "flex",
       flexDirection: "column",
@@ -33,7 +41,9 @@ export var Sentence = function Sentence(_ref) {
       index: index,
       linesCount: lines.length
     }, /*#__PURE__*/React.createElement("p", {
-      style: {
+      style: _objectSpread(_objectSpread({}, headingTextColor ? {
+        color: headingTextColor
+      } : {}), {}, {
         text: "#101840",
         fontSize: fontSize,
         fontWeight: "bold",
@@ -42,7 +52,7 @@ export var Sentence = function Sentence(_ref) {
         margin: 0,
         fontFamily: fontFamily,
         textWrap: "nowrap"
-      }
+      })
     }, line));
   })));
 };

package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js

@@ -380,7 +380,7 @@ var TransitionVideoTrack = function TransitionVideoTrack(_ref9) {
       transitionAfter = _ref10$transitionAfte === void 0 ? true : _ref10$transitionAfte;
     var ComponentToRender = RegisteredComponents[component];
     var hasNextSegment = index < array.length - 1;
-    var shouldTransition = hasNextSegment && transitionAfter !== false;
+    var shouldTransition = hasNextSegment && transitionAfter !== false && otherProps.durationInFrames >= transition.durationInFrames && array[index + 1].layout.durationInFrames >= transition.durationInFrames;
     if (!ComponentToRender) {
       return null;
     }

package/dist/screenplay/RemotionRenderer/tracks/Soundtrack.js

@@ -1,16 +1,33 @@
-import { Audio } from "remotion";
+import { Audio, Sequence } from "remotion";
 import React from "react";
 export var Soundtrack = function Soundtrack() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     src = _ref.src,
     volume = _ref.volume,
-    loop = _ref.loop;
+    loop = _ref.loop,
+    _ref$startAudioFrom = _ref.startAudioFrom,
+    startAudioFrom = _ref$startAudioFrom === void 0 ? 0 : _ref$startAudioFrom;
   if (!src) {
     return null;
   }
+
+  // Advance the loop's local timeline while keeping the entire media period.
+  // trimBefore would shorten every repetition and can exceed media duration.
+  if (loop) {
+    return /*#__PURE__*/React.createElement(Sequence, {
+      from: -startAudioFrom,
+      layout: "none",
+      showInTimeline: false
+    }, /*#__PURE__*/React.createElement(Audio, {
+      src: src,
+      volume: volume,
+      loop: true
+    }));
+  }
   return /*#__PURE__*/React.createElement(Audio, {
     src: src,
     volume: volume,
-    loop: loop
+    loop: loop,
+    trimBefore: startAudioFrom
   });
 };