@zync/zync-screnplay-player 0.1.251 → 0.1.253

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

@@ -1,4 +1,7 @@
 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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 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; }
@@ -14,6 +17,7 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
 import { Layout } from "./DefaultLayout.js";
 import { cleanFacemetadata } from "../../../helpers/cleanFacemetadata";
 import { SimpleFrameSentence } from "../../../components/layouts/SimpleFrameSentence";
+import { getHeadingColors } from "../../../helpers/headingColors.js";
 export var SimpleFrameLayout = /*#__PURE__*/function (_Layout) {
   function SimpleFrameLayout(props) {
     var _this;
@@ -27,7 +31,7 @@ export var SimpleFrameLayout = /*#__PURE__*/function (_Layout) {
     key: "getVideoProps",
     value: function getVideoProps(props) {
       var _props$data$noBackgro, _props$data$noBackgro2, _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3, _props$data4;
-      this.props = {
+      this.props = _objectSpread(_objectSpread({
         noBackgroundVideoEffects: props.data.noBackgroundVideoEffects,
         noBackgroundVideoUrl: (_props$data$noBackgro = props.data.noBackgroundVideo) === null || _props$data$noBackgro === void 0 ? void 0 : _props$data$noBackgro.videoUrl,
         faceMetadata: cleanFacemetadata((_props$data$noBackgro2 = props.data.noBackgroundVideo) === null || _props$data$noBackgro2 === void 0 ? void 0 : _props$data$noBackgro2.faceMetadata),
@@ -36,9 +40,10 @@ export var SimpleFrameLayout = /*#__PURE__*/function (_Layout) {
         disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds,
         useSquareInLandscape: (props === null || props === void 0 ? void 0 : (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.useSquareInLandscape) || false,
         brollUrl: (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : _props$data3.brollUrl,
-        sentenceText: (_props$data4 = props.data) === null || _props$data4 === void 0 ? void 0 : _props$data4.sentenceText,
+        sentenceText: (_props$data4 = props.data) === null || _props$data4 === void 0 ? void 0 : _props$data4.sentenceText
+      }, getHeadingColors(props.data)), {}, {
         theme: props === null || props === void 0 ? void 0 : props.theme
-      };
+      });
     }
   }]);
 }(Layout);

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,14 +1,6 @@
-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); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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";
@@ -16,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({
@@ -43,40 +40,19 @@ 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);
-  var preparedTranscripts = React.useMemo(function () {
-    return transcripts.map(function (transcript) {
-      var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
-        textFontSize = _distributeTextToFit.fontSize;
-      var punctuationsByIndex = new Map();
-      var _iterator = _createForOfIteratorHelper(transcript.punctuations),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var punctuation = _step.value;
-          if (!punctuationsByIndex.has(punctuation.index)) {
-            punctuationsByIndex.set(punctuation.index, punctuation);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      return _objectSpread(_objectSpread({}, transcript), {}, {
-        textFontSize: textFontSize,
-        words: transcript.text.split(" "),
-        punctuationsByIndex: punctuationsByIndex
-      });
-    });
-  }, [transcripts, width, fontSize]);
-  return /*#__PURE__*/React.createElement(AbsoluteFill, null, preparedTranscripts.map(function (transcript, index) {
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      lines = _distributeTextToFit.lines,
+      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",
@@ -89,7 +65,7 @@ export var CaptionWordBoom = function CaptionWordBoom(_ref) {
         width: containerWidth,
         margin: "0 auto",
         transform: "translateX(-50%)",
-        fontSize: transcript.textFontSize,
+        fontSize: textFontSize,
         textTransform: "uppercase",
         textAlign: "center",
         fontFamily: fontFamily,
@@ -98,18 +74,37 @@ export var CaptionWordBoom = function CaptionWordBoom(_ref) {
         fontWeight: 400,
         color: "#fff"
       }
-    }, transcript.words.map(function (word, wordIndex) {
-      var punctuation = transcript.punctuationsByIndex.get(wordIndex);
-      var isPunctuated = frame >= Number((punctuation === null || punctuation === void 0 ? void 0 : punctuation.start) || 0) && Number(frame <= (punctuation === null || punctuation === void 0 ? void 0 : punctuation.end));
+    }, transcript.text.split(" ").map(function (word, wordIndex) {
+      var _transcript$punctuati, _transcript$punctuati2;
+      var isPunctuated = frame >= Number(((_transcript$punctuati = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === null || _transcript$punctuati === void 0 ? void 0 : _transcript$punctuati.start) || 0) && Number(frame <= ((_transcript$punctuati2 = transcript.punctuations.find(function (p) {
+        return p.index === wordIndex;
+      })) === 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
   });
 };