@zync/zync-screnplay-player 0.1.204 → 0.1.206

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

@@ -0,0 +1,606 @@
+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 CreatorCollabDocumentaryInset = function CreatorCollabDocumentaryInset(_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;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!firstNoBackgroundVideoUrl;
+  var safeText = sanitizeText(text);
+  var safeTopicLabel = sanitizeText(topicLabel);
+  var safeFullName = sanitizeText(fullName);
+  var safeTitle = sanitizeText(title);
+  var safeCollaboratorName = sanitizeText(collaboratorName);
+  var safeCollaboratorTitle = sanitizeText(collaboratorTitle);
+  var speaker = sanitizeText(activeSpeaker).toLowerCase();
+  var collaboratorActive = speaker === 'collaborator';
+  var creatorActive = !collaboratorActive;
+  var hasTitle = Boolean(safeText);
+  var hasHostInfo = Boolean(safeFullName || safeTitle);
+  var hasCollaboratorInfo = Boolean(safeCollaboratorName || safeCollaboratorTitle);
+  var hasCollaboratorVideo = Boolean(secondVideoFile);
+  var showCutaway = hasCollaboratorVideo || hasCollaboratorInfo;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        framePadding: CHROME_PADDING + 12,
+        introTitleTop: height * 0.22,
+        introTitleLeft: CHROME_PADDING + 18,
+        introTitleWidth: Math.min(width * 0.52, 860),
+        introTitleHeight: height * 0.3,
+        introTitleFontSize: 92,
+        introTitleLines: 3,
+        settledTitleTop: CHROME_PADDING + 16,
+        settledTitleLeft: CHROME_PADDING + 18,
+        settledTitleWidth: Math.min(width * 0.32, 520),
+        settledTitleHeight: 120,
+        settledTitleFontSize: 40,
+        settledTitleLines: 2,
+        topicFontSize: 12,
+        lowerThirdLeft: CHROME_PADDING + 18,
+        lowerThirdBottom: 122,
+        lowerThirdWidth: Math.min(width * 0.33, 520),
+        hostNameMaxFontSize: 34,
+        hostRoleMaxFontSize: 20,
+        cutawayTop: height * 0.2,
+        cutawayRight: CHROME_PADDING - 16,
+        cutawayWidth: Math.min(width * 0.34, 520),
+        cutawayHeight: Math.min(height * 0.48, 420),
+        cutawayBleed: Math.min(58, width * 0.05),
+        cutawayRadius: 34,
+        cutawayLabelSize: 11,
+        cutawayNameSize: 28,
+        cutawayRoleSize: 14
+      },
+      portrait: {
+        framePadding: CHROME_PADDING + 4,
+        introTitleTop: height * 0.18,
+        introTitleLeft: width / 2,
+        introTitleWidth: Math.min(width * 0.8, 640),
+        introTitleHeight: height * 0.25,
+        introTitleFontSize: 64,
+        introTitleLines: 3,
+        settledTitleTop: CHROME_PADDING + 16,
+        settledTitleLeft: CHROME_PADDING + 8,
+        settledTitleWidth: Math.min(width * 0.64, 500),
+        settledTitleHeight: 128,
+        settledTitleFontSize: 34,
+        settledTitleLines: 2,
+        topicFontSize: 15,
+        lowerThirdLeft: CHROME_PADDING + 8,
+        lowerThirdBottom: 184,
+        lowerThirdWidth: Math.min(width * 0.6, 520),
+        hostNameMaxFontSize: 40,
+        hostRoleMaxFontSize: 24,
+        cutawayTop: CHROME_PADDING + 84,
+        cutawayRight: CHROME_PADDING - 4,
+        cutawayWidth: Math.min(width * 0.52, 360),
+        cutawayHeight: Math.min(height * 0.28, 284),
+        cutawayBleed: Math.min(26, width * 0.04),
+        cutawayRadius: 28,
+        cutawayLabelSize: 12,
+        cutawayNameSize: 24,
+        cutawayRoleSize: 15
+      },
+      square: {
+        framePadding: CHROME_PADDING + 4,
+        introTitleTop: height * 0.2,
+        introTitleLeft: width / 2,
+        introTitleWidth: Math.min(width * 0.76, 560),
+        introTitleHeight: height * 0.24,
+        introTitleFontSize: 58,
+        introTitleLines: 2,
+        settledTitleTop: CHROME_PADDING + 10,
+        settledTitleLeft: CHROME_PADDING + 6,
+        settledTitleWidth: Math.min(width * 0.62, 420),
+        settledTitleHeight: 88,
+        settledTitleFontSize: 28,
+        settledTitleLines: 1,
+        topicFontSize: 11,
+        lowerThirdLeft: CHROME_PADDING + 6,
+        lowerThirdBottom: 152,
+        lowerThirdWidth: Math.min(width * 0.56, 400),
+        hostNameMaxFontSize: 31,
+        hostRoleMaxFontSize: 18,
+        cutawayTop: CHROME_PADDING + 74,
+        cutawayRight: CHROME_PADDING - 2,
+        cutawayWidth: Math.min(width * 0.48, 288),
+        cutawayHeight: Math.min(height * 0.26, 220),
+        cutawayBleed: Math.min(22, width * 0.04),
+        cutawayRadius: 24,
+        cutawayLabelSize: 10,
+        cutawayNameSize: 19,
+        cutawayRoleSize: 12
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    framePadding = _useOrientationBased.framePadding,
+    introTitleTop = _useOrientationBased.introTitleTop,
+    introTitleLeft = _useOrientationBased.introTitleLeft,
+    introTitleWidth = _useOrientationBased.introTitleWidth,
+    introTitleHeight = _useOrientationBased.introTitleHeight,
+    introTitleFontSize = _useOrientationBased.introTitleFontSize,
+    introTitleLines = _useOrientationBased.introTitleLines,
+    settledTitleTop = _useOrientationBased.settledTitleTop,
+    settledTitleLeft = _useOrientationBased.settledTitleLeft,
+    settledTitleWidth = _useOrientationBased.settledTitleWidth,
+    settledTitleHeight = _useOrientationBased.settledTitleHeight,
+    settledTitleFontSize = _useOrientationBased.settledTitleFontSize,
+    settledTitleLines = _useOrientationBased.settledTitleLines,
+    topicFontSize = _useOrientationBased.topicFontSize,
+    lowerThirdLeft = _useOrientationBased.lowerThirdLeft,
+    lowerThirdBottom = _useOrientationBased.lowerThirdBottom,
+    lowerThirdWidth = _useOrientationBased.lowerThirdWidth,
+    hostNameMaxFontSize = _useOrientationBased.hostNameMaxFontSize,
+    hostRoleMaxFontSize = _useOrientationBased.hostRoleMaxFontSize,
+    cutawayTop = _useOrientationBased.cutawayTop,
+    cutawayRight = _useOrientationBased.cutawayRight,
+    cutawayWidth = _useOrientationBased.cutawayWidth,
+    cutawayHeight = _useOrientationBased.cutawayHeight,
+    cutawayBleed = _useOrientationBased.cutawayBleed,
+    cutawayRadius = _useOrientationBased.cutawayRadius,
+    cutawayLabelSize = _useOrientationBased.cutawayLabelSize,
+    cutawayNameSize = _useOrientationBased.cutawayNameSize,
+    cutawayRoleSize = _useOrientationBased.cutawayRoleSize;
+  var isLandscape = orientation === 'landscape';
+  var isPortrait = orientation === 'portrait';
+  var introReveal = interpolateWithClamp(frame, [0, fps * 0.9], [0, 1]);
+  var introExit = interpolateWithClamp(frame, [fps * 1.6, fps * 2.35], [1, 0]);
+  var introOpacity = introReveal * introExit;
+  var introTranslateY = interpolateWithClamp(frame, [0, fps * 1, fps * 2.35], [26, 0, -24], Easing.out(Easing.cubic));
+  var settledOpacity = interpolateWithClamp(frame, [fps * 2.0, fps * 2.9], [0, 1]);
+  var settledTranslateY = interpolateWithClamp(frame, [fps * 2.0, fps * 2.9], [14, 0]);
+  var lowerThirdBaseOpacity = interpolateWithClamp(frame, [fps * 1.2, fps * 2.0], [0, 1]);
+  var lowerThirdSustain = durationInFrames > fps * 10 ? interpolateWithClamp(frame, [fps * 6.5, fps * 9.5], [1, 0.52]) : 1;
+  var lowerThirdOpacity = lowerThirdBaseOpacity * lowerThirdSustain;
+  var lowerThirdTranslateY = interpolateWithClamp(frame, [fps * 1.2, fps * 2.0], [18, 0]);
+  var cutawayReveal = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [0, 1]);
+  var cutawayTranslateX = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [54, 0], Easing.out(Easing.cubic));
+  var cutawayScale = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [0.94, 1]);
+  var accent = accentColor || '#f4ca62';
+  var textColor = primaryContrast || '#ffffff';
+  var softTextColor = withAlpha(textColor, 0.78) || textColor;
+  var mutedTextColor = withAlpha(textColor, 0.62) || textColor;
+  var _distributeTextToFit = distributeTextToFit(safeText, introTitleWidth, introTitleHeight, introTitleFontSize),
+    introTitleRaw = _distributeTextToFit.lines,
+    introTitleFinalSize = _distributeTextToFit.fontSize;
+  var introTitle = clampLines(introTitleRaw, introTitleLines);
+  var _distributeTextToFit2 = distributeTextToFit(safeText, settledTitleWidth, settledTitleHeight, settledTitleFontSize),
+    settledTitleRaw = _distributeTextToFit2.lines,
+    settledTitleFinalSize = _distributeTextToFit2.fontSize;
+  var settledTitle = clampLines(settledTitleRaw, settledTitleLines);
+  var _distributeTextToFit3 = distributeTextToFit(safeFullName, lowerThirdWidth, isLandscape ? 76 : 94, hostNameMaxFontSize),
+    hostNameLines = _distributeTextToFit3.lines,
+    hostNameSize = _distributeTextToFit3.fontSize;
+  var _distributeTextToFit4 = distributeTextToFit(safeTitle, lowerThirdWidth, isLandscape ? 48 : 60, hostRoleMaxFontSize),
+    hostRoleLines = _distributeTextToFit4.lines,
+    hostRoleSize = _distributeTextToFit4.fontSize;
+  var cutawayTextWidth = Math.max(cutawayWidth - 36, 0);
+  var _distributeTextToFit5 = distributeTextToFit(safeCollaboratorName, cutawayTextWidth, isLandscape ? 68 : 56, cutawayNameSize),
+    guestNameRaw = _distributeTextToFit5.lines,
+    guestNameSize = _distributeTextToFit5.fontSize;
+  var guestNameLines = clampLines(guestNameRaw, 2);
+  var _distributeTextToFit6 = distributeTextToFit(safeCollaboratorTitle, cutawayTextWidth, isLandscape ? 48 : 40, cutawayRoleSize),
+    guestRoleRaw = _distributeTextToFit6.lines,
+    guestRoleSize = _distributeTextToFit6.fontSize;
+  var guestRoleLines = clampLines(guestRoleRaw, isLandscape ? 2 : 1);
+  var hostBaseScale = 1.015 + interpolateWithClamp(frame, [0, durationInFrames], [0, 0.02]);
+  var cutawayLabel = collaboratorActive ? 'RESPONDING' : 'COMING UP';
+  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,
+      overflow: 'hidden',
+      backgroundColor: primaryColor || '#0f172a',
+      color: textColor,
+      fontFamily: bodyFontFamily
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      transform: "scale(".concat(hostBaseScale, ")"),
+      transformOrigin: 'center',
+      filter: creatorActive ? 'saturate(1.04)' : 'brightness(0.92) saturate(0.92)',
+      opacity: creatorActive ? 1 : 0.96,
+      zIndex: 1
+    }
+  }, renderCreatorVideo(width, height, 0)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      zIndex: 2,
+      background: isLandscape ? "linear-gradient(100deg, ".concat(withAlpha('#000000', 0.74), " 0%, ").concat(withAlpha('#000000', 0.48), " 34%, ").concat(withAlpha('#000000', 0.12), " 60%, ").concat(withAlpha('#000000', 0.42), " 100%)") : "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.44), " 0%, ").concat(withAlpha('#000000', 0.2), " 26%, ").concat(withAlpha('#000000', 0.2), " 62%, ").concat(withAlpha('#000000', 0.72), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      zIndex: 3,
+      background: isLandscape ? "radial-gradient(circle at 84% 30%, ".concat(withAlpha(accent, collaboratorActive ? 0.26 : 0.18), " 0%, ").concat(withAlpha(accent, 0), " 44%)") : "radial-gradient(circle at 72% 26%, ".concat(withAlpha(accent, collaboratorActive ? 0.24 : 0.16), " 0%, ").concat(withAlpha(accent, 0), " 40%)")
+    }
+  }), hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: introTitleTop,
+      left: isLandscape ? introTitleLeft : '50%',
+      width: introTitleWidth,
+      textAlign: isLandscape ? 'left' : 'center',
+      opacity: introOpacity,
+      transform: "".concat(isLandscape ? '' : 'translateX(-50%) ', "translateY(").concat(introTranslateY, "px)"),
+      zIndex: 6
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.28em',
+      textTransform: 'uppercase',
+      color: mutedTextColor,
+      marginBottom: 10,
+      fontWeight: 600
+    }
+  }, safeTopicLabel), introTitle.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "documentary-intro-line-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: introTitleFinalSize,
+        lineHeight: 0.96,
+        letterSpacing: '-0.03em',
+        fontWeight: 500,
+        marginBottom: index === introTitle.length - 1 ? 0 : 5,
+        textShadow: '0 14px 38px rgba(0, 0, 0, 0.42)'
+      }
+    }, line);
+  })), (hasTitle || safeTopicLabel) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: settledTitleTop,
+      left: settledTitleLeft,
+      width: settledTitleWidth,
+      opacity: settledOpacity,
+      transform: "translateY(".concat(settledTranslateY, "px)"),
+      zIndex: 7
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.3em',
+      textTransform: 'uppercase',
+      color: mutedTextColor,
+      marginBottom: hasTitle ? 8 : 0,
+      fontWeight: 600
+    }
+  }, safeTopicLabel), settledTitle.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "documentary-settled-line-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: settledTitleFinalSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.025em',
+        fontWeight: 500,
+        marginBottom: index === settledTitle.length - 1 ? 0 : 2,
+        textShadow: '0 10px 26px rgba(0, 0, 0, 0.3)'
+      }
+    }, line);
+  })), hasHostInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: lowerThirdLeft,
+      bottom: lowerThirdBottom,
+      width: lowerThirdWidth,
+      opacity: lowerThirdOpacity,
+      transform: "translateY(".concat(lowerThirdTranslateY, "px)"),
+      zIndex: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? 52 : 44,
+      height: 2,
+      backgroundColor: accent,
+      marginBottom: 12,
+      boxShadow: "0 0 18px ".concat(withAlpha(accent, 0.36))
+    }
+  }), hostNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "documentary-host-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: hostNameSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.02em',
+        fontWeight: 500,
+        textShadow: '0 12px 28px rgba(0, 0, 0, 0.38)',
+        marginBottom: index === hostNameLines.length - 1 ? 0 : 2
+      }
+    }, line);
+  }), safeTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: safeFullName ? 6 : 0
+    }
+  }, hostRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "documentary-host-role-".concat(index),
+      style: {
+        fontSize: hostRoleSize,
+        lineHeight: 1.2,
+        color: softTextColor,
+        textShadow: '0 12px 28px rgba(0, 0, 0, 0.36)',
+        marginBottom: index === hostRoleLines.length - 1 ? 0 : 2
+      }
+    }, line);
+  }))), showCutaway && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: cutawayTop,
+      right: cutawayRight - cutawayBleed,
+      width: cutawayWidth,
+      height: cutawayHeight,
+      opacity: cutawayReveal * (collaboratorActive ? 1 : 0.9),
+      transform: "translateX(".concat(cutawayTranslateX, "px) scale(").concat(cutawayScale, ") rotate(").concat(isLandscape ? '-1.8deg' : '-0.8deg', ")"),
+      transformOrigin: 'center right',
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      borderRadius: "".concat(cutawayRadius, "px"),
+      overflow: 'hidden',
+      border: "1px solid ".concat(withAlpha(textColor, collaboratorActive ? 0.34 : 0.2)),
+      boxShadow: '0 24px 50px rgba(0, 0, 0, 0.42)',
+      backgroundColor: withAlpha(primaryColor || '#0f172a', 0.64)
+    }
+  }, hasCollaboratorVideo ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: '50% 18%',
+      transform: "scale(".concat(collaboratorActive ? 1.05 : 1.02, ")"),
+      filter: collaboratorActive ? 'brightness(1.06) saturate(1.08)' : 'brightness(0.78) saturate(0.82)'
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(135deg, ".concat(withAlpha(accent, 0.25), " 0%, ").concat(withAlpha(primaryColor || '#0f172a', 0.94), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "radial-gradient(ellipse at center, ".concat(withAlpha('#000000', 0), " 35%, ").concat(withAlpha('#000000', 0.66), " 100%)"),
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.1), " 0%, ").concat(withAlpha('#000000', 0.74), " 100%)"),
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 16,
+      right: 16,
+      top: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 38,
+      height: 2,
+      backgroundColor: accent,
+      marginBottom: 8
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: cutawayLabelSize,
+      letterSpacing: '0.24em',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+      color: collaboratorActive ? accent : mutedTextColor
+    }
+  }, cutawayLabel)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 16,
+      right: 16,
+      bottom: 16
+    }
+  }, guestNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "documentary-guest-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: guestNameSize,
+        lineHeight: 0.99,
+        letterSpacing: '-0.02em',
+        fontWeight: 500,
+        textShadow: '0 10px 26px rgba(0, 0, 0, 0.48)',
+        marginBottom: index === guestNameLines.length - 1 ? 0 : 1
+      }
+    }, line);
+  }), safeCollaboratorTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: safeCollaboratorName ? 5 : 0
+    }
+  }, guestRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "documentary-guest-role-".concat(index),
+      style: {
+        fontSize: guestRoleSize,
+        lineHeight: 1.2,
+        color: softTextColor,
+        marginBottom: index === guestRoleLines.length - 1 ? 0 : 1
+      }
+    }, line);
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: framePadding,
+      border: "1px solid ".concat(withAlpha(accent, collaboratorActive ? 0.24 : 0.12)),
+      opacity: isPortrait ? 0.4 : 0.34,
+      pointerEvents: 'none',
+      zIndex: 5
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 100
+    }
+  }, children));
+};