@zync/zync-screnplay-player 0.1.208 → 0.1.210

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

@@ -1,765 +1,18 @@
+var _excluded = ["children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 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';
-import { useSafeZoneInsets } from '../utils/SafeZones';
-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'
-  });
-};
+import { CreatorCollabColdOpenVisual } from './CreatorCollabColdOpenVisual.jsx';
 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 _useSafeZoneInsets = useSafeZoneInsets(),
-    insetTop = _useSafeZoneInsets.insetTop,
-    insetLeft = _useSafeZoneInsets.insetLeft,
-    insetRight = _useSafeZoneInsets.insetRight,
-    insetBottom = _useSafeZoneInsets.insetBottom;
-  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 previewEnterOvershoot = 28;
-  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 introTitleSafeTop = Math.max(introTitleTop, insetTop + 16);
-  var introTitleSafeLeft = introTitleCentered ? '50%' : Math.max(introTitleLeft, insetLeft + 12);
-  var compactTitleSafeTop = Math.max(compactTitleTop, insetTop + (isPortrait ? 18 : isLandscape ? 12 : 12));
-  var compactTitleSafeLeft = compactTitleCentered ? '50%' : Math.max(compactTitleLeft, insetLeft + (isPortrait ? 8 : isLandscape ? 12 : 6));
-  var lowerThirdSafeLeft = Math.max(lowerThirdLeft, insetLeft + (isPortrait ? 8 : isLandscape ? 12 : 6));
-  var lowerThirdSafeBottom = Math.max(lowerThirdBottom, insetBottom + (isPortrait ? 24 : 18));
-  var previewSafeTop = Math.max(previewTop, insetTop + previewLabelDisplayFontSize + 22);
-  var previewSafeRight = Math.max(previewRight - previewBleed, insetRight) + previewEnterOvershoot;
-  var chromeInsets = {
-    top: Math.max(padding, insetTop),
-    left: Math.max(padding, insetLeft),
-    right: Math.max(padding, insetRight),
-    bottom: Math.max(padding, insetBottom)
-  };
-  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: introTitleSafeTop,
-      left: introTitleSafeLeft,
-      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: compactTitleSafeTop,
-      left: compactTitleSafeLeft,
-      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: lowerThirdSafeLeft,
-      bottom: lowerThirdSafeBottom,
-      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: previewSafeTop,
-      right: previewSafeRight,
-      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',
-      top: chromeInsets.top,
-      left: chromeInsets.left,
-      right: chromeInsets.right,
-      bottom: chromeInsets.bottom,
-      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));
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CreatorCollabColdOpenVisual, _extends({}, props, {
+    renderChildren: true,
+    showBackground: true,
+    showTitleElements: true,
+    showPreview: true,
+    showLowerThird: true,
+    showChrome: true
+  }), children);
 };