@zync/zync-screnplay-player 0.1.221 → 0.1.223

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/Keyword.js

@@ -295,7 +295,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       height: CHROME_PADDING,
       width: width,
@@ -304,7 +304,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,
@@ -313,7 +313,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,

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

@@ -205,7 +205,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       height: CHROME_PADDING,
       width: width,
@@ -214,7 +214,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,
@@ -223,7 +223,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,

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

@@ -0,0 +1,264 @@
+import { AbsoluteFill, Freeze, OffthreadVideo, Sequence, useCurrentFrame, useVideoConfig } from 'remotion';
+import React from 'react';
+import { useOrientationBased } from '../../hooks/useOrientationBased.js';
+import { calculateInputRangeInPhases, DEFAULT_TIME_INTERPOLATE_OPTIONS, timeInterpolate } from '../../hooks/useTimeInterpolate.js';
+import { useTheme } from '../../theme/hooks/useTheme.js';
+import FaceCenteredVideo from '../utils/FaceCenteredVideo';
+import { BlurOverlay } from '../utils/BlurOverlay';
+var TOTAL_Y_PADDING = 20;
+var TOTAL_X_PADDING = 20;
+var GAP_BETWEEN_VIDEOS = 5;
+var MIN_HANDOFF_OVERLAP = 0.5;
+var getTransitionMetrics = function getTransitionMetrics(videos, handoffOverlapSeconds, fps) {
+  var startTimesInSeconds = [0];
+  for (var i = 1; i < videos.length; i += 1) {
+    var _videos;
+    var prevDuration = ((_videos = videos[i - 1]) === null || _videos === void 0 ? void 0 : _videos.videoDuration) || 0;
+    var overlap = handoffOverlapSeconds[i - 1] || 0;
+    var delay = Math.max(0, prevDuration - overlap);
+    startTimesInSeconds[i] = startTimesInSeconds[i - 1] + delay;
+  }
+  var transitions = [];
+  for (var _i = 0; _i < videos.length - 1; _i += 1) {
+    var _videos$_i, _videos2;
+    var _overlap = handoffOverlapSeconds[_i] || 0;
+    var phaseDurationsInSeconds = [0.5, Math.max(MIN_HANDOFF_OVERLAP, _overlap), 0.5];
+    var delayInSeconds = startTimesInSeconds[_i + 1] || 0;
+    var inputRangeInSeconds = calculateInputRangeInPhases(phaseDurationsInSeconds, delayInSeconds);
+    transitions.push({
+      index: _i,
+      from: _i,
+      to: _i + 1,
+      isResponderToSeeker: ((_videos$_i = videos[_i]) === null || _videos$_i === void 0 ? void 0 : _videos$_i.speakerRole) === 'responder' && ((_videos2 = videos[_i + 1]) === null || _videos2 === void 0 ? void 0 : _videos2.speakerRole) === 'seeker',
+      inputRangeInSeconds: inputRangeInSeconds,
+      startFrame: delayInSeconds * fps,
+      endFrame: inputRangeInSeconds[inputRangeInSeconds.length - 1] * fps
+    });
+  }
+  return {
+    transitions: transitions,
+    startFrames: startTimesInSeconds.map(function (time) {
+      return time * fps;
+    })
+  };
+};
+var renderClip = function renderClip(_ref) {
+  var clip = _ref.clip,
+    useSquareInLandscape = _ref.useSquareInLandscape,
+    orientation = _ref.orientation,
+    videoWidth = _ref.videoWidth,
+    videoHeight = _ref.videoHeight,
+    translateX = _ref.translateX;
+  if (!(clip !== null && clip !== void 0 && clip.videoFile)) {
+    return null;
+  }
+  var renderWidth = useSquareInLandscape ? Math.min(videoWidth, 1080) : videoWidth;
+  var renderHeight = useSquareInLandscape ? Math.min(videoHeight, 1080) : videoHeight;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translateX(".concat(translateX, "px)")
+    }
+  }, clip.noBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: clip.startVideoFrom,
+    src: clip.videoFile,
+    faceMetadata: clip.noBackgroundFaceMetadata,
+    aspectRatio: orientation,
+    containerWidth: renderWidth,
+    containerHeight: renderHeight,
+    useAveragePosition: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
+    startFrom: clip.startVideoFrom,
+    src: clip.videoFile,
+    style: {
+      height: renderHeight,
+      objectFit: 'cover',
+      width: renderWidth,
+      borderRadius: '40px'
+    }
+  }));
+};
+export var MultiHandoff = function MultiHandoff(_ref2) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
+  var _ref2$videos = _ref2.videos,
+    videos = _ref2$videos === void 0 ? [] : _ref2$videos,
+    _ref2$handoffOverlapS = _ref2.handoffOverlapSeconds,
+    handoffOverlapSeconds = _ref2$handoffOverlapS === void 0 ? [] : _ref2$handoffOverlapS,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    children = _ref2.children;
+  var frame = useCurrentFrame();
+  var videoConfig = useVideoConfig();
+  var width = videoConfig.width,
+    height = videoConfig.height,
+    fps = videoConfig.fps,
+    _videoConfig$props = videoConfig.props,
+    compositionProps = _videoConfig$props === void 0 ? {} : _videoConfig$props;
+  var outputOrientation = (compositionProps === null || compositionProps === void 0 ? void 0 : (_compositionProps$out = compositionProps.output) === null || _compositionProps$out === void 0 ? void 0 : _compositionProps$out.orientation) || (typeof window !== 'undefined' ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : (_window$screenplayPro2 = _window$screenplayPro.output) === null || _window$screenplayPro2 === void 0 ? void 0 : _window$screenplayPro2.orientation : undefined);
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        firstTargetVideoHeights: [height - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, 0],
+        secondTargetVideoHeights: [0, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS],
+        firstTargetVideoWidths: [width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING],
+        secondTargetVideoWidths: [width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING]
+      },
+      landscape: {
+        firstTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        secondTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        firstTargetVideoWidths: [width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, 0],
+        secondTargetVideoWidths: [width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS]
+      },
+      square: {
+        firstTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        secondTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        firstTargetVideoWidths: [width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, 0],
+        secondTargetVideoWidths: [width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS]
+      }
+    }),
+    firstTargetVideoWidths = _useOrientationBased.firstTargetVideoWidths,
+    secondTargetVideoWidths = _useOrientationBased.secondTargetVideoWidths,
+    firstTargetVideoHeights = _useOrientationBased.firstTargetVideoHeights,
+    secondTargetVideoHeights = _useOrientationBased.secondTargetVideoHeights,
+    orientation = _useOrientationBased.orientation;
+  var _getTransitionMetrics = getTransitionMetrics(videos, handoffOverlapSeconds, fps),
+    transitions = _getTransitionMetrics.transitions,
+    startFrames = _getTransitionMetrics.startFrames;
+  var activeTransition = transitions.find(function (transition) {
+    return frame >= transition.startFrame && frame <= transition.endFrame;
+  }) || null;
+  var activeFullVideoIndex = startFrames.reduce(function (activeIndex, clipStartFrame, index) {
+    if (clipStartFrame <= frame) {
+      return index;
+    }
+    return activeIndex;
+  }, 0) || 0;
+  var getFullScreenDimensions = function getFullScreenDimensions() {
+    if (orientation === 'portrait') {
+      return {
+        width: width - TOTAL_X_PADDING,
+        height: height - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS
+      };
+    }
+    return {
+      width: width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS,
+      height: height - TOTAL_Y_PADDING
+    };
+  };
+  var getClipAnimationState = function getClipAnimationState(clipIndex) {
+    if (!activeTransition) {
+      if (clipIndex !== activeFullVideoIndex) {
+        return null;
+      }
+      var dimensions = getFullScreenDimensions();
+      var _clip = videos[clipIndex] || {};
+      var _useSquareInLandscape = Boolean(_clip.useSquareInLandscape) && outputOrientation === 'landscape';
+      var centeredOffsetX = _useSquareInLandscape ? Math.max(0, (width - TOTAL_X_PADDING - Math.min(dimensions.width, 1080)) / 2) : 0;
+      return {
+        videoWidth: dimensions.width,
+        videoHeight: dimensions.height,
+        translateX: centeredOffsetX,
+        useSquareInLandscape: _useSquareInLandscape
+      };
+    }
+    var clip = videos[clipIndex] || {};
+    var useSquareInLandscape = Boolean(clip.useSquareInLandscape) && outputOrientation === 'landscape';
+    var inputRange = activeTransition.inputRangeInSeconds;
+    var isHorizontal = orientation !== 'portrait';
+    var shouldUseDirectionalResponderToSeekerMotion = Boolean(activeTransition.isResponderToSeeker) && isHorizontal;
+    if (clipIndex === activeTransition.from) {
+      var rawWidth = timeInterpolate(inputRange, firstTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var rawHeight = timeInterpolate(inputRange, firstTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var renderWidth = useSquareInLandscape ? Math.min(rawWidth, 1080) : rawWidth;
+      var _centeredOffsetX = useSquareInLandscape ? Math.max(0, (width - TOTAL_X_PADDING - renderWidth) / 2) : 0;
+      var fullWidthInHorizontal = width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS;
+      var directionalTranslateX = Math.max(0, fullWidthInHorizontal - rawWidth);
+      var defaultTranslateX = timeInterpolate(inputRange, [_centeredOffsetX, 0, 0, 0], DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      return {
+        videoWidth: rawWidth,
+        videoHeight: rawHeight,
+        translateX: shouldUseDirectionalResponderToSeekerMotion ? directionalTranslateX : defaultTranslateX,
+        useSquareInLandscape: useSquareInLandscape
+      };
+    }
+    if (clipIndex === activeTransition.to) {
+      var _rawWidth = timeInterpolate(inputRange, secondTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var halfWidthInHorizontal = width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS;
+      var _fullWidthInHorizontal = width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS;
+      var directionalRawWidth = timeInterpolate(inputRange, [0, halfWidthInHorizontal, halfWidthInHorizontal, _fullWidthInHorizontal], DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var effectiveRawWidth = shouldUseDirectionalResponderToSeekerMotion ? directionalRawWidth : _rawWidth;
+      var _rawHeight = timeInterpolate(inputRange, secondTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var _renderWidth = useSquareInLandscape ? Math.min(effectiveRawWidth, 1080) : effectiveRawWidth;
+      var _centeredOffsetX2 = useSquareInLandscape ? Math.max(0, (width - TOTAL_X_PADDING - _renderWidth) / 2) : 0;
+      var _defaultTranslateX = timeInterpolate(inputRange, [_centeredOffsetX2, 0, 0, _centeredOffsetX2], DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var currentFromRawWidth = timeInterpolate(inputRange, firstTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS, fps, frame);
+      var _directionalTranslateX = -currentFromRawWidth;
+      return {
+        videoWidth: effectiveRawWidth,
+        videoHeight: _rawHeight,
+        translateX: shouldUseDirectionalResponderToSeekerMotion ? _directionalTranslateX : _defaultTranslateX,
+        useSquareInLandscape: useSquareInLandscape
+      };
+    }
+    return null;
+  };
+  var clipStates = videos.map(function (_, index) {
+    return getClipAnimationState(index);
+  });
+  var shouldUseBlackBackgroundInLandscape = videos.some(function (video) {
+    return (video === null || video === void 0 ? void 0 : video.useSquareInLandscape) && outputOrientation === 'landscape';
+  });
+  var handoffBackgroundColor = shouldUseBlackBackgroundInLandscape ? '#000000' : primaryColor;
+  var activeGap = activeTransition && frame < activeTransition.startFrame + 2 * fps ? '10px' : '0px';
+  var hasAnyNoBackgroundVideo = videos.some(function (video) {
+    return video === null || video === void 0 ? void 0 : video.noBackgroundVideoUrl;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      backgroundColor: handoffBackgroundColor
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+      padding: '10px 10px',
+      gap: activeGap,
+      flexDirection: orientation === 'portrait' ? 'column' : 'row'
+    }
+  }, videos.map(function (clip, index) {
+    var state = clipStates[index];
+    if (!state) {
+      return null;
+    }
+    var clipStartFrame = startFrames[index] || 0;
+    var clipDurationFrames = ((clip === null || clip === void 0 ? void 0 : clip.videoDuration) || 0) * fps;
+    var freezeActive = frame >= clipStartFrame + clipDurationFrames;
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: clipStartFrame,
+      layout: "none"
+    }, /*#__PURE__*/React.createElement(Freeze, {
+      frame: clipDurationFrames,
+      active: freezeActive
+    }, renderClip({
+      clip: clip,
+      useSquareInLandscape: state.useSquareInLandscape,
+      orientation: orientation,
+      videoWidth: state.videoWidth,
+      videoHeight: state.videoHeight,
+      translateX: state.translateX
+    })));
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: Boolean(noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && hasAnyNoBackgroundVideo,
+    width: width,
+    height: height,
+    zIndex: 1
+  })));
+};

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,