@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,1330 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+import React from "react";
+import { AbsoluteFill, Audio, Img, useVideoConfig, spring, useCurrentFrame, useVideoConfig as useVideoConfigForFps, OffthreadVideo } from "remotion";
+import { LottieAnimationGlobal } from "../LottieAnimationGlobal";
+import { loadFont } from "@remotion/google-fonts/Oswald";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { CHROME_PADDING } from "../../config.js";
+import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
+import PausableImg from "../utils/PausableImg";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var Landscape = function Landscape(_ref) {
+  var children = _ref.children,
+    videoUrl = _ref.videoUrl,
+    startVideoFrom = _ref.startVideoFrom,
+    sentenceText = _ref.sentenceText,
+    sentenceTextTwo = _ref.sentenceTextTwo,
+    logoUrl = _ref.logoUrl,
+    logoLeft = _ref.logoLeft,
+    logoTop = _ref.logoTop,
+    logoRight = _ref.logoRight,
+    videoWidth = _ref.videoWidth,
+    videoHeight = _ref.videoHeight,
+    videoTop = _ref.videoTop,
+    videoLeft = _ref.videoLeft,
+    durationInFrames = _ref.durationInFrames,
+    muted = _ref.muted,
+    faceMetadata = _ref.faceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    showVirtual = _ref.showVirtual,
+    virtualBgUrl = _ref.virtualBgUrl;
+  var frame = useCurrentFrame();
+  var _useVideoConfigForFps = useVideoConfigForFps(),
+    fps = _useVideoConfigForFps.fps;
+  var _useVideoConfig = useVideoConfig(),
+    screenWidth = _useVideoConfig.width;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+
+  // Spring animation for entrance (slide in from left)
+  var entranceSpring = spring({
+    frame: frame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 100,
+      mass: 1
+    }
+  });
+
+  // Calculate when exit animation should start (30 frames before end)
+  var exitStartFrame = durationInFrames - 30;
+
+  // Calculate when text fade-out should start (15 frames before exit)
+  var fadeOutStartFrame = exitStartFrame - 15;
+
+  // Spring animation for text fade-out
+  var fadeOutSpring = spring({
+    frame: frame - fadeOutStartFrame,
+    fps: fps,
+    config: {
+      damping: 20,
+      stiffness: 150,
+      mass: 0.8
+    }
+  });
+
+  // Spring animation for exit (slide out to left)
+  var exitSpring = spring({
+    frame: frame - exitStartFrame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 100,
+      mass: 1
+    }
+  });
+
+  // Combine entrance and exit animations
+  var isExiting = frame >= exitStartFrame;
+  var slideProgress = isExiting ? 1 - exitSpring : entranceSpring;
+
+  // Calculate text opacity (fade out before exit)
+  var isFadingOut = frame >= fadeOutStartFrame;
+  var textOpacity = isFadingOut ? 1 - fadeOutSpring : 1;
+
+  // Background slide animation: starts at -800px, slides to -150px, then back to -800px
+  var animatedTranslateX = -150 + (1 - slideProgress) * -650; // -800px when slideProgress = 0, -150px when slideProgress = 1
+
+  // Video animations: start full screen, transition to split, then back to full screen
+  var animatedVideoWidth = videoWidth + (1 - slideProgress) * (screenWidth - videoWidth);
+  var animatedVideoLeft = videoLeft - (1 - slideProgress) * videoLeft;
+
+  // Animated text lines for sentenceText
+  var _useVideoConfig2 = useVideoConfig(),
+    screenHeight = _useVideoConfig2.height;
+  var maxFontSize = 6.5 * 16; // Convert rem to px (6.5rem * 16px/rem)
+  var maxWidth = screenWidth * 0.9;
+  var maxHeight = screenHeight;
+  var _distributeTextToFit = distributeTextToFit(sentenceText, maxWidth, maxHeight, maxFontSize),
+    textLines = _distributeTextToFit.lines,
+    calculatedFontSize = _distributeTextToFit.fontSize;
+  var renderAnimatedLines = function renderAnimatedLines(lines) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
+    return lines.map(function (line, lineIndex) {
+      var lineAnimation = spring({
+        frame: frame - baseDelay - lineIndex * 8,
+        // Stagger each line by 8 frames
+        fps: fps,
+        config: {
+          damping: 15,
+          stiffness: 120,
+          mass: 1
+        }
+      });
+      var opacity = lineAnimation;
+      var translateY = (1 - lineAnimation) * 15; // Slide from top
+
+      return /*#__PURE__*/React.createElement("div", {
+        key: lineIndex,
+        style: {
+          opacity: opacity,
+          transform: "translateY(".concat(translateY, "px)"),
+          lineHeight: calculatedFontSize * 1.2 / 16 + "rem"
+        }
+      }, line);
+    });
+  };
+
+  // Divider line animation - starts after text lines finish
+  var dividerStartFrame = 15 + textLines.length * 8 + 5; // 5 frame buffer after last line
+  var dividerAnimation = spring({
+    frame: frame - dividerStartFrame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 150,
+      mass: 0.8
+    }
+  });
+
+  // Character animation for sentenceTextTwo
+  var renderAnimatedText = function renderAnimatedText(text) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
+    return text.split("").map(function (_char, index) {
+      var charAnimation = spring({
+        frame: frame - baseDelay - index * 3,
+        // Stagger each character by 3 frames
+        fps: fps,
+        config: {
+          damping: 12,
+          stiffness: 200,
+          mass: 0.8
+        }
+      });
+      var opacity = charAnimation;
+      var translateX = (1 - charAnimation) * 15; // Slide from right
+
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: {
+          opacity: opacity,
+          transform: "translateX(".concat(translateX, "px)"),
+          display: "inline-block"
+        }
+      }, _char === " " ? "\xA0" : _char, " ");
+    });
+  };
+  var logoPositionStyles = logoRight !== undefined && logoRight !== null ? {
+    right: logoRight
+  } : {
+    left: logoLeft
+  };
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 11
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "50%",
+      height: "100%",
+      transform: "scale(2) rotate(20deg) translateY(-100px) translateX(".concat(animatedTranslateX, "px)"),
+      backgroundColor: "white",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "15px",
+      backgroundColor: accentColor,
+      opacity: 0.2,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "30px",
+      backgroundColor: accentColor,
+      opacity: 0.4,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "45px",
+      backgroundColor: accentColor,
+      opacity: 0.6,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "60px",
+      backgroundColor: accentColor,
+      opacity: 0.8,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "75px",
+      backgroundColor: accentColor,
+      zIndex: 1
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: CHROME_PADDING * 2,
+      top: CHROME_PADDING * 2,
+      width: 120,
+      height: 120,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 11,
+      opacity: textOpacity
+    }
+  }, /*#__PURE__*/React.createElement(LottieAnimationGlobal, {
+    animationPath: "https://storage.googleapis.com/zync-media/assets/lottie/introvideo/animation.json",
+    autoplay: true,
+    loop: false,
+    primaryColor: accentContrast
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: CHROME_PADDING * 2,
+      right: CHROME_PADDING,
+      top: screenHeight * 0.15,
+      zIndex: 5,
+      opacity: textOpacity
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: calculatedFontSize / 16 + "rem",
+      fontWeight: "normal",
+      color: accentContrast,
+      lineHeight: "1.1",
+      margin: 0,
+      marginBottom: "2rem",
+      fontFamily: fontFamily
+    }
+  }, renderAnimatedLines(textLines, 15)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "80px",
+      height: "10px",
+      backgroundColor: accentContrast,
+      marginBottom: "0.5rem",
+      marginTop: "7.5rem",
+      opacity: dividerAnimation,
+      transform: "translateY(".concat((1 - dividerAnimation) * 10, "px)")
+    }
+  }), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "4rem",
+      fontWeight: "500",
+      color: accentContrast,
+      margin: 0,
+      fontFamily: fontFamily,
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    }
+  }, renderAnimatedText(sentenceTextTwo, dividerStartFrame + 10)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      borderRadius: "0px",
+      width: animatedVideoWidth,
+      height: "100%",
+      top: 0,
+      left: 0,
+      transform: "translateX(".concat(animatedVideoLeft, "px)"),
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: animatedVideoWidth,
+    containerHeight: screenHeight,
+    useAveragePosition: true,
+    centerHorizontally: false
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    muted: muted,
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%"
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: screenWidth,
+    height: screenHeight,
+    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: {
+      isolation: "isolate",
+      width: screenWidth,
+      height: "100%",
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      borderRadius: "0px",
+      width: animatedVideoWidth,
+      height: "100%",
+      top: 0,
+      left: 0,
+      transform: "translateX(".concat(animatedVideoLeft, "px)")
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    containerWidth: animatedVideoWidth,
+    containerHeight: screenHeight,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }))) : 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",
+      isolation: "isolate",
+      width: screenWidth,
+      height: "100%",
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      borderRadius: "0px",
+      width: animatedVideoWidth,
+      height: "100%",
+      top: 0,
+      left: 0,
+      transform: "translateX(".concat(animatedVideoLeft, "px)")
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      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: 20
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({
+      position: "fixed",
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }, logoPositionStyles)
+  }, /*#__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,
+    videoUrl = _ref2.videoUrl,
+    startVideoFrom = _ref2.startVideoFrom,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    sentenceText = _ref2.sentenceText,
+    sentenceTextTwo = _ref2.sentenceTextTwo,
+    logoUrl = _ref2.logoUrl,
+    logoLeft = _ref2.logoLeft,
+    logoTop = _ref2.logoTop,
+    logoRight = _ref2.logoRight,
+    videoWidth = _ref2.videoWidth,
+    videoHeight = _ref2.videoHeight,
+    videoTop = _ref2.videoTop,
+    videoLeft = _ref2.videoLeft,
+    backgroundHeight = _ref2.backgroundHeight,
+    durationInFrames = _ref2.durationInFrames,
+    muted = _ref2.muted,
+    faceMetadata = _ref2.faceMetadata,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
+    showVirtual = _ref2.showVirtual,
+    virtualBgUrl = _ref2.virtualBgUrl;
+  var frame = useCurrentFrame();
+  var _useVideoConfigForFps2 = useVideoConfigForFps(),
+    fps = _useVideoConfigForFps2.fps;
+  var _useVideoConfigForFps3 = useVideoConfigForFps(),
+    screenWidth = _useVideoConfigForFps3.width,
+    screenHeight = _useVideoConfigForFps3.height;
+
+  // Spring animation for entrance (slide in from left)
+  var entranceSpring = spring({
+    frame: frame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 100,
+      mass: 1
+    }
+  });
+
+  // Calculate when exit animation should start (30 frames before end)
+  var exitStartFrame = durationInFrames - 30;
+
+  // Calculate when text fade-out should start (15 frames before exit)
+  var fadeOutStartFrame = exitStartFrame - 15;
+
+  // Spring animation for text fade-out
+  var fadeOutSpring = spring({
+    frame: frame - fadeOutStartFrame,
+    fps: fps,
+    config: {
+      damping: 20,
+      stiffness: 150,
+      mass: 0.8
+    }
+  });
+
+  // Spring animation for exit (slide out to left)
+  var exitSpring = spring({
+    frame: frame - exitStartFrame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 100,
+      mass: 1
+    }
+  });
+
+  // Combine entrance and exit animations
+  var isExiting = frame >= exitStartFrame;
+  var slideProgress = isExiting ? 1 - exitSpring : entranceSpring;
+
+  // Calculate text opacity (fade out before exit)
+  var isFadingOut = frame >= fadeOutStartFrame;
+  var textOpacity = isFadingOut ? 1 - fadeOutSpring : 1;
+
+  // Background slide animation: starts at -450px, slides to -50px, then back to -450px
+  var animatedTranslateX = -50 + (1 - slideProgress) * -400; // -450px when slideProgress = 0, -50px when slideProgress = 1
+
+  // Video animations: start full screen, transition to bottom half, then back to full screen
+  var animatedVideoHeight = screenHeight - slideProgress * screenHeight * 0.5; // 100% when slideProgress = 0, 50% when slideProgress = 1
+
+  // Background animations: start off-screen top, transition to top half, then back off-screen
+  var animatedBackgroundTranslateY = -screenHeight * 0.5 + slideProgress * screenHeight * 0.5; // -50% when slideProgress = 0, 0% when slideProgress = 1
+
+  var _useTheme2 = useTheme(),
+    accentColor = _useTheme2.accentColor,
+    accentContrast = _useTheme2.accentContrast;
+
+  // Animated text lines for sentenceText
+  var _distributeTextToFit2 = distributeTextToFit(sentenceText, screenWidth, screenHeight * 0.4, 5.5 * 16 // Convert rem to px (2.5rem * 16px/rem)
+    ),
+    textLines = _distributeTextToFit2.lines,
+    calculatedFontSize = _distributeTextToFit2.fontSize;
+  var renderAnimatedLines = function renderAnimatedLines(lines) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
+    return lines.map(function (line, lineIndex) {
+      var lineAnimation = spring({
+        frame: frame - baseDelay - lineIndex * 8,
+        // Stagger each line by 8 frames
+        fps: fps,
+        config: {
+          damping: 15,
+          stiffness: 120,
+          mass: 1
+        }
+      });
+      var opacity = lineAnimation;
+      var translateY = (1 - lineAnimation) * 15; // Slide from top
+
+      return /*#__PURE__*/React.createElement("div", {
+        key: lineIndex,
+        style: {
+          opacity: opacity,
+          transform: "translateY(".concat(translateY, "px)"),
+          lineHeight: calculatedFontSize * 1.6 / 16 + "rem"
+        }
+      }, line);
+    });
+  };
+
+  // Divider line animation - starts after text lines finish
+  var dividerStartFrame = 15 + textLines.length * 8 + 5; // 5 frame buffer after last line
+  var dividerAnimation = spring({
+    frame: frame - dividerStartFrame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 150,
+      mass: 0.8
+    }
+  });
+
+  // Character animation for sentenceTextTwo
+  var renderAnimatedText = function renderAnimatedText(text) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
+    return text.split("").map(function (_char2, index) {
+      var charAnimation = spring({
+        frame: frame - baseDelay - index * 3,
+        // Stagger each character by 3 frames
+        fps: fps,
+        config: {
+          damping: 12,
+          stiffness: 200,
+          mass: 0.8
+        }
+      });
+      var opacity = charAnimation;
+      var translateX = (1 - charAnimation) * 15; // Slide from right
+
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: {
+          opacity: opacity,
+          transform: "translateX(".concat(translateX, "px)"),
+          display: "inline-block"
+        }
+      }, _char2 === " " ? "\xA0" : _char2, " ");
+    });
+  };
+  var logoPositionStyles = logoRight !== undefined && logoRight !== null ? {
+    right: logoRight
+  } : {
+    left: logoLeft
+  };
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "50%",
+      transform: "translateY(".concat(animatedBackgroundTranslateY, "px)"),
+      backgroundColor: "white",
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "0 0 50px 0",
+      backgroundColor: accentColor,
+      opacity: 0.2,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "0 0 100px 0",
+      backgroundColor: accentColor,
+      opacity: 0.4,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "0 0 150px 0",
+      backgroundColor: accentColor,
+      opacity: 0.6,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "0 0 200px 0",
+      backgroundColor: accentColor,
+      opacity: 0.8,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "0 0 250px 0",
+      backgroundColor: accentColor,
+      zIndex: 1
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: CHROME_PADDING * 2,
+      top: CHROME_PADDING * 2,
+      width: 120,
+      height: 120,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 3,
+      opacity: textOpacity
+    }
+  }, /*#__PURE__*/React.createElement(LottieAnimationGlobal, {
+    animationPath: "https://storage.googleapis.com/zync-media/assets/lottie/introvideo/animation.json",
+    autoplay: true,
+    loop: false,
+    primaryColor: accentContrast
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: CHROME_PADDING * 2,
+      right: CHROME_PADDING,
+      top: 0,
+      height: "50%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      zIndex: 3,
+      opacity: textOpacity
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: calculatedFontSize / 16 + "rem",
+      fontWeight: "normal",
+      color: accentContrast,
+      lineHeight: "1.1",
+      margin: 0,
+      marginBottom: "2rem",
+      fontFamily: fontFamily
+    }
+  }, renderAnimatedLines(textLines, 15)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "80px",
+      height: "10px",
+      backgroundColor: accentContrast,
+      marginBottom: "0.5rem",
+      marginTop: "2rem",
+      opacity: dividerAnimation,
+      transform: "translateY(".concat((1 - dividerAnimation) * 10, "px)")
+    }
+  }), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "4rem",
+      fontWeight: "500",
+      color: accentContrast,
+      margin: 0,
+      fontFamily: fontFamily,
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    }
+  }, renderAnimatedText(sentenceTextTwo, dividerStartFrame + 10))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      borderRadius: "0px",
+      width: "100%",
+      height: "".concat(animatedVideoHeight, "px"),
+      zIndex: 1,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: screenWidth,
+    containerHeight: animatedVideoHeight,
+    useAveragePosition: true,
+    centerHorizontally: false
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    muted: muted,
+    style: {
+      objectFit: "cover",
+      height: "100%",
+      aspectRatio: "16/9",
+      transform: "translateX(-50%)",
+      left: "50%",
+      position: "relative"
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: screenWidth,
+    height: screenHeight,
+    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: {
+      isolation: "isolate",
+      width: screenWidth,
+      height: screenHeight,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      borderRadius: "0px",
+      width: "100%",
+      height: "".concat(animatedVideoHeight, "px")
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    containerWidth: screenWidth,
+    containerHeight: animatedVideoHeight,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }))) : 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",
+      isolation: "isolate",
+      width: screenWidth,
+      height: screenHeight,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      borderRadius: "0px",
+      width: "100%",
+      height: "".concat(animatedVideoHeight, "px")
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    style: {
+      objectFit: "cover",
+      height: "100%",
+      aspectRatio: "16/9",
+      transform: "translateX(-50%)",
+      left: "50%",
+      position: "relative",
+      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: 20
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({
+      position: "fixed",
+      top: logoTop,
+      padding: 20,
+      zIndex: 10
+    }, logoPositionStyles)
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var Square = function Square(_ref3) {
+  var children = _ref3.children,
+    videoUrl = _ref3.videoUrl,
+    startVideoFrom = _ref3.startVideoFrom,
+    sentenceText = _ref3.sentenceText,
+    sentenceTextTwo = _ref3.sentenceTextTwo,
+    durationInFrames = _ref3.durationInFrames,
+    muted = _ref3.muted,
+    faceMetadata = _ref3.faceMetadata,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
+    logoUrl = _ref3.logoUrl,
+    logoLeft = _ref3.logoLeft,
+    logoTop = _ref3.logoTop,
+    logoRight = _ref3.logoRight,
+    virtualBgUrl = _ref3.virtualBgUrl,
+    showVirtual = _ref3.showVirtual;
+  var frame = useCurrentFrame();
+  var _useVideoConfigForFps4 = useVideoConfigForFps(),
+    fps = _useVideoConfigForFps4.fps;
+  var _useVideoConfig3 = useVideoConfig(),
+    screenWidth = _useVideoConfig3.width;
+  var _useTheme3 = useTheme(),
+    accentColor = _useTheme3.accentColor,
+    accentContrast = _useTheme3.accentContrast;
+
+  // Spring animation for entrance (slide in from left)
+  var entranceSpring = spring({
+    frame: frame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 100,
+      mass: 1
+    }
+  });
+
+  // Calculate when exit animation should start (30 frames before end)
+  var exitStartFrame = durationInFrames - 30;
+
+  // Calculate when text fade-out should start (15 frames before exit)
+  var fadeOutStartFrame = exitStartFrame - 15;
+
+  // Spring animation for text fade-out
+  var fadeOutSpring = spring({
+    frame: frame - fadeOutStartFrame,
+    fps: fps,
+    config: {
+      damping: 20,
+      stiffness: 150,
+      mass: 0.8
+    }
+  });
+
+  // Spring animation for exit (slide out to left)
+  var exitSpring = spring({
+    frame: frame - exitStartFrame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 100,
+      mass: 1
+    }
+  });
+
+  // Combine entrance and exit animations
+  var isExiting = frame >= exitStartFrame;
+  var slideProgress = isExiting ? 1 - exitSpring : entranceSpring;
+
+  // Calculate text opacity (fade out before exit)
+  var isFadingOut = frame >= fadeOutStartFrame;
+  var textOpacity = isFadingOut ? 1 - fadeOutSpring : 1;
+
+  // Background slide animation: starts at -800px, slides to -150px, then back to -800px
+  var animatedTranslateX = -150 + (1 - slideProgress) * -650; // -800px when slideProgress = 0, -150px when slideProgress = 1
+
+  // Video animations: start full screen, transition to translate right, then back to full screen
+  var animatedVideoTranslateX = slideProgress * (screenWidth * 0.25); // 0px when slideProgress = 0, 50% screen width when slideProgress = 1
+
+  // Animated text lines for sentenceText
+  var _useVideoConfig4 = useVideoConfig(),
+    screenHeight = _useVideoConfig4.height;
+  var maxFontSize = 4.5 * 16; // Convert rem to px (6.5rem * 16px/rem)
+  var maxWidth = screenWidth * 0.6;
+  var maxHeight = screenHeight;
+  var _distributeTextToFit3 = distributeTextToFit(sentenceText, maxWidth, maxHeight, maxFontSize),
+    textLines = _distributeTextToFit3.lines,
+    calculatedFontSize = _distributeTextToFit3.fontSize;
+  var renderAnimatedLines = function renderAnimatedLines(lines) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
+    return lines.map(function (line, lineIndex) {
+      var lineAnimation = spring({
+        frame: frame - baseDelay - lineIndex * 8,
+        // Stagger each line by 8 frames
+        fps: fps,
+        config: {
+          damping: 15,
+          stiffness: 120,
+          mass: 1
+        }
+      });
+      var opacity = lineAnimation;
+      var translateY = (1 - lineAnimation) * 15; // Slide from top
+
+      return /*#__PURE__*/React.createElement("div", {
+        key: lineIndex,
+        style: {
+          opacity: opacity,
+          transform: "translateY(".concat(translateY, "px)"),
+          lineHeight: calculatedFontSize * 1.2 / 16 + "rem"
+        }
+      }, line);
+    });
+  };
+
+  // Divider line animation - starts after text lines finish
+  var dividerStartFrame = 15 + textLines.length * 8 + 5; // 5 frame buffer after last line
+  var dividerAnimation = spring({
+    frame: frame - dividerStartFrame,
+    fps: fps,
+    config: {
+      damping: 15,
+      stiffness: 150,
+      mass: 0.8
+    }
+  });
+  var _distributeTextToFit4 = distributeTextToFit(sentenceTextTwo, screenWidth * 0.25, screenHeight, 3 * 16),
+    fontSize = _distributeTextToFit4.fontSize;
+
+  // Character animation for sentenceTextTwo
+  var renderAnimatedText = function renderAnimatedText(text) {
+    var baseDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
+    return text.split("").map(function (_char3, index) {
+      var charAnimation = spring({
+        frame: frame - baseDelay - index * 3,
+        // Stagger each character by 3 frames
+        fps: fps,
+        config: {
+          damping: 12,
+          stiffness: 200,
+          mass: 0.8
+        }
+      });
+      var opacity = charAnimation;
+      var translateX = (1 - charAnimation) * 15; // Slide from right
+
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: {
+          opacity: opacity,
+          transform: "translateX(".concat(translateX, "px)"),
+          display: "inline-block"
+        }
+      }, _char3 === " " ? "\xA0" : _char3, " ");
+    });
+  };
+  var logoPositionStyles = logoRight !== undefined && logoRight !== null ? {
+    right: logoRight
+  } : {
+    left: logoLeft
+  };
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "50%",
+      height: "100%",
+      transform: "scale(2) rotate(22.5deg) translateY(-50px) translateX(".concat(animatedTranslateX, "px)"),
+      backgroundColor: "white",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "10px",
+      backgroundColor: accentColor,
+      opacity: 0.2,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "20px",
+      backgroundColor: accentColor,
+      opacity: 0.4,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "30px",
+      backgroundColor: accentColor,
+      opacity: 0.6,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "40px",
+      backgroundColor: accentColor,
+      opacity: 0.8,
+      zIndex: 1
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: "50px",
+      backgroundColor: accentColor,
+      zIndex: 1
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: CHROME_PADDING * 2,
+      top: CHROME_PADDING * 2,
+      width: 120,
+      height: 120,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 2,
+      opacity: textOpacity
+    }
+  }, /*#__PURE__*/React.createElement(LottieAnimationGlobal, {
+    animationPath: "https://storage.googleapis.com/zync-media/assets/lottie/introvideo/animation.json",
+    autoplay: true,
+    loop: false,
+    primaryColor: accentContrast
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: CHROME_PADDING * 2,
+      right: CHROME_PADDING,
+      top: screenHeight * 0.2,
+      zIndex: 2,
+      opacity: textOpacity
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: calculatedFontSize / 16 + "rem",
+      fontWeight: "normal",
+      color: accentContrast,
+      lineHeight: "1.1",
+      margin: 0,
+      marginBottom: "2rem",
+      fontFamily: fontFamily
+    }
+  }, renderAnimatedLines(textLines, 15)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "80px",
+      height: "10px",
+      backgroundColor: accentContrast,
+      marginBottom: "0.5rem",
+      marginTop: "7.5rem",
+      opacity: dividerAnimation,
+      transform: "translateY(".concat((1 - dividerAnimation) * 10, "px)")
+    }
+  }), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: fontSize,
+      fontWeight: "500",
+      color: accentContrast,
+      margin: 0,
+      fontFamily: fontFamily,
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    }
+  }, renderAnimatedText(sentenceTextTwo, dividerStartFrame + 10)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      borderRadius: "0px",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      transform: "translateX(".concat(animatedVideoTranslateX, "px)"),
+      isolation: "isolate",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: screenWidth,
+    containerHeight: screenWidth,
+    useAveragePosition: true,
+    centerHorizontally: false
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    muted: muted,
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%"
+    }
+  })), noBackgroundVideoUrl && (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: {
+      isolation: "isolate",
+      width: screenWidth,
+      height: screenWidth,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      borderRadius: "0px",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      transform: "translateX(".concat(animatedVideoTranslateX, "px)")
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    containerWidth: screenWidth,
+    containerHeight: screenWidth,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }))) : null, noBackgroundVideoUrl && (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",
+      isolation: "isolate",
+      width: screenWidth,
+      height: screenWidth,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      borderRadius: "0px",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      transform: "translateX(".concat(animatedVideoTranslateX, "px)")
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      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: 20
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({
+      position: "fixed",
+      top: logoTop,
+      padding: 20,
+      zIndex: 20
+    }, logoPositionStyles)
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null);
+};
+var IntroVideo = function IntroVideo(_ref4) {
+  var videoUrl = _ref4.videoUrl,
+    startVideoFrom = _ref4.startVideoFrom,
+    _ref4$sentenceText = _ref4.sentenceText,
+    sentenceText = _ref4$sentenceText === void 0 ? "" : _ref4$sentenceText,
+    _ref4$sentenceTextTwo = _ref4.sentenceTextTwo,
+    sentenceTextTwo = _ref4$sentenceTextTwo === void 0 ? "John Smith" : _ref4$sentenceTextTwo,
+    logoUrl = _ref4.logoUrl,
+    children = _ref4.children,
+    sourceVideoOrientation = _ref4.sourceVideoOrientation,
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti,
+    durationInFrames = _ref4.durationInFrames,
+    muted = _ref4.muted,
+    faceMetadata = _ref4.faceMetadata,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl;
+  var _useVideoConfig5 = useVideoConfig(),
+    width = _useVideoConfig5.width,
+    height = _useVideoConfig5.height;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+
+  // Configure orientation-specific layouts
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        // Portrait: Orange background on top, video on bottom
+        videoWidth: width - 2 * CHROME_PADDING,
+        videoHeight: height * 0.5,
+        videoTop: height * 0.5 + CHROME_PADDING,
+        videoLeft: CHROME_PADDING,
+        backgroundHeight: height * 0.5,
+        logoTop: CHROME_PADDING,
+        logoRight: CHROME_PADDING,
+        IntroVideoComponent: Portrait
+      },
+      landscape: {
+        // Landscape: Orange background on left, video on right
+        videoWidth: width * 0.5,
+        videoHeight: height,
+        videoTop: 0,
+        videoLeft: width * 0.5,
+        backgroundWidth: width * 0.5,
+        logoTop: CHROME_PADDING,
+        logoRight: CHROME_PADDING,
+        IntroVideoComponent: Landscape
+      },
+      square: {
+        // Square: Orange background on left, video on right
+        videoWidth: width * 0.5 - CHROME_PADDING,
+        videoHeight: height - 2 * CHROME_PADDING,
+        videoTop: CHROME_PADDING,
+        videoLeft: width * 0.5 + CHROME_PADDING / 2,
+        backgroundWidth: width * 0.5,
+        logoTop: CHROME_PADDING,
+        logoRight: CHROME_PADDING,
+        IntroVideoComponent: Square
+      }
+    }),
+    IntroVideoComponent = _useOrientationBased.IntroVideoComponent,
+    videoWidth = _useOrientationBased.videoWidth,
+    videoHeight = _useOrientationBased.videoHeight,
+    videoTop = _useOrientationBased.videoTop,
+    videoLeft = _useOrientationBased.videoLeft,
+    backgroundWidth = _useOrientationBased.backgroundWidth,
+    backgroundHeight = _useOrientationBased.backgroundHeight,
+    logoTop = _useOrientationBased.logoTop,
+    logoLeft = _useOrientationBased.logoLeft,
+    logoRight = _useOrientationBased.logoRight,
+    orientation = _useOrientationBased.orientation;
+  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(IntroVideoComponent, {
+    videoUrl: videoUrl,
+    startVideoFrom: startVideoFrom,
+    sourceVideoOrientation: sourceVideoOrientation,
+    sentenceText: sentenceText,
+    sentenceTextTwo: sentenceTextTwo,
+    logoUrl: logoUrl,
+    logoLeft: logoLeft,
+    logoTop: logoTop,
+    logoRight: logoRight,
+    videoWidth: videoWidth,
+    videoHeight: videoHeight,
+    videoTop: videoTop,
+    videoLeft: videoLeft,
+    backgroundWidth: backgroundWidth,
+    backgroundHeight: backgroundHeight,
+    orientation: orientation,
+    durationInFrames: durationInFrames,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    showVirtual: showVirtual,
+    virtualBgUrl: virtualBgUrl
+  }, children));
+};
+export { IntroVideo };