@zync/zync-screnplay-player 0.1.206 → 0.1.208

package/dist/screenplay/RemotionRenderer/RemotionRenderer.js

@@ -90,7 +90,7 @@ export var RemotionRenderer = /*#__PURE__*/function () {
   }, {
     key: "toRemotionFragment",
     value: function toRemotionFragment(screenPlaySegment, layout) {
-      var _screenPlaySegment$da, _screenPlaySegment$da2, _layout$data, _screenPlaySegment$da3, _screenPlaySegment$da4, _layout$data2, _screenPlaySegment$da5, _screenPlaySegment$da6, _layout$data3, _screenPlaySegment$da7, _screenPlaySegment$da8, _layout$data4, _screenPlaySegment$da9, _toFrames, _screenPlaySegment$da10, _screenPlaySegment$da11;
+      var _screenPlaySegment$da, _screenPlaySegment$da2, _layout$data, _screenPlaySegment$da3, _screenPlaySegment$da4, _layout$data2, _screenPlaySegment$da5, _screenPlaySegment$da6, _layout$data3, _screenPlaySegment$da7, _screenPlaySegment$da8, _layout$data4, _screenPlaySegment$da9, _screenPlaySegment$da10, _layout$data5, _screenPlaySegment$da11, _toFrames, _screenPlaySegment$da12, _screenPlaySegment$da13;
       var trimLeft = 0;
       if (layout) {
         trimLeft = layout.data.trimLeft || 0;
@@ -99,21 +99,22 @@ export var RemotionRenderer = /*#__PURE__*/function () {
       var inheritedProps = component === "HandoffNametag" ? {
         useSquareInLandscape: (_screenPlaySegment$da = (_screenPlaySegment$da2 = screenPlaySegment.data) === null || _screenPlaySegment$da2 === void 0 ? void 0 : _screenPlaySegment$da2.useSquareInLandscape) !== null && _screenPlaySegment$da !== void 0 ? _screenPlaySegment$da : layout === null || layout === void 0 ? void 0 : (_layout$data = layout.data) === null || _layout$data === void 0 ? void 0 : _layout$data.useSquareInLandscape,
         handoffNametagVariant: (_screenPlaySegment$da3 = (_screenPlaySegment$da4 = screenPlaySegment.data) === null || _screenPlaySegment$da4 === void 0 ? void 0 : _screenPlaySegment$da4.handoffNametagVariant) !== null && _screenPlaySegment$da3 !== void 0 ? _screenPlaySegment$da3 : layout === null || layout === void 0 ? void 0 : (_layout$data2 = layout.data) === null || _layout$data2 === void 0 ? void 0 : _layout$data2.handoffNametagVariant,
-        useSquareInLandscapeFirstVideo: (_screenPlaySegment$da5 = (_screenPlaySegment$da6 = screenPlaySegment.data) === null || _screenPlaySegment$da6 === void 0 ? void 0 : _screenPlaySegment$da6.useSquareInLandscapeFirstVideo) !== null && _screenPlaySegment$da5 !== void 0 ? _screenPlaySegment$da5 : layout === null || layout === void 0 ? void 0 : (_layout$data3 = layout.data) === null || _layout$data3 === void 0 ? void 0 : _layout$data3.useSquareInLandscapeFirstVideo
+        useSquareInLandscapeFirstVideo: (_screenPlaySegment$da5 = (_screenPlaySegment$da6 = screenPlaySegment.data) === null || _screenPlaySegment$da6 === void 0 ? void 0 : _screenPlaySegment$da6.useSquareInLandscapeFirstVideo) !== null && _screenPlaySegment$da5 !== void 0 ? _screenPlaySegment$da5 : layout === null || layout === void 0 ? void 0 : (_layout$data3 = layout.data) === null || _layout$data3 === void 0 ? void 0 : _layout$data3.useSquareInLandscapeFirstVideo,
+        useSquareInLandscapeSecondVideo: (_screenPlaySegment$da7 = (_screenPlaySegment$da8 = screenPlaySegment.data) === null || _screenPlaySegment$da8 === void 0 ? void 0 : _screenPlaySegment$da8.useSquareInLandscapeSecondVideo) !== null && _screenPlaySegment$da7 !== void 0 ? _screenPlaySegment$da7 : layout === null || layout === void 0 ? void 0 : (_layout$data4 = layout.data) === null || _layout$data4 === void 0 ? void 0 : _layout$data4.useSquareInLandscapeSecondVideo
       } : {
-        useSquareInLandscape: (_screenPlaySegment$da7 = (_screenPlaySegment$da8 = screenPlaySegment.data) === null || _screenPlaySegment$da8 === void 0 ? void 0 : _screenPlaySegment$da8.useSquareInLandscape) !== null && _screenPlaySegment$da7 !== void 0 ? _screenPlaySegment$da7 : layout === null || layout === void 0 ? void 0 : (_layout$data4 = layout.data) === null || _layout$data4 === void 0 ? void 0 : _layout$data4.useSquareInLandscape
+        useSquareInLandscape: (_screenPlaySegment$da9 = (_screenPlaySegment$da10 = screenPlaySegment.data) === null || _screenPlaySegment$da10 === void 0 ? void 0 : _screenPlaySegment$da10.useSquareInLandscape) !== null && _screenPlaySegment$da9 !== void 0 ? _screenPlaySegment$da9 : layout === null || layout === void 0 ? void 0 : (_layout$data5 = layout.data) === null || _layout$data5 === void 0 ? void 0 : _layout$data5.useSquareInLandscape
       };
       var from = this.fps * (screenPlaySegment.data.offset - trimLeft) || 0;
       var durationInFrames = toFrames(this.fps * screenPlaySegment.data.duration);
       var to = from + durationInFrames;
       return _objectSpread(_objectSpread(_objectSpread({}, screenPlaySegment.data), inheritedProps), {}, {
         component: component,
-        videoUrl: (_screenPlaySegment$da9 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da9 === void 0 ? void 0 : _screenPlaySegment$da9.videoUrl,
-        startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da10 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da10 === void 0 ? void 0 : _screenPlaySegment$da10.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
+        videoUrl: (_screenPlaySegment$da11 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da11 === void 0 ? void 0 : _screenPlaySegment$da11.videoUrl,
+        startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da12 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
         durationInFrames: durationInFrames,
         from: from,
         to: to,
-        videoZoom: (_screenPlaySegment$da11 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da11 === void 0 ? void 0 : _screenPlaySegment$da11.zoom,
+        videoZoom: (_screenPlaySegment$da13 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da13 === void 0 ? void 0 : _screenPlaySegment$da13.zoom,
         offset: toFrames(this.fps * (screenPlaySegment.data.offset - trimLeft)) || 0,
         theme: screenPlaySegment.theme,
         themeSettings: screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : screenPlaySegment.themeSettings
@@ -122,20 +123,20 @@ export var RemotionRenderer = /*#__PURE__*/function () {
   }, {
     key: "toRemotionAudioFragment",
     value: function toRemotionAudioFragment(screenPlaySegment) {
-      var _screenPlaySegment$da12, _toFrames2, _screenPlaySegment$da13, _screenPlaySegment$da14, _screenPlaySegment$da15, _screenPlaySegment$da16, _screenPlaySegment$da17, _screenPlaySegment$da18;
+      var _screenPlaySegment$da14, _toFrames2, _screenPlaySegment$da15, _screenPlaySegment$da16, _screenPlaySegment$da17, _screenPlaySegment$da18, _screenPlaySegment$da19, _screenPlaySegment$da20;
       var from = this.fps * screenPlaySegment.data.offset || 0;
       var durationInFrames = toFrames(this.fps * screenPlaySegment.data.duration) || undefined;
       var to = from + durationInFrames;
       return _objectSpread(_objectSpread({}, screenPlaySegment.data), {}, {
         component: toPascalCase(screenPlaySegment.type),
-        src: (_screenPlaySegment$da12 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.url,
-        startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da13 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da13 === void 0 ? void 0 : _screenPlaySegment$da13.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
+        src: (_screenPlaySegment$da14 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da14 === void 0 ? void 0 : _screenPlaySegment$da14.url,
+        startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da15 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da15 === void 0 ? void 0 : _screenPlaySegment$da15.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
         durationInFrames: durationInFrames,
         from: from,
         to: to,
         offset: this.fps * screenPlaySegment.data.offset || 0,
-        volume: (_screenPlaySegment$da14 = (_screenPlaySegment$da15 = screenPlaySegment.data) === null || _screenPlaySegment$da15 === void 0 ? void 0 : (_screenPlaySegment$da16 = _screenPlaySegment$da15.sourceAudio) === null || _screenPlaySegment$da16 === void 0 ? void 0 : _screenPlaySegment$da16.volume) !== null && _screenPlaySegment$da14 !== void 0 ? _screenPlaySegment$da14 : 1,
-        loop: ((_screenPlaySegment$da17 = screenPlaySegment.data) === null || _screenPlaySegment$da17 === void 0 ? void 0 : (_screenPlaySegment$da18 = _screenPlaySegment$da17.sourceAudio) === null || _screenPlaySegment$da18 === void 0 ? void 0 : _screenPlaySegment$da18.loop) || false
+        volume: (_screenPlaySegment$da16 = (_screenPlaySegment$da17 = screenPlaySegment.data) === null || _screenPlaySegment$da17 === void 0 ? void 0 : (_screenPlaySegment$da18 = _screenPlaySegment$da17.sourceAudio) === null || _screenPlaySegment$da18 === void 0 ? void 0 : _screenPlaySegment$da18.volume) !== null && _screenPlaySegment$da16 !== void 0 ? _screenPlaySegment$da16 : 1,
+        loop: ((_screenPlaySegment$da19 = screenPlaySegment.data) === null || _screenPlaySegment$da19 === void 0 ? void 0 : (_screenPlaySegment$da20 = _screenPlaySegment$da19.sourceAudio) === null || _screenPlaySegment$da20 === void 0 ? void 0 : _screenPlaySegment$da20.loop) || false
       });
     }
   }, {
@@ -167,10 +168,10 @@ export var RemotionRenderer = /*#__PURE__*/function () {
     key: "toRemotionCaptionSegment",
     value: function toRemotionCaptionSegment(screenPlaySegment, screenplayLayout) {
       var _screenplayLayout$dat,
-        _screenPlaySegment$da19,
+        _screenPlaySegment$da21,
         _this3 = this;
       var trimLeft = (screenplayLayout === null || screenplayLayout === void 0 ? void 0 : (_screenplayLayout$dat = screenplayLayout.data) === null || _screenplayLayout$dat === void 0 ? void 0 : _screenplayLayout$dat.trimLeft) || 0;
-      var segmentOffset = Number(screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : (_screenPlaySegment$da19 = screenPlaySegment.data) === null || _screenPlaySegment$da19 === void 0 ? void 0 : _screenPlaySegment$da19.offset);
+      var segmentOffset = Number(screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : (_screenPlaySegment$da21 = screenPlaySegment.data) === null || _screenPlaySegment$da21 === void 0 ? void 0 : _screenPlaySegment$da21.offset);
       var from = Number.isFinite(segmentOffset) ? this.fps * (segmentOffset + trimLeft) : 0;
       var transcripts = screenPlaySegment.data.transcript_text;
       if (!transcripts) {

package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js

@@ -8,9 +8,9 @@ import React, { useEffect, useState } from 'react';
 import { delayRender, continueRender, cancelRender } from 'remotion';
 import { Lottie } from '@remotion/lottie';
 
-/**
- * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
- * Lottie expects: [r, g, b, a] where each component is 0‑1.
+/**
+ * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
+ * Lottie expects: [r, g, b, a] where each component is 0‑1.
  */
 var hexToRGBA = function hexToRGBA(hex) {
   var clean = hex.replace('#', '');
@@ -25,9 +25,9 @@ var hexToRGBA = function hexToRGBA(hex) {
   ];
 };
 
-/**
- * Recursively walks through shape objects and overrides any fill (fl) or
- * stroke (st) color with the provided RGBA array.
+/**
+ * Recursively walks through shape objects and overrides any fill (fl) or
+ * stroke (st) color with the provided RGBA array.
  */
 var _applyColor = function applyColor(shapes, rgba) {
   shapes === null || shapes === void 0 ? void 0 : shapes.forEach(function (shape) {
@@ -40,11 +40,11 @@ var _applyColor = function applyColor(shapes, rgba) {
   });
 };
 
-/**
- * Traverses all layers (top‑level + asset layers) and applies the primary
- * color to every fill / stroke it encounters. This is useful for Lottie files
- * that were exported with a single static color (e.g. white) and do not use
- * layer naming conventions like "PrimaryColor".
+/**
+ * Traverses all layers (top‑level + asset layers) and applies the primary
+ * color to every fill / stroke it encounters. This is useful for Lottie files
+ * that were exported with a single static color (e.g. white) and do not use
+ * layer naming conventions like "PrimaryColor".
  */
 var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   var _data$assets;
@@ -60,16 +60,16 @@ var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   });
 };
 
-/**
- * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
- * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
- * and fill colors with the supplied `primaryColor`.
- *
- * Props:
- *  • animationPath – URL or local path to the json file.
- *  • primaryColor  – HEX string, defaults to "#ffffff".
- *  • autoplay      – boolean, whether to start playing immediately.
- *  • loop          – boolean, whether to loop the animation.
+/**
+ * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
+ * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
+ * and fill colors with the supplied `primaryColor`.
+ *
+ * Props:
+ *  • animationPath – URL or local path to the json file.
+ *  • primaryColor  – HEX string, defaults to "#ffffff".
+ *  • autoplay      – boolean, whether to start playing immediately.
+ *  • loop          – boolean, whether to loop the animation.
  */
 export var LottieAnimationGlobal = function LottieAnimationGlobal(_ref) {
   var animationPath = _ref.animationPath,

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

@@ -10,6 +10,7 @@ import { BlurOverlay } from '../utils/BlurOverlay';
 import { CHROME_PADDING } from '../../config.js';
 import { useVirtualBackground } from '../../hooks/useVirtualBackground';
 import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
+import { useSafeZoneInsets } from '../utils/SafeZones';
 var _loadHeadlineFont = loadHeadlineFont(),
   headlineFontFamily = _loadHeadlineFont.fontFamily;
 var _loadBodyFont = loadBodyFont(),
@@ -94,6 +95,11 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   var _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
     virtualBgUrl = _useVirtualBackground.url;
+  var _useSafeZoneInsets = useSafeZoneInsets(),
+    insetTop = _useSafeZoneInsets.insetTop,
+    insetLeft = _useSafeZoneInsets.insetLeft,
+    insetRight = _useSafeZoneInsets.insetRight,
+    insetBottom = _useSafeZoneInsets.insetBottom;
   var showVirtual = isVirtual && !!firstNoBackgroundVideoUrl;
   var safeText = sanitizeText(text);
   var safeFullName = sanitizeText(fullName);
@@ -325,6 +331,7 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   var previewOpacity = previewReveal * (collaboratorActive ? 1 : 0.92);
   var previewLabel = collaboratorActive ? 'RESPONDING' : 'NEXT UP';
   var previewLabelDisplayFontSize = Math.round(previewLabelFontSize * 2.3);
+  var previewEnterOvershoot = 28;
   var previewFilter = collaboratorActive ? 'brightness(1.03) saturate(1.06)' : isLandscape ? 'brightness(1) saturate(1)' : 'brightness(0.84) saturate(0.88)';
   var creatorFrameFilter = creatorActive ? 'saturate(1.03)' : 'brightness(0.92) saturate(0.92)';
   var previewRadiusValue = isLandscape ? "".concat(previewRadius, "px 0 0 ").concat(previewRadius, "px") : "".concat(previewRadius, "px");
@@ -334,6 +341,20 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   var compactPlateRadius = settledTitleNeedsPlate ? isPortrait ? 8 : 6 : 0;
   var compactPlatePadding = settledTitleNeedsPlate ? isPortrait ? '24px 24px 20px' : '22px 22px 18px' : 0;
   var compactPlateRuleWidth = isPortrait ? 56 : 44;
+  var introTitleSafeTop = Math.max(introTitleTop, insetTop + 16);
+  var introTitleSafeLeft = introTitleCentered ? '50%' : Math.max(introTitleLeft, insetLeft + 12);
+  var compactTitleSafeTop = Math.max(compactTitleTop, insetTop + (isPortrait ? 18 : isLandscape ? 12 : 12));
+  var compactTitleSafeLeft = compactTitleCentered ? '50%' : Math.max(compactTitleLeft, insetLeft + (isPortrait ? 8 : isLandscape ? 12 : 6));
+  var lowerThirdSafeLeft = Math.max(lowerThirdLeft, insetLeft + (isPortrait ? 8 : isLandscape ? 12 : 6));
+  var lowerThirdSafeBottom = Math.max(lowerThirdBottom, insetBottom + (isPortrait ? 24 : 18));
+  var previewSafeTop = Math.max(previewTop, insetTop + previewLabelDisplayFontSize + 22);
+  var previewSafeRight = Math.max(previewRight - previewBleed, insetRight) + previewEnterOvershoot;
+  var chromeInsets = {
+    top: Math.max(padding, insetTop),
+    left: Math.max(padding, insetLeft),
+    right: Math.max(padding, insetRight),
+    bottom: Math.max(padding, insetBottom)
+  };
   var renderCreatorVideo = function renderCreatorVideo(containerWidth, containerHeight, radius) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
       url: virtualBgUrl,
@@ -432,8 +453,8 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   }), hasTitle && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      top: introTitleTop,
-      left: introTitleCentered ? '50%' : introTitleLeft,
+      top: introTitleSafeTop,
+      left: introTitleSafeLeft,
       width: introTitleMaxWidth,
       opacity: introTitleOpacity,
       transform: "".concat(introTitleCentered ? 'translateX(-50%) ' : '', "translateY(").concat(introTitleTranslateY, "px) scale(").concat(introTitleScale, ")"),
@@ -475,8 +496,8 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   })), !isLandscape && (safeTopicLabel || hasTitle) && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      top: compactTitleTop,
-      left: compactTitleCentered ? '50%' : compactTitleLeft,
+      top: compactTitleSafeTop,
+      left: compactTitleSafeLeft,
       width: compactTitleMaxWidth,
       opacity: compactOpacity,
       transform: "".concat(compactTitleCentered ? 'translateX(-50%) ' : '', "translateY(").concat(compactTranslateY, "px)"),
@@ -546,8 +567,8 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   }))), hasCreatorInfo && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      left: lowerThirdLeft,
-      bottom: lowerThirdBottom,
+      left: lowerThirdSafeLeft,
+      bottom: lowerThirdSafeBottom,
       width: lowerThirdMaxWidth,
       zIndex: 7
     }
@@ -601,8 +622,8 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   }))), shouldShowResponderTease && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      top: previewTop,
-      right: previewRight - previewBleed,
+      top: previewSafeTop,
+      right: previewSafeRight,
       width: previewWidth,
       height: previewHeight,
       opacity: previewOpacity,
@@ -727,7 +748,10 @@ export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
   })))))), /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      inset: padding,
+      top: chromeInsets.top,
+      left: chromeInsets.left,
+      right: chromeInsets.right,
+      bottom: chromeInsets.bottom,
       border: "1px solid ".concat(withAlpha(collaboratorActive ? accent : textColor, collaboratorActive ? 0.22 : 0.08)),
       pointerEvents: 'none',
       zIndex: 6,

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

@@ -86,12 +86,14 @@ export var Handoff = function Handoff(_ref) {
   var secondRenderVideoWidth = shouldUseSquareInLandscapeSecondVideo ? Math.min(secondVideoWidth, squareSize) : secondVideoWidth;
   var secondRenderVideoHeight = shouldUseSquareInLandscapeSecondVideo ? Math.min(secondVideoHeight, squareSize) : secondVideoHeight;
   var secondVideoCenteredOffsetX = shouldUseSquareInLandscapeSecondVideo ? Math.max(0, (width - TOTAL_X_PADDING - secondRenderVideoWidth) / 2) : 0;
-  var secondVideoTranslateX = useTimeInterpolate(inputRangeInSeconds, [secondVideoCenteredOffsetX, 0, 0, 0], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var secondVideoTranslateX = useTimeInterpolate(inputRangeInSeconds, [secondVideoCenteredOffsetX, 0, 0, secondVideoCenteredOffsetX], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var shouldUseBlackBackgroundInLandscape = shouldUseSquareInLandscapeFirstVideo || shouldUseSquareInLandscapeSecondVideo;
+  var handoffBackgroundColor = shouldUseBlackBackgroundInLandscape ? "#000000" : primaryColor;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       width: width,
       height: height,
-      backgroundColor: primaryColor
+      backgroundColor: handoffBackgroundColor
     }
   }, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {

package/dist/screenplay/RemotionRenderer/components/utils/FaceCenteredVideo.js

@@ -8,34 +8,34 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-/**
- * Face-Centered Video Component
- *
- * A reusable component that wraps OffthreadVideo to ensure the video is always
- * centered on a person's face within a flexible container.
- *
- * The video maintains its source dimensions and is positioned using translateX/translateY
- * to center the face within the container, regardless of container size.
+/**
+ * Face-Centered Video Component
+ *
+ * A reusable component that wraps OffthreadVideo to ensure the video is always
+ * centered on a person's face within a flexible container.
+ *
+ * The video maintains its source dimensions and is positioned using translateX/translateY
+ * to center the face within the container, regardless of container size.
  */
 
 import React from "react";
 import { OffthreadVideo, useCurrentFrame } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 
-/**
- * Calculate face-centered translation for flexible container
- * @param {Object} params - Configuration object
- * @param {Object} params.faceMetadata - Face detection metadata
- * @param {number} params.containerWidth - Container width in pixels
- * @param {number} params.containerHeight - Container height in pixels
- * @param {number} params.currentFrame - Current frame number (optional)
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
- * @param {boolean} params.useAveragePosition - Whether to use average face position
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally
- * @param {number} params.translateX - Additional translateX offset
- * @param {number} params.translateY - Additional translateY offset
- * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
- * @returns {Object} Transform styles and debug info
+/**
+ * Calculate face-centered translation for flexible container
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.containerWidth - Container width in pixels
+ * @param {number} params.containerHeight - Container height in pixels
+ * @param {number} params.currentFrame - Current frame number (optional)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} params.useAveragePosition - Whether to use average face position
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally
+ * @param {number} params.translateX - Additional translateX offset
+ * @param {number} params.translateY - Additional translateY offset
+ * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
+ * @returns {Object} Transform styles and debug info
  */
 var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation(_ref) {
   var _faceMetadata$metadat, _faceMetadata$metadat2;
@@ -214,8 +214,8 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
   };
 };
 
-/**
- * Get face data for a specific frame with optional interpolation
+/**
+ * Get face data for a specific frame with optional interpolation
  */
 function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
   var _prevFrame, _nextFrame;
@@ -274,8 +274,8 @@ function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
   return ((_prevFrame = prevFrame) === null || _prevFrame === void 0 ? void 0 : _prevFrame.data) || ((_nextFrame = nextFrame) === null || _nextFrame === void 0 ? void 0 : _nextFrame.data) || null;
 }
 
-/**
- * Calculate average face position from all frames with face data
+/**
+ * Calculate average face position from all frames with face data
  */
 function getAverageFaceData(frames) {
   if (!frames || frames.length === 0) return null;
@@ -310,14 +310,14 @@ function getAverageFaceData(frames) {
   };
 }
 
-/**
- * Calculate the negative space offset when face-centering a video
- *
- * @param {Object} faceMetadata - Face detection metadata object
- * @param {number} containerWidth - Container width in pixels
- * @param {number} containerHeight - Container height in pixels
- * @param {number} scale - Scale factor applied to the video
- * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
+/**
+ * Calculate the negative space offset when face-centering a video
+ *
+ * @param {Object} faceMetadata - Face detection metadata object
+ * @param {number} containerWidth - Container width in pixels
+ * @param {number} containerHeight - Container height in pixels
+ * @param {number} scale - Scale factor applied to the video
+ * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
  */
 export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(faceMetadata, containerWidth, containerHeight) {
   var _faceMetadata$metadat4, _faceMetadata$metadat5;
@@ -415,22 +415,22 @@ export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(
   };
 };
 
-/**
- * FaceCenteredVideo Component
- * @param {Object} props - Component props
- * @param {string} props.src - Video source URL
- * @param {Object} props.faceMetadata - Face detection metadata
- * @param {number} props.containerWidth - Container width in pixels (required)
- * @param {number} props.containerHeight - Container height in pixels (required)
- * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
- * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
- * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
- * @param {number} props.translateX - Additional translateX offset (optional)
- * @param {number} props.translateY - Additional translateY offset (optional)
- * @param {boolean} props.showDebugInfo - Whether to show debug information
- * @param {Object} props.style - Additional styles to apply to video
- * @param {string} props.className - CSS class name
- * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
+/**
+ * FaceCenteredVideo Component
+ * @param {Object} props - Component props
+ * @param {string} props.src - Video source URL
+ * @param {Object} props.faceMetadata - Face detection metadata
+ * @param {number} props.containerWidth - Container width in pixels (required)
+ * @param {number} props.containerHeight - Container height in pixels (required)
+ * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @param {number} props.translateX - Additional translateX offset (optional)
+ * @param {number} props.translateY - Additional translateY offset (optional)
+ * @param {boolean} props.showDebugInfo - Whether to show debug information
+ * @param {Object} props.style - Additional styles to apply to video
+ * @param {string} props.className - CSS class name
+ * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
  */
 export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
   var _faceMetadata$metadat7, _faceMetadata$metadat8, _faceMetadata$metadat9, _faceMetadata$metadat10;

package/dist/screenplay/RemotionRenderer/components/utils/PausableImg.js

@@ -15,10 +15,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useEffect, useState } from "react";
 import { Img, delayRender, continueRender } from "remotion";
 
-/**
- * PausableImg component that extends Remotion's Img with fetch validation.
- * It delays rendering until the image source can be successfully fetched.
- * If there's an error fetching the image, it renders nothing.
+/**
+ * PausableImg component that extends Remotion's Img with fetch validation.
+ * It delays rendering until the image source can be successfully fetched.
+ * If there's an error fetching the image, it renders nothing.
  */
 export var PausableImg = /*#__PURE__*/React.memo(function (_ref) {
   var src = _ref.src,

package/dist/screenplay/RemotionRenderer/components/utils/README.md

@@ -1,80 +1,80 @@
-# StretchText Component
-
-A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
-
-## Usage
-
-```jsx
-import StretchText from './StretchText';
-
-// Basic usage
-<StretchText text="Hello World" />
-
-// With custom styling
-<StretchText 
-  text="Contribution" 
-  color="#1a73e8" 
-  fontFamily="Arial" 
-  maxFontSize={200}
-  minFontSize={10}
-  style={{ fontWeight: 'bold' }}
-/>
-
-// With text stroke
-<StretchText 
-  text="Outlined Text" 
-  color="transparent"
-  textStrokeColor="white"
-  textStrokeWidth="2px"
-  style={{ fontWeight: 'bold' }}
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | string | required | The text to display |
-| `color` | string | '#000000' | Text color |
-| `fontFamily` | string | 'Arial' | Font family |
-| `maxFontSize` | number | 100 | Maximum font size in pixels |
-| `minFontSize` | number | 10 | Minimum font size in pixels |
-| `textStrokeColor` | string | undefined | Color of the text stroke |
-| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
-| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
-| `style` | object | {} | Additional style properties |
-
-## Examples
-
-The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
-
-- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
-- The text will always be contained within the parent container and will not overflow.
-- The component recalculates the font size when the window is resized.
-
-## Demo
-
-You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
-
-The demo shows several words of different lengths rendered in containers of the same width:
-
-- "Contribution" (longer word, smaller font)
-- "Work" (shorter word, larger font)
-- "Hello" (medium length word, medium font)
-- "Supercalifragilisticexpialidocious" (very long word, very small font)
-
-Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
-
-## Implementation Details
-
-The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
-
-The component uses SVG for rendering text, which provides several advantages:
-- Proper text-stroke rendering in headless mode
-- Better control over text positioning and alignment
-- Consistent rendering across different browsers and environments
-- Support for advanced SVG features like filters for text shadows
-
-For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
-
-The component also includes a resize listener to recalculate the font size when the window size changes.
+# StretchText Component
+
+A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
+
+## Usage
+
+```jsx
+import StretchText from './StretchText';
+
+// Basic usage
+<StretchText text="Hello World" />
+
+// With custom styling
+<StretchText 
+  text="Contribution" 
+  color="#1a73e8" 
+  fontFamily="Arial" 
+  maxFontSize={200}
+  minFontSize={10}
+  style={{ fontWeight: 'bold' }}
+/>
+
+// With text stroke
+<StretchText 
+  text="Outlined Text" 
+  color="transparent"
+  textStrokeColor="white"
+  textStrokeWidth="2px"
+  style={{ fontWeight: 'bold' }}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | string | required | The text to display |
+| `color` | string | '#000000' | Text color |
+| `fontFamily` | string | 'Arial' | Font family |
+| `maxFontSize` | number | 100 | Maximum font size in pixels |
+| `minFontSize` | number | 10 | Minimum font size in pixels |
+| `textStrokeColor` | string | undefined | Color of the text stroke |
+| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
+| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
+| `style` | object | {} | Additional style properties |
+
+## Examples
+
+The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
+
+- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
+- The text will always be contained within the parent container and will not overflow.
+- The component recalculates the font size when the window is resized.
+
+## Demo
+
+You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
+
+The demo shows several words of different lengths rendered in containers of the same width:
+
+- "Contribution" (longer word, smaller font)
+- "Work" (shorter word, larger font)
+- "Hello" (medium length word, medium font)
+- "Supercalifragilisticexpialidocious" (very long word, very small font)
+
+Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
+
+## Implementation Details
+
+The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
+
+The component uses SVG for rendering text, which provides several advantages:
+- Proper text-stroke rendering in headless mode
+- Better control over text positioning and alignment
+- Consistent rendering across different browsers and environments
+- Support for advanced SVG features like filters for text shadows
+
+For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
+
+The component also includes a resize listener to recalculate the font size when the window size changes.