@zync/zync-screnplay-player 0.1.204 → 0.1.206

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

@@ -0,0 +1,741 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
+import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
+import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { useOrientationBased } from '../../hooks/useOrientationBased.js';
+import { useTheme } from '../../theme/hooks/useTheme.js';
+import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
+import FaceCenteredVideo from '../utils/FaceCenteredVideo';
+import { BlurOverlay } from '../utils/BlurOverlay';
+import { CHROME_PADDING } from '../../config.js';
+import { useVirtualBackground } from '../../hooks/useVirtualBackground';
+import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
+var _loadHeadlineFont = loadHeadlineFont(),
+  headlineFontFamily = _loadHeadlineFont.fontFamily;
+var _loadBodyFont = loadBodyFont(),
+  bodyFontFamily = _loadBodyFont.fontFamily;
+var withAlpha = function withAlpha(color, alpha) {
+  if (!color || typeof color !== 'string' || !color.startsWith('#')) {
+    return color;
+  }
+  var hex = color.replace('#', '');
+  if (![3, 6].includes(hex.length)) {
+    return color;
+  }
+  var normalizedHex = hex.length === 3 ? hex.split('').map(function (_char) {
+    return _char + _char;
+  }).join('') : hex;
+  var intValue = Number.parseInt(normalizedHex, 16);
+  if (Number.isNaN(intValue)) {
+    return color;
+  }
+  var r = intValue >> 16 & 255;
+  var g = intValue >> 8 & 255;
+  var b = intValue & 255;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+var sanitizeText = function sanitizeText(value) {
+  return typeof value === 'string' ? value.trim() : '';
+};
+var clampLines = function clampLines() {
+  var lines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var maxLines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (lines.length <= maxLines) return lines;
+  var trimmed = lines.slice(0, maxLines);
+  var last = trimmed[maxLines - 1].trimEnd();
+  var shortened = last.length > 3 ? last.slice(0, -3).trimEnd() : last;
+  trimmed[maxLines - 1] = "".concat(shortened, "...");
+  return trimmed;
+};
+var mergeFilters = function mergeFilters() {
+  for (var _len = arguments.length, filters = new Array(_len), _key = 0; _key < _len; _key++) {
+    filters[_key] = arguments[_key];
+  }
+  var merged = filters.filter(Boolean);
+  return merged.length ? merged.join(' ') : undefined;
+};
+var interpolateWithClamp = function interpolateWithClamp(frame, inputRange, outputRange) {
+  var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Easing.out(Easing.ease);
+  return interpolate(frame, inputRange, outputRange, {
+    easing: easing,
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp'
+  });
+};
+export var CreatorCollabColdOpen = function CreatorCollabColdOpen(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    fullName = _ref.fullName,
+    title = _ref.title,
+    collaboratorName = _ref.collaboratorName,
+    collaboratorTitle = _ref.collaboratorTitle,
+    topicLabel = _ref.topicLabel,
+    activeSpeaker = _ref.activeSpeaker,
+    _ref$startVideoFrom = _ref.startVideoFrom,
+    startVideoFrom = _ref$startVideoFrom === void 0 ? 0 : _ref$startVideoFrom,
+    firstVideoFile = _ref.firstVideoFile,
+    _ref$startSecondVideo = _ref.startSecondVideoFrom,
+    startSecondVideoFrom = _ref$startSecondVideo === void 0 ? 0 : _ref$startSecondVideo,
+    secondVideoFile = _ref.secondVideoFile,
+    firstNoBackgroundVideoUrl = _ref.firstNoBackgroundVideoUrl,
+    firstNoBackgroundFaceMetadata = _ref.firstNoBackgroundFaceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    durationInFrames = _useVideoConfig.durationInFrames;
+  var frame = useCurrentFrame();
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!firstNoBackgroundVideoUrl;
+  var safeText = sanitizeText(text);
+  var safeFullName = sanitizeText(fullName);
+  var safeTitle = sanitizeText(title);
+  var safeCollaboratorName = sanitizeText(collaboratorName);
+  var safeCollaboratorTitle = sanitizeText(collaboratorTitle);
+  var safeTopicLabel = sanitizeText(topicLabel);
+  var speaker = sanitizeText(activeSpeaker).toLowerCase();
+  var creatorActive = speaker !== 'collaborator';
+  var collaboratorActive = speaker === 'collaborator';
+  var hasTitle = Boolean(safeText);
+  var hasCreatorInfo = Boolean(safeFullName || safeTitle);
+  var hasCollaboratorText = Boolean(safeCollaboratorName || safeCollaboratorTitle);
+  var showCollaboratorVideo = Boolean(secondVideoFile);
+  var shouldShowResponderTease = Boolean(showCollaboratorVideo || hasCollaboratorText);
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        padding: CHROME_PADDING + 12,
+        introTitleMaxWidth: Math.min(width * 0.56, 820),
+        introTitleMaxHeight: height * 0.32,
+        introTitleMaxFontSize: 98,
+        introTitleTop: height * 0.23,
+        introTitleLeft: CHROME_PADDING + 12,
+        introTitleCentered: false,
+        introTitleMaxLines: 3,
+        compactTitleMaxWidth: Math.min(width * 0.36, 560),
+        compactTitleMaxHeight: 120,
+        compactTitleMaxFontSize: 38,
+        compactTitleTop: CHROME_PADDING + 12,
+        compactTitleLeft: CHROME_PADDING + 12,
+        compactTitleCentered: false,
+        compactTitleMaxLines: 2,
+        topicFontSize: 13,
+        lowerThirdLeft: CHROME_PADDING + 12,
+        lowerThirdBottom: 118,
+        lowerThirdMaxWidth: Math.min(width * 0.34, 520),
+        lowerThirdNameMaxFontSize: 34,
+        lowerThirdRoleMaxFontSize: 20,
+        previewWidth: Math.min(width * 0.264, 352),
+        previewHeight: Math.min(width * 0.264, 352) * 16 / 9,
+        previewTop: height * 0.14,
+        previewRight: 0,
+        previewBleed: 0,
+        previewRadius: 32,
+        previewPadding: 22,
+        previewLabelFontSize: 13,
+        previewNameMaxFontSize: 30,
+        previewRoleMaxFontSize: 16,
+        previewTitleMaxLines: 2
+      },
+      portrait: {
+        padding: CHROME_PADDING + 4,
+        introTitleMaxWidth: Math.min(width * 0.82, 680),
+        introTitleMaxHeight: height * 0.23,
+        introTitleMaxFontSize: 68,
+        introTitleTop: height * 0.18,
+        introTitleLeft: width / 2,
+        introTitleCentered: true,
+        introTitleMaxLines: 3,
+        compactTitleMaxWidth: Math.min(width * 0.76, 620),
+        compactTitleMaxHeight: 130,
+        compactTitleMaxFontSize: 44,
+        compactTitleTop: CHROME_PADDING + 18,
+        compactTitleLeft: CHROME_PADDING + 6,
+        compactTitleCentered: false,
+        compactTitleMaxLines: 2,
+        topicFontSize: 17,
+        lowerThirdLeft: CHROME_PADDING + 6,
+        lowerThirdBottom: 342,
+        lowerThirdMaxWidth: Math.min(width * 0.7, 620),
+        lowerThirdNameMaxFontSize: 48,
+        lowerThirdRoleMaxFontSize: 28,
+        previewWidth: Math.min(width * 0.44, 320),
+        previewHeight: Math.min(height * 0.44, 460),
+        previewTop: CHROME_PADDING + 72,
+        previewRight: 0,
+        previewBleed: Math.min(14, width * 0.02),
+        previewRadius: 28,
+        previewPadding: 20,
+        previewLabelFontSize: 14,
+        previewNameMaxFontSize: 37,
+        previewRoleMaxFontSize: 18,
+        previewTitleMaxLines: 2
+      },
+      square: {
+        padding: CHROME_PADDING + 4,
+        introTitleMaxWidth: Math.min(width * 0.78, 620),
+        introTitleMaxHeight: height * 0.22,
+        introTitleMaxFontSize: 60,
+        introTitleTop: height * 0.19,
+        introTitleLeft: width / 2,
+        introTitleCentered: true,
+        introTitleMaxLines: 2,
+        compactTitleMaxWidth: Math.min(width * 0.74, 540),
+        compactTitleMaxHeight: 108,
+        compactTitleMaxFontSize: 36,
+        compactTitleTop: CHROME_PADDING + 12,
+        compactTitleLeft: CHROME_PADDING + 4,
+        compactTitleCentered: false,
+        compactTitleMaxLines: 1,
+        topicFontSize: 13,
+        lowerThirdLeft: CHROME_PADDING + 4,
+        lowerThirdBottom: 210,
+        lowerThirdMaxWidth: Math.min(width * 0.62, 440),
+        lowerThirdNameMaxFontSize: 34,
+        lowerThirdRoleMaxFontSize: 20,
+        previewWidth: Math.min(width * 0.34, 230),
+        previewHeight: Math.min(height * 0.37, 270),
+        previewTop: CHROME_PADDING + 64,
+        previewRight: 0,
+        previewBleed: Math.min(12, width * 0.02),
+        previewRadius: 24,
+        previewPadding: 18,
+        previewLabelFontSize: 13,
+        previewNameMaxFontSize: 24,
+        previewRoleMaxFontSize: 14,
+        previewTitleMaxLines: 1
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    padding = _useOrientationBased.padding,
+    introTitleMaxWidth = _useOrientationBased.introTitleMaxWidth,
+    introTitleMaxHeight = _useOrientationBased.introTitleMaxHeight,
+    introTitleMaxFontSize = _useOrientationBased.introTitleMaxFontSize,
+    introTitleTop = _useOrientationBased.introTitleTop,
+    introTitleLeft = _useOrientationBased.introTitleLeft,
+    introTitleCentered = _useOrientationBased.introTitleCentered,
+    introTitleMaxLines = _useOrientationBased.introTitleMaxLines,
+    compactTitleMaxWidth = _useOrientationBased.compactTitleMaxWidth,
+    compactTitleMaxHeight = _useOrientationBased.compactTitleMaxHeight,
+    compactTitleMaxFontSize = _useOrientationBased.compactTitleMaxFontSize,
+    compactTitleTop = _useOrientationBased.compactTitleTop,
+    compactTitleLeft = _useOrientationBased.compactTitleLeft,
+    compactTitleCentered = _useOrientationBased.compactTitleCentered,
+    compactTitleMaxLines = _useOrientationBased.compactTitleMaxLines,
+    topicFontSize = _useOrientationBased.topicFontSize,
+    lowerThirdLeft = _useOrientationBased.lowerThirdLeft,
+    lowerThirdBottom = _useOrientationBased.lowerThirdBottom,
+    lowerThirdMaxWidth = _useOrientationBased.lowerThirdMaxWidth,
+    lowerThirdNameMaxFontSize = _useOrientationBased.lowerThirdNameMaxFontSize,
+    lowerThirdRoleMaxFontSize = _useOrientationBased.lowerThirdRoleMaxFontSize,
+    previewWidth = _useOrientationBased.previewWidth,
+    previewHeight = _useOrientationBased.previewHeight,
+    previewTop = _useOrientationBased.previewTop,
+    previewRight = _useOrientationBased.previewRight,
+    previewBleed = _useOrientationBased.previewBleed,
+    previewRadius = _useOrientationBased.previewRadius,
+    previewPadding = _useOrientationBased.previewPadding,
+    previewLabelFontSize = _useOrientationBased.previewLabelFontSize,
+    previewNameMaxFontSize = _useOrientationBased.previewNameMaxFontSize,
+    previewRoleMaxFontSize = _useOrientationBased.previewRoleMaxFontSize,
+    previewTitleMaxLines = _useOrientationBased.previewTitleMaxLines;
+  var isLandscape = orientation === 'landscape';
+  var isPortrait = orientation === 'portrait';
+  var isSquare = orientation === 'square';
+  var titleRevealEnd = fps * 0.95;
+  var titleExitStart = fps * 1.75;
+  var titleExitEnd = fps * 2.5;
+  var lowerThirdEnterStart = fps * 1.1;
+  var lowerThirdEnterEnd = fps * 1.85;
+  var previewEnterStart = fps * 1.8;
+  var previewEnterEnd = fps * 2.9;
+  var compactTitleEnterStart = isSquare ? 0 : fps * 2.1;
+  var compactTitleEnterEnd = isSquare ? fps * 0.65 : fps * 3.0;
+  var longHoldFadeStart = Math.min(durationInFrames - fps * 1.5, fps * 6);
+  var longHoldFadeEnd = Math.min(durationInFrames - fps * 0.6, fps * 7.4);
+  var textColor = primaryContrast || '#ffffff';
+  var accent = accentColor || '#f7d774';
+  var accentTextColor = accentContrast || primaryColor || '#111827';
+  var softTextColor = withAlpha(textColor, 0.78) || textColor;
+  var subtleTextColor = withAlpha(textColor, 0.58) || textColor;
+  var titleShadow = '0 18px 48px rgba(0, 0, 0, 0.38)';
+  var lowerThirdShadow = '0 14px 32px rgba(0, 0, 0, 0.28)';
+  var previewShadow = '0 22px 48px rgba(0, 0, 0, 0.34)';
+  var _distributeTextToFit = distributeTextToFit(safeText, introTitleMaxWidth, introTitleMaxHeight, introTitleMaxFontSize),
+    introTitleLinesRaw = _distributeTextToFit.lines,
+    introTitleFontSize = _distributeTextToFit.fontSize;
+  var introTitleLines = clampLines(introTitleLinesRaw, introTitleMaxLines);
+  var introTitleLineMaskHeight = Math.ceil(introTitleFontSize * 1.12);
+  var _distributeTextToFit2 = distributeTextToFit(safeText, compactTitleMaxWidth, compactTitleMaxHeight, compactTitleMaxFontSize),
+    compactTitleLinesRaw = _distributeTextToFit2.lines,
+    compactTitleFontSize = _distributeTextToFit2.fontSize;
+  var compactTitleLines = clampLines(compactTitleLinesRaw, compactTitleMaxLines);
+  var _distributeTextToFit3 = distributeTextToFit(safeFullName, lowerThirdMaxWidth, isLandscape ? 78 : 94, lowerThirdNameMaxFontSize),
+    hostNameLines = _distributeTextToFit3.lines,
+    hostNameFontSize = _distributeTextToFit3.fontSize;
+  var _distributeTextToFit4 = distributeTextToFit(safeTitle, lowerThirdMaxWidth, isLandscape ? 48 : 64, lowerThirdRoleMaxFontSize),
+    hostRoleLines = _distributeTextToFit4.lines,
+    hostRoleFontSize = _distributeTextToFit4.fontSize;
+  var previewTextWidth = Math.max(previewWidth - previewPadding * 2, 0);
+  var _distributeTextToFit5 = distributeTextToFit(safeCollaboratorName, previewTextWidth, isLandscape ? 64 : 58, previewNameMaxFontSize),
+    collaboratorNameLinesRaw = _distributeTextToFit5.lines,
+    collaboratorNameFontSize = _distributeTextToFit5.fontSize;
+  var collaboratorNameLines = clampLines(collaboratorNameLinesRaw, isLandscape ? 2 : 2);
+  var _distributeTextToFit6 = distributeTextToFit(safeCollaboratorTitle, previewTextWidth, isLandscape ? 48 : 42, previewRoleMaxFontSize),
+    collaboratorRoleLinesRaw = _distributeTextToFit6.lines,
+    collaboratorRoleFontSize = _distributeTextToFit6.fontSize;
+  var collaboratorRoleLines = clampLines(collaboratorRoleLinesRaw, previewTitleMaxLines);
+  var introTitleOpacity = isLandscape ? 1 : 0;
+  var introTitleTranslateY = 0;
+  var introTitleScale = 1;
+  var holdOpacity = durationInFrames > fps * 8 ? interpolateWithClamp(frame, [longHoldFadeStart, longHoldFadeEnd], [1, 0.72]) : 1;
+  var compactOpacity = isLandscape ? 0 : holdOpacity;
+  var compactTranslateY = 0;
+  var compactPlateRightInset = interpolateWithClamp(frame, [compactTitleEnterStart, compactTitleEnterStart + 5, compactTitleEnterStart + 9], [100, -4, 0], Easing.out(Easing.cubic));
+  var compactTopicEnterStart = compactTitleEnterStart + 3;
+  var compactTopicOpacity = interpolateWithClamp(frame, [compactTopicEnterStart, compactTopicEnterStart + 4], [0, 1]);
+  var compactTopicTranslateY = interpolateWithClamp(frame, [compactTopicEnterStart, compactTopicEnterStart + 4, compactTopicEnterStart + 8], [10, -2, 0], Easing.out(Easing.cubic));
+  var compactTopicScale = interpolateWithClamp(frame, [compactTopicEnterStart, compactTopicEnterStart + 4, compactTopicEnterStart + 8], [0.96, 1.03, 1], Easing.out(Easing.cubic));
+  var lowerThirdSustain = durationInFrames > fps * 8 ? interpolateWithClamp(frame, [fps * 5.4, fps * 7.4], [1, 0.45]) : 1;
+  var lowerThirdRuleScaleX = interpolateWithClamp(frame, [lowerThirdEnterStart, lowerThirdEnterStart + 5, lowerThirdEnterStart + 9], [0, 1.08, 1], Easing.out(Easing.cubic));
+  var lowerThirdRuleOpacity = interpolateWithClamp(frame, [lowerThirdEnterStart, lowerThirdEnterStart + 4], [0, 1]) * lowerThirdSustain;
+  var lowerThirdNameOpacity = interpolateWithClamp(frame, [lowerThirdEnterStart + 3, lowerThirdEnterEnd], [0, 1]) * lowerThirdSustain;
+  var lowerThirdNameTranslateY = interpolateWithClamp(frame, [lowerThirdEnterStart + 3, lowerThirdEnterStart + 9, lowerThirdEnterEnd], [18, -4, 0], Easing.out(Easing.cubic));
+  var lowerThirdRoleOpacity = interpolateWithClamp(frame, [lowerThirdEnterStart + 7, lowerThirdEnterEnd + 2], [0, 1]) * lowerThirdSustain;
+  var lowerThirdRoleTranslateY = interpolateWithClamp(frame, [lowerThirdEnterStart + 7, lowerThirdEnterStart + 12, lowerThirdEnterEnd + 2], [14, -2, 0], Easing.out(Easing.cubic));
+  var previewReveal = interpolateWithClamp(frame, [previewEnterStart, previewEnterEnd], [0, 1]);
+  var previewTranslateX = interpolateWithClamp(frame, [previewEnterStart, previewEnterEnd], [26, 0], Easing.out(Easing.cubic));
+  var previewScaleIn = interpolateWithClamp(frame, [previewEnterStart, previewEnterStart + 7, previewEnterEnd], [0.94, 1.03, 1], Easing.out(Easing.cubic));
+  var previewRevealWidth = interpolateWithClamp(frame, [previewEnterStart, previewEnterStart + 10], [0, previewWidth], Easing.out(Easing.cubic));
+  var previewLabelEnterStart = previewEnterStart + 3;
+  var previewLabelOpacity = interpolateWithClamp(frame, [previewLabelEnterStart, previewLabelEnterStart + 4], [0, 1]);
+  var previewLabelTranslateY = interpolateWithClamp(frame, [previewLabelEnterStart, previewLabelEnterStart + 4, previewLabelEnterStart + 10], [-10, 2, 0], Easing.out(Easing.cubic));
+  var previewLabelScale = interpolateWithClamp(frame, [previewLabelEnterStart, previewLabelEnterStart + 4, previewLabelEnterStart + 10], [0.9, 1.08, 1], Easing.out(Easing.cubic));
+  var slowPreviewDrift = Math.sin(frame / 30) * (isLandscape ? 4 : 3);
+  var slowHostScale = 1.02 + interpolateWithClamp(frame, [0, durationInFrames], [0, 0.025]);
+  var backgroundOverlayOpacity = collaboratorActive ? 0.72 : 0.62;
+  var previewVisualScale = previewScaleIn * (collaboratorActive ? 1.03 : 0.99);
+  var previewOpacity = previewReveal * (collaboratorActive ? 1 : 0.92);
+  var previewLabel = collaboratorActive ? 'RESPONDING' : 'NEXT UP';
+  var previewLabelDisplayFontSize = Math.round(previewLabelFontSize * 2.3);
+  var previewFilter = collaboratorActive ? 'brightness(1.03) saturate(1.06)' : isLandscape ? 'brightness(1) saturate(1)' : 'brightness(0.84) saturate(0.88)';
+  var creatorFrameFilter = creatorActive ? 'saturate(1.03)' : 'brightness(0.92) saturate(0.92)';
+  var previewRadiusValue = isLandscape ? "".concat(previewRadius, "px 0 0 ").concat(previewRadius, "px") : "".concat(previewRadius, "px");
+  var showHostRole = Boolean(safeTitle && !isPortrait);
+  var showCollaboratorRole = Boolean(safeCollaboratorTitle && !isPortrait);
+  var settledTitleNeedsPlate = !isLandscape;
+  var compactPlateRadius = settledTitleNeedsPlate ? isPortrait ? 8 : 6 : 0;
+  var compactPlatePadding = settledTitleNeedsPlate ? isPortrait ? '24px 24px 20px' : '22px 22px 18px' : 0;
+  var compactPlateRuleWidth = isPortrait ? 56 : 44;
+  var renderCreatorVideo = function renderCreatorVideo(containerWidth, containerHeight, radius) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+      url: virtualBgUrl,
+      width: "100%",
+      height: "100%",
+      borderRadius: radius,
+      zIndex: 1
+    }) : null, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      startFrom: startVideoFrom,
+      src: firstVideoFile,
+      faceMetadata: firstNoBackgroundFaceMetadata,
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      useAveragePosition: true,
+      muted: false,
+      style: {
+        filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
+      }
+    }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      startFrom: startVideoFrom,
+      src: firstVideoFile,
+      muted: false,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
+      }
+    }), /*#__PURE__*/React.createElement(BlurOverlay, {
+      show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && firstNoBackgroundVideoUrl,
+      width: containerWidth,
+      height: containerHeight,
+      zIndex: 2
+    }), firstNoBackgroundVideoUrl && (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: {
+        position: 'absolute',
+        inset: 0,
+        zIndex: 4
+      }
+    }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      startFrom: startVideoFrom,
+      src: firstNoBackgroundVideoUrl,
+      faceMetadata: firstNoBackgroundFaceMetadata,
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      useAveragePosition: true,
+      muted: true,
+      transparent: true,
+      noBackgroundVideoEffects: noBackgroundVideoEffects
+    }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      startFrom: startVideoFrom,
+      src: firstNoBackgroundVideoUrl,
+      muted: true,
+      transparent: true,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? 'brightness(1.1) contrast(1.15) saturate(1.05)' : undefined
+      }
+    })) : null);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      backgroundColor: primaryColor || '#0f172a',
+      color: textColor,
+      fontFamily: bodyFontFamily,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      transform: "scale(".concat(slowHostScale, ")"),
+      transformOrigin: 'center',
+      filter: creatorFrameFilter,
+      opacity: creatorActive ? 1 : 0.96
+    }
+  }, renderCreatorVideo(width, height, 0)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: isLandscape ? "linear-gradient(90deg, ".concat(withAlpha('#000000', 0.78), " 0%, ").concat(withAlpha('#000000', 0.5), " 28%, ").concat(withAlpha('#000000', 0.18), " 58%, ").concat(withAlpha('#000000', 0.58), " 100%)") : "linear-gradient(90deg, ".concat(withAlpha('#000000', 0.34), " 0%, ").concat(withAlpha('#000000', 0.16), " 24%, ").concat(withAlpha('#000000', 0), " 46%), linear-gradient(180deg, ").concat(withAlpha('#000000', 0.52), " 0%, ").concat(withAlpha('#000000', 0.2), " 24%, ").concat(withAlpha('#000000', 0.26), " 58%, ").concat(withAlpha('#000000', 0.82), " 100%)"),
+      opacity: backgroundOverlayOpacity,
+      zIndex: 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: isLandscape ? "linear-gradient(105deg, ".concat(withAlpha('#000000', collaboratorActive ? 0.22 : 0.12), " 0%, ").concat(withAlpha('#000000', 0), " 42%, ").concat(withAlpha('#000000', collaboratorActive ? 0.32 : 0.2), " 100%)") : "radial-gradient(circle at 82% 24%, ".concat(withAlpha('#000000', collaboratorActive ? 0.26 : 0.16), " 0%, ").concat(withAlpha('#000000', 0), " 38%)"),
+      zIndex: 3
+    }
+  }), hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: introTitleTop,
+      left: introTitleCentered ? '50%' : introTitleLeft,
+      width: introTitleMaxWidth,
+      opacity: introTitleOpacity,
+      transform: "".concat(introTitleCentered ? 'translateX(-50%) ' : '', "translateY(").concat(introTitleTranslateY, "px) scale(").concat(introTitleScale, ")"),
+      textAlign: introTitleCentered ? 'center' : 'left',
+      zIndex: 7
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.28em',
+      textTransform: 'uppercase',
+      color: withAlpha(textColor, 0.72),
+      marginBottom: 12,
+      fontWeight: 600,
+      opacity: interpolateWithClamp(frame, [0, 6], [0, 1]),
+      transform: "translateY(".concat(interpolateWithClamp(frame, [0, 8], [10, 0]), "px)")
+    }
+  }, safeTopicLabel), introTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "intro-title-line-".concat(index),
+      style: {
+        height: introTitleLineMaskHeight,
+        overflow: 'hidden',
+        marginBottom: index === introTitleLines.length - 1 ? 0 : 6
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: introTitleFontSize,
+        lineHeight: 0.97,
+        fontWeight: 500,
+        letterSpacing: '-0.03em',
+        textShadow: titleShadow,
+        opacity: interpolateWithClamp(frame, [index * 3, index * 3 + 4], [0, 1]),
+        transform: "translateY(".concat(interpolateWithClamp(frame, [index * 3, index * 3 + 7, index * 3 + 12], [Math.round(introTitleFontSize * 0.62), -4, 0], Easing.out(Easing.cubic)), "px) scale(").concat(interpolateWithClamp(frame, [index * 3, index * 3 + 7, index * 3 + 12], [0.98, 1.02, 1], Easing.out(Easing.cubic)), ")"),
+        transformOrigin: 'left center'
+      }
+    }, line));
+  })), !isLandscape && (safeTopicLabel || hasTitle) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: compactTitleTop,
+      left: compactTitleCentered ? '50%' : compactTitleLeft,
+      width: compactTitleMaxWidth,
+      opacity: compactOpacity,
+      transform: "".concat(compactTitleCentered ? 'translateX(-50%) ' : '', "translateY(").concat(compactTranslateY, "px)"),
+      textAlign: compactTitleCentered ? 'center' : 'left',
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: compactTitleCentered ? 'center' : 'flex-start',
+      width: settledTitleNeedsPlate ? 'fit-content' : '100%',
+      maxWidth: '100%',
+      padding: compactPlatePadding,
+      borderRadius: compactPlateRadius,
+      background: settledTitleNeedsPlate ? "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.7), " 0%, ").concat(withAlpha('#000000', 0.42), " 100%)") : 'transparent',
+      boxShadow: settledTitleNeedsPlate ? '0 18px 36px rgba(0, 0, 0, 0.22)' : undefined,
+      backdropFilter: settledTitleNeedsPlate ? 'blur(14px)' : undefined,
+      border: settledTitleNeedsPlate ? "1px solid ".concat(withAlpha(textColor, 0.08)) : undefined,
+      clipPath: settledTitleNeedsPlate ? "inset(0 ".concat(compactPlateRightInset, "% 0 0 round ").concat(compactPlateRadius, "px)") : undefined
+    }
+  }, settledTitleNeedsPlate && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 12,
+      left: 18,
+      width: compactPlateRuleWidth,
+      height: 3,
+      backgroundColor: accent
+    }
+  }), safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.3em',
+      textTransform: 'uppercase',
+      color: subtleTextColor,
+      fontWeight: 600,
+      marginBottom: hasTitle ? 12 : 0,
+      marginTop: settledTitleNeedsPlate ? 8 : 0,
+      opacity: compactTopicOpacity,
+      transform: "translateY(".concat(compactTopicTranslateY, "px) scale(").concat(compactTopicScale, ")"),
+      transformOrigin: 'left center'
+    }
+  }, safeTopicLabel), compactTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "compact-title-line-".concat(index),
+      style: {
+        height: Math.ceil(compactTitleFontSize * 1.02),
+        overflow: 'hidden',
+        marginBottom: index === compactTitleLines.length - 1 ? 0 : 2
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: compactTitleFontSize,
+        lineHeight: 1,
+        fontWeight: 500,
+        letterSpacing: '-0.025em',
+        textShadow: '0 10px 24px rgba(0, 0, 0, 0.28)',
+        color: textColor,
+        opacity: interpolateWithClamp(frame, [compactTitleEnterStart + 5 + index * 2, compactTitleEnterStart + 9 + index * 2], [0, 0.94]),
+        transform: "translateY(".concat(interpolateWithClamp(frame, [compactTitleEnterStart + 5 + index * 2, compactTitleEnterStart + 9 + index * 2, compactTitleEnterStart + 13 + index * 2], [Math.round(compactTitleFontSize * 0.5), -3, 0], Easing.out(Easing.cubic)), "px) scale(").concat(interpolateWithClamp(frame, [compactTitleEnterStart + 5 + index * 2, compactTitleEnterStart + 9 + index * 2, compactTitleEnterStart + 13 + index * 2], [0.98, 1.02, 1], Easing.out(Easing.cubic)), ")"),
+        transformOrigin: 'left center'
+      }
+    }, line));
+  }))), hasCreatorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: lowerThirdLeft,
+      bottom: lowerThirdBottom,
+      width: lowerThirdMaxWidth,
+      zIndex: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? 52 : 44,
+      height: 2,
+      backgroundColor: accent,
+      marginBottom: 14,
+      boxShadow: "0 0 20px ".concat(withAlpha(accent, 0.34)),
+      opacity: lowerThirdRuleOpacity,
+      transform: "scaleX(".concat(lowerThirdRuleScaleX, ")"),
+      transformOrigin: 'left center'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: lowerThirdNameOpacity,
+      transform: "translateY(".concat(lowerThirdNameTranslateY, "px)")
+    }
+  }, hostNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "host-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: hostNameFontSize,
+        lineHeight: 0.98,
+        fontWeight: 500,
+        letterSpacing: '-0.02em',
+        textShadow: lowerThirdShadow,
+        marginBottom: index === hostNameLines.length - 1 && !showHostRole ? 0 : 2
+      }
+    }, line);
+  })), showHostRole && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: safeFullName ? 6 : 0,
+      opacity: lowerThirdRoleOpacity,
+      transform: "translateY(".concat(lowerThirdRoleTranslateY, "px)")
+    }
+  }, hostRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "host-role-".concat(index),
+      style: {
+        fontSize: hostRoleFontSize,
+        lineHeight: 1.18,
+        fontWeight: 500,
+        color: softTextColor,
+        textShadow: lowerThirdShadow,
+        marginBottom: index === hostRoleLines.length - 1 ? 0 : 2
+      }
+    }, line);
+  }))), shouldShowResponderTease && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: previewTop,
+      right: previewRight - previewBleed,
+      width: previewWidth,
+      height: previewHeight,
+      opacity: previewOpacity,
+      transform: "translateX(".concat(previewTranslateX, "px) translateY(").concat(slowPreviewDrift, "px) scale(").concat(previewVisualScale, ")"),
+      transformOrigin: isLandscape ? 'center right' : 'top right',
+      zIndex: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: -(previewLabelDisplayFontSize + 12),
+      left: previewPadding,
+      zIndex: 3,
+      opacity: previewLabelOpacity,
+      transform: "translateY(".concat(previewLabelTranslateY, "px) scale(").concat(previewLabelScale, ")"),
+      transformOrigin: 'left bottom'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: previewLabelDisplayFontSize,
+      fontWeight: 700,
+      letterSpacing: '0.18em',
+      textTransform: 'uppercase',
+      color: accent,
+      textShadow: '0 10px 20px rgba(0, 0, 0, 0.45)',
+      lineHeight: 1
+    }
+  }, previewLabel)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: previewRevealWidth,
+      borderRadius: previewRadiusValue,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: previewWidth,
+      borderRadius: previewRadiusValue,
+      overflow: 'hidden',
+      boxShadow: previewShadow,
+      backgroundColor: withAlpha(primaryColor || '#0f172a', 0.62)
+    }
+  }, showCollaboratorVideo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: '50% 20%',
+      filter: previewFilter,
+      transform: "scale(".concat(collaboratorActive ? 1.06 : 1.02, ")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(180deg, ".concat(withAlpha('#000000', 0), " 0%, ").concat(withAlpha('#000000', 0.08), " 42%, ").concat(withAlpha('#000000', 0.8), " 100%)")
+    }
+  })) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.18), " 0%, ").concat(withAlpha('#0f172a', 0.92), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: 4,
+      backgroundColor: accent,
+      opacity: collaboratorActive ? 1 : 0.72,
+      borderTopLeftRadius: previewRadius,
+      borderBottomLeftRadius: previewRadius
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: previewPadding,
+      right: previewPadding,
+      bottom: previewPadding
+    }
+  }, collaboratorNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "collaborator-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: collaboratorNameFontSize,
+        lineHeight: 0.98,
+        fontWeight: 500,
+        letterSpacing: '-0.02em',
+        color: textColor,
+        textShadow: '0 12px 26px rgba(0, 0, 0, 0.42)',
+        marginBottom: index === collaboratorNameLines.length - 1 && !showCollaboratorRole ? 0 : 2
+      }
+    }, line);
+  }), showCollaboratorRole && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: safeCollaboratorName ? 6 : 0
+    }
+  }, collaboratorRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "collaborator-role-".concat(index),
+      style: {
+        fontSize: collaboratorRoleFontSize,
+        lineHeight: 1.2,
+        fontWeight: 500,
+        color: withAlpha(textColor, 0.8),
+        marginBottom: index === collaboratorRoleLines.length - 1 ? 0 : 2
+      }
+    }, line);
+  })))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: padding,
+      border: "1px solid ".concat(withAlpha(collaboratorActive ? accent : textColor, collaboratorActive ? 0.22 : 0.08)),
+      pointerEvents: 'none',
+      zIndex: 6,
+      opacity: isPortrait ? 0.4 : 0.32
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 100
+    }
+  }, children));
+};