@zync/zync-screnplay-player 0.1.205 → 0.1.206

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

@@ -149,7 +149,8 @@ var RotatingWordsContainer = /*#__PURE__*/React.memo(function (_ref4) {
     words = _ref4$words === void 0 ? [] : _ref4$words,
     cloudMargins = _ref4.cloudMargins,
     cloudMinDistancePct = _ref4.cloudMinDistancePct,
-    cloudSpreadDurationSeconds = _ref4.cloudSpreadDurationSeconds;
+    cloudSpreadDurationSeconds = _ref4.cloudSpreadDurationSeconds,
+    orientationOverride = _ref4.orientationOverride;
   var frame = useCurrentFrame();
   var _useVideoConfig2 = useVideoConfig(),
     fps = _useVideoConfig2.fps,
@@ -159,7 +160,7 @@ var RotatingWordsContainer = /*#__PURE__*/React.memo(function (_ref4) {
       portrait: {},
       landscape: {},
       square: {}
-    }),
+    }, orientationOverride),
     orientation = _useOrientationBased.orientation;
   var isWide = orientation === "landscape";
 
@@ -448,11 +449,14 @@ var BackdropFrame = function BackdropFrame(_ref5) {
     logoUrl = _ref5.logoUrl,
     logoLeft = _ref5.logoLeft,
     logoTop = _ref5.logoTop,
+    _ref5$logoPosition = _ref5.logoPosition,
+    logoPosition = _ref5$logoPosition === void 0 ? "fixed" : _ref5$logoPosition,
     frameColor = _ref5.frameColor,
     words = _ref5.words,
     cloudMargins = _ref5.cloudMargins,
     cloudMinDistancePct = _ref5.cloudMinDistancePct,
     cloudSpreadDurationSeconds = _ref5.cloudSpreadDurationSeconds,
+    orientationOverride = _ref5.orientationOverride,
     _ref5$containerInset = _ref5.containerInset,
     containerInset = _ref5$containerInset === void 0 ? {
       top: 0.1,
@@ -547,7 +551,8 @@ var BackdropFrame = function BackdropFrame(_ref5) {
     words: words,
     cloudMargins: cloudMargins,
     cloudMinDistancePct: cloudMinDistancePct,
-    cloudSpreadDurationSeconds: cloudSpreadDurationSeconds
+    cloudSpreadDurationSeconds: cloudSpreadDurationSeconds,
+    orientationOverride: orientationOverride
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       position: "absolute",
@@ -595,7 +600,7 @@ var BackdropFrame = function BackdropFrame(_ref5) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition,
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -612,6 +617,7 @@ var BackdropFrame = function BackdropFrame(_ref5) {
   })) : null);
 };
 var KeywordStudioBackdrop = function KeywordStudioBackdrop(_ref6) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var videoUrl = _ref6.videoUrl,
     startVideoFrom = _ref6.startVideoFrom,
     _ref6$words = _ref6.words,
@@ -629,11 +635,22 @@ var KeywordStudioBackdrop = function KeywordStudioBackdrop(_ref6) {
     noBackgroundVideoEffects = _ref6.noBackgroundVideoEffects,
     cloudMargins = _ref6.cloudMargins,
     cloudMinDistancePct = _ref6.cloudMinDistancePct,
-    cloudSpreadDurationSeconds = _ref6.cloudSpreadDurationSeconds;
+    cloudSpreadDurationSeconds = _ref6.cloudSpreadDurationSeconds,
+    _ref6$useSquareInLand = _ref6.useSquareInLandscape,
+    useSquareInLandscape = _ref6$useSquareInLand === void 0 ? false : _ref6$useSquareInLand;
   var _useVideoConfig3 = useVideoConfig(),
-    width = _useVideoConfig3.width,
-    height = _useVideoConfig3.height,
-    fps = _useVideoConfig3.fps;
+    outputWidth = _useVideoConfig3.width,
+    outputHeight = _useVideoConfig3.height,
+    fps = _useVideoConfig3.fps,
+    _useVideoConfig3$prop = _useVideoConfig3.props,
+    compositionProps = _useVideoConfig3$prop === void 0 ? {} : _useVideoConfig3$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 frame = useCurrentFrame();
   var _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
@@ -652,7 +669,7 @@ var KeywordStudioBackdrop = function KeywordStudioBackdrop(_ref6) {
         logoTop: CHROME_PADDING * 2,
         logoLeft: CHROME_PADDING * 2
       }
-    }),
+    }, orientationOverride),
     logoTop = _useOrientationBased2.logoTop,
     logoLeft = _useOrientationBased2.logoLeft;
 
@@ -686,7 +703,7 @@ var KeywordStudioBackdrop = function KeywordStudioBackdrop(_ref6) {
   } else {
     backdropProgress = 1;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+  var content = /*#__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(BackdropFrame, {
@@ -701,14 +718,34 @@ var KeywordStudioBackdrop = function KeywordStudioBackdrop(_ref6) {
     logoUrl: logoUrl,
     logoLeft: logoLeft,
     logoTop: logoTop,
+    logoPosition: shouldUseSquareInLandscape ? "absolute" : "fixed",
     frameColor: frameColor,
     words: words,
     cloudMargins: cloudMargins,
     cloudMinDistancePct: cloudMinDistancePct,
     cloudSpreadDurationSeconds: cloudSpreadDurationSeconds,
+    orientationOverride: orientationOverride,
     backdropProgress: backdropProgress,
     showVirtual: showVirtual,
     virtualBgUrl: virtualBgUrl
   }, children));
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: outputWidth,
+      height: outputHeight,
+      backgroundColor: "black"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      left: renderOffsetX,
+      top: 0,
+      overflow: "hidden"
+    }
+  }, content));
 };
 export { KeywordStudioBackdrop };

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

@@ -28,10 +28,12 @@ var Logo = function Logo(_ref) {
   var logoUrl = _ref.logoUrl,
     top = _ref.top,
     left = _ref.left,
-    right = _ref.right;
+    right = _ref.right,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "fixed" : _ref$position;
   return logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: position,
       zIndex: 1,
       top: top,
       left: left,
@@ -80,6 +82,7 @@ export var PanningImage = function PanningImage(_ref2) {
   }));
 };
 var MotionStillComponent = function MotionStillComponent(_ref3) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var startVideoFrom = _ref3.startVideoFrom,
     videoUrl = _ref3.videoUrl,
     logoUrl = _ref3.logoUrl,
@@ -94,11 +97,22 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     faceMetadata = _ref3.faceMetadata,
     muted = _ref3.muted,
     noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl;
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    _ref3$useSquareInLand = _ref3.useSquareInLandscape,
+    useSquareInLandscape = _ref3$useSquareInLand === void 0 ? false : _ref3$useSquareInLand;
   var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height,
-    fps = _useVideoConfig.fps;
+    outputWidth = _useVideoConfig.width,
+    outputHeight = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$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 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 frame = useCurrentFrame();
   var _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
@@ -144,7 +158,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
         logoRight: stylesByVariant[variant].logoRight,
         flowDirection: "row-reverse"
       }
-    }),
+    }, orientationOverride),
     imageContainerOutputRange = _useOrientationBased.imageContainerOutputRange,
     targetVideoWidth = _useOrientationBased.targetVideoWidth,
     targetVideoHeight = _useOrientationBased.targetVideoHeight,
@@ -180,7 +194,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
   var imageContainerTranslate = imageContainerOutputRange[0] + (imageContainerOutputRange[1] - imageContainerOutputRange[0]) * easedProgress;
   var videoWidth = width + (targetVideoWidth - width) * easedProgress;
   var videoHeight = height + (targetVideoHeight - height) * easedProgress;
-  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+  var content = /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       width: width,
       height: height,
@@ -220,7 +234,8 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     logoUrl: logoUrl,
     top: logoTop,
     left: logoLeft,
-    right: logoRight
+    right: logoRight,
+    position: shouldUseSquareInLandscape ? "absolute" : "fixed"
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -359,6 +374,24 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
       zIndex: 20
     }
   }, children));
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: outputWidth,
+      height: outputHeight,
+      backgroundColor: "black"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      left: renderOffsetX,
+      top: 0,
+      overflow: "hidden"
+    }
+  }, content));
 };
 export var MotionStill = function MotionStill(props) {
   var _useTheme = useTheme(),

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

@@ -17,6 +17,8 @@ var Square = function Square(_ref) {
     logoUrl = _ref.logoUrl,
     logoLeft = _ref.logoLeft,
     logoTop = _ref.logoTop,
+    _ref$logoPosition = _ref.logoPosition,
+    logoPosition = _ref$logoPosition === void 0 ? "fixed" : _ref$logoPosition,
     frameColor = _ref.frameColor,
     startVideoFrom = _ref.startVideoFrom,
     noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
@@ -151,7 +153,7 @@ var Square = function Square(_ref) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition,
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -176,6 +178,8 @@ var Portrait = function Portrait(_ref2) {
     logoUrl = _ref2.logoUrl,
     logoLeft = _ref2.logoLeft,
     logoTop = _ref2.logoTop,
+    _ref2$logoPosition = _ref2.logoPosition,
+    logoPosition = _ref2$logoPosition === void 0 ? "fixed" : _ref2$logoPosition,
     frameColor = _ref2.frameColor,
     startVideoFrom = _ref2.startVideoFrom,
     noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
@@ -309,7 +313,7 @@ var Portrait = function Portrait(_ref2) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition,
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -334,6 +338,8 @@ var Landscape = function Landscape(_ref3) {
     logoUrl = _ref3.logoUrl,
     logoLeft = _ref3.logoLeft,
     logoTop = _ref3.logoTop,
+    _ref3$logoPosition = _ref3.logoPosition,
+    logoPosition = _ref3$logoPosition === void 0 ? "fixed" : _ref3$logoPosition,
     frameColor = _ref3.frameColor,
     startVideoFrom = _ref3.startVideoFrom,
     noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
@@ -468,7 +474,7 @@ var Landscape = function Landscape(_ref3) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition,
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -485,6 +491,7 @@ var Landscape = function Landscape(_ref3) {
   })) : null);
 };
 var MotionStillStudioBackdrop = function MotionStillStudioBackdrop(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var videoUrl = _ref4.videoUrl,
     startVideoFrom = _ref4.startVideoFrom,
     imageUrl = _ref4.imageUrl,
@@ -498,11 +505,22 @@ var MotionStillStudioBackdrop = function MotionStillStudioBackdrop(_ref4) {
     durationInFrames = _ref4.durationInFrames,
     faceMetadata = _ref4.faceMetadata,
     muted = _ref4.muted,
-    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects;
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscape,
+    useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand;
   var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height,
-    fps = _useVideoConfig.fps;
+    outputWidth = _useVideoConfig.width,
+    outputHeight = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$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 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 frame = useCurrentFrame();
   var _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
@@ -524,7 +542,7 @@ var MotionStillStudioBackdrop = function MotionStillStudioBackdrop(_ref4) {
         logoLeft: CHROME_PADDING * 2,
         BrollStudioBackdropComponent: Square
       }
-    }),
+    }, orientationOverride),
     BrollStudioBackdropComponent = _useOrientationBased.BrollStudioBackdropComponent,
     logoTop = _useOrientationBased.logoTop,
     logoLeft = _useOrientationBased.logoLeft;
@@ -562,7 +580,7 @@ var MotionStillStudioBackdrop = function MotionStillStudioBackdrop(_ref4) {
     // Middle section - fully visible
     brollSpringProgress = 1;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+  var content = /*#__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(BrollStudioBackdropComponent, {
@@ -577,6 +595,7 @@ var MotionStillStudioBackdrop = function MotionStillStudioBackdrop(_ref4) {
     sourceVideoOrientation: sourceVideoOrientation,
     logoLeft: logoLeft,
     logoTop: logoTop,
+    logoPosition: shouldUseSquareInLandscape ? "absolute" : "fixed",
     videoUrl: videoUrl,
     faceMetadata: faceMetadata,
     muted: muted,
@@ -584,5 +603,23 @@ var MotionStillStudioBackdrop = function MotionStillStudioBackdrop(_ref4) {
     showVirtual: showVirtual,
     virtualBgUrl: virtualBgUrl
   }, children));
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: outputWidth,
+      height: outputHeight,
+      backgroundColor: "black"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      left: renderOffsetX,
+      top: 0,
+      overflow: "hidden"
+    }
+  }, content));
 };
 export { MotionStillStudioBackdrop };

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

@@ -45,23 +45,14 @@ export var SimpleFrame = function SimpleFrame(_ref) {
     extrapolateLeft: "clamp",
     easing: Easing["in"](Easing.quad)
   });
-  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: shouldUseSquareInLandscape ? "black" : "transparent",
-      width: width,
-      height: height
-    }
-  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+  var content = /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       backgroundColor: frameColor || "transparent",
       padding: frameColor ? CHROME_PADDING : 0,
       isolation: "isolate",
       width: renderWidth,
       height: renderHeight,
-      left: offsetX,
+      left: 0,
       top: 0
     }
   }, faceMetadata ? /*#__PURE__*/React.createElement("div", {
@@ -199,5 +190,23 @@ export var SimpleFrame = function SimpleFrame(_ref) {
       objectFit: "contain"
     },
     src: logoUrl
-  })) : null)));
+  })) : null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), shouldUseSquareInLandscape ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "black",
+      width: width,
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: renderWidth,
+      height: renderHeight,
+      left: offsetX,
+      top: 0,
+      overflow: "hidden"
+    }
+  }, content)) : content);
 };

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

@@ -31,10 +31,12 @@ var Logo = function Logo(_ref) {
   var logoUrl = _ref.logoUrl,
     top = _ref.top,
     left = _ref.left,
-    right = _ref.right;
+    right = _ref.right,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "fixed" : _ref$position;
   return logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: position,
       zIndex: 1,
       top: top,
       left: left,
@@ -97,6 +99,7 @@ var RevealingLine = function RevealingLine(_ref2) {
   }));
 };
 var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var startVideoFrom = _ref3.startVideoFrom,
     videoUrl = _ref3.videoUrl,
     logoUrl = _ref3.logoUrl,
@@ -110,10 +113,21 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
     faceMetadata = _ref3.faceMetadata,
     muted = _ref3.muted,
     noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl;
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    _ref3$useSquareInLand = _ref3.useSquareInLandscape,
+    useSquareInLandscape = _ref3$useSquareInLand === void 0 ? false : _ref3$useSquareInLand;
   var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height;
+    outputWidth = _useVideoConfig.width,
+    outputHeight = _useVideoConfig.height,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$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 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 _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
     virtualBgUrl = _useVirtualBackground.url;
@@ -161,7 +175,7 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
         maxFontSize: 50,
         flowDirection: stylesByVariant[variant].flowDirection
       }
-    }),
+    }, orientationOverride),
     targetTextWidth = _useOrientationBased.targetTextWidth,
     targetTextHeight = _useOrientationBased.targetTextHeight,
     targetVideoWidth = _useOrientationBased.targetVideoWidth,
@@ -191,7 +205,7 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
   var _distributeTextToFit = distributeTextToFit(text, targetTextWidth - 100, targetTextHeight - 100, maxFontSize),
     lines = _distributeTextToFit.lines,
     fontSize = _distributeTextToFit.fontSize;
-  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+  var content = /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       isolation: "isolate",
       width: width,
@@ -203,7 +217,8 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
     logoUrl: logoUrl,
     top: logoTop,
     left: logoLeft,
-    right: logoRight
+    right: logoRight,
+    position: shouldUseSquareInLandscape ? "absolute" : "fixed"
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -352,6 +367,24 @@ var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
       zIndex: 10
     }
   }, children));
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: outputWidth,
+      height: outputHeight,
+      backgroundColor: "black"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      left: renderOffsetX,
+      top: 0,
+      overflow: "hidden"
+    }
+  }, content));
 };
 export var TextWithVideo = function TextWithVideo(props) {
   var _useTheme = useTheme(),

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;