@zync/zync-screnplay-player 0.1.205 → 0.1.207

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,

package/dist/screenplay/RemotionRenderer/components/utils/README.md

@@ -1,80 +1,80 @@
-# StretchText Component
-
-A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
-
-## Usage
-
-```jsx
-import StretchText from './StretchText';
-
-// Basic usage
-<StretchText text="Hello World" />
-
-// With custom styling
-<StretchText 
-  text="Contribution" 
-  color="#1a73e8" 
-  fontFamily="Arial" 
-  maxFontSize={200}
-  minFontSize={10}
-  style={{ fontWeight: 'bold' }}
-/>
-
-// With text stroke
-<StretchText 
-  text="Outlined Text" 
-  color="transparent"
-  textStrokeColor="white"
-  textStrokeWidth="2px"
-  style={{ fontWeight: 'bold' }}
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | string | required | The text to display |
-| `color` | string | '#000000' | Text color |
-| `fontFamily` | string | 'Arial' | Font family |
-| `maxFontSize` | number | 100 | Maximum font size in pixels |
-| `minFontSize` | number | 10 | Minimum font size in pixels |
-| `textStrokeColor` | string | undefined | Color of the text stroke |
-| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
-| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
-| `style` | object | {} | Additional style properties |
-
-## Examples
-
-The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
-
-- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
-- The text will always be contained within the parent container and will not overflow.
-- The component recalculates the font size when the window is resized.
-
-## Demo
-
-You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
-
-The demo shows several words of different lengths rendered in containers of the same width:
-
-- "Contribution" (longer word, smaller font)
-- "Work" (shorter word, larger font)
-- "Hello" (medium length word, medium font)
-- "Supercalifragilisticexpialidocious" (very long word, very small font)
-
-Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
-
-## Implementation Details
-
-The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
-
-The component uses SVG for rendering text, which provides several advantages:
-- Proper text-stroke rendering in headless mode
-- Better control over text positioning and alignment
-- Consistent rendering across different browsers and environments
-- Support for advanced SVG features like filters for text shadows
-
-For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
-
-The component also includes a resize listener to recalculate the font size when the window size changes.
+# StretchText Component
+
+A React component that renders text that stretches to fit the parent's width. Words with fewer characters will have a larger font size than words with more characters. The component uses SVG for rendering text, which ensures proper text-stroke rendering in headless mode.
+
+## Usage
+
+```jsx
+import StretchText from './StretchText';
+
+// Basic usage
+<StretchText text="Hello World" />
+
+// With custom styling
+<StretchText 
+  text="Contribution" 
+  color="#1a73e8" 
+  fontFamily="Arial" 
+  maxFontSize={200}
+  minFontSize={10}
+  style={{ fontWeight: 'bold' }}
+/>
+
+// With text stroke
+<StretchText 
+  text="Outlined Text" 
+  color="transparent"
+  textStrokeColor="white"
+  textStrokeWidth="2px"
+  style={{ fontWeight: 'bold' }}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | string | required | The text to display |
+| `color` | string | '#000000' | Text color |
+| `fontFamily` | string | 'Arial' | Font family |
+| `maxFontSize` | number | 100 | Maximum font size in pixels |
+| `minFontSize` | number | 10 | Minimum font size in pixels |
+| `textStrokeColor` | string | undefined | Color of the text stroke |
+| `textStrokeWidth` | string | undefined | Width of the text stroke (e.g., '2px') |
+| `textFillColor` | string | undefined | Color of the text fill (overrides `color` if provided) |
+| `style` | object | {} | Additional style properties |
+
+## Examples
+
+The component automatically calculates the appropriate font size to make the text stretch to fit the parent width. For example:
+
+- "Work" (4 characters) will have a larger font size than "Contribution" (12 characters) when both are rendered in containers of the same width.
+- The text will always be contained within the parent container and will not overflow.
+- The component recalculates the font size when the window is resized.
+
+## Demo
+
+You can see a demo of the StretchText component by running the development environment and looking at the first segment in the video timeline.
+
+The demo shows several words of different lengths rendered in containers of the same width:
+
+- "Contribution" (longer word, smaller font)
+- "Work" (shorter word, larger font)
+- "Hello" (medium length word, medium font)
+- "Supercalifragilisticexpialidocious" (very long word, very small font)
+
+Each word stretches to fill the entire width of its container, demonstrating how the component automatically adjusts the font size based on the text length.
+
+## Implementation Details
+
+The component uses a binary search algorithm to find the optimal font size that makes the text fit the parent width. It uses a simple approximation for text width calculation (character count * fontSize * 0.75) which works well for most fonts.
+
+The component uses SVG for rendering text, which provides several advantages:
+- Proper text-stroke rendering in headless mode
+- Better control over text positioning and alignment
+- Consistent rendering across different browsers and environments
+- Support for advanced SVG features like filters for text shadows
+
+For text with stroke effects, the component uses SVG's native stroke and fill attributes, which are more reliable than CSS text-stroke properties, especially in headless rendering environments.
+
+The component also includes a resize listener to recalculate the font size when the window size changes.

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

@@ -2,9 +2,9 @@ import React from "react";
 import { AbsoluteFill } from "remotion";
 import StretchText from "./StretchText";
 
-/**
- * Demo component to showcase the StretchText component
- * Shows how different words stretch to the same width with different font sizes
+/**
+ * Demo component to showcase the StretchText component
+ * Shows how different words stretch to the same width with different font sizes
  */
 var StretchTextDemo = function StretchTextDemo() {
   var containerStyle = {

package/dist/screenplay/RemotionRenderer/helpers/convertToSeconds.js

@@ -1,11 +1,11 @@
-/**
- * Converts seconds and a portion of frames to a numeric value of seconds.
- *
- * @param {number} seconds - The number of full seconds.
- * @param {number} nthFrame - The current frame within the second.
- * @param {number} delayInSeconds - Optional delay that adds up to the calculation
- * @param {number} frameRate - The frame rate (frames per second).
- * @return {number} The total time in seconds (with decimals for frames).
+/**
+ * Converts seconds and a portion of frames to a numeric value of seconds.
+ *
+ * @param {number} seconds - The number of full seconds.
+ * @param {number} nthFrame - The current frame within the second.
+ * @param {number} delayInSeconds - Optional delay that adds up to the calculation
+ * @param {number} frameRate - The frame rate (frames per second).
+ * @return {number} The total time in seconds (with decimals for frames).
  */
 export var convertToSeconds = function convertToSeconds(seconds, nthFrame) {
   var delayInSeconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;

package/dist/screenplay/RemotionRenderer/helpers/faceBasedVideoStyles.js

@@ -4,10 +4,10 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-/**
- * Calculate video styles based on face detection metadata
- * This helper adjusts video positioning and transform origin to center faces in the viewport
- * when zooming, accounting for objectFit: "cover" behavior
+/**
+ * Calculate video styles based on face detection metadata
+ * This helper adjusts video positioning and transform origin to center faces in the viewport
+ * when zooming, accounting for objectFit: "cover" behavior
  */
 export var getFaceBasedVideoStyles = function getFaceBasedVideoStyles(_ref) {
   var faceMetadata = _ref.faceMetadata,

package/dist/screenplay/RemotionRenderer/helpers/faceCenteredVideoTransforms.js

@@ -4,33 +4,33 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 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); }
-/**
- * Face-Centered Video Transform Calculator
- *
- * This helper calculates transform origin and positioning to ensure a video is ALWAYS
- * centered on a person's face, regardless of aspect ratio (landscape, square, portrait).
- *
- * Key features:
- * - Converts absolute face coordinates to relative values
- * - Handles different target aspect ratios (1920x1080, 1080x1080, 1080x1920)
- * - Provides smooth interpolation between frames
- * - Calculates optimal scale and positioning for face centering
+/**
+ * Face-Centered Video Transform Calculator
+ *
+ * This helper calculates transform origin and positioning to ensure a video is ALWAYS
+ * centered on a person's face, regardless of aspect ratio (landscape, square, portrait).
+ *
+ * Key features:
+ * - Converts absolute face coordinates to relative values
+ * - Handles different target aspect ratios (1920x1080, 1080x1080, 1080x1920)
+ * - Provides smooth interpolation between frames
+ * - Calculates optimal scale and positioning for face centering
  */
 
 import { useCurrentFrame } from "remotion";
 
-/**
- * Calculate face-centered video transforms
- * @param {Object} params - Configuration object
- * @param {Object} params.faceMetadata - Face detection metadata
- * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
- * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
- * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
- * @param {number} params.faceScale - Scale factor for face area (1.0 = face fills frame, 0.5 = face takes half frame)
- * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
- * @returns {Object} Transform styles and debug info
+/**
+ * Calculate face-centered video transforms
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
+ * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
+ * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {number} params.faceScale - Scale factor for face area (1.0 = face fills frame, 0.5 = face takes half frame)
+ * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @returns {Object} Transform styles and debug info
  */
 export var calculateFaceCenteredTransforms = function calculateFaceCenteredTransforms(_ref) {
   var _faceMetadata$metadat, _faceMetadata$metadat2;
@@ -173,10 +173,10 @@ export var calculateFaceCenteredTransforms = function calculateFaceCenteredTrans
   };
 };
 
-/**
- * Calculate average face position from all frames with face data
- * @param {Array} frames - Array of frame data
- * @returns {Object|null} Average face data or null if no face data available
+/**
+ * Calculate average face position from all frames with face data
+ * @param {Array} frames - Array of frame data
+ * @returns {Object|null} Average face data or null if no face data available
  */
 function getAverageFaceData(frames) {
   if (!frames || frames.length === 0) return null;
@@ -225,8 +225,8 @@ function getAverageFaceData(frames) {
   return averageFaceData;
 }
 
-/**
- * Get face data for a specific frame with optional interpolation
+/**
+ * Get face data for a specific frame with optional interpolation
  */
 function getFaceDataForFrame(frames, targetFrame, enableInterpolation) {
   if (!frames || frames.length === 0) return null;
@@ -285,8 +285,8 @@ function getFaceDataForFrame(frames, targetFrame, enableInterpolation) {
   };
 }
 
-/**
- * Preset configurations for common aspect ratios
+/**
+ * Preset configurations for common aspect ratios
  */
 export var ASPECT_RATIO_PRESETS = {
   LANDSCAPE: {
@@ -303,17 +303,17 @@ export var ASPECT_RATIO_PRESETS = {
   }
 };
 
-/**
- * Calculate face-centered object-position values
- * @param {Object} params - Configuration object
- * @param {Object} params.faceMetadata - Face detection metadata
- * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
- * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
- * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
- * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
- * @returns {Object} Object-position styles and debug info
+/**
+ * Calculate face-centered object-position values
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
+ * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
+ * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @returns {Object} Object-position styles and debug info
  */
 export var calculateFaceCenteredObjectPosition = function calculateFaceCenteredObjectPosition(_ref2) {
   var _faceMetadata$metadat4, _faceMetadata$metadat5;
@@ -435,8 +435,8 @@ export var calculateFaceCenteredObjectPosition = function calculateFaceCenteredO
   };
 };
 
-/**
- * Helper function to get transforms for specific aspect ratios
+/**
+ * Helper function to get transforms for specific aspect ratios
  */
 export var getFaceCenteredTransformsForAspectRatio = function getFaceCenteredTransformsForAspectRatio(aspectRatio, faceMetadata) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -451,8 +451,8 @@ export var getFaceCenteredTransformsForAspectRatio = function getFaceCenteredTra
   }, options));
 };
 
-/**
- * Helper function to get object-position for specific aspect ratios
+/**
+ * Helper function to get object-position for specific aspect ratios
  */
 export var getFaceCenteredObjectPositionForAspectRatio = function getFaceCenteredObjectPositionForAspectRatio(aspectRatio, faceMetadata) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package/dist/screenplay/RemotionRenderer/hooks/useOrientationBased.js

@@ -1,13 +1,14 @@
 import { useVideoConfig } from "remotion";
-export var useOrientationBased = function useOrientationBased(perOrientationStyles) {
+export var useOrientationBased = function useOrientationBased(perOrientationStyles, orientationOverride) {
   var _useVideoConfig = useVideoConfig(),
     _useVideoConfig$props = _useVideoConfig.props.output,
     _useVideoConfig$props2 = _useVideoConfig$props === void 0 ? {
       orientation: window.screenplayProps.output.orientation
     } : _useVideoConfig$props,
     orientation = _useVideoConfig$props2.orientation;
+  var resolvedOrientation = orientationOverride || orientation;
   var result;
-  switch (orientation) {
+  switch (resolvedOrientation) {
     case "portrait":
       {
         result = perOrientationStyles.portrait;
@@ -24,6 +25,9 @@ export var useOrientationBased = function useOrientationBased(perOrientationStyl
         break;
       }
   }
-  result.orientation = orientation;
+  if (!result) {
+    result = perOrientationStyles.landscape || perOrientationStyles.portrait || perOrientationStyles.square || {};
+  }
+  result.orientation = resolvedOrientation;
   return result;
 };

package/dist/screenplay/RemotionRenderer/main/lib/layouts/DefaultLayout.js

@@ -32,7 +32,7 @@ export var Layout = /*#__PURE__*/function (_Sequence) {
   return _createClass(Layout, [{
     key: "getLayoutProps",
     value: function getLayoutProps(props) {
-      var _props$data, _props$data2, _props$data$sourceVid, _props$data3, _props$data$noBackgro, _props$data$noBackgro2;
+      var _props$data, _props$data2, _props$data$sourceVid, _props$data3, _props$data4, _props$data$noBackgro, _props$data$noBackgro2;
       var sourceVideoOrientation = getVideoOrientation(props.data.sourceVideo.aspectRatio);
       var trimLeft = ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.trimLeft) || 0;
       var trimRight = ((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.trimRight) || 0;
@@ -60,6 +60,7 @@ export var Layout = /*#__PURE__*/function (_Sequence) {
         sourceVideoOrientation: sourceVideoOrientation,
         startVideoFrom: toFrames(this.fps * (((_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.start) + trimLeft), true) || 0,
         disableTransitionSounds: (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : _props$data3.disableTransitionSounds,
+        useSquareInLandscape: ((_props$data4 = props.data) === null || _props$data4 === void 0 ? void 0 : _props$data4.useSquareInLandscape) || false,
         trimLeft: trimLeft,
         trimRight: trimRight,
         words: props.data.words,

package/dist/screenplay/RemotionRenderer/main/lib/layouts/DynamicTriangleLayout.js

@@ -24,7 +24,7 @@ export var DynamicTriangleLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(DynamicTriangleLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data7, _props$data8, _props$data9, _props$data10, _props$data11, _props$data12, _props$data13;
+      var _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data7, _props$data8, _props$data9, _props$data10, _props$data11, _props$data12, _props$data13, _props$data14;
       this.props = {
         videoUrl: (_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.videoUrl,
         videoZoom: ((_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.zoom) || 1,
@@ -47,7 +47,8 @@ export var DynamicTriangleLayout = /*#__PURE__*/function (_Layout) {
         maskAnimationDuration: ((_props$data11 = props.data) === null || _props$data11 === void 0 ? void 0 : _props$data11.maskAnimationDuration) || 2,
         // Duration in seconds for mask animation
         sentenceText: (_props$data12 = props.data) === null || _props$data12 === void 0 ? void 0 : _props$data12.sentenceText,
-        text: (_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.text
+        text: (_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.text,
+        useSquareInLandscape: ((_props$data14 = props.data) === null || _props$data14 === void 0 ? void 0 : _props$data14.useSquareInLandscape) || false
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/lib/layouts/HandoffLayout.js

@@ -27,7 +27,7 @@ export var HandoffLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(HandoffLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data6$firstNoB, _props$data7, _props$data7$firstNoB, _props$data8, _props$data9, _props$data10, _props$data11, _props$data11$secondN, _props$data12, _props$data12$secondN, _props$data$sourceVid2, _props$data$sourceVid3, _props$data13, _props$data14;
+      var _props$data$sourceVid, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data6$firstNoB, _props$data7, _props$data7$firstNoB, _props$data8, _props$data9, _props$data10, _props$data11, _props$data11$secondN, _props$data12, _props$data12$secondN, _props$data$sourceVid2, _props$data$sourceVid3, _props$data13, _props$data14, _props$data15;
       var sourceVideoOrientation = getVideoOrientation((_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.aspectRatio);
       this.props = {
         startFirstVideoFrom: toFrames(this.fps * (((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.startFirstVideoFrom) + (((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.trimLeft) || 0)), true) || 0,
@@ -44,8 +44,9 @@ export var HandoffLayout = /*#__PURE__*/function (_Layout) {
         sourceVideoOrientation: sourceVideoOrientation,
         videoZoom: ((_props$data$sourceVid3 = props.data.sourceVideo) === null || _props$data$sourceVid3 === void 0 ? void 0 : _props$data$sourceVid3.zoom) || 1,
         useSquareInLandscapeFirstVideo: ((_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.useSquareInLandscapeFirstVideo) || false,
+        useSquareInLandscapeSecondVideo: ((_props$data14 = props.data) === null || _props$data14 === void 0 ? void 0 : _props$data14.useSquareInLandscapeSecondVideo) || false,
         text: props.data.text,
-        handoffOverlapSeconds: ((_props$data14 = props.data) === null || _props$data14 === void 0 ? void 0 : _props$data14.handoffOverlapSeconds) || 0
+        handoffOverlapSeconds: ((_props$data15 = props.data) === null || _props$data15 === void 0 ? void 0 : _props$data15.handoffOverlapSeconds) || 0
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/lib/layouts/IntroVideoLayout.js

@@ -24,9 +24,11 @@ export var IntroVideoLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(IntroVideoLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
+      var _props$data;
       this.props = {
         sentenceText: props.data.sentenceText,
-        sentenceTextTwo: props.data.sentenceTextTwo
+        sentenceTextTwo: props.data.sentenceTextTwo,
+        useSquareInLandscape: ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.useSquareInLandscape) || false
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/lib/layouts/KeywordLayout.js

@@ -24,12 +24,13 @@ export var KeywordLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(KeywordLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data$sourceVid2, _props$data;
+      var _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2;
       this.props = {
         videoUrl: (_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.videoUrl,
         videoZoom: ((_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.zoom) || 1,
         disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds,
-        words: props.data.words
+        words: props.data.words,
+        useSquareInLandscape: ((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.useSquareInLandscape) || false
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/lib/layouts/MotionStillLayout.js

@@ -24,12 +24,13 @@ export var MotionStillLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(MotionStillLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data$sourceVid2, _props$data;
+      var _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2;
       this.props = {
         videoUrl: (_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.videoUrl,
         imageUrl: props.data.imageUrl,
         videoZoom: ((_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.zoom) || 1,
-        disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds
+        disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds,
+        useSquareInLandscape: ((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.useSquareInLandscape) || false
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/lib/layouts/TextWithVideoLayout.js

@@ -38,14 +38,15 @@ export var TextWithVideoLayout = /*#__PURE__*/function (_Layout) {
   }, {
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data$sourceVid2, _props$data$sourceVid3, _props$data;
+      var _props$data$sourceVid, _props$data$sourceVid2, _props$data$sourceVid3, _props$data, _props$data2;
       var sourceVideoOrientation = getVideoOrientation((_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.aspectRatio);
       this.props = {
         videoUrl: (_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.videoUrl,
         sourceVideoOrientation: sourceVideoOrientation,
         videoZoom: ((_props$data$sourceVid3 = props.data.sourceVideo) === null || _props$data$sourceVid3 === void 0 ? void 0 : _props$data$sourceVid3.zoom) || 1,
         text: props.data.text,
-        disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds
+        disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds,
+        useSquareInLandscape: ((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.useSquareInLandscape) || false
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/screenplaySchema.js

@@ -29,58 +29,58 @@ export var screenplaySchema = z.object({
   }), z.object({
     type: "segmentx"
   })])),
-  /* z.object({
-      type: "segment",
-      segments: z.array(
-        z.object({
-          layout: z.any(),
-          effects: z.array(effectSchema),
-        })
-      ),
+  /* z.object({
+      type: "segment",
+      segments: z.array(
+        z.object({
+          layout: z.any(),
+          effects: z.array(effectSchema),
+        })
+      ),
     })*/
-  /*z.object({
-        type: "effect",
-        segments: z.array(effectSchema),
-      }),
-      z.object({
-        type: z.enum(segmentTypes),
-        segments: z.array([
-          {
-            type: "caption",
-            segments: z.array(
-              z.object({
-                type: "caption_simple",
-                data: {
-                  transcript_text: z.array(
-                    z.object({
-                      text: z.string(),
-                      offset: z.number(),
-                      duration: z.number(),
-                    })
-                  ),
-                  duration: z.number().optional(),
-                  offset: z.number().optional(),
-                },
-              })
-            ),
-          },
-        ]),
-      }),
-      z.object({
-        type: "audio",
-        segments: z.array([
-          z.object({
-            type: z.string(),
-            data: {
-              sourceAudio: {
-                url: z.string().url(),
-                volume: z.number().min(0).max(1),
-                start: z.number(),
-              },
-              offset: z.number(),
-            },
-          }),
-        ]),
+  /*z.object({
+        type: "effect",
+        segments: z.array(effectSchema),
+      }),
+      z.object({
+        type: z.enum(segmentTypes),
+        segments: z.array([
+          {
+            type: "caption",
+            segments: z.array(
+              z.object({
+                type: "caption_simple",
+                data: {
+                  transcript_text: z.array(
+                    z.object({
+                      text: z.string(),
+                      offset: z.number(),
+                      duration: z.number(),
+                    })
+                  ),
+                  duration: z.number().optional(),
+                  offset: z.number().optional(),
+                },
+              })
+            ),
+          },
+        ]),
+      }),
+      z.object({
+        type: "audio",
+        segments: z.array([
+          z.object({
+            type: z.string(),
+            data: {
+              sourceAudio: {
+                url: z.string().url(),
+                volume: z.number().min(0).max(1),
+                start: z.number(),
+              },
+              offset: z.number(),
+            },
+          }),
+        ]),
       }),*/
   output: z.object({
     orientation: z["enum"](orientations),