@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,381 @@
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import React from "react";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
+import { CHROME_PADDING } from "../../config.js";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import { variants } from "../../main/lib/layouts/TextWithVideoLayout.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import PausableImg from "../utils/PausableImg";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackground } from "../backgrounds/VirtualBackground";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var landscapeClipPath = "polygon(100% 0%, 100% 100%, 7% 100%, 0 20%, 7% 0)";
+var portraitClipPath = "polygon(100% 0, 100% 95%, 10% 100%, 0 95%, 0% 0%)";
+var squareClipPath = "polygon(94% 0, 100% 14%, 89% 100%, 0% 100%, 0% 0%)";
+var Logo = function Logo(_ref) {
+  var logoUrl = _ref.logoUrl,
+    top = _ref.top,
+    left = _ref.left,
+    right = _ref.right;
+  return logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 1,
+      top: top,
+      left: left,
+      right: right
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    delayRenderTimeoutInMilliseconds: 60000,
+    src: logoUrl
+  })) : null;
+};
+export var PanningImage = function PanningImage(_ref2) {
+  var imageUrl = _ref2.imageUrl,
+    _ref2$style = _ref2.style,
+    style = _ref2$style === void 0 ? {} : _ref2$style;
+  var frame = useCurrentFrame();
+  var inputRange = [0, 100];
+  var scale = interpolate(frame, inputRange, [1.25, 1.55], {
+    extrapolateLeft: "clamp"
+  });
+  var rotate = interpolate(frame, inputRange, [0, 5], {
+    extrapolateLeft: "clamp"
+  });
+  if (!imageUrl) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    src: imageUrl,
+    delayRenderTimeoutInMilliseconds: 60000,
+    style: _objectSpread({
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      transform: "rotate(".concat(rotate, "deg) scale(").concat(scale, ")"),
+      willChange: "transform"
+    }, style)
+  }));
+};
+var MotionStillComponent = function MotionStillComponent(_ref3) {
+  var startVideoFrom = _ref3.startVideoFrom,
+    videoUrl = _ref3.videoUrl,
+    logoUrl = _ref3.logoUrl,
+    children = _ref3.children,
+    textColor = _ref3.textColor,
+    textBackgroundColor = _ref3.textBackgroundColor,
+    accentColor = _ref3.accentColor,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? variants.LEFT_TO_RIGHT : _ref3$variant,
+    imageUrl = _ref3.imageUrl,
+    durationInFrames = _ref3.durationInFrames,
+    faceMetadata = _ref3.faceMetadata,
+    muted = _ref3.muted,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var stylesByVariant = _defineProperty(_defineProperty({}, variants.RIGHT_TO_LEFT, {
+    flowDirection: "row-reverse",
+    logoLeft: CHROME_PADDING * 2,
+    logoRight: undefined
+  }), variants.LEFT_TO_RIGHT, {
+    flowDirection: "row",
+    logoLeft: undefined,
+    logoRight: CHROME_PADDING * 2
+  });
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        imageContainerOutputRange: [-height, -height * 0.35],
+        targetVideoWidth: width - 2 * CHROME_PADDING,
+        targetVideoHeight: height * 0.4,
+        clipPath: portraitClipPath,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2 - 5,
+        logoRight: undefined,
+        flowDirection: "column-reverse"
+      },
+      landscape: {
+        imageContainerOutputRange: [width, width * 0.35],
+        targetVideoWidth: width * 0.45,
+        targetVideoHeight: height,
+        clipPath: landscapeClipPath,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: stylesByVariant[variant].logoLeft,
+        logoRight: stylesByVariant[variant].logoRight,
+        flowDirection: "row"
+      },
+      square: {
+        imageContainerOutputRange: [-width, -width * 0.45],
+        targetVideoWidth: width * 0.6,
+        targetVideoHeight: height,
+        clipPath: squareClipPath,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: stylesByVariant[variant].logoLeft,
+        logoRight: stylesByVariant[variant].logoRight,
+        flowDirection: "row-reverse"
+      }
+    }),
+    imageContainerOutputRange = _useOrientationBased.imageContainerOutputRange,
+    targetVideoWidth = _useOrientationBased.targetVideoWidth,
+    targetVideoHeight = _useOrientationBased.targetVideoHeight,
+    clipPath = _useOrientationBased.clipPath,
+    logoTop = _useOrientationBased.logoTop,
+    logoLeft = _useOrientationBased.logoLeft,
+    logoRight = _useOrientationBased.logoRight,
+    flowDirection = _useOrientationBased.flowDirection,
+    orientation = _useOrientationBased.orientation;
+  var isPortrait = orientation === "portrait";
+
+  // Animation timing configuration
+  var entranceEndTime = 0.5; // 0.5 seconds for entrance
+  var exitStartTime = durationInFrames ? durationInFrames / fps - 0.5 : null; // 0.5 seconds before end for exit
+  var currentTime = frame / fps;
+  var animationProgress = 0;
+  if (durationInFrames && exitStartTime && currentTime >= exitStartTime) {
+    // Exit animation - reverse the progress
+    var exitProgress = (currentTime - exitStartTime) / 0.5;
+    animationProgress = Math.max(0, 1 - exitProgress);
+  } else if (currentTime <= entranceEndTime) {
+    // Entrance animation
+    animationProgress = Math.min(1, currentTime / entranceEndTime);
+  } else {
+    // Middle section - fully animated
+    animationProgress = 1;
+  }
+
+  // Apply easing to the progress
+  var easedProgress = Easing["in"](Easing.quad)(animationProgress);
+
+  // Calculate animated values based on progress
+  var imageContainerTranslate = imageContainerOutputRange[0] + (imageContainerOutputRange[1] - imageContainerOutputRange[0]) * easedProgress;
+  var videoWidth = width + (targetVideoWidth - width) * easedProgress;
+  var videoHeight = height + (targetVideoHeight - height) * easedProgress;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      padding: CHROME_PADDING,
+      backgroundColor: accentColor,
+      overflow: "hidden",
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 999,
+      height: CHROME_PADDING,
+      width: width,
+      top: 0,
+      backgroundColor: accentColor
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 999,
+      width: CHROME_PADDING,
+      height: height,
+      right: 0,
+      backgroundColor: accentColor
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 999,
+      width: CHROME_PADDING,
+      height: height,
+      left: 0,
+      backgroundColor: accentColor
+    }
+  }), /*#__PURE__*/React.createElement(Logo, {
+    logoUrl: logoUrl,
+    top: logoTop,
+    left: logoLeft,
+    right: logoRight
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: flowDirection,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    transparent: false,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: videoWidth,
+    containerHeight: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+    containerStyle: {
+      display: "flex",
+      justifyContent: orientation === "landscape" ? "start" : "end",
+      alignItems: "end",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: videoWidth,
+      height: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+      overflow: "hidden",
+      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: videoWidth
+    }
+  })), showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: CHROME_PADDING,
+    left: CHROME_PADDING,
+    width: width - CHROME_PADDING * 2,
+    height: height - CHROME_PADDING * 2,
+    borderRadius: "0px",
+    zIndex: 1
+  }) : null, /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 0
+  }), 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: CHROME_PADDING,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: flowDirection,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    transparent: true,
+    muted: true,
+    faceMetadata: faceMetadata,
+    containerWidth: videoWidth,
+    containerHeight: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+    containerStyle: {
+      display: "flex",
+      justifyContent: orientation === "landscape" ? "start" : "end",
+      alignItems: "end"
+    },
+    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",
+      padding: CHROME_PADDING,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: flowDirection,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: videoWidth,
+      height: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: videoWidth,
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+    }
+  })))) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      backgroundColor: textBackgroundColor,
+      color: textColor,
+      fontFamily: fontFamily,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      clipPath: clipPath,
+      width: "100%",
+      transform: "translateX(".concat(isPortrait ? 0 : imageContainerTranslate, "px) translateY(").concat(isPortrait ? imageContainerTranslate : 0, "px)"),
+      height: height - CHROME_PADDING * 2,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(PanningImage, {
+    imageUrl: imageUrl
+  })))), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 20
+    }
+  }, children));
+};
+export var MotionStill = function MotionStill(props) {
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var _ref4 = props || {},
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti;
+  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(MotionStillComponent, _extends({}, props, {
+    textBackgroundColor: primaryContrast,
+    textColor: primaryColor,
+    accentColor: accentColor,
+    variant: props.variant,
+    durationInFrames: props.durationInFrames
+  })));
+};

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

@@ -0,0 +1,178 @@
+import React from "react";
+import { AbsoluteFill, Img, OffthreadVideo, Audio, Easing, Sequence, useVideoConfig } from "remotion";
+import { CHROME_PADDING } from "../../config.js";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import { PanningImage } from "./MotionStill";
+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 BROLL_TIME_IN_FRAMES = 180;
+export var MotionStillFullScreen = function MotionStillFullScreen(_ref) {
+  var videoUrl = _ref.videoUrl,
+    startVideoFrom = _ref.startVideoFrom,
+    durationInFrames = _ref.durationInFrames,
+    muted = _ref.muted,
+    frameColor = _ref.frameColor,
+    logoUrl = _ref.logoUrl,
+    videoZoom = _ref.videoZoom,
+    imageUrl = _ref.imageUrl,
+    children = _ref.children,
+    sourceVideoOrientation = _ref.sourceVideoOrientation,
+    _ref$disableTransitio = _ref.disableTransitionSounds,
+    disableTransitionSounds = _ref$disableTransitio === void 0 ? false : _ref$disableTransitio,
+    faceMetadata = _ref.faceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var videoZoomInterpolated = useTimeInterpolate([0, 0.5], [1, videoZoom || 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var startFrame = durationInFrames / 2 - BROLL_TIME_IN_FRAMES / 2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: CHROME_PADDING,
+    left: CHROME_PADDING,
+    width: width - CHROME_PADDING * 2,
+    height: height - CHROME_PADDING * 2,
+    borderRadius: "30px",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    muted: muted,
+    src: videoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      borderRadius: "30px",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      transform: videoZoom ? "scale(".concat(videoZoomInterpolated, ")") : 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: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    muted: true,
+    transparent: true,
+    src: noBackgroundVideoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    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",
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      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,
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      transform: videoZoom ? "scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  }))) : null, /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement(Sequence, {
+    from: startFrame,
+    durationInFrames: BROLL_TIME_IN_FRAMES
+  }, /*#__PURE__*/React.createElement(PanningImage, {
+    imageUrl: imageUrl
+  }))), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: frameColor ? CHROME_PADDING : 25,
+      top: frameColor ? CHROME_PADDING : 25,
+      padding: 20,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null));
+};