@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,742 @@
+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 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,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref.sourceVideoOrientation,
+    videoUrl = _ref.videoUrl,
+    faceMetadata = _ref.faceMetadata,
+    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",
+      width: "100%",
+      height: brollVideoHeightTransition,
+      transform: "translateX(-50%) scale(1.25)",
+      transformOrigin: "center center",
+      left: "50%",
+      zIndex: 2,
+      // Add gradient mask for fade to transparent effect in square
+      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%",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    },
+    muted: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      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%",
+    zIndex: 2
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    useAveragePosition: true,
+    centerHorizontally: true,
+    transparent: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 0
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    transparent: false,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    useAveragePosition: true,
+    centerHorizontally: true,
+    muted: true,
+    style: {
+      zIndex: 0,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    style: {
+      zIndex: 0,
+      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",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    centerHorizontally: true,
+    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: {
+      position: "absolute",
+      overflow: "hidden",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      position: "relative",
+      top: "50%",
+      objectFit: "cover",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      borderRadius: "30px",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      transform: "translateY(-50%)"
+    }
+  })) : 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 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,
+    orientation = _ref2.orientation,
+    startVideoFrom = _ref2.startVideoFrom,
+    noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    videoUrl = _ref2.videoUrl,
+    faceMetadata = _ref2.faceMetadata,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    showVirtual = _ref2.showVirtual,
+    virtualBgUrl = _ref2.virtualBgUrl;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width,
+    height = _useVideoConfig2.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: orientation === "landscape" ? "0px" : "20px",
+      width: "100%",
+      height: brollVideoHeightTransition,
+      top: brollVideoTopTransition,
+      left: brollVideoLeftTransition,
+      zIndex: 2,
+      transformOrigin: "center center",
+      transform: "scale(1.1)",
+      // 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%",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    },
+    muted: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      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: 2
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    transparent: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      transform: "scale(1)",
+      zIndex: 0
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    useAveragePosition: true,
+    muted: true,
+    transparent: false,
+    style: {
+      zIndex: 0
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    style: {
+      zIndex: 0,
+      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: "20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      transform: "scale(1)",
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    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: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      transform: "scale(1)",
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      position: "relative",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: "50%",
+      objectFit: "cover",
+      borderRadius: "30px",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      transform: "translateY(-50%)"
+    }
+  })) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3
+    }
+  }, 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,
+    mainVideoWidthTransition = _ref3.mainVideoWidthTransition,
+    mainVideoHeightTransition = _ref3.mainVideoHeightTransition,
+    mainVideoTopTransition = _ref3.mainVideoTopTransition,
+    mainVideoLeftTransition = _ref3.mainVideoLeftTransition,
+    logoUrl = _ref3.logoUrl,
+    logoLeft = _ref3.logoLeft,
+    logoTop = _ref3.logoTop,
+    frameColor = _ref3.frameColor,
+    orientation = _ref3.orientation,
+    startVideoFrom = _ref3.startVideoFrom,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref3.sourceVideoOrientation,
+    faceMetadata = _ref3.faceMetadata,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    showVirtual = _ref3.showVirtual,
+    virtualBgUrl = _ref3.virtualBgUrl;
+  var _useVideoConfig3 = useVideoConfig(),
+    width = _useVideoConfig3.width,
+    height = _useVideoConfig3.height;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, brollUrl && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      transformOrigin: "center center",
+      transform: "translate(-50%, -50%)",
+      borderRadius: orientation === "landscape" ? "0px" : "20px",
+      width: brollVideoWidthTransition,
+      height: brollVideoHeightTransition,
+      top: "50%",
+      left: "50%",
+      zIndex: orientation === "landscape" ? 1 : 2
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    },
+    muted: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      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: 2
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    useAveragePosition: true,
+    transparent: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : 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: "20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: mainVideoWidthTransition,
+    containerHeight: mainVideoHeightTransition,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    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: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      width: mainVideoWidthTransition,
+      height: mainVideoHeightTransition,
+      top: mainVideoTopTransition,
+      left: mainVideoLeftTransition,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      position: "relative",
+      top: "50%",
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      borderRadius: "30px",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      transform: "translateY(-50%)"
+    }
+  })) : 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);
+};
+
+// Configuration for different orientation split screens
+var BrollGreenScreen = function BrollGreenScreen(_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,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
+    durationInFrames = _ref4.durationInFrames,
+    faceMetadata = _ref4.faceMetadata,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects;
+  var _useVideoConfig4 = useVideoConfig(),
+    width = _useVideoConfig4.width,
+    height = _useVideoConfig4.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,
+        mainVideoHeight: height * 0.8,
+        mainVideoTop: height * 0.2,
+        mainVideoLeft: 0,
+        brollVideoWidth: width,
+        brollVideoHeight: height * 0.6,
+        brollVideoTop: CHROME_PADDING,
+        brollVideoLeft: CHROME_PADDING,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollGreenScreenComponent: Portrait
+      },
+      landscape: {
+        // Landscape: Broll fullscreen with portrait video (3:4 aspect ratio) aligned to the right
+        mainVideoWidth: width,
+        mainVideoHeight: height * 0.86,
+        mainVideoTop: CHROME_PADDING + height * 0.14,
+        mainVideoLeft: 0,
+        brollVideoWidth: width,
+        brollVideoHeight: height * 0.65,
+        brollVideoTop: 0,
+        brollVideoLeft: 0,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollGreenScreenComponent: Square
+      },
+      square: {
+        // Square: Main video on top, broll on bottom
+        mainVideoWidth: width,
+        mainVideoHeight: height * 0.86,
+        mainVideoTop: CHROME_PADDING + height * 0.14,
+        mainVideoLeft: 0,
+        brollVideoWidth: width,
+        brollVideoHeight: height * 0.5,
+        brollVideoTop: 0,
+        brollVideoLeft: 0,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2,
+        BrollGreenScreenComponent: Square
+      }
+    }),
+    BrollGreenScreenComponent = _useOrientationBased.BrollGreenScreenComponent,
+    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 transitionTimings = [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, [0, brollVideoWidth, brollVideoWidth, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var brollVideoHeightTransition = useTimeInterpolate(transitionTimings, [0, brollVideoHeight, brollVideoHeight, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var brollVideoTopTransition = useTimeInterpolate(transitionTimings, orientation === "portrait" ? [-brollVideoHeight, brollVideoTop, brollVideoTop, -brollVideoHeight] : [0, brollVideoTop, brollVideoTop, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var brollVideoLeftTransition = useTimeInterpolate(transitionTimings, orientation === "portrait" ? [width / 2 - brollVideoWidth / 2, brollVideoLeft, brollVideoLeft, width / 2 - brollVideoWidth / 2] : [0, brollVideoLeft, brollVideoLeft, 0], {
+    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(BrollGreenScreenComponent, {
+    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,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    sourceVideoOrientation: sourceVideoOrientation,
+    logoLeft: logoLeft,
+    logoTop: logoTop,
+    videoUrl: videoUrl,
+    faceMetadata: faceMetadata,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    showVirtual: showVirtual,
+    virtualBgUrl: virtualBgUrl
+  }, children));
+};
+export { BrollGreenScreen };