@zync/zync-screnplay-player 0.1.233 → 0.1.234

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

@@ -0,0 +1,232 @@
+import React from "react";
+import { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+var ANIMATION_SECONDS = 1.2;
+var INSET_ASPECT_RATIO = 9 / 16;
+var getInsetMetrics = function getInsetMetrics(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    outputOrientation = _ref.outputOrientation;
+  var padding = Math.max(32, Math.min(width, height) * 0.045);
+  var rawWidth = width * 0.24;
+  var maxWidthByHeight = (height - padding * 2) * INSET_ASPECT_RATIO;
+  var insetWidth = Math.min(rawWidth, maxWidthByHeight, 360);
+  var finalWidth = outputOrientation === "portrait" ? Math.min(insetWidth, width * 0.36) : insetWidth;
+  var finalHeight = finalWidth / INSET_ASPECT_RATIO;
+  return {
+    borderRadius: Math.max(18, finalWidth * 0.06),
+    height: finalHeight,
+    left: padding,
+    top: height - padding - finalHeight,
+    width: finalWidth
+  };
+};
+var SourceVideo = function SourceVideo(_ref2) {
+  var faceMetadata = _ref2.faceMetadata,
+    height = _ref2.height,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    src = _ref2.src,
+    startVideoFrom = _ref2.startVideoFrom,
+    transparent = _ref2.transparent,
+    width = _ref2.width;
+  if (!src) {
+    return null;
+  }
+  if (faceMetadata) {
+    return /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      startFrom: startVideoFrom,
+      src: src,
+      faceMetadata: faceMetadata,
+      containerWidth: width,
+      containerHeight: height,
+      useAveragePosition: true,
+      centerHorizontally: false,
+      transparent: transparent,
+      muted: false,
+      noBackgroundVideoEffects: noBackgroundVideoEffects,
+      style: {
+        filter: transparent && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
+    startFrom: startVideoFrom,
+    src: src,
+    muted: false,
+    transparent: transparent,
+    style: {
+      filter: transparent && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      height: "100%",
+      objectFit: "cover",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      width: "100%"
+    }
+  });
+};
+var ImageInsetContent = function ImageInsetContent(_ref3) {
+  var children = _ref3.children,
+    disableTransitionSounds = _ref3.disableTransitionSounds,
+    durationInFrames = _ref3.durationInFrames,
+    faceMetadata = _ref3.faceMetadata,
+    frameColor = _ref3.frameColor,
+    height = _ref3.height,
+    imageUrl = _ref3.imageUrl,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    outputOrientation = _ref3.outputOrientation,
+    sourceVideoOrientation = _ref3.sourceVideoOrientation,
+    startVideoFrom = _ref3.startVideoFrom,
+    videoUrl = _ref3.videoUrl,
+    width = _ref3.width;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps;
+  var animationFrames = fps * ANIMATION_SECONDS;
+  var progress = interpolate(frame, [0, animationFrames], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var sourceSrc = noBackgroundVideoUrl || videoUrl;
+  var sourceTransparent = Boolean(noBackgroundVideoUrl);
+  var inset = getInsetMetrics({
+    width: width,
+    height: height,
+    outputOrientation: outputOrientation
+  });
+  var sourceWidth = interpolate(progress, [0, 1], [width, inset.width]);
+  var sourceHeight = interpolate(progress, [0, 1], [height, inset.height]);
+  var sourceLeft = interpolate(progress, [0, 1], [0, inset.left]);
+  var sourceTop = interpolate(progress, [0, 1], [0, inset.top]);
+  var sourceBorderRadius = interpolate(progress, [0, 1], [0, inset.borderRadius]);
+  var imagePanProgress = interpolate(frame, [0, Math.max(1, (durationInFrames || 1) - 1)], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var shouldPanImage = outputOrientation === "square" || outputOrientation === "portrait";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "black",
+      height: height,
+      overflow: "hidden",
+      width: width
+    }
+  }, imageUrl ? /*#__PURE__*/React.createElement(Img, {
+    src: imageUrl,
+    style: {
+      height: "100%",
+      left: shouldPanImage ? imagePanProgress * width : undefined,
+      maxWidth: shouldPanImage ? "none" : undefined,
+      objectFit: shouldPanImage ? undefined : "cover",
+      position: shouldPanImage ? "absolute" : undefined,
+      top: 0,
+      transform: shouldPanImage ? "translateX(-".concat(imagePanProgress * 100, "%)") : undefined,
+      width: shouldPanImage ? "auto" : "100%"
+    }
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderRadius: sourceBorderRadius,
+      boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
+      height: sourceHeight,
+      left: sourceLeft,
+      overflow: "hidden",
+      position: "absolute",
+      top: sourceTop,
+      width: sourceWidth,
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(SourceVideo, {
+    faceMetadata: faceMetadata,
+    height: sourceHeight,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    sourceVideoOrientation: sourceVideoOrientation,
+    src: sourceSrc,
+    startVideoFrom: startVideoFrom,
+    transparent: sourceTransparent,
+    width: sourceWidth
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3
+    }
+  }, children)));
+};
+export var ImageInset = function ImageInset(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
+  var children = _ref4.children,
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
+    durationInFrames = _ref4.durationInFrames,
+    faceMetadata = _ref4.faceMetadata,
+    frameColor = _ref4.frameColor,
+    imageUrl = _ref4.imageUrl,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref4.sourceVideoOrientation,
+    startVideoFrom = _ref4.startVideoFrom,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscape,
+    useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand,
+    videoUrl = _ref4.videoUrl;
+  var _useVideoConfig2 = useVideoConfig(),
+    outputWidth = _useVideoConfig2.width,
+    outputHeight = _useVideoConfig2.height,
+    _useVideoConfig2$prop = _useVideoConfig2.props,
+    compositionProps = _useVideoConfig2$prop === void 0 ? {} : _useVideoConfig2$prop;
+  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 shouldUseSquareInLandscape = Boolean(useSquareInLandscape) && outputOrientation === "landscape";
+  var squareSize = 1080;
+  var width = shouldUseSquareInLandscape ? squareSize : outputWidth;
+  var height = shouldUseSquareInLandscape ? squareSize : outputHeight;
+  var renderOffsetX = shouldUseSquareInLandscape ? (outputWidth - squareSize) / 2 : 0;
+  var orientationOverride = shouldUseSquareInLandscape ? "square" : undefined;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        activeOrientation: "portrait"
+      },
+      landscape: {
+        activeOrientation: "landscape"
+      },
+      square: {
+        activeOrientation: "square"
+      }
+    }, orientationOverride),
+    activeOrientation = _useOrientationBased.activeOrientation;
+  var content = /*#__PURE__*/React.createElement(ImageInsetContent, {
+    disableTransitionSounds: disableTransitionSounds,
+    durationInFrames: durationInFrames,
+    faceMetadata: faceMetadata,
+    frameColor: frameColor,
+    height: height,
+    imageUrl: imageUrl,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    outputOrientation: activeOrientation,
+    sourceVideoOrientation: sourceVideoOrientation,
+    startVideoFrom: startVideoFrom,
+    videoUrl: videoUrl,
+    width: width
+  }, children);
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "black",
+      height: outputHeight,
+      width: outputWidth
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      height: height,
+      left: renderOffsetX,
+      overflow: "hidden",
+      top: 0,
+      width: width
+    }
+  }, content));
+};

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

@@ -0,0 +1,221 @@
+import React from "react";
+import { AbsoluteFill, Audio, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig, Video } from "remotion";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+var ANIMATION_SECONDS = 1.2;
+var INSET_ASPECT_RATIO = 9 / 16;
+var getInsetMetrics = function getInsetMetrics(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    outputOrientation = _ref.outputOrientation;
+  var padding = Math.max(32, Math.min(width, height) * 0.045);
+  var rawWidth = width * 0.24;
+  var maxWidthByHeight = (height - padding * 2) * INSET_ASPECT_RATIO;
+  var insetWidth = Math.min(rawWidth, maxWidthByHeight, 360);
+  var finalWidth = outputOrientation === "portrait" ? Math.min(insetWidth, width * 0.36) : insetWidth;
+  var finalHeight = finalWidth / INSET_ASPECT_RATIO;
+  return {
+    borderRadius: Math.max(18, finalWidth * 0.06),
+    height: finalHeight,
+    left: padding,
+    top: height - padding - finalHeight,
+    width: finalWidth
+  };
+};
+var SourceVideo = function SourceVideo(_ref2) {
+  var faceMetadata = _ref2.faceMetadata,
+    height = _ref2.height,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    src = _ref2.src,
+    startVideoFrom = _ref2.startVideoFrom,
+    transparent = _ref2.transparent,
+    width = _ref2.width;
+  if (!src) {
+    return null;
+  }
+  if (faceMetadata) {
+    return /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      startFrom: startVideoFrom,
+      src: src,
+      faceMetadata: faceMetadata,
+      containerWidth: width,
+      containerHeight: height,
+      useAveragePosition: true,
+      centerHorizontally: false,
+      transparent: transparent,
+      muted: false,
+      noBackgroundVideoEffects: noBackgroundVideoEffects,
+      style: {
+        filter: transparent && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
+    startFrom: startVideoFrom,
+    src: src,
+    muted: false,
+    transparent: transparent,
+    style: {
+      filter: transparent && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      height: "100%",
+      objectFit: "cover",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      width: "100%"
+    }
+  });
+};
+var VideoInsetContent = function VideoInsetContent(_ref3) {
+  var brollUrl = _ref3.brollUrl,
+    children = _ref3.children,
+    disableTransitionSounds = _ref3.disableTransitionSounds,
+    faceMetadata = _ref3.faceMetadata,
+    frameColor = _ref3.frameColor,
+    height = _ref3.height,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    outputOrientation = _ref3.outputOrientation,
+    sourceVideoOrientation = _ref3.sourceVideoOrientation,
+    startVideoFrom = _ref3.startVideoFrom,
+    videoUrl = _ref3.videoUrl,
+    width = _ref3.width;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps;
+  var animationFrames = fps * ANIMATION_SECONDS;
+  var progress = interpolate(frame, [0, animationFrames], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var sourceSrc = noBackgroundVideoUrl || videoUrl;
+  var sourceTransparent = Boolean(noBackgroundVideoUrl);
+  var inset = getInsetMetrics({
+    width: width,
+    height: height,
+    outputOrientation: outputOrientation
+  });
+  var sourceWidth = interpolate(progress, [0, 1], [width, inset.width]);
+  var sourceHeight = interpolate(progress, [0, 1], [height, inset.height]);
+  var sourceLeft = interpolate(progress, [0, 1], [0, inset.left]);
+  var sourceTop = interpolate(progress, [0, 1], [0, inset.top]);
+  var sourceBorderRadius = interpolate(progress, [0, 1], [0, inset.borderRadius]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "black",
+      height: height,
+      overflow: "hidden",
+      width: width
+    }
+  }, brollUrl ? /*#__PURE__*/React.createElement(Video, {
+    src: brollUrl,
+    loop: true,
+    muted: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderRadius: sourceBorderRadius,
+      boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
+      height: sourceHeight,
+      left: sourceLeft,
+      overflow: "hidden",
+      position: "absolute",
+      top: sourceTop,
+      width: sourceWidth,
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(SourceVideo, {
+    faceMetadata: faceMetadata,
+    height: sourceHeight,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    sourceVideoOrientation: sourceVideoOrientation,
+    src: sourceSrc,
+    startVideoFrom: startVideoFrom,
+    transparent: sourceTransparent,
+    width: sourceWidth
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3
+    }
+  }, children)));
+};
+export var VideoInset = function VideoInset(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
+  var brollUrl = _ref4.brollUrl,
+    children = _ref4.children,
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
+    faceMetadata = _ref4.faceMetadata,
+    frameColor = _ref4.frameColor,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref4.sourceVideoOrientation,
+    startVideoFrom = _ref4.startVideoFrom,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscape,
+    useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand,
+    videoUrl = _ref4.videoUrl;
+  var _useVideoConfig2 = useVideoConfig(),
+    outputWidth = _useVideoConfig2.width,
+    outputHeight = _useVideoConfig2.height,
+    _useVideoConfig2$prop = _useVideoConfig2.props,
+    compositionProps = _useVideoConfig2$prop === void 0 ? {} : _useVideoConfig2$prop;
+  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 shouldUseSquareInLandscape = Boolean(useSquareInLandscape) && outputOrientation === "landscape";
+  var squareSize = 1080;
+  var width = shouldUseSquareInLandscape ? squareSize : outputWidth;
+  var height = shouldUseSquareInLandscape ? squareSize : outputHeight;
+  var renderOffsetX = shouldUseSquareInLandscape ? (outputWidth - squareSize) / 2 : 0;
+  var orientationOverride = shouldUseSquareInLandscape ? "square" : undefined;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        activeOrientation: "portrait"
+      },
+      landscape: {
+        activeOrientation: "landscape"
+      },
+      square: {
+        activeOrientation: "square"
+      }
+    }, orientationOverride),
+    activeOrientation = _useOrientationBased.activeOrientation;
+  var content = /*#__PURE__*/React.createElement(VideoInsetContent, {
+    brollUrl: brollUrl,
+    disableTransitionSounds: disableTransitionSounds,
+    faceMetadata: faceMetadata,
+    frameColor: frameColor,
+    height: height,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    outputOrientation: activeOrientation,
+    sourceVideoOrientation: sourceVideoOrientation,
+    startVideoFrom: startVideoFrom,
+    videoUrl: videoUrl,
+    width: width
+  }, children);
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "black",
+      height: outputHeight,
+      width: outputWidth
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      height: height,
+      left: renderOffsetX,
+      overflow: "hidden",
+      top: 0,
+      width: width
+    }
+  }, content));
+};

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,