@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,714 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import React from "react";
+import { AbsoluteFill, Audio, OffthreadVideo, useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../hooks/useOrientationBased.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 { VirtualBackground } from "../backgrounds/VirtualBackground";
+import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
+
+// Simple deterministic PRNG from a string seed
+var seedFromString = function seedFromString(str) {
+  var h = 2166136261 >>> 0;
+  for (var i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+};
+var mulberry32 = function mulberry32(a) {
+  return function () {
+    var t = a += 0x6d2b79f5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+};
+var seededRand = function seededRand(key) {
+  return mulberry32(seedFromString(key))();
+};
+var seededShuffle = function seededShuffle(arr, key) {
+  var rng = mulberry32(seedFromString(key));
+  var a = _toConsumableArray(arr);
+  for (var i = a.length - 1; i > 0; i--) {
+    var j = Math.floor(rng() * (i + 1));
+    var _ref = [a[j], a[i]];
+    a[i] = _ref[0];
+    a[j] = _ref[1];
+  }
+  return a;
+};
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+
+// Reuse the rotating words treatment from Keyword.jsx, but with
+// spring-in + continuous sine/cos drift and better fitting.
+var Word = function Word(_ref2) {
+  var word = _ref2.word,
+    index = _ref2.index,
+    fitParams = _ref2.fitParams,
+    _ref2$initialOffset = _ref2.initialOffset,
+    initialOffset = _ref2$initialOffset === void 0 ? {
+      x: 0,
+      y: 0
+    } : _ref2$initialOffset,
+    _ref2$driftScale = _ref2.driftScale,
+    driftScale = _ref2$driftScale === void 0 ? 1 : _ref2$driftScale;
+  // Fit lines similar to Keyword.jsx for backdrop usage
+  var _ref3 = fitParams || {},
+    maxWidth = _ref3.maxWidth,
+    maxHeight = _ref3.maxHeight,
+    maxFontSize = _ref3.maxFontSize;
+  var _distributeTextToFit = distributeTextToFit(word, maxWidth !== null && maxWidth !== void 0 ? maxWidth : 350, maxHeight !== null && maxHeight !== void 0 ? maxHeight : 120, maxFontSize !== null && maxFontSize !== void 0 ? maxFontSize : 54),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps;
+
+  // Per-index delayed linear fade-in to avoid fast motion on start
+  var delay = index * 6;
+  var t = Math.max(0, frame - delay);
+  var opacityIn = interpolate(t, [0, 12], [0, 1], {
+    easing: Easing.linear,
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+
+  // Gentle continuous drift to keep the backdrop alive
+  var tSeconds = (frame + index * 10) / fps; // seconds
+  var amp = 26 * driftScale; // base amplitude with per-word scale
+  var driftX = amp * Math.sin(tSeconds * 0.7 + index);
+  var driftY = amp * 0.6 * Math.cos(tSeconds * 0.9 + index * 0.5);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translate(".concat(((initialOffset.x || 0) + driftX).toFixed(2), "px, ").concat(((initialOffset.y || 0) + driftY).toFixed(2), "px)"),
+      display: "flex",
+      alignItems: "center",
+      gap: 30,
+      willChange: "transform",
+      opacity: opacityIn
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      width: 3,
+      height: 3,
+      borderRadius: "100%",
+      backgroundColor: "white",
+      border: "1px solid white",
+      padding: 9,
+      opacity: 0.85
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: 45,
+      height: 45,
+      transform: "translate(-50%, -50%)",
+      borderRadius: "100%",
+      border: "1px solid white",
+      opacity: 0.6
+    }
+  })), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "white",
+      textTransform: "uppercase",
+      fontWeight: 300,
+      letterSpacing: "10px",
+      fontSize: fontSize,
+      margin: 0,
+      height: 80,
+      display: "flex",
+      alignItems: "center",
+      gap: 20,
+      opacity: 0.95
+    }
+  }, lines.map(function (line, i) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: i,
+      style: {
+        willChange: "transform"
+      }
+    }, line);
+  })));
+};
+var RotatingWordsContainer = /*#__PURE__*/React.memo(function (_ref4) {
+  var _ref4$words = _ref4.words,
+    words = _ref4$words === void 0 ? [] : _ref4$words,
+    cloudMargins = _ref4.cloudMargins,
+    cloudMinDistancePct = _ref4.cloudMinDistancePct,
+    cloudSpreadDurationSeconds = _ref4.cloudSpreadDurationSeconds;
+  var frame = useCurrentFrame();
+  var _useVideoConfig2 = useVideoConfig(),
+    fps = _useVideoConfig2.fps,
+    durationInFrames = _useVideoConfig2.durationInFrames;
+  // Determine output orientation to adjust layout behavior
+  var _useOrientationBased = useOrientationBased({
+      portrait: {},
+      landscape: {},
+      square: {}
+    }),
+    orientation = _useOrientationBased.orientation;
+  var isWide = orientation === "landscape";
+
+  // Orientation-based fitting for words and randomization settings
+  var fitBase = React.useMemo(function () {
+    if (orientation === "landscape") {
+      return {
+        maxWidth: 1920,
+        maxHeight: 1080,
+        baseMaxFontSize: 110
+      };
+    }
+    if (orientation === "portrait") {
+      // Smaller to accommodate doubled words and free layout
+      return {
+        maxWidth: 1080,
+        maxHeight: 1920,
+        baseMaxFontSize: 90
+      };
+    }
+    // square: even smaller to accommodate tripled words
+    return {
+      maxWidth: 1080,
+      maxHeight: 1080,
+      baseMaxFontSize: 80
+    };
+  }, [orientation]);
+
+  // Build repeated and shuffled words list for portrait/square
+  var repeats = isWide ? 1 : orientation === "portrait" ? 3 : 3;
+  var displayWords = React.useMemo(function () {
+    if (!(words !== null && words !== void 0 && words.length)) return [];
+    var base = [];
+    for (var r = 0; r < repeats; r++) {
+      for (var i = 0; i < words.length; i++) base.push(words[i]);
+    }
+    if (repeats === 1) return base;
+    return seededShuffle(base, "kw-cloud-".concat(orientation, "-").concat(words.join("|")));
+  }, [words, repeats, orientation]);
+
+  // Generate non-overlapping-ish positions for portrait/square using a
+  // deterministic Poisson-like rejection sampling on percentage space.
+  var cloudPositions = React.useMemo(function () {
+    var _cloudMargins$x, _cloudMargins$y;
+    if (isWide) return [];
+    var n = (displayWords === null || displayWords === void 0 ? void 0 : displayWords.length) || 0;
+    if (!n) return [];
+    var rng = mulberry32(seedFromString("kw-positions-".concat(orientation, "-").concat(displayWords.join("|"))));
+    var marginX = (_cloudMargins$x = cloudMargins === null || cloudMargins === void 0 ? void 0 : cloudMargins.x) !== null && _cloudMargins$x !== void 0 ? _cloudMargins$x : 28; // %
+    var marginY = (_cloudMargins$y = cloudMargins === null || cloudMargins === void 0 ? void 0 : cloudMargins.y) !== null && _cloudMargins$y !== void 0 ? _cloudMargins$y : orientation === "portrait" ? 10 : 38; // %
+    var baseDist = cloudMinDistancePct !== null && cloudMinDistancePct !== void 0 ? cloudMinDistancePct : orientation === "portrait" ? 14 : 11; // % center distance
+    var scale = Math.min(1, Math.sqrt(18 / Math.max(n, 1)));
+    var minDist = baseDist * scale; // %
+    var attemptsPerItem = 80;
+    var taken = [];
+    var positions = [];
+    for (var i = 0; i < n; i++) {
+      var placed = false;
+      for (var a = 0; a < attemptsPerItem; a++) {
+        var x = marginX + rng() * (100 - marginX * 2);
+        var y = marginY + rng() * (100 - marginY * 2);
+        var ok = true;
+        for (var j = 0; j < taken.length; j++) {
+          var dx = x - taken[j].x;
+          var dy = y - taken[j].y;
+          var dist = Math.hypot(dx, dy);
+          if (dist < minDist) {
+            ok = false;
+            break;
+          }
+        }
+        if (ok) {
+          taken.push({
+            x: x,
+            y: y
+          });
+          positions.push({
+            x: x,
+            y: y
+          });
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) {
+        // Fallback: place on a ring with slightly smaller spacing
+        var angle = rng() * Math.PI * 2;
+        var r = 40 + rng() * 8; // 40-48% radius ring
+        var _x = 50 + r * Math.cos(angle) * 0.9;
+        var _y = 50 + r * Math.sin(angle) * 0.9;
+        taken.push({
+          x: _x,
+          y: _y
+        });
+        positions.push({
+          x: _x,
+          y: _y
+        });
+      }
+    }
+    return positions;
+  }, [isWide, displayWords, orientation, cloudMargins, cloudMinDistancePct]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: fontFamily,
+      position: "absolute",
+      inset: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: isWide ? "flex" : undefined,
+      flexDirection: isWide ? "column" : undefined,
+      position: isWide ? undefined : "relative",
+      height: "100%",
+      width: "100%",
+      justifyContent: isWide ? "space-evenly" : undefined,
+      alignItems: isWide ? "center" : undefined,
+      padding: isWide ? "4% 6%" : "2% 6%"
+    }
+  }, (isWide ? words : displayWords).map(function (word, index) {
+    var t = (frame + index * 8) / fps;
+    var sideParallaxY = Math.sin(t) * 12; // gentle vertical parallax
+    var sideParallaxYOpp = Math.cos(t * 0.9) * 10; // opposite phase for other side
+
+    // Deterministic per-word jitter for max font and initial offset
+    var seedKey = "".concat(word, "-").concat(index);
+    var r1 = seededRand(seedKey + "-a");
+    var r2 = seededRand(seedKey + "-b");
+    var r3 = seededRand(seedKey + "-c");
+    var r4 = seededRand(seedKey + "-d");
+
+    // Slight font jitter (+/-6%)
+    var fontJitter = 0.94 + r1 * 0.12; // [0.94, 1.06]
+    var fitParams = {
+      maxWidth: fitBase.maxWidth,
+      maxHeight: fitBase.maxHeight,
+      maxFontSize: Math.round(fitBase.baseMaxFontSize * fontJitter)
+    };
+
+    // Landscape: small initial offsets; Portrait/Square use absolute layout below
+    var initialOffset = isWide ? {
+      x: (r2 - 0.5) * 120,
+      // [-60, 60] px
+      y: (r3 - 0.5) * 60 // [-30, 30] px
+    } : {
+      x: 0,
+      y: 0
+    };
+
+    // Per-word drift scale, wider range for free layout cloud
+    var driftScale = isWide ? 1 : 0.7 + r4 * 0.9; // [0.7, 1.6]
+
+    return isWide ? /*#__PURE__*/React.createElement("div", {
+      key: "".concat(word, "-").concat(index),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        minHeight: 80,
+        gap: "30px",
+        justifyContent: "flex-start"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index,
+      fitParams: fitParams,
+      initialOffset: initialOffset,
+      driftScale: driftScale
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: "75%",
+        transform: "translateY(".concat(sideParallaxY.toFixed(2), "px)"),
+        willChange: "transform",
+        pointerEvents: "none"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index,
+      fitParams: fitParams,
+      initialOffset: initialOffset,
+      driftScale: driftScale
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: "-75%",
+        transform: "translateY(".concat(sideParallaxYOpp.toFixed(2), "px)"),
+        willChange: "transform",
+        pointerEvents: "none"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index,
+      fitParams: fitParams,
+      initialOffset: initialOffset,
+      driftScale: driftScale
+    }))) :
+    /*#__PURE__*/
+    // Portrait/Square: absolute keyword cloud
+    React.createElement("div", {
+      key: "".concat(word, "-").concat(index),
+      style: {
+        position: "absolute",
+        // Time-evolving radial positions away from center; constant direction
+        left: function (_cloudMargins$x2, _cloudMargins$y2) {
+          var p = cloudPositions[index] || {
+            x: 50,
+            y: 50
+          };
+          var dx = p.x - 50;
+          var dy = p.y - 50;
+          var len = Math.hypot(dx, dy) || 1;
+          var ux = dx / len;
+          var uy = dy / len;
+          if (!isFinite(ux) || !isFinite(uy)) {
+            ux = 0.7071;
+            uy = 0.7071;
+          }
+          var marginX = (_cloudMargins$x2 = cloudMargins === null || cloudMargins === void 0 ? void 0 : cloudMargins.x) !== null && _cloudMargins$x2 !== void 0 ? _cloudMargins$x2 : 10;
+          var marginY = (_cloudMargins$y2 = cloudMargins === null || cloudMargins === void 0 ? void 0 : cloudMargins.y) !== null && _cloudMargins$y2 !== void 0 ? _cloudMargins$y2 : orientation === "portrait" ? 0 : 8;
+          var seconds = frame / fps;
+          var moveTime = Math.max(0.1, cloudSpreadDurationSeconds !== null && cloudSpreadDurationSeconds !== void 0 ? cloudSpreadDurationSeconds : durationInFrames / fps * 2);
+          var targetX = ux >= 0 ? 100 - marginX : marginX;
+          var targetY = uy >= 0 ? 100 - marginY : marginY;
+          var distX = Math.abs((targetX - p.x) / (ux || 1e-6));
+          var distY = Math.abs((targetY - p.y) / (uy || 1e-6));
+          var dAlong = Math.min(distX, distY);
+          var speedPct = dAlong / moveTime; // % per second along direction
+          var x = p.x + ux * seconds * speedPct;
+          var clamped = Math.max(marginX, Math.min(100 - marginX, x));
+          return "".concat(clamped.toFixed(2), "%");
+        }(),
+        top: function (_cloudMargins$x3, _cloudMargins$y3) {
+          var p = cloudPositions[index] || {
+            x: 50,
+            y: 50
+          };
+          var dx = p.x - 50;
+          var dy = p.y - 50;
+          var len = Math.hypot(dx, dy) || 1;
+          var ux = dx / len;
+          var uy = dy / len;
+          if (!isFinite(ux) || !isFinite(uy)) {
+            ux = 0.7071;
+            uy = 0.7071;
+          }
+          var marginX = (_cloudMargins$x3 = cloudMargins === null || cloudMargins === void 0 ? void 0 : cloudMargins.x) !== null && _cloudMargins$x3 !== void 0 ? _cloudMargins$x3 : 8;
+          var marginY = (_cloudMargins$y3 = cloudMargins === null || cloudMargins === void 0 ? void 0 : cloudMargins.y) !== null && _cloudMargins$y3 !== void 0 ? _cloudMargins$y3 : orientation === "portrait" ? 10 : 8;
+          var seconds = frame / fps;
+          var moveTime = Math.max(0.1, cloudSpreadDurationSeconds !== null && cloudSpreadDurationSeconds !== void 0 ? cloudSpreadDurationSeconds : durationInFrames / fps - 0.25);
+          var targetX = ux >= 0 ? 100 - marginX : marginX;
+          var targetY = uy >= 0 ? 100 - marginY : marginY;
+          var distX = Math.abs((targetX - p.x) / (ux || 1e-6));
+          var distY = Math.abs((targetY - p.y) / (uy || 1e-6));
+          var dAlong = Math.min(distX, distY);
+          var speedPct = dAlong / moveTime; // % per second along direction
+          var y = p.y + uy * seconds * speedPct;
+          var clamped = Math.max(marginY, Math.min(100 - marginY, y));
+          return "".concat(clamped.toFixed(2), "%");
+        }(),
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index,
+      fitParams: fitParams,
+      initialOffset: initialOffset,
+      driftScale: 0
+    }));
+  })));
+});
+var BackdropFrame = function BackdropFrame(_ref5) {
+  var children = _ref5.children,
+    width = _ref5.width,
+    height = _ref5.height,
+    startVideoFrom = _ref5.startVideoFrom,
+    videoUrl = _ref5.videoUrl,
+    noBackgroundVideoUrl = _ref5.noBackgroundVideoUrl,
+    sourceVideoOrientation = _ref5.sourceVideoOrientation,
+    faceMetadata = _ref5.faceMetadata,
+    noBackgroundVideoEffects = _ref5.noBackgroundVideoEffects,
+    logoUrl = _ref5.logoUrl,
+    logoLeft = _ref5.logoLeft,
+    logoTop = _ref5.logoTop,
+    frameColor = _ref5.frameColor,
+    words = _ref5.words,
+    cloudMargins = _ref5.cloudMargins,
+    cloudMinDistancePct = _ref5.cloudMinDistancePct,
+    cloudSpreadDurationSeconds = _ref5.cloudSpreadDurationSeconds,
+    _ref5$containerInset = _ref5.containerInset,
+    containerInset = _ref5$containerInset === void 0 ? {
+      top: 0.1,
+      side: 0.05
+    } : _ref5$containerInset,
+    _ref5$backdropProgres = _ref5.backdropProgress,
+    backdropProgress = _ref5$backdropProgres === void 0 ? 1 : _ref5$backdropProgres,
+    showVirtual = _ref5.showVirtual,
+    virtualBgUrl = _ref5.virtualBgUrl;
+  // Backdrop container dimensions similar to StudioBackdrop
+  var containerWidth = width * (1 - containerInset.side * 2);
+  var containerHeight = height * (1 - containerInset.top * 2);
+  var aspect = 16 / 9;
+  var maxBackdropWidth = Math.min(containerWidth, containerHeight * aspect);
+  var finalBackdropHeight = maxBackdropWidth / aspect;
+  var currentBackdropHeight = finalBackdropHeight * backdropProgress;
+  var backdropTop = height * containerInset.top;
+  var backdropLeft = width * containerInset.side + (containerWidth - maxBackdropWidth) / 2;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 1
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: virtualBgUrl,
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    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
+  }), backdropProgress > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      top: 0,
+      left: 0,
+      width: width,
+      height: height,
+      zIndex: 2,
+      opacity: 0.85 * backdropProgress,
+      borderRadius: "14px",
+      border: "16px solid rgba(255, 255, 255, 0.2)",
+      boxShadow: "0 10px 36px rgba(0, 0, 0, 0.35)",
+      backdropFilter: "blur(1.5px)",
+      WebkitBackdropFilter: "blur(1.5px)"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      mixBlendMode: "screen",
+      opacity: 0.35 // softer integration
+    },
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
+    startFrom: 120,
+    muted: true
+  }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
+    words: words,
+    cloudMargins: cloudMargins,
+    cloudMinDistancePct: cloudMinDistancePct,
+    cloudSpreadDurationSeconds: cloudSpreadDurationSeconds
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      background: "radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,0) 60%, rgba(0,0,0,0.25) 100%)",
+      mixBlendMode: "soft-light"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      width: width,
+      height: height,
+      top: 0,
+      left: 0,
+      zIndex: 3
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop && noBackgroundVideoUrl ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 14
+    }
+  }, 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 KeywordStudioBackdrop = function KeywordStudioBackdrop(_ref6) {
+  var videoUrl = _ref6.videoUrl,
+    startVideoFrom = _ref6.startVideoFrom,
+    _ref6$words = _ref6.words,
+    words = _ref6$words === void 0 ? [] : _ref6$words,
+    frameColor = _ref6.frameColor,
+    logoUrl = _ref6.logoUrl,
+    children = _ref6.children,
+    sourceVideoOrientation = _ref6.sourceVideoOrientation,
+    _ref6$disableTransiti = _ref6.disableTransitionSounds,
+    disableTransitionSounds = _ref6$disableTransiti === void 0 ? false : _ref6$disableTransiti,
+    noBackgroundVideoUrl = _ref6.noBackgroundVideoUrl,
+    durationInFrames = _ref6.durationInFrames,
+    faceMetadata = _ref6.faceMetadata,
+    muted = _ref6.muted,
+    noBackgroundVideoEffects = _ref6.noBackgroundVideoEffects,
+    cloudMargins = _ref6.cloudMargins,
+    cloudMinDistancePct = _ref6.cloudMinDistancePct,
+    cloudSpreadDurationSeconds = _ref6.cloudSpreadDurationSeconds;
+  var _useVideoConfig3 = useVideoConfig(),
+    width = _useVideoConfig3.width,
+    height = _useVideoConfig3.height,
+    fps = _useVideoConfig3.fps;
+  var frame = useCurrentFrame();
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var _useOrientationBased2 = useOrientationBased({
+      portrait: {
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2
+      },
+      landscape: {
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2
+      },
+      square: {
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2
+      }
+    }),
+    logoTop = _useOrientationBased2.logoTop,
+    logoLeft = _useOrientationBased2.logoLeft;
+
+  // Spring entrance/exit for backdrop reveal
+  var entranceEndFrame = fps * 0.5; // 0.5s
+  var exitStartFrame = Math.max(0, (durationInFrames || fps * 2) - fps * 1.5); // 1.5s before end
+
+  var backdropProgress = 0;
+  if (frame <= entranceEndFrame) {
+    backdropProgress = spring({
+      frame: frame,
+      fps: fps,
+      config: {
+        damping: 100,
+        stiffness: 160,
+        mass: 1
+      }
+    });
+  } else if (frame >= exitStartFrame) {
+    var exitFrame = frame - exitStartFrame;
+    var exitSpring = spring({
+      frame: exitFrame,
+      fps: fps,
+      config: {
+        damping: 300,
+        stiffness: 80,
+        mass: 4
+      }
+    });
+    backdropProgress = 1 - exitSpring;
+  } else {
+    backdropProgress = 1;
+  }
+  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(BackdropFrame, {
+    width: width,
+    height: height,
+    startVideoFrom: startVideoFrom,
+    videoUrl: videoUrl,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    sourceVideoOrientation: sourceVideoOrientation,
+    faceMetadata: faceMetadata,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    logoUrl: logoUrl,
+    logoLeft: logoLeft,
+    logoTop: logoTop,
+    frameColor: frameColor,
+    words: words,
+    cloudMargins: cloudMargins,
+    cloudMinDistancePct: cloudMinDistancePct,
+    cloudSpreadDurationSeconds: cloudSpreadDurationSeconds,
+    backdropProgress: backdropProgress,
+    showVirtual: showVirtual,
+    virtualBgUrl: virtualBgUrl
+  }, children));
+};
+export { KeywordStudioBackdrop };