@zync/zync-screnplay-player 0.1.202 → 0.1.204

package/dist/screenplay/RemotionRenderer/RemotionRenderer.js

@@ -90,26 +90,27 @@ export var RemotionRenderer = /*#__PURE__*/function () {
   }, {
     key: "toRemotionFragment",
     value: function toRemotionFragment(screenPlaySegment, layout) {
-      var _screenPlaySegment$da, _screenPlaySegment$da2, _layout$data, _screenPlaySegment$da3, _toFrames, _screenPlaySegment$da4, _screenPlaySegment$da5;
+      var _screenPlaySegment$da, _screenPlaySegment$da2, _layout$data, _screenPlaySegment$da3, _screenPlaySegment$da4, _layout$data2, _screenPlaySegment$da5, _toFrames, _screenPlaySegment$da6, _screenPlaySegment$da7;
       var trimLeft = 0;
       if (layout) {
         trimLeft = layout.data.trimLeft || 0;
       }
       var component = toPascalCase(screenPlaySegment.type);
       var inheritedProps = component === "HandoffNametag" ? {
-        handoffNametagVariant: (_screenPlaySegment$da = (_screenPlaySegment$da2 = screenPlaySegment.data) === null || _screenPlaySegment$da2 === void 0 ? void 0 : _screenPlaySegment$da2.handoffNametagVariant) !== 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.handoffNametagVariant
+        handoffNametagVariant: (_screenPlaySegment$da = (_screenPlaySegment$da2 = screenPlaySegment.data) === null || _screenPlaySegment$da2 === void 0 ? void 0 : _screenPlaySegment$da2.handoffNametagVariant) !== 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.handoffNametagVariant,
+        useSquareInLandscapeFirstVideo: (_screenPlaySegment$da3 = (_screenPlaySegment$da4 = screenPlaySegment.data) === null || _screenPlaySegment$da4 === void 0 ? void 0 : _screenPlaySegment$da4.useSquareInLandscapeFirstVideo) !== 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.useSquareInLandscapeFirstVideo
       } : {};
       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$da3 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da3 === void 0 ? void 0 : _screenPlaySegment$da3.videoUrl,
-        startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da4 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da4 === void 0 ? void 0 : _screenPlaySegment$da4.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
+        videoUrl: (_screenPlaySegment$da5 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da5 === void 0 ? void 0 : _screenPlaySegment$da5.videoUrl,
+        startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da6 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da6 === void 0 ? void 0 : _screenPlaySegment$da6.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
         durationInFrames: durationInFrames,
         from: from,
         to: to,
-        videoZoom: (_screenPlaySegment$da5 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da5 === void 0 ? void 0 : _screenPlaySegment$da5.zoom,
+        videoZoom: (_screenPlaySegment$da7 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da7 === void 0 ? void 0 : _screenPlaySegment$da7.zoom,
         offset: toFrames(this.fps * (screenPlaySegment.data.offset - trimLeft)) || 0,
         theme: screenPlaySegment.theme,
         themeSettings: screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : screenPlaySegment.themeSettings
@@ -118,20 +119,20 @@ export var RemotionRenderer = /*#__PURE__*/function () {
   }, {
     key: "toRemotionAudioFragment",
     value: function toRemotionAudioFragment(screenPlaySegment) {
-      var _screenPlaySegment$da6, _toFrames2, _screenPlaySegment$da7, _screenPlaySegment$da8, _screenPlaySegment$da9, _screenPlaySegment$da10, _screenPlaySegment$da11, _screenPlaySegment$da12;
+      var _screenPlaySegment$da8, _toFrames2, _screenPlaySegment$da9, _screenPlaySegment$da10, _screenPlaySegment$da11, _screenPlaySegment$da12, _screenPlaySegment$da13, _screenPlaySegment$da14;
       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$da6 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da6 === void 0 ? void 0 : _screenPlaySegment$da6.url,
-        startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da7 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da7 === void 0 ? void 0 : _screenPlaySegment$da7.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
+        src: (_screenPlaySegment$da8 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da8 === void 0 ? void 0 : _screenPlaySegment$da8.url,
+        startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da9 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da9 === void 0 ? void 0 : _screenPlaySegment$da9.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
         durationInFrames: durationInFrames,
         from: from,
         to: to,
         offset: this.fps * screenPlaySegment.data.offset || 0,
-        volume: (_screenPlaySegment$da8 = (_screenPlaySegment$da9 = screenPlaySegment.data) === null || _screenPlaySegment$da9 === void 0 ? void 0 : (_screenPlaySegment$da10 = _screenPlaySegment$da9.sourceAudio) === null || _screenPlaySegment$da10 === void 0 ? void 0 : _screenPlaySegment$da10.volume) !== null && _screenPlaySegment$da8 !== void 0 ? _screenPlaySegment$da8 : 1,
-        loop: ((_screenPlaySegment$da11 = screenPlaySegment.data) === null || _screenPlaySegment$da11 === void 0 ? void 0 : (_screenPlaySegment$da12 = _screenPlaySegment$da11.sourceAudio) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.loop) || false
+        volume: (_screenPlaySegment$da10 = (_screenPlaySegment$da11 = screenPlaySegment.data) === null || _screenPlaySegment$da11 === void 0 ? void 0 : (_screenPlaySegment$da12 = _screenPlaySegment$da11.sourceAudio) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.volume) !== null && _screenPlaySegment$da10 !== void 0 ? _screenPlaySegment$da10 : 1,
+        loop: ((_screenPlaySegment$da13 = screenPlaySegment.data) === null || _screenPlaySegment$da13 === void 0 ? void 0 : (_screenPlaySegment$da14 = _screenPlaySegment$da13.sourceAudio) === null || _screenPlaySegment$da14 === void 0 ? void 0 : _screenPlaySegment$da14.loop) || false
       });
     }
   }, {
@@ -163,10 +164,10 @@ export var RemotionRenderer = /*#__PURE__*/function () {
     key: "toRemotionCaptionSegment",
     value: function toRemotionCaptionSegment(screenPlaySegment, screenplayLayout) {
       var _screenplayLayout$dat,
-        _screenPlaySegment$da13,
+        _screenPlaySegment$da15,
         _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$da13 = screenPlaySegment.data) === null || _screenPlaySegment$da13 === void 0 ? void 0 : _screenPlaySegment$da13.offset);
+      var segmentOffset = Number(screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : (_screenPlaySegment$da15 = screenPlaySegment.data) === null || _screenPlaySegment$da15 === void 0 ? void 0 : _screenPlaySegment$da15.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/Handoff.js

@@ -10,6 +10,7 @@ var TOTAL_X_PADDING = 20;
 var GAP_BETWEEN_VIDEOS = 5;
 var MIN_HANDOFF_OVERLAP = 0.5;
 export var Handoff = function Handoff(_ref) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var startFirstVideoFrom = _ref.startFirstVideoFrom,
     startSecondVideoFrom = _ref.startSecondVideoFrom,
     firstVideoFile = _ref.firstVideoFile,
@@ -22,11 +23,18 @@ export var Handoff = function Handoff(_ref) {
     secondNoBackgroundVideoUrl = _ref.secondNoBackgroundVideoUrl,
     secondNoBackgroundFaceMetadata = _ref.secondNoBackgroundFaceMetadata,
     noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
-    handoffOverlapSeconds = _ref.handoffOverlapSeconds;
-  var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height,
-    fps = _useVideoConfig.fps;
+    handoffOverlapSeconds = _ref.handoffOverlapSeconds,
+    _ref$useSquareInLands = _ref.useSquareInLandscapeFirstVideo,
+    useSquareInLandscapeFirstVideo = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands;
+  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 shouldUseSquareInLandscapeFirstVideo = Boolean(useSquareInLandscapeFirstVideo) && outputOrientation === "landscape";
+  var squareSize = 1080;
   var frame = useCurrentFrame();
   var _useTheme = useTheme(),
     primaryColor = _useTheme.primaryColor;
@@ -68,6 +76,10 @@ export var Handoff = function Handoff(_ref) {
   var secondVideoWidth = useTimeInterpolate(inputRangeInSeconds, secondTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS);
   var firstVideoHeight = useTimeInterpolate(inputRangeInSeconds, firstTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
   var secondVideoHeight = useTimeInterpolate(inputRangeInSeconds, secondTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var firstRenderVideoWidth = shouldUseSquareInLandscapeFirstVideo ? Math.min(firstVideoWidth, squareSize) : firstVideoWidth;
+  var firstRenderVideoHeight = shouldUseSquareInLandscapeFirstVideo ? Math.min(firstVideoHeight, squareSize) : firstVideoHeight;
+  var firstVideoCenteredOffsetX = shouldUseSquareInLandscapeFirstVideo ? Math.max(0, (width - TOTAL_X_PADDING - firstRenderVideoWidth) / 2) : 0;
+  var firstVideoTranslateX = useTimeInterpolate(inputRangeInSeconds, [firstVideoCenteredOffsetX, 0, 0, 0], DEFAULT_TIME_INTERPOLATE_OPTIONS);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       width: width,
@@ -90,24 +102,28 @@ export var Handoff = function Handoff(_ref) {
   }, /*#__PURE__*/React.createElement(Freeze, {
     frame: firstVideoDurationInFrames,
     active: frame >= firstVideoDurationInFrames
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translateX(".concat(firstVideoTranslateX, "px)")
+    }
   }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startFirstVideoFrom,
     src: firstVideoFile,
     faceMetadata: firstNoBackgroundFaceMetadata,
     aspectRatio: orientation,
-    containerWidth: firstVideoWidth,
-    containerHeight: firstVideoHeight,
+    containerWidth: firstRenderVideoWidth,
+    containerHeight: firstRenderVideoHeight,
     useAveragePosition: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     startFrom: startFirstVideoFrom,
     src: firstVideoFile,
     style: {
-      height: firstVideoHeight,
+      height: firstRenderVideoHeight,
       objectFit: "cover",
-      width: firstVideoWidth,
+      width: firstRenderVideoWidth,
       borderRadius: "40px"
     }
-  })), /*#__PURE__*/React.createElement(Sequence, {
+  }))), /*#__PURE__*/React.createElement(Sequence, {
     from: delayInFrames,
     layout: "none"
   }, secondNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {

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

@@ -7,6 +7,7 @@ import PausableImg from "../utils/PausableImg";
 import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { VirtualBackground } from "../backgrounds/VirtualBackground";
 export var SimpleFrame = function SimpleFrame(_ref) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var videoUrl = _ref.videoUrl,
     startVideoFrom = _ref.startVideoFrom,
     muted = _ref.muted,
@@ -18,10 +19,21 @@ export var SimpleFrame = function SimpleFrame(_ref) {
     _ref$disableTransitio = _ref.disableTransitionSounds,
     disableTransitionSounds = _ref$disableTransitio === void 0 ? false : _ref$disableTransitio,
     noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl;
-  var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height;
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    _ref$useSquareInLands = _ref.useSquareInLandscape,
+    useSquareInLandscape = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands;
+  var videoConfig = useVideoConfig();
+  var width = videoConfig.width,
+    height = videoConfig.height,
+    _videoConfig$props = videoConfig.props,
+    compositionProps = _videoConfig$props === void 0 ? {} : _videoConfig$props;
+  var orientation = (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 isLandscapeOutput = orientation === "landscape";
+  var shouldUseSquareInLandscape = Boolean(useSquareInLandscape) && isLandscapeOutput;
+  var squareSize = 1080;
+  var renderWidth = shouldUseSquareInLandscape ? squareSize : width;
+  var renderHeight = shouldUseSquareInLandscape ? squareSize : height;
+  var offsetX = shouldUseSquareInLandscape ? (width - squareSize) / 2 : 0;
 
   // Determine if we should show a virtual background image (orientation-aware)
   var _useVirtualBackground = useVirtualBackground(),
@@ -37,12 +49,20 @@ export var SimpleFrame = function SimpleFrame(_ref) {
     src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
     volume: 0.25
   }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: shouldUseSquareInLandscape ? "black" : "transparent",
+      width: width,
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       backgroundColor: frameColor || "transparent",
       padding: frameColor ? CHROME_PADDING : 0,
       isolation: "isolate",
-      width: width,
-      height: height
+      width: renderWidth,
+      height: renderHeight,
+      left: offsetX,
+      top: 0
     }
   }, faceMetadata ? /*#__PURE__*/React.createElement("div", {
     style: {
@@ -57,8 +77,8 @@ export var SimpleFrame = function SimpleFrame(_ref) {
   }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     src: videoUrl,
     startFrom: startVideoFrom,
-    containerWidth: width,
-    containerHeight: height,
+    containerWidth: renderWidth,
+    containerHeight: renderHeight,
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: false,
@@ -88,16 +108,16 @@ export var SimpleFrame = function SimpleFrame(_ref) {
   })), /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       margin: frameColor ? CHROME_PADDING : 0,
-      width: frameColor ? width - CHROME_PADDING * 2 : width,
-      height: frameColor ? height - CHROME_PADDING * 2 : height,
+      width: frameColor ? renderWidth - CHROME_PADDING * 2 : renderWidth,
+      height: frameColor ? renderHeight - CHROME_PADDING * 2 : renderHeight,
       transform: videoZoom > 1 ? "scale(".concat(videoZoomInterpolated, ")") : undefined
     }
   }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
     url: virtualBgUrl
   }) : null), !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur && noBackgroundVideoUrl ? /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
-      width: width,
-      height: height,
+      width: renderWidth,
+      height: renderHeight,
       backdropFilter: "blur(10px)",
       zIndex: 1
     }
@@ -105,8 +125,8 @@ export var SimpleFrame = function SimpleFrame(_ref) {
     style: {
       padding: frameColor ? CHROME_PADDING : 0,
       isolation: "isolate",
-      width: width,
-      height: height,
+      width: renderWidth,
+      height: renderHeight,
       zIndex: 9
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -115,13 +135,13 @@ export var SimpleFrame = function SimpleFrame(_ref) {
       height: "100%",
       overflow: "hidden",
       borderRadius: "30px",
-      transform: videoZoom > 1 ? "scale(".concat(videoZoomInterpolated, ")") : undefined
+      transform: videoZoom ? "scale(".concat(videoZoomInterpolated, ")") : undefined
     }
   }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     src: noBackgroundVideoUrl,
     startFrom: startVideoFrom,
-    containerWidth: width,
-    containerHeight: height,
+    containerWidth: renderWidth,
+    containerHeight: renderHeight,
     faceMetadata: faceMetadata,
     useAveragePosition: true,
     centerHorizontally: false,
@@ -133,8 +153,8 @@ export var SimpleFrame = function SimpleFrame(_ref) {
       backgroundColor: "transparent",
       padding: frameColor ? CHROME_PADDING : 0,
       isolation: "isolate",
-      width: width,
-      height: height,
+      width: renderWidth,
+      height: renderHeight,
       zIndex: 9
     }
   }, /*#__PURE__*/React.createElement(AbsoluteFill, {
@@ -165,7 +185,7 @@ export var SimpleFrame = function SimpleFrame(_ref) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       left: frameColor ? CHROME_PADDING : 25,
       top: frameColor ? CHROME_PADDING : 25,
       padding: 20,
@@ -179,5 +199,5 @@ export var SimpleFrame = function SimpleFrame(_ref) {
       objectFit: "contain"
     },
     src: logoUrl
-  })) : null));
+  })) : null)));
 };

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,