@zync/zync-screnplay-player 0.1.205 → 0.1.207

package/dist/screenplay/RemotionRenderer/RemotionRenderer.js

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

@@ -12,6 +12,7 @@ import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 var _loadFont = loadFont(),
   fontFamily = _loadFont.fontFamily;
 export var DynamicTriangle = function DynamicTriangle(_ref) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var children = _ref.children,
     videoUrl = _ref.videoUrl,
     startVideoFrom = _ref.startVideoFrom,
@@ -31,11 +32,22 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
     sentenceText = _ref.sentenceText,
     noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
     noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
-    faceMetadata = _ref.faceMetadata;
+    faceMetadata = _ref.faceMetadata,
+    _ref$useSquareInLands = _ref.useSquareInLandscape,
+    useSquareInLandscape = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands;
   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,
@@ -180,7 +192,7 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
       textContainerWidth: width - 200,
       textContainerHeight: height * 0.4
     }
-  });
+  }, orientationOverride);
 
   // Extract values from orientation config
   var triangleSize = orientationConfig.triangleSize,
@@ -375,7 +387,7 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
   var _distributeTextToFit = distributeTextToFit(sentenceText, textContainerWidth, textContainerHeight, 120),
     lines = _distributeTextToFit.lines,
     fontSize = _distributeTextToFit.fontSize;
-  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(AbsoluteFill, {
@@ -615,4 +627,22 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
       zIndex: 14
     }
   }, 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));
 };

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

@@ -25,7 +25,9 @@ export var Handoff = function Handoff(_ref) {
     noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
     handoffOverlapSeconds = _ref.handoffOverlapSeconds,
     _ref$useSquareInLands = _ref.useSquareInLandscapeFirstVideo,
-    useSquareInLandscapeFirstVideo = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands;
+    useSquareInLandscapeFirstVideo = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands,
+    _ref$useSquareInLands2 = _ref.useSquareInLandscapeSecondVideo,
+    useSquareInLandscapeSecondVideo = _ref$useSquareInLands2 === void 0 ? false : _ref$useSquareInLands2;
   var videoConfig = useVideoConfig();
   var width = videoConfig.width,
     height = videoConfig.height,
@@ -34,6 +36,7 @@ export var Handoff = function Handoff(_ref) {
     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 shouldUseSquareInLandscapeSecondVideo = Boolean(useSquareInLandscapeSecondVideo) && outputOrientation === "landscape";
   var squareSize = 1080;
   var frame = useCurrentFrame();
   var _useTheme = useTheme(),
@@ -80,11 +83,17 @@ export var Handoff = function Handoff(_ref) {
   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);
+  var secondRenderVideoWidth = shouldUseSquareInLandscapeSecondVideo ? Math.min(secondVideoWidth, squareSize) : secondVideoWidth;
+  var secondRenderVideoHeight = shouldUseSquareInLandscapeSecondVideo ? Math.min(secondVideoHeight, squareSize) : secondVideoHeight;
+  var secondVideoCenteredOffsetX = shouldUseSquareInLandscapeSecondVideo ? Math.max(0, (width - TOTAL_X_PADDING - secondRenderVideoWidth) / 2) : 0;
+  var secondVideoTranslateX = useTimeInterpolate(inputRangeInSeconds, [secondVideoCenteredOffsetX, 0, 0, secondVideoCenteredOffsetX], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var shouldUseBlackBackgroundInLandscape = shouldUseSquareInLandscapeFirstVideo || shouldUseSquareInLandscapeSecondVideo;
+  var handoffBackgroundColor = shouldUseBlackBackgroundInLandscape ? "#000000" : primaryColor;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       width: width,
       height: height,
-      backgroundColor: primaryColor
+      backgroundColor: handoffBackgroundColor
     }
   }, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -126,24 +135,28 @@ export var Handoff = function Handoff(_ref) {
   }))), /*#__PURE__*/React.createElement(Sequence, {
     from: delayInFrames,
     layout: "none"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translateX(".concat(secondVideoTranslateX, "px)")
+    }
   }, secondNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     faceMetadata: secondNoBackgroundFaceMetadata,
     aspectRatio: orientation,
-    containerWidth: secondVideoWidth,
-    containerHeight: secondVideoHeight,
+    containerWidth: secondRenderVideoWidth,
+    containerHeight: secondRenderVideoHeight,
     useAveragePosition: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     style: {
-      height: secondVideoHeight,
+      height: secondRenderVideoHeight,
       objectFit: "cover",
-      width: secondVideoWidth,
+      width: secondRenderVideoWidth,
       borderRadius: "40px"
     }
-  }))), /*#__PURE__*/React.createElement(BlurOverlay, {
+  })))), /*#__PURE__*/React.createElement(BlurOverlay, {
     show: (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && (firstNoBackgroundVideoUrl || secondNoBackgroundVideoUrl),
     width: width,
     height: height,

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

@@ -30,6 +30,8 @@ var Landscape = function Landscape(_ref) {
     logoLeft = _ref.logoLeft,
     logoTop = _ref.logoTop,
     logoRight = _ref.logoRight,
+    _ref$logoPosition = _ref.logoPosition,
+    logoPosition = _ref$logoPosition === void 0 ? "fixed" : _ref$logoPosition,
     videoWidth = _ref.videoWidth,
     videoHeight = _ref.videoHeight,
     videoTop = _ref.videoTop,
@@ -409,7 +411,7 @@ var Landscape = function Landscape(_ref) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({
-      position: "fixed",
+      position: logoPosition,
       top: logoTop,
       padding: 20,
       zIndex: 10
@@ -436,6 +438,8 @@ var Portrait = function Portrait(_ref2) {
     logoLeft = _ref2.logoLeft,
     logoTop = _ref2.logoTop,
     logoRight = _ref2.logoRight,
+    _ref2$logoPosition = _ref2.logoPosition,
+    logoPosition = _ref2$logoPosition === void 0 ? "fixed" : _ref2$logoPosition,
     videoWidth = _ref2.videoWidth,
     videoHeight = _ref2.videoHeight,
     videoTop = _ref2.videoTop,
@@ -816,7 +820,7 @@ var Portrait = function Portrait(_ref2) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({
-      position: "fixed",
+      position: logoPosition,
       top: logoTop,
       padding: 20,
       zIndex: 10
@@ -846,6 +850,8 @@ var Square = function Square(_ref3) {
     logoUrl = _ref3.logoUrl,
     logoLeft = _ref3.logoLeft,
     logoTop = _ref3.logoTop,
+    _ref3$logoPosition = _ref3.logoPosition,
+    logoPosition = _ref3$logoPosition === void 0 ? "fixed" : _ref3$logoPosition,
     logoRight = _ref3.logoRight,
     virtualBgUrl = _ref3.virtualBgUrl,
     showVirtual = _ref3.showVirtual;
@@ -1214,7 +1220,7 @@ var Square = function Square(_ref3) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({
-      position: "fixed",
+      position: logoPosition,
       top: logoTop,
       padding: 20,
       zIndex: 20
@@ -1230,6 +1236,7 @@ var Square = function Square(_ref3) {
   })) : null);
 };
 var IntroVideo = function IntroVideo(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var videoUrl = _ref4.videoUrl,
     startVideoFrom = _ref4.startVideoFrom,
     _ref4$sentenceText = _ref4.sentenceText,
@@ -1245,10 +1252,21 @@ var IntroVideo = function IntroVideo(_ref4) {
     muted = _ref4.muted,
     faceMetadata = _ref4.faceMetadata,
     noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl;
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscape,
+    useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand;
   var _useVideoConfig5 = useVideoConfig(),
-    width = _useVideoConfig5.width,
-    height = _useVideoConfig5.height;
+    outputWidth = _useVideoConfig5.width,
+    outputHeight = _useVideoConfig5.height,
+    _useVideoConfig5$prop = _useVideoConfig5.props,
+    compositionProps = _useVideoConfig5$prop === void 0 ? {} : _useVideoConfig5$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 _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
     virtualBgUrl = _useVirtualBackground.url;
@@ -1289,7 +1307,7 @@ var IntroVideo = function IntroVideo(_ref4) {
         logoRight: CHROME_PADDING,
         IntroVideoComponent: Square
       }
-    }),
+    }, orientationOverride),
     IntroVideoComponent = _useOrientationBased.IntroVideoComponent,
     videoWidth = _useOrientationBased.videoWidth,
     videoHeight = _useOrientationBased.videoHeight,
@@ -1301,7 +1319,7 @@ var IntroVideo = function IntroVideo(_ref4) {
     logoLeft = _useOrientationBased.logoLeft,
     logoRight = _useOrientationBased.logoRight,
     orientation = _useOrientationBased.orientation;
-  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(IntroVideoComponent, {
@@ -1314,6 +1332,7 @@ var IntroVideo = function IntroVideo(_ref4) {
     logoLeft: logoLeft,
     logoTop: logoTop,
     logoRight: logoRight,
+    logoPosition: shouldUseSquareInLandscape ? "absolute" : "fixed",
     videoWidth: videoWidth,
     videoHeight: videoHeight,
     videoTop: videoTop,
@@ -1329,5 +1348,23 @@ var IntroVideo = function IntroVideo(_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 { IntroVideo };

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

@@ -27,10 +27,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: 11,
       top: top,
       left: left,
@@ -166,6 +168,7 @@ var RotatingWordsContainer = /*#__PURE__*/React.memo(function (_ref3) {
   })));
 });
 var KeywordComponent = function KeywordComponent(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var startVideoFrom = _ref4.startVideoFrom,
     videoUrl = _ref4.videoUrl,
     logoUrl = _ref4.logoUrl,
@@ -181,11 +184,22 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     faceMetadata = _ref4.faceMetadata,
     muted = _ref4.muted,
     noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl;
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    _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,
@@ -234,7 +248,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
         logoRight: stylesByVariant[variant].logoRight,
         flowDirection: "row-reverse"
       }
-    }),
+    }, orientationOverride),
     imageContainerOutputRange = _useOrientationBased.imageContainerOutputRange,
     containerWidth = _useOrientationBased.containerWidth,
     targetVideoWidth = _useOrientationBased.targetVideoWidth,
@@ -271,7 +285,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
   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, {
+  var content = /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       isolation: "isolate",
       width: width,
@@ -310,7 +324,8 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     logoUrl: logoUrl,
     top: logoTop,
     left: logoLeft,
-    right: logoRight
+    right: logoRight,
+    position: shouldUseSquareInLandscape ? "absolute" : "fixed"
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -507,6 +522,24 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       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 Keyword = function Keyword(props) {
   var _useTheme = useTheme(),