@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,714 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(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; }
+import React from "react";
+import { AbsoluteFill, Audio, Easing, Img, OffthreadVideo, useVideoConfig } from "remotion";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import { CHROME_PADDING } from "../../config.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import PausableImg from "../utils/PausableImg";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+var Square = function Square(_ref) {
+  var children = _ref.children,
+    brollUrl = _ref.brollUrl,
+    brollVideoWidthTransition = _ref.brollVideoWidthTransition,
+    brollVideoHeightTransition = _ref.brollVideoHeightTransition,
+    brollVideoTopTransition = _ref.brollVideoTopTransition,
+    brollVideoLeftTransition = _ref.brollVideoLeftTransition,
+    mainVideoWidthTransition = _ref.mainVideoWidthTransition,
+    mainVideoHeightTransition = _ref.mainVideoHeightTransition,
+    mainVideoTopTransition = _ref.mainVideoTopTransition,
+    mainVideoLeftTransition = _ref.mainVideoLeftTransition,
+    logoUrl = _ref.logoUrl,
+    logoLeft = _ref.logoLeft,
+    logoTop = _ref.logoTop,
+    frameColor = _ref.frameColor,
+    startVideoFrom = _ref.startVideoFrom,
+    videoUrl = _ref.videoUrl,
+    sourceVideoOrientation = _ref.sourceVideoOrientation,
+    muted = _ref.muted,
+    faceMetadata = _ref.faceMetadata,
+    orientation = _ref.orientation,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    showVirtual = _ref.showVirtual,
+    virtualBgUrl = _ref.virtualBgUrl;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, brollUrl && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px 20px 0px 0px",
+      width: brollVideoWidthTransition,
+      height: brollVideoHeightTransition,
+      top: brollVideoTopTransition,
+      left: brollVideoLeftTransition,
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%"
+    },
+    muted: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px 0px 20px 20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 1
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: "0px 0px 20px 20px",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    transparent: false,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    centerHorizontally: false,
+    translateY: 100
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px 0px 20px 20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 9,
+      willChange: "transform"
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    transparent: true,
+    muted: true,
+    translateY: 100
+  })) : null, noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && !faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px 0px 20px 20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+    }
+  })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 13
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: logoLeft,
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var Portrait = function Portrait(_ref2) {
+  var children = _ref2.children,
+    brollUrl = _ref2.brollUrl,
+    brollVideoWidthTransition = _ref2.brollVideoWidthTransition,
+    brollVideoHeightTransition = _ref2.brollVideoHeightTransition,
+    brollVideoTopTransition = _ref2.brollVideoTopTransition,
+    brollVideoLeftTransition = _ref2.brollVideoLeftTransition,
+    mainVideoWidthTransition = _ref2.mainVideoWidthTransition,
+    mainVideoHeightTransition = _ref2.mainVideoHeightTransition,
+    mainVideoTopTransition = _ref2.mainVideoTopTransition,
+    mainVideoLeftTransition = _ref2.mainVideoLeftTransition,
+    logoUrl = _ref2.logoUrl,
+    logoLeft = _ref2.logoLeft,
+    logoTop = _ref2.logoTop,
+    frameColor = _ref2.frameColor,
+    startVideoFrom = _ref2.startVideoFrom,
+    videoUrl = _ref2.videoUrl,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    muted = _ref2.muted,
+    orientation = _ref2.orientation,
+    faceMetadata = _ref2.faceMetadata,
+    noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    showVirtual = _ref2.showVirtual,
+    virtualBgUrl = _ref2.virtualBgUrl;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, brollUrl && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px 20px 0px 0px",
+      width: brollVideoWidthTransition,
+      height: brollVideoHeightTransition,
+      top: brollVideoTopTransition,
+      left: brollVideoLeftTransition,
+      zIndex: 2,
+      // Add gradient mask for fade to transparent effect in portrait
+      mask: "linear-gradient(to bottom, black 0%, black 60%, transparent 100%)",
+      WebkitMask: "linear-gradient(to bottom, black 0%, black 60%, transparent 100%)"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%"
+    },
+    muted: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px 0px 20px 20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 1
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: "0px 0px 20px 20px",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    transparent: false,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    centerHorizontally: false,
+    containerHeight: mainVideoHeightTransition,
+    containerStyle: {
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px 0px 20px 20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    faceMetadata: faceMetadata,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    transparent: true,
+    muted: true
+  }))) : null, noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && !faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "transparent",
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px 0px 20px 20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  }))) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: logoLeft,
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var Landscape = function Landscape(_ref3) {
+  var children = _ref3.children,
+    brollUrl = _ref3.brollUrl,
+    brollVideoWidthTransition = _ref3.brollVideoWidthTransition,
+    brollVideoHeightTransition = _ref3.brollVideoHeightTransition,
+    brollVideoTopTransition = _ref3.brollVideoTopTransition,
+    brollVideoLeftTransition = _ref3.brollVideoLeftTransition,
+    mainVideoWidthTransition = _ref3.mainVideoWidthTransition,
+    mainVideoHeightTransition = _ref3.mainVideoHeightTransition,
+    mainVideoTopTransition = _ref3.mainVideoTopTransition,
+    mainVideoLeftTransition = _ref3.mainVideoLeftTransition,
+    logoUrl = _ref3.logoUrl,
+    logoLeft = _ref3.logoLeft,
+    logoTop = _ref3.logoTop,
+    frameColor = _ref3.frameColor,
+    startVideoFrom = _ref3.startVideoFrom,
+    videoUrl = _ref3.videoUrl,
+    sourceVideoOrientation = _ref3.sourceVideoOrientation,
+    muted = _ref3.muted,
+    faceMetadata = _ref3.faceMetadata,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    showVirtual = _ref3.showVirtual,
+    virtualBgUrl = _ref3.virtualBgUrl;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, brollUrl && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "0px",
+      width: brollVideoWidthTransition,
+      height: brollVideoHeightTransition,
+      top: brollVideoTopTransition,
+      left: brollVideoLeftTransition,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%"
+    },
+    muted: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      border: "12px solid ".concat(accentColor),
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 2
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: "20px",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    transparent: false,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    centerHorizontally: false,
+    containerHeight: mainVideoHeightTransition,
+    containerStyle: {
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  })), (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl && faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      border: "12px solid ".concat(accentColor),
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    faceMetadata: faceMetadata,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    transparent: true,
+    muted: true
+  }))) : null, (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl && !faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "transparent",
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      border: "12px solid ".concat(accentColor),
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  }))) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: logoLeft,
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+
+// Configuration for different orientation split screens
+var BrollSplitScreen = function BrollSplitScreen(_ref4) {
+  var videoUrl = _ref4.videoUrl,
+    startVideoFrom = _ref4.startVideoFrom,
+    brollUrl = _ref4.brollUrl,
+    muted = _ref4.muted,
+    frameColor = _ref4.frameColor,
+    logoUrl = _ref4.logoUrl,
+    children = _ref4.children,
+    sourceVideoOrientation = _ref4.sourceVideoOrientation,
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
+    durationInFrames = _ref4.durationInFrames,
+    _ref4$accentColor = _ref4.accentColor,
+    accentColor = _ref4$accentColor === void 0 ? "#ffffff" : _ref4$accentColor,
+    faceMetadata = _ref4.faceMetadata,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width,
+    height = _useVideoConfig2.height;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+
+  // Convert duration from frames to seconds (assuming 30 fps)
+  var durationInSeconds = durationInFrames / 30;
+
+  // Configure orientation-specific layouts
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        // Portrait: Broll on top, main video on bottom (swapped positions)
+        mainVideoWidth: width - 2 * CHROME_PADDING,
+        mainVideoHeight: (height - 2 * CHROME_PADDING) * 0.66,
+        mainVideoTop: CHROME_PADDING + (height - 2 * CHROME_PADDING) * 0.34,
+        mainVideoLeft: CHROME_PADDING,
+        brollVideoWidth: width - 2 * CHROME_PADDING,
+        brollVideoHeight: (height - 2 * CHROME_PADDING) * 0.54,
+        brollVideoTop: CHROME_PADDING,
+        brollVideoLeft: CHROME_PADDING,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollSplitScreenComponent: Portrait
+      },
+      landscape: {
+        // Landscape: Broll fullscreen with portrait video (3:4 aspect ratio) aligned to the right
+        mainVideoWidth: (height - 2 * CHROME_PADDING) * (3 / 4),
+        // 3:4 aspect ratio based on max height
+        mainVideoHeight: height - 2 * CHROME_PADDING,
+        mainVideoTop: CHROME_PADDING,
+        mainVideoLeft: width - CHROME_PADDING - (height - 2 * CHROME_PADDING) * (3 / 4),
+        // Align to right
+        brollVideoWidth: width,
+        brollVideoHeight: height,
+        brollVideoTop: 0,
+        brollVideoLeft: 0,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollSplitScreenComponent: Landscape
+      },
+      square: {
+        // Square: Broll on top, main video on bottom (swapped positions)
+        mainVideoWidth: width - 2 * CHROME_PADDING,
+        mainVideoHeight: (height - 2 * CHROME_PADDING) * (faceMetadata ? 0.65 : 0.45),
+        mainVideoTop: CHROME_PADDING + (height - 2 * CHROME_PADDING) * (faceMetadata ? 0.35 : 0.55),
+        mainVideoLeft: CHROME_PADDING,
+        brollVideoWidth: width - 2 * CHROME_PADDING,
+        brollVideoHeight: (height - 2 * CHROME_PADDING) * (faceMetadata ? 0.35 : 0.55),
+        brollVideoTop: CHROME_PADDING,
+        brollVideoLeft: CHROME_PADDING,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollSplitScreenComponent: Square
+      }
+    }),
+    BrollSplitScreenComponent = _useOrientationBased.BrollSplitScreenComponent,
+    mainVideoWidth = _useOrientationBased.mainVideoWidth,
+    mainVideoHeight = _useOrientationBased.mainVideoHeight,
+    mainVideoTop = _useOrientationBased.mainVideoTop,
+    mainVideoLeft = _useOrientationBased.mainVideoLeft,
+    brollVideoWidth = _useOrientationBased.brollVideoWidth,
+    brollVideoHeight = _useOrientationBased.brollVideoHeight,
+    brollVideoTop = _useOrientationBased.brollVideoTop,
+    brollVideoLeft = _useOrientationBased.brollVideoLeft,
+    logoTop = _useOrientationBased.logoTop,
+    logoLeft = _useOrientationBased.logoLeft,
+    orientation = _useOrientationBased.orientation;
+  // Transition timing - starting full screen, transitioning to split screen, then back to full screen
+  var normalizeTimings = function normalizeTimings(timings) {
+    var result = _toConsumableArray(timings);
+    for (var i = 1; i < result.length; i++) {
+      if (result[i] <= result[i - 1]) {
+        result[i] = result[i - 1] + 0.01;
+      }
+    }
+    return result;
+  };
+  var transitionTimings = normalizeTimings([0, 0.5, durationInSeconds - 0.5, durationInSeconds]); // Start at 0, split at 0.5, return to original at 1.0
+
+  // Main video transitions
+  var mainVideoWidthTransition = useTimeInterpolate(transitionTimings, [width, mainVideoWidth, mainVideoWidth, width], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var mainVideoHeightTransition = useTimeInterpolate(transitionTimings, [height, mainVideoHeight, mainVideoHeight, height], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var mainVideoTopTransition = useTimeInterpolate(transitionTimings, [0, mainVideoTop, mainVideoTop, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var mainVideoLeftTransition = useTimeInterpolate(transitionTimings, [0, mainVideoLeft, mainVideoLeft, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+
+  // Broll video transitions (start offscreen and move into position)
+  var brollVideoWidthTransition = useTimeInterpolate(transitionTimings, [brollVideoWidth, brollVideoWidth, brollVideoWidth, brollVideoWidth], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var brollVideoHeightTransition = useTimeInterpolate(transitionTimings, [brollVideoHeight, brollVideoHeight, brollVideoHeight, brollVideoHeight], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+
+  // Broll starting position based on orientation
+  var brollStartPosition = orientation === "landscape" ? {
+    top: 0,
+    left: 0
+  } // Already in position for landscape (fullscreen)
+  : {
+    top: -brollVideoHeight,
+    left: brollVideoLeft
+  }; // From top for portrait/square
+
+  var brollVideoTopTransition = useTimeInterpolate(transitionTimings, [brollStartPosition.top, brollVideoTop, brollVideoTop, brollStartPosition.top], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var brollVideoLeftTransition = useTimeInterpolate(transitionTimings, [brollStartPosition.left, brollVideoLeft, brollVideoLeft, brollStartPosition.left], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), /*#__PURE__*/React.createElement(BrollSplitScreenComponent, {
+    brollUrl: brollUrl,
+    brollVideoWidthTransition: brollVideoWidthTransition,
+    brollVideoHeightTransition: brollVideoHeightTransition,
+    brollVideoTopTransition: brollVideoTopTransition,
+    brollVideoLeftTransition: brollVideoLeftTransition,
+    mainVideoWidthTransition: mainVideoWidthTransition,
+    mainVideoHeightTransition: mainVideoHeightTransition,
+    mainVideoTopTransition: mainVideoTopTransition,
+    mainVideoLeftTransition: mainVideoLeftTransition,
+    logoUrl: logoUrl,
+    frameColor: frameColor,
+    orientation: orientation,
+    startVideoFrom: startVideoFrom,
+    videoUrl: videoUrl,
+    sourceVideoOrientation: sourceVideoOrientation,
+    logoLeft: logoLeft,
+    logoTop: logoTop,
+    muted: muted,
+    accentColor: accentColor,
+    faceMetadata: faceMetadata,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    showVirtual: showVirtual,
+    virtualBgUrl: virtualBgUrl
+  }, children));
+};
+export { BrollSplitScreen };