@zync/zync-screnplay-player 0.1.245 → 0.1.246

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

@@ -73,14 +73,7 @@ var Square = function Square(_ref) {
       left: mainVideoLeftTransition,
       zIndex: 2
     }
-  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
-    url: virtualBgUrl,
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 2
-  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     faceMetadata: faceMetadata,
@@ -88,6 +81,8 @@ var Square = function Square(_ref) {
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
     centerHorizontally: true,
+    translateY: 100,
+    anchorToBottom: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     pauseWhenBuffering: true,
@@ -111,7 +106,14 @@ var Square = function Square(_ref) {
       left: mainVideoLeftTransition,
       zIndex: 0
     }
-  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 0
+  }) : faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: videoUrl,
     transparent: false,
@@ -120,6 +122,8 @@ var Square = function Square(_ref) {
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
     centerHorizontally: true,
+    translateY: 100,
+    anchorToBottom: true,
     muted: true,
     style: {
       zIndex: 0,
@@ -162,6 +166,8 @@ var Square = function Square(_ref) {
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: true,
+    translateY: 100,
+    anchorToBottom: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     transparent: true,
     muted: true
@@ -182,14 +188,12 @@ var Square = function Square(_ref) {
     muted: true,
     transparent: true,
     style: {
-      position: "relative",
-      top: "50%",
       objectFit: "cover",
-      width: mainVideoWidthTransition,
-      height: mainVideoHeightTransition,
+      height: "100%",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
       borderRadius: "30px",
-      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
-      transform: "translateY(-50%)"
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -282,15 +286,7 @@ var Portrait = function Portrait(_ref2) {
       left: mainVideoLeftTransition,
       zIndex: 2
     }
-  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
-    url: virtualBgUrl,
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    borderRadius: "20px",
-    zIndex: 2
-  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     faceMetadata: faceMetadata,
@@ -298,6 +294,8 @@ var Portrait = function Portrait(_ref2) {
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
     centerHorizontally: false,
+    translateY: 100,
+    anchorToBottom: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     pauseWhenBuffering: true,
@@ -323,7 +321,15 @@ var Portrait = function Portrait(_ref2) {
       transform: "scale(1)",
       zIndex: 0
     }
-  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: "20px",
+    zIndex: 0
+  }) : faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: videoUrl,
     faceMetadata: faceMetadata,
@@ -331,6 +337,8 @@ var Portrait = function Portrait(_ref2) {
     containerHeight: mainVideoHeightTransition,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     useAveragePosition: true,
+    translateY: 100,
+    anchorToBottom: true,
     muted: true,
     transparent: false,
     style: {
@@ -375,6 +383,8 @@ var Portrait = function Portrait(_ref2) {
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: false,
+    translateY: 100,
+    anchorToBottom: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     transparent: true,
     muted: true
@@ -397,14 +407,12 @@ var Portrait = function Portrait(_ref2) {
     muted: true,
     transparent: true,
     style: {
-      position: "relative",
-      width: mainVideoWidthTransition,
-      height: mainVideoHeightTransition,
-      top: "50%",
       objectFit: "cover",
+      height: "100%",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
       borderRadius: "30px",
-      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
-      transform: "translateY(-50%)"
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -491,21 +499,15 @@ var Landscape = function Landscape(_ref3) {
       left: mainVideoLeftTransition,
       zIndex: 2
     }
-  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
-    url: virtualBgUrl,
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    borderRadius: "20px",
-    zIndex: 2
-  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     faceMetadata: faceMetadata,
     containerWidth: mainVideoWidthTransition,
     containerHeight: mainVideoHeightTransition,
     useAveragePosition: true,
+    translateY: 100,
+    anchorToBottom: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     pauseWhenBuffering: true,
@@ -543,6 +545,8 @@ var Landscape = function Landscape(_ref3) {
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: false,
+    translateY: 100,
+    anchorToBottom: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     transparent: true,
     muted: true
@@ -564,14 +568,12 @@ var Landscape = function Landscape(_ref3) {
     muted: true,
     transparent: true,
     style: {
-      position: "relative",
-      top: "50%",
       height: "100%",
       objectFit: "cover",
       width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
       borderRadius: "30px",
-      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
-      transform: "translateY(-50%)"
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {

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

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["src", "faceMetadata", "containerWidth", "containerHeight", "enableInterpolation", "useAveragePosition", "centerHorizontally", "translateX", "translateY", "showDebugInfo", "style", "className", "containerStyle", "noBackgroundVideoEffects", "noBackgroundEffects", "transparent"];
+var _excluded = ["src", "faceMetadata", "containerWidth", "containerHeight", "enableInterpolation", "useAveragePosition", "centerHorizontally", "anchorToBottom", "translateX", "translateY", "showDebugInfo", "style", "className", "containerStyle", "noBackgroundVideoEffects", "noBackgroundEffects", "transparent"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -8,34 +8,35 @@ 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 {boolean} params.anchorToBottom - Whether to anchor the video to the container bottom edge
+ * @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;
@@ -50,6 +51,8 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
     useAveragePosition = _ref$useAveragePositi === void 0 ? false : _ref$useAveragePositi,
     _ref$centerHorizontal = _ref.centerHorizontally,
     centerHorizontally = _ref$centerHorizontal === void 0 ? false : _ref$centerHorizontal,
+    _ref$anchorToBottom = _ref.anchorToBottom,
+    anchorToBottom = _ref$anchorToBottom === void 0 ? false : _ref$anchorToBottom,
     _ref$translateX = _ref.translateX,
     translateX = _ref$translateX === void 0 ? 0 : _ref$translateX,
     _ref$translateY = _ref.translateY,
@@ -120,17 +123,18 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
     }
   }
 
-  // Calculate translation needed to center the face in the container
-  // When scale > 1, translate happens in scaled coordinate system, so we need to adjust
+  // Calculate translation needed to center the face in the container or anchor
+  // the source video bottom edge to the container bottom edge.
+  // When scale > 1, translate happens in scaled coordinate system, so we need to adjust.
   var baseTranslateX = containerCenterX - faceX + translateX;
-  var baseTranslateY = centerHorizontally ? translateY : containerCenterY - faceY + translateY;
+  var baseTranslateY = anchorToBottom ? containerHeight - sourceHeight + translateY : centerHorizontally ? translateY : containerCenterY - faceY + translateY;
 
   // Adjust translation for scaling - divide by scale factor when scale > 1
   var finalTranslateX = scale > 1 ? baseTranslateX / scale : baseTranslateX;
   var finalTranslateY = scale > 1 ? baseTranslateY / scale : baseTranslateY;
 
   // Add additional translateY adjustment when scale > 1 to keep video contained within container
-  if (!centerHorizontally) {
+  if (!centerHorizontally && !anchorToBottom) {
     // Calculate the scaled video height
     var scaledVideoHeight = sourceHeight * scale;
 
@@ -185,7 +189,7 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
 
   // Transform origin should be at the face position for proper scaling
   var transformOriginX = (relativeFaceX * 100).toFixed(2);
-  var transformOriginY = (relativeFaceY * 100).toFixed(2);
+  var transformOriginY = anchorToBottom ? "100.00" : (relativeFaceY * 100).toFixed(2);
   var transformOrigin = "".concat(transformOriginX, "% ").concat(transformOriginY, "%");
   return {
     transform: transform,
@@ -208,14 +212,15 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
       containerHeight: containerHeight,
       useAveragePosition: useAveragePosition,
       centerHorizontally: centerHorizontally,
+      anchorToBottom: anchorToBottom,
       scalingApplied: scale > 1,
       orientation: orientation
     }
   };
 };
 
-/**
- * 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 +279,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 +315,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 +420,23 @@ 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 {boolean} props.anchorToBottom - Whether to anchor the video to the container bottom edge
+ * @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;
@@ -444,6 +450,8 @@ export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
     useAveragePosition = _ref2$useAveragePosit === void 0 ? true : _ref2$useAveragePosit,
     _ref2$centerHorizonta = _ref2.centerHorizontally,
     centerHorizontally = _ref2$centerHorizonta === void 0 ? false : _ref2$centerHorizonta,
+    _ref2$anchorToBottom = _ref2.anchorToBottom,
+    anchorToBottom = _ref2$anchorToBottom === void 0 ? false : _ref2$anchorToBottom,
     _ref2$translateX = _ref2.translateX,
     translateX = _ref2$translateX === void 0 ? 0 : _ref2$translateX,
     _ref2$translateY = _ref2.translateY,
@@ -482,6 +490,7 @@ export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
       enableInterpolation: enableInterpolation,
       useAveragePosition: useAveragePosition,
       centerHorizontally: centerHorizontally,
+      anchorToBottom: anchorToBottom,
       translateX: translateX,
       translateY: translateY,
       orientation: orientation
@@ -492,7 +501,7 @@ export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
   var videoStyle = _objectSpread({
     width: sourceWidth || "100%",
     height: sourceHeight || "100%",
-    transform: sourceHeight === containerHeight && sourceWidth === containerWidth ? undefined : transform,
+    transform: !anchorToBottom && sourceHeight === containerHeight && sourceWidth === containerWidth ? undefined : transform,
     transformOrigin: transformOrigin || "center center",
     position: "absolute",
     top: 0,

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,