@zync/zync-screnplay-player 0.1.218 → 0.1.220

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

@@ -0,0 +1,820 @@
+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, OffthreadVideo, Sequence, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont as loadHeadlineFont } from "@remotion/google-fonts/Oswald";
+import { CHROME_PADDING } from "../../config.js";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import PausableImg from "../utils/PausableImg";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+var _loadHeadlineFont = loadHeadlineFont(),
+  headlineFontFamily = _loadHeadlineFont.fontFamily;
+var HOOK_STYLE_PRESETS = {
+  punch_zoom: "punch_zoom",
+  mono_shock: "mono_shock",
+  glitch_verdict: "glitch_verdict",
+  border_alarm: "border_alarm",
+  split_reveal: "split_reveal"
+};
+var normalizeWordForMatch = function normalizeWordForMatch(word) {
+  return word.toLowerCase().replace(/^[^a-z0-9]+|[^a-z0-9]+$/gi, "");
+};
+var getAccentWordIndices = function getAccentWordIndices(text, accentText) {
+  if (!accentText) {
+    return new Set();
+  }
+  var sourceWords = text.split(/\s+/).filter(Boolean);
+  var accentWords = accentText.split(/\s+/).filter(Boolean);
+  if (!sourceWords.length || !accentWords.length) {
+    return new Set();
+  }
+  var normalizedSourceWords = sourceWords.map(normalizeWordForMatch);
+  var normalizedAccentWords = accentWords.map(normalizeWordForMatch);
+  var _loop = function _loop(start) {
+      var matches = true;
+      for (var i = 0; i < normalizedAccentWords.length; i += 1) {
+        if (normalizedSourceWords[start + i] !== normalizedAccentWords[i]) {
+          matches = false;
+          break;
+        }
+      }
+      if (matches) {
+        return {
+          v: new Set(Array.from({
+            length: normalizedAccentWords.length
+          }, function (_, index) {
+            return start + index;
+          }))
+        };
+      }
+    },
+    _ret;
+  for (var start = 0; start <= normalizedSourceWords.length - normalizedAccentWords.length; start += 1) {
+    _ret = _loop(start);
+    if (_ret) return _ret.v;
+  }
+  return new Set();
+};
+var buildLineWordEntries = function buildLineWordEntries(lines) {
+  var globalIndex = 0;
+  return lines.map(function (line) {
+    return line.split(/\s+/).filter(Boolean).map(function (word) {
+      return {
+        text: word,
+        globalIndex: globalIndex++
+      };
+    });
+  });
+};
+var getWordStartFrame = function getWordStartFrame(globalIndex, totalWords, typingFrames) {
+  if (totalWords <= 1) {
+    return 0;
+  }
+  return globalIndex / Math.max(totalWords - 1, 1) * Math.max(typingFrames - 1, 0);
+};
+var buildLineRuns = function buildLineRuns(lineWords, accentWordIndices) {
+  var runs = [];
+  var accentGroup = null;
+  lineWords.forEach(function (word) {
+    var isAccent = accentWordIndices.has(word.globalIndex);
+    if (isAccent) {
+      if (!accentGroup) {
+        accentGroup = {
+          type: "accent_group",
+          words: []
+        };
+      }
+      accentGroup.words.push(word);
+      return;
+    }
+    if (accentGroup) {
+      runs.push(accentGroup);
+      accentGroup = null;
+    }
+    runs.push({
+      type: "word",
+      word: word
+    });
+  });
+  if (accentGroup) {
+    runs.push(accentGroup);
+  }
+  return runs;
+};
+var getHookTiming = function getHookTiming(_ref) {
+  var durationInFrames = _ref.durationInFrames,
+    hookDurationSeconds = _ref.hookDurationSeconds,
+    fps = _ref.fps;
+  var requestedHookFrames = Math.max(1, Math.round((hookDurationSeconds !== null && hookDurationSeconds !== void 0 ? hookDurationSeconds : 1.6) * fps));
+  if (durationInFrames < 30) {
+    return {
+      requestedHookFrames: requestedHookFrames,
+      effectiveHookFrames: durationInFrames,
+      settleFrames: 0,
+      shortSegment: true
+    };
+  }
+  var effectiveHookFrames = Math.min(requestedHookFrames, Math.max(12, durationInFrames - 18));
+  return {
+    requestedHookFrames: requestedHookFrames,
+    effectiveHookFrames: effectiveHookFrames,
+    settleFrames: Math.min(18, Math.max(0, durationInFrames - effectiveHookFrames)),
+    shortSegment: false
+  };
+};
+var getVideoTreatment = function getVideoTreatment(_ref2) {
+  var frame = _ref2.frame,
+    style = _ref2.style,
+    hookFrames = _ref2.hookFrames,
+    settleFrames = _ref2.settleFrames,
+    durationInFrames = _ref2.durationInFrames,
+    baseZoom = _ref2.baseZoom;
+  var settleStartFrame = hookFrames;
+  var introEndScale = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, baseZoom * 1.06), HOOK_STYLE_PRESETS.mono_shock, baseZoom * 1.03), HOOK_STYLE_PRESETS.glitch_verdict, baseZoom * 1.02), HOOK_STYLE_PRESETS.border_alarm, baseZoom * 1.04), HOOK_STYLE_PRESETS.split_reveal, baseZoom * 1.05)[style];
+  var peakScale = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, baseZoom * 1.22), HOOK_STYLE_PRESETS.mono_shock, baseZoom * 1.12), HOOK_STYLE_PRESETS.glitch_verdict, baseZoom * 1.14), HOOK_STYLE_PRESETS.border_alarm, baseZoom * 1.1), HOOK_STYLE_PRESETS.split_reveal, baseZoom * 1.16)[style];
+  var startX = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, 0), HOOK_STYLE_PRESETS.mono_shock, -18), HOOK_STYLE_PRESETS.glitch_verdict, 10), HOOK_STYLE_PRESETS.border_alarm, 0), HOOK_STYLE_PRESETS.split_reveal, 34)[style];
+  var endX = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, 0), HOOK_STYLE_PRESETS.mono_shock, 0), HOOK_STYLE_PRESETS.glitch_verdict, 0), HOOK_STYLE_PRESETS.border_alarm, 0), HOOK_STYLE_PRESETS.split_reveal, 0)[style];
+  var translateYPeak = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, -8), HOOK_STYLE_PRESETS.mono_shock, 0), HOOK_STYLE_PRESETS.glitch_verdict, -4), HOOK_STYLE_PRESETS.border_alarm, 0), HOOK_STYLE_PRESETS.split_reveal, 0)[style];
+  var scaleDuringHook = interpolate(frame, [0, hookFrames], [peakScale, introEndScale], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var translateXDuringHook = interpolate(frame, [0, hookFrames], [startX, endX], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var translateYDuringHook = interpolate(frame, [0, hookFrames], [translateYPeak, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var settleEndFrame = Math.min(durationInFrames, settleStartFrame + settleFrames);
+  var scale = settleFrames ? interpolate(frame, [settleStartFrame, settleEndFrame], [introEndScale, baseZoom], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : scaleDuringHook;
+  var translateX = settleFrames ? interpolate(frame, [settleStartFrame, settleEndFrame], [translateXDuringHook, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : translateXDuringHook;
+  var translateY = settleFrames ? interpolate(frame, [settleStartFrame, settleEndFrame], [translateYDuringHook, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : translateYDuringHook;
+  var grayscale = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, 0.05), HOOK_STYLE_PRESETS.mono_shock, interpolate(frame, [0, hookFrames], [1, 0.15], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })), HOOK_STYLE_PRESETS.glitch_verdict, interpolate(frame, [0, hookFrames], [0.45, 0.1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })), HOOK_STYLE_PRESETS.border_alarm, 0), HOOK_STYLE_PRESETS.split_reveal, 0)[style];
+  var saturate = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, 1.45), HOOK_STYLE_PRESETS.mono_shock, 0.85), HOOK_STYLE_PRESETS.glitch_verdict, 1.35), HOOK_STYLE_PRESETS.border_alarm, 1.2), HOOK_STYLE_PRESETS.split_reveal, 1.12)[style];
+  var contrast = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, 1.15), HOOK_STYLE_PRESETS.mono_shock, 1.35), HOOK_STYLE_PRESETS.glitch_verdict, 1.3), HOOK_STYLE_PRESETS.border_alarm, 1.16), HOOK_STYLE_PRESETS.split_reveal, 1.12)[style];
+  var brightness = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, 0.98), HOOK_STYLE_PRESETS.mono_shock, 0.92), HOOK_STYLE_PRESETS.glitch_verdict, 0.9), HOOK_STYLE_PRESETS.border_alarm, 0.95), HOOK_STYLE_PRESETS.split_reveal, 0.98)[style];
+  return {
+    transform: "translate3d(".concat(translateX, "px, ").concat(translateY, "px, 0) scale(").concat(scale, ")"),
+    filter: "grayscale(".concat(grayscale, ") contrast(").concat(contrast, ") brightness(").concat(brightness, ") saturate(").concat(saturate, ")")
+  };
+};
+var HookHeadline = function HookHeadline(_ref3) {
+  var hookText = _ref3.hookText,
+    hookAccentText = _ref3.hookAccentText,
+    maxWidth = _ref3.maxWidth,
+    maxHeight = _ref3.maxHeight,
+    maxFontSize = _ref3.maxFontSize,
+    align = _ref3.align,
+    accentColor = _ref3.accentColor,
+    accentContrast = _ref3.accentContrast,
+    primaryContrast = _ref3.primaryContrast,
+    style = _ref3.style,
+    frame = _ref3.frame,
+    fps = _ref3.fps,
+    hookFrames = _ref3.hookFrames;
+  var _distributeTextToFit = distributeTextToFit(hookText, maxWidth, maxHeight, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  var lineWordEntries = buildLineWordEntries(lines);
+  var totalWords = lineWordEntries.reduce(function (count, lineWords) {
+    return count + lineWords.length;
+  }, 0);
+  var accentWordIndices = getAccentWordIndices(hookText, hookAccentText);
+  var reveal = spring({
+    frame: frame - 2,
+    fps: fps,
+    config: {
+      damping: 14,
+      stiffness: 160,
+      mass: 0.7
+    }
+  });
+  var outroOpacity = interpolate(frame, [Math.max(hookFrames - 8, 0), hookFrames], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var glitchOffset = style === HOOK_STYLE_PRESETS.glitch_verdict ? (frame % 2 === 0 ? 1 : -1) * 4 : 0;
+  var headlineColor = style === HOOK_STYLE_PRESETS.mono_shock ? "rgba(255, 255, 255, 0.98)" : primaryContrast || "#ffffff";
+  var headlineTextShadow = style === HOOK_STYLE_PRESETS.glitch_verdict ? "3px 0 rgba(255, 40, 95, 0.9), -3px 0 rgba(0, 240, 255, 0.9), 0 10px 40px rgba(0, 0, 0, 0.55)" : style === HOOK_STYLE_PRESETS.mono_shock ? "0 3px 0 rgba(0, 0, 0, 0.48), 0 14px 36px rgba(0, 0, 0, 0.62)" : "0 12px 36px rgba(0, 0, 0, 0.45)";
+  var containerStyle = style === HOOK_STYLE_PRESETS.mono_shock ? {
+    display: "inline-flex",
+    flexDirection: "column",
+    padding: "24px 30px 20px",
+    borderRadius: 28,
+    background: "linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.56) 58%, rgba(0, 0, 0, 0.14) 100%)",
+    backdropFilter: "blur(6px)",
+    boxShadow: "0 22px 48px rgba(0, 0, 0, 0.35)"
+  } : undefined;
+  var typingFrames = totalWords ? Math.max(10, Math.min(Math.round(hookFrames * 0.45), totalWords * 4)) : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: reveal * outroOpacity,
+      transform: "translate3d(".concat(glitchOffset, "px, ").concat((1 - reveal) * 24, "px, 0) scale(").concat(0.94 + reveal * 0.06, ")"),
+      willChange: "transform, opacity",
+      maxWidth: maxWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, containerStyle), {}, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: align === "center" ? "center" : "flex-start",
+      textAlign: align,
+      gap: fontSize * 0.12,
+      fontFamily: headlineFontFamily,
+      fontSize: fontSize,
+      lineHeight: 0.96,
+      letterSpacing: "-0.03em",
+      fontWeight: 700,
+      textTransform: "uppercase",
+      color: headlineColor,
+      textShadow: headlineTextShadow
+    })
+  }, lineWordEntries.map(function (lineWords, lineIndex) {
+    var lineRuns = buildLineRuns(lineWords, accentWordIndices);
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(lines[lineIndex], "-").concat(lineIndex),
+      style: {
+        display: "flex",
+        justifyContent: align === "center" ? "center" : "flex-start",
+        alignItems: "flex-start",
+        flexWrap: "nowrap",
+        minHeight: fontSize * 1.02
+      }
+    }, lineRuns.map(function (run, runIndex) {
+      if (run.type === "accent_group") {
+        var firstWordStartFrame = getWordStartFrame(run.words[0].globalIndex, totalWords, typingFrames);
+        var firstWordReveal = spring({
+          frame: frame - firstWordStartFrame + 2,
+          fps: fps,
+          config: {
+            damping: 20,
+            stiffness: 260,
+            mass: 0.55
+          }
+        });
+        var accentGroupOpacity = Math.max(0, Math.min(1, firstWordReveal));
+        var accentGroupVisible = frame + 2 >= firstWordStartFrame;
+        var visibleWords = run.words.filter(function (word) {
+          var wordStartFrame = getWordStartFrame(word.globalIndex, totalWords, typingFrames);
+          return frame + 2 >= wordStartFrame;
+        });
+        if (!visibleWords.length) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement("span", {
+          key: "accent-group-".concat(run.words[0].globalIndex),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            opacity: accentGroupVisible ? accentGroupOpacity : 0,
+            transform: "translateY(".concat(accentGroupVisible ? (1 - accentGroupOpacity) * 10 : 10, "px) scale(").concat(accentGroupVisible ? 0.985 + accentGroupOpacity * 0.015 : 0.985, ")"),
+            filter: "blur(".concat(accentGroupVisible ? (1 - accentGroupOpacity) * 5 : 5, "px)"),
+            backgroundColor: accentColor,
+            color: accentContrast || "#000000",
+            padding: "0.08em 0.16em 0.12em",
+            marginRight: runIndex === lineRuns.length - 1 ? 0 : "0.12em",
+            borderRadius: "0.12em",
+            boxShadow: "0 0.2em 1em rgba(0, 0, 0, 0.22)",
+            textShadow: "none",
+            willChange: "transform, opacity, filter"
+          }
+        }, visibleWords.map(function (word, visibleWordIndex) {
+          var wordStartFrame = getWordStartFrame(word.globalIndex, totalWords, typingFrames);
+          var wordReveal = spring({
+            frame: frame - wordStartFrame + 2,
+            fps: fps,
+            config: {
+              damping: 20,
+              stiffness: 260,
+              mass: 0.55
+            }
+          });
+          var wordRevealProgress = Math.max(0, Math.min(1, wordReveal));
+          return /*#__PURE__*/React.createElement("span", {
+            key: "".concat(word.text, "-").concat(word.globalIndex),
+            style: {
+              display: "inline-block",
+              opacity: wordRevealProgress,
+              transform: "translateY(".concat((1 - wordRevealProgress) * 8, "px)"),
+              filter: "blur(".concat((1 - wordRevealProgress) * 3, "px)"),
+              marginRight: visibleWordIndex === visibleWords.length - 1 ? 0 : "0.1em",
+              willChange: "transform, opacity, filter"
+            }
+          }, word.text);
+        }));
+      }
+      var word = run.word;
+      var wordStartFrame = getWordStartFrame(word.globalIndex, totalWords, typingFrames);
+      var wordReveal = spring({
+        frame: frame - wordStartFrame + 2,
+        fps: fps,
+        config: {
+          damping: 20,
+          stiffness: 260,
+          mass: 0.55
+        }
+      });
+      var wordRevealProgress = Math.max(0, Math.min(1, wordReveal));
+      var wordVisible = frame + 2 >= wordStartFrame;
+      return /*#__PURE__*/React.createElement("span", {
+        key: "".concat(word.text, "-").concat(word.globalIndex),
+        style: {
+          display: "inline-block",
+          opacity: wordVisible ? wordRevealProgress : 0,
+          transform: "translateY(".concat(wordVisible ? (1 - wordRevealProgress) * 10 : 10, "px) scale(").concat(wordVisible ? 0.985 + wordRevealProgress * 0.015 : 0.985, ")"),
+          filter: "blur(".concat(wordVisible ? (1 - wordRevealProgress) * 6 : 6, "px)"),
+          color: headlineColor,
+          textShadow: headlineTextShadow,
+          marginRight: runIndex === lineRuns.length - 1 ? 0 : "0.12em",
+          willChange: "transform, opacity, filter"
+        }
+      }, word.text);
+    }));
+  })));
+};
+var HookVideoLayer = function HookVideoLayer(_ref4) {
+  var videoUrl = _ref4.videoUrl,
+    startVideoFrom = _ref4.startVideoFrom,
+    muted = _ref4.muted,
+    faceMetadata = _ref4.faceMetadata,
+    sourceVideoOrientation = _ref4.sourceVideoOrientation,
+    plateRadius = _ref4.plateRadius,
+    renderWidth = _ref4.renderWidth,
+    renderHeight = _ref4.renderHeight,
+    transform = _ref4.transform,
+    filter = _ref4.filter;
+  if (faceMetadata) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        borderRadius: plateRadius,
+        transform: transform,
+        filter: filter
+      }
+    }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      src: videoUrl,
+      startFrom: startVideoFrom,
+      containerWidth: renderWidth,
+      containerHeight: renderHeight,
+      faceMetadata: faceMetadata,
+      useAveragePosition: true,
+      centerHorizontally: false,
+      muted: muted
+    }));
+  }
+  return /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      borderRadius: plateRadius,
+      objectPosition: sourceVideoOrientation === "portrait" ? "50% 28%" : "center center",
+      transform: transform,
+      filter: filter
+    }
+  });
+};
+export var HookVideo = function HookVideo(_ref5) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
+  var videoUrl = _ref5.videoUrl,
+    startVideoFrom = _ref5.startVideoFrom,
+    durationInFrames = _ref5.durationInFrames,
+    muted = _ref5.muted,
+    frameColor = _ref5.frameColor,
+    logoUrl = _ref5.logoUrl,
+    videoZoom = _ref5.videoZoom,
+    sourceVideoOrientation = _ref5.sourceVideoOrientation,
+    children = _ref5.children,
+    faceMetadata = _ref5.faceMetadata,
+    noBackgroundVideoEffects = _ref5.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref5.noBackgroundVideoUrl,
+    _ref5$disableTransiti = _ref5.disableTransitionSounds,
+    disableTransitionSounds = _ref5$disableTransiti === void 0 ? false : _ref5$disableTransiti,
+    _ref5$useSquareInLand = _ref5.useSquareInLandscape,
+    useSquareInLandscape = _ref5$useSquareInLand === void 0 ? false : _ref5$useSquareInLand,
+    hookText = _ref5.hookText,
+    _ref5$hookStyle = _ref5.hookStyle,
+    hookStyle = _ref5$hookStyle === void 0 ? HOOK_STYLE_PRESETS.punch_zoom : _ref5$hookStyle,
+    _ref5$hookDurationSec = _ref5.hookDurationSeconds,
+    hookDurationSeconds = _ref5$hookDurationSec === void 0 ? 1.6 : _ref5$hookDurationSec,
+    hookAccentText = _ref5.hookAccentText,
+    _ref5$disableHookSoun = _ref5.disableHookSounds,
+    disableHookSounds = _ref5$disableHookSoun === void 0 ? false : _ref5$disableHookSoun;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    outputWidth = _useVideoConfig.width,
+    outputHeight = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$props;
+  var outputOrientation = (compositionProps === null || compositionProps === void 0 ? void 0 : (_compositionProps$out = compositionProps.output) === null || _compositionProps$out === void 0 ? void 0 : _compositionProps$out.orientation) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : (_window$screenplayPro2 = _window$screenplayPro.output) === null || _window$screenplayPro2 === void 0 ? void 0 : _window$screenplayPro2.orientation : undefined);
+  var shouldUseSquareInLandscape = Boolean(useSquareInLandscape) && outputOrientation === "landscape";
+  var activeOrientation = (shouldUseSquareInLandscape ? "square" : outputOrientation) || (outputWidth === outputHeight ? "square" : outputWidth > outputHeight ? "landscape" : "portrait");
+  var squareSize = 1080;
+  var width = shouldUseSquareInLandscape ? squareSize : outputWidth;
+  var height = shouldUseSquareInLandscape ? squareSize : outputHeight;
+  var renderOffsetX = shouldUseSquareInLandscape ? (outputWidth - squareSize) / 2 : 0;
+  var orientationOverride = shouldUseSquareInLandscape ? "square" : undefined;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast,
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast;
+  var style = Object.values(HOOK_STYLE_PRESETS).includes(hookStyle) ? hookStyle : HOOK_STYLE_PRESETS.punch_zoom;
+  var baseZoom = videoZoom || 1;
+  var _getHookTiming = getHookTiming({
+      durationInFrames: durationInFrames,
+      hookDurationSeconds: hookDurationSeconds,
+      fps: fps
+    }),
+    effectiveHookFrames = _getHookTiming.effectiveHookFrames,
+    settleFrames = _getHookTiming.settleFrames,
+    shortSegment = _getHookTiming.shortSegment;
+  var preset = useOrientationBased({
+    landscape: {
+      textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.38 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.46 : width * 0.58,
+      textBoxHeight: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.38 : height * 0.54,
+      maxFontSize: style === HOOK_STYLE_PRESETS.glitch_verdict ? 138 : 148,
+      top: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.17 : height * 0.19,
+      left: style === HOOK_STYLE_PRESETS.split_reveal ? CHROME_PADDING * 2.2 : style === HOOK_STYLE_PRESETS.mono_shock || style === HOOK_STYLE_PRESETS.glitch_verdict ? CHROME_PADDING * 2.1 : width * 0.21,
+      align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
+    },
+    portrait: {
+      textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.78 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.76 : width * 0.84,
+      textBoxHeight: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.28 : height * 0.36,
+      maxFontSize: style === HOOK_STYLE_PRESETS.glitch_verdict ? 118 : 126,
+      top: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.18 : height * 0.16,
+      left: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? width * 0.08 : CHROME_PADDING * 1.8,
+      align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
+    },
+    square: {
+      textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.46 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.52 : width * 0.72,
+      textBoxHeight: style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.62 : style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.32 : height * 0.42,
+      maxFontSize: 116,
+      top: style === HOOK_STYLE_PRESETS.mono_shock ? height * 0.15 : style === HOOK_STYLE_PRESETS.split_reveal ? height * 0.16 : height * 0.18,
+      left: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? width * 0.14 : CHROME_PADDING * 1.8,
+      align: style === HOOK_STYLE_PRESETS.punch_zoom || style === HOOK_STYLE_PRESETS.border_alarm ? "center" : "left"
+    }
+  }, orientationOverride);
+  var monoOverlayHoldFrames = style === HOOK_STYLE_PRESETS.mono_shock ? Math.round(fps * 0.55) : 0;
+  var overlayFadeFrames = style === HOOK_STYLE_PRESETS.mono_shock ? 12 : 6;
+  var overlayEndFrame = shortSegment ? durationInFrames : Math.min(durationInFrames, effectiveHookFrames + monoOverlayHoldFrames);
+  var hookOverlayOpacity = shortSegment ? 1 : interpolate(frame, [Math.max(overlayEndFrame - overlayFadeFrames, 0), overlayEndFrame], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var childrenOpacity = shortSegment ? 0 : interpolate(frame, [overlayEndFrame, overlayEndFrame + Math.max(6, settleFrames)], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var logoOpacity = shortSegment ? 0 : style === HOOK_STYLE_PRESETS.mono_shock ? interpolate(frame, [overlayEndFrame, overlayEndFrame + Math.max(8, settleFrames + 4)], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : Math.max(childrenOpacity, 0.35);
+  var flashOpacity = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, interpolate(frame, [0, 2, 6], [0.48, 0.12, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })), HOOK_STYLE_PRESETS.mono_shock, interpolate(frame, [0, 4], [0.22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })), HOOK_STYLE_PRESETS.glitch_verdict, interpolate(frame, [0, 1, 5], [0.4, 0.18, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })), HOOK_STYLE_PRESETS.border_alarm, 0), HOOK_STYLE_PRESETS.split_reveal, 0)[style];
+  var letterboxHeight = style === HOOK_STYLE_PRESETS.mono_shock ? interpolate(frame, [0, effectiveHookFrames, overlayEndFrame], [0, height * 0.11, height * 0.11], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) * hookOverlayOpacity : 0;
+  var borderWidth = style === HOOK_STYLE_PRESETS.border_alarm ? interpolate(frame, [0, effectiveHookFrames], [24, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 0;
+  var splitPlateTranslate = style === HOOK_STYLE_PRESETS.split_reveal ? interpolate(frame, [0, effectiveHookFrames], [0, -width * 0.6], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 0;
+  var glitchOpacity = style === HOOK_STYLE_PRESETS.glitch_verdict ? interpolate(frame, [0, effectiveHookFrames], [0.34, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 0;
+  var _getVideoTreatment = getVideoTreatment({
+      frame: frame,
+      style: style,
+      hookFrames: effectiveHookFrames,
+      settleFrames: settleFrames,
+      durationInFrames: durationInFrames,
+      baseZoom: baseZoom
+    }),
+    videoTransform = _getVideoTreatment.transform,
+    videoFilter = _getVideoTreatment.filter;
+  var usesOuterFrame = Boolean(frameColor) && style !== HOOK_STYLE_PRESETS.mono_shock;
+  var plateRadius = style === HOOK_STYLE_PRESETS.mono_shock ? 0 : frameColor ? 30 : 0;
+  var outerPadding = usesOuterFrame ? CHROME_PADDING : 0;
+  var contentWidth = width - outerPadding * 2;
+  var contentHeight = height - outerPadding * 2;
+  var playHookSounds = !disableTransitionSounds && !disableHookSounds;
+  var monoShockInset = style === HOOK_STYLE_PRESETS.mono_shock && activeOrientation === "landscape" ? letterboxHeight : 0;
+  var monoShockRadius = style === HOOK_STYLE_PRESETS.mono_shock ? 0 : plateRadius;
+  var monoShockStageStyle = style === HOOK_STYLE_PRESETS.mono_shock ? {
+    position: "absolute",
+    inset: 0,
+    top: monoShockInset,
+    bottom: monoShockInset,
+    overflow: "hidden",
+    borderRadius: monoShockRadius
+  } : {
+    position: "absolute",
+    inset: 0,
+    overflow: "hidden",
+    borderRadius: plateRadius
+  };
+  var hookTint = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HOOK_STYLE_PRESETS.punch_zoom, "linear-gradient(135deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.06) 38%, ".concat(accentColor, "33 100%)")), HOOK_STYLE_PRESETS.mono_shock, "linear-gradient(100deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.54) 36%, rgba(14, 14, 18, 0.24) 72%, rgba(14, 14, 18, 0.4) 100%)"), HOOK_STYLE_PRESETS.glitch_verdict, "linear-gradient(140deg, rgba(5, 5, 5, 0.72), rgba(30, 30, 30, 0.24) 55%, rgba(255, 32, 112, 0.22) 100%)"), HOOK_STYLE_PRESETS.border_alarm, "radial-gradient(circle at center, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.55) 85%)"), HOOK_STYLE_PRESETS.split_reveal, "transparent")[style];
+  var content = /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      left: renderOffsetX,
+      top: 0
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: style === HOOK_STYLE_PRESETS.mono_shock ? primaryColor || "#5a4a86" : frameColor || "transparent",
+      padding: outerPadding,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      borderRadius: plateRadius,
+      backgroundColor: style === HOOK_STYLE_PRESETS.mono_shock ? primaryColor || "#5a4a86" : "#050505"
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: contentWidth,
+    height: contentHeight,
+    borderRadius: plateRadius,
+    zIndex: 0
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    style: monoShockStageStyle
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.78)" : undefined
+    }
+  }, /*#__PURE__*/React.createElement(HookVideoLayer, {
+    videoUrl: videoUrl,
+    startVideoFrom: startVideoFrom,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    sourceVideoOrientation: sourceVideoOrientation,
+    plateRadius: monoShockRadius,
+    renderWidth: contentWidth,
+    renderHeight: contentHeight,
+    transform: videoTransform,
+    filter: videoFilter
+  })), noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 4,
+      overflow: "hidden",
+      borderRadius: monoShockRadius,
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.08) contrast(1.14) saturate(1.04)" : undefined
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      transform: videoTransform
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: contentWidth,
+    containerHeight: contentHeight,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    muted: true,
+    transparent: true,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  })) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      borderRadius: monoShockRadius,
+      transform: videoTransform
+    }
+  })) : null, !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur && noBackgroundVideoUrl ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3,
+      backdropFilter: "blur(10px)"
+    }
+  }) : null), style === HOOK_STYLE_PRESETS.split_reveal ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      zIndex: 14,
+      opacity: hookOverlayOpacity,
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      width: width * 0.58,
+      transform: "translateX(".concat(splitPlateTranslate, "px)"),
+      background: "linear-gradient(135deg, ".concat(accentColor, "f0, ").concat(primaryColor, "f0 68%, rgba(0, 0, 0, 0.2))"),
+      clipPath: "polygon(0 0, 82% 0, 100% 100%, 0 100%)"
+    }
+  })) : null, hookTint !== "transparent" ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 11,
+      opacity: hookOverlayOpacity,
+      background: hookTint,
+      pointerEvents: "none"
+    }
+  }) : null, style === HOOK_STYLE_PRESETS.border_alarm ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 15,
+      opacity: hookOverlayOpacity,
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: Math.max(borderWidth / 2, 0),
+      border: "".concat(Math.max(borderWidth, 0), "px solid ").concat(accentColor),
+      borderRadius: Math.max(plateRadius, 18),
+      boxShadow: "0 0 0 1px rgba(255,255,255,0.25), 0 0 42px ".concat(accentColor, "66")
+    }
+  })) : null, style === HOOK_STYLE_PRESETS.mono_shock && letterboxHeight > 0 ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 15,
+      opacity: hookOverlayOpacity,
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: monoShockInset,
+      left: 0,
+      right: 0,
+      height: 2,
+      backgroundColor: "rgba(0, 0, 0, 0.38)",
+      boxShadow: "0 1px 0 rgba(255, 255, 255, 0.18)"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: monoShockInset,
+      left: 0,
+      right: 0,
+      height: 2,
+      backgroundColor: "rgba(0, 0, 0, 0.38)",
+      boxShadow: "0 -1px 0 rgba(255, 255, 255, 0.18)"
+    }
+  })) : null, style === HOOK_STYLE_PRESETS.glitch_verdict ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 17,
+      opacity: glitchOpacity * hookOverlayOpacity,
+      mixBlendMode: "screen",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Img, {
+    src: staticFile("glitch1.png"),
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      opacity: frame % 3 === 0 ? 0.5 : 0.2
+    }
+  }), /*#__PURE__*/React.createElement(Img, {
+    src: staticFile("glitch2.png"),
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      opacity: frame % 2 === 0 ? 0.35 : 0.12
+    }
+  })) : null, flashOpacity > 0 ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 18,
+      opacity: flashOpacity,
+      background: style === HOOK_STYLE_PRESETS.glitch_verdict ? "linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,0,85,0.16))" : "rgba(255, 255, 255, 0.92)",
+      mixBlendMode: "screen",
+      pointerEvents: "none"
+    }
+  }) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 20,
+      opacity: hookOverlayOpacity,
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: preset.top,
+      left: preset.left,
+      width: preset.textBoxWidth,
+      maxWidth: preset.textBoxWidth
+    }
+  }, /*#__PURE__*/React.createElement(HookHeadline, {
+    hookText: hookText,
+    hookAccentText: hookAccentText,
+    maxWidth: preset.textBoxWidth,
+    maxHeight: preset.textBoxHeight,
+    maxFontSize: preset.maxFontSize,
+    align: preset.align,
+    accentColor: accentColor,
+    accentContrast: accentContrast,
+    primaryContrast: primaryContrast,
+    style: style,
+    frame: frame,
+    fps: fps,
+    hookFrames: effectiveHookFrames
+  }))), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 28,
+      opacity: 1
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      zIndex: 29,
+      top: CHROME_PADDING * 0.9,
+      right: CHROME_PADDING * 0.9,
+      opacity: logoOpacity
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    src: logoUrl,
+    delayRenderTimeoutInMilliseconds: 60000,
+    style: {
+      width: width < 1200 ? 160 : 210,
+      objectFit: "contain"
+    }
+  })) : null)), playHookSounds ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Audio, {
+    src: staticFile("swoosh.mp3"),
+    volume: 0.28
+  }), !shortSegment ? /*#__PURE__*/React.createElement(Sequence, {
+    from: effectiveHookFrames
+  }, /*#__PURE__*/React.createElement(Audio, {
+    src: staticFile("ding-short.mp3"),
+    volume: function volume(localFrame) {
+      return interpolate(localFrame, [0, 2, 10], [0, 0.28, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+    }
+  })) : null) : null);
+  return content;
+};