@zync/zync-screnplay-player 0.1.232 → 0.1.234

package/dist/screenplay/RemotionRenderer/RemotionRenderer.js

@@ -14,6 +14,7 @@ import { toFrames, toPascalCase } from "./main/lib/Sequence.js";
 import { getCreatorCollabEffectProps } from "./main/lib/layouts/creatorCollabProps.js";
 import { transitionThemes } from "./config.js";
 import { normalizeDisabledTranscripts } from "./helpers/normalizeDisabledTranscripts.js";
+import { coerceRenderableText, coerceRenderableTextProps, RENDERABLE_TEXT_PROP_KEYS } from "./helpers/coerceRenderableText.js";
 export var RemotionRenderer = /*#__PURE__*/function () {
   function RemotionRenderer(screenplay) {
     _classCallCheck(this, RemotionRenderer);
@@ -109,7 +110,7 @@ export var RemotionRenderer = /*#__PURE__*/function () {
       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(_objectSpread({}, screenPlaySegment.data), creatorCollabProps), inheritedProps), {}, {
+      return coerceRenderableTextProps(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, screenPlaySegment.data), creatorCollabProps), inheritedProps), {}, {
         component: component,
         videoUrl: (_screenPlaySegment$da11 = (_screenPlaySegment$da12 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da12 === void 0 ? void 0 : _screenPlaySegment$da12.videoUrl) !== null && _screenPlaySegment$da11 !== void 0 ? _screenPlaySegment$da11 : creatorCollabProps.videoUrl,
         startVideoFrom: (_ref = typeof ((_screenPlaySegment$da13 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da13 === void 0 ? void 0 : _screenPlaySegment$da13.start) === "number" ? toFrames(this.fps * screenPlaySegment.data.sourceVideo.start, false, true) : creatorCollabProps.startVideoFrom) !== null && _ref !== void 0 ? _ref : 0,
@@ -120,7 +121,7 @@ export var RemotionRenderer = /*#__PURE__*/function () {
         offset: toFrames(this.fps * (screenPlaySegment.data.offset - trimLeft)) || 0,
         theme: screenPlaySegment.theme,
         themeSettings: screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : screenPlaySegment.themeSettings
-      });
+      }), RENDERABLE_TEXT_PROP_KEYS);
     }
   }, {
     key: "toRemotionAudioFragment",
@@ -183,7 +184,7 @@ export var RemotionRenderer = /*#__PURE__*/function () {
         var transcriptFrom = _this3.fps * (transcript.offset - trimLeft) || 0;
         var transcriptDurationInFrames = toFrames(_this3.fps * transcript.duration);
         return {
-          text: transcript.text,
+          text: coerceRenderableText(transcript.text),
           from: transcriptFrom,
           durationInFrames: transcriptDurationInFrames,
           punctuations: transcript.punctuations ? transcript.punctuations.map(function (p) {

package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js

@@ -8,9 +8,9 @@ import React, { useEffect, useState } from 'react';
 import { delayRender, continueRender, cancelRender } from 'remotion';
 import { Lottie } from '@remotion/lottie';
 
-/**
- * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
- * Lottie expects: [r, g, b, a] where each component is 0‑1.
+/**
+ * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
+ * Lottie expects: [r, g, b, a] where each component is 0‑1.
  */
 var hexToRGBA = function hexToRGBA(hex) {
   var clean = hex.replace('#', '');
@@ -25,9 +25,9 @@ var hexToRGBA = function hexToRGBA(hex) {
   ];
 };
 
-/**
- * Recursively walks through shape objects and overrides any fill (fl) or
- * stroke (st) color with the provided RGBA array.
+/**
+ * Recursively walks through shape objects and overrides any fill (fl) or
+ * stroke (st) color with the provided RGBA array.
  */
 var _applyColor = function applyColor(shapes, rgba) {
   shapes === null || shapes === void 0 ? void 0 : shapes.forEach(function (shape) {
@@ -40,11 +40,11 @@ var _applyColor = function applyColor(shapes, rgba) {
   });
 };
 
-/**
- * Traverses all layers (top‑level + asset layers) and applies the primary
- * color to every fill / stroke it encounters. This is useful for Lottie files
- * that were exported with a single static color (e.g. white) and do not use
- * layer naming conventions like "PrimaryColor".
+/**
+ * Traverses all layers (top‑level + asset layers) and applies the primary
+ * color to every fill / stroke it encounters. This is useful for Lottie files
+ * that were exported with a single static color (e.g. white) and do not use
+ * layer naming conventions like "PrimaryColor".
  */
 var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   var _data$assets;
@@ -60,16 +60,16 @@ var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   });
 };
 
-/**
- * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
- * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
- * and fill colors with the supplied `primaryColor`.
- *
- * Props:
- *  • animationPath – URL or local path to the json file.
- *  • primaryColor  – HEX string, defaults to "#ffffff".
- *  • autoplay      – boolean, whether to start playing immediately.
- *  • loop          – boolean, whether to loop the animation.
+/**
+ * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
+ * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
+ * and fill colors with the supplied `primaryColor`.
+ *
+ * Props:
+ *  • animationPath – URL or local path to the json file.
+ *  • primaryColor  – HEX string, defaults to "#ffffff".
+ *  • autoplay      – boolean, whether to start playing immediately.
+ *  • loop          – boolean, whether to loop the animation.
  */
 export var LottieAnimationGlobal = function LottieAnimationGlobal(_ref) {
   var animationPath = _ref.animationPath,

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

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

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

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