@zync/zync-screnplay-player 0.1.204 → 0.1.205

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

@@ -0,0 +1,607 @@
+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 CreatorCollabConversationSpine = function CreatorCollabConversationSpine(_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;
+  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 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 hasCollaboratorInfo = Boolean(secondVideoFile || safeCollaboratorName || safeCollaboratorTitle);
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        padding: CHROME_PADDING + 10,
+        introTitleWidth: Math.min(width * 0.52, 770),
+        introTitleHeight: height * 0.26,
+        introTitleMaxFontSize: 90,
+        introTitleTop: height * 0.22,
+        introTitleLeft: CHROME_PADDING + 20,
+        introTitleCentered: false,
+        introTitleMaxLines: 3,
+        compactTitleTop: CHROME_PADDING + 16,
+        compactTitleLeft: CHROME_PADDING + 20,
+        compactTitleWidth: Math.min(width * 0.32, 520),
+        compactTitleMaxFontSize: 34,
+        compactTitleMaxLines: 2,
+        topicFontSize: 12,
+        hostInfoTop: CHROME_PADDING + 72,
+        hostInfoLeft: CHROME_PADDING + 20,
+        hostInfoWidth: Math.min(width * 0.28, 410),
+        hostNameMaxFontSize: 24,
+        hostRoleMaxFontSize: 15,
+        spineAxis: 'vertical',
+        spineTop: CHROME_PADDING + 14,
+        spineLeft: undefined,
+        spineRight: CHROME_PADDING + 4,
+        spineWidth: Math.min(width * 0.15, 186),
+        spineHeight: height - (CHROME_PADDING + 14) * 2,
+        previewWidth: Math.min(width * 0.12, 150),
+        previewHeight: Math.min(height * 0.28, 240),
+        previewTop: Math.min(height * 0.24, 240),
+        previewLeft: 18,
+        previewLabelFontSize: 10,
+        guestNameMaxFontSize: 18,
+        guestRoleMaxFontSize: 12
+      },
+      portrait: {
+        padding: CHROME_PADDING + 6,
+        introTitleWidth: Math.min(width * 0.78, 600),
+        introTitleHeight: height * 0.22,
+        introTitleMaxFontSize: 64,
+        introTitleTop: height * 0.2,
+        introTitleLeft: width / 2,
+        introTitleCentered: true,
+        introTitleMaxLines: 3,
+        compactTitleTop: CHROME_PADDING + 20,
+        compactTitleLeft: CHROME_PADDING + 10,
+        compactTitleWidth: Math.min(width * 0.58, 420),
+        compactTitleMaxFontSize: 28,
+        compactTitleMaxLines: 2,
+        topicFontSize: 13,
+        hostInfoTop: CHROME_PADDING + 88,
+        hostInfoLeft: CHROME_PADDING + 10,
+        hostInfoWidth: Math.min(width * 0.54, 360),
+        hostNameMaxFontSize: 22,
+        hostRoleMaxFontSize: 14,
+        spineAxis: 'horizontal',
+        spineTop: CHROME_PADDING + 8,
+        spineLeft: CHROME_PADDING + 8,
+        spineRight: undefined,
+        spineWidth: width - (CHROME_PADDING + 8) * 2,
+        spineHeight: Math.min(height * 0.15, 152),
+        previewWidth: Math.min(width * 0.36, 250),
+        previewHeight: Math.min(height * 0.12, 116),
+        previewTop: 18,
+        previewLeft: undefined,
+        previewLabelFontSize: 10,
+        guestNameMaxFontSize: 18,
+        guestRoleMaxFontSize: 11
+      },
+      square: {
+        padding: CHROME_PADDING + 4,
+        introTitleWidth: Math.min(width * 0.76, 500),
+        introTitleHeight: height * 0.18,
+        introTitleMaxFontSize: 52,
+        introTitleTop: height * 0.2,
+        introTitleLeft: width / 2,
+        introTitleCentered: true,
+        introTitleMaxLines: 2,
+        compactTitleTop: CHROME_PADDING + 14,
+        compactTitleLeft: CHROME_PADDING + 8,
+        compactTitleWidth: Math.min(width * 0.56, 360),
+        compactTitleMaxFontSize: 24,
+        compactTitleMaxLines: 1,
+        topicFontSize: 11,
+        hostInfoTop: CHROME_PADDING + 66,
+        hostInfoLeft: CHROME_PADDING + 8,
+        hostInfoWidth: Math.min(width * 0.5, 320),
+        hostNameMaxFontSize: 18,
+        hostRoleMaxFontSize: 12,
+        spineAxis: 'horizontal',
+        spineTop: CHROME_PADDING + 6,
+        spineLeft: CHROME_PADDING + 6,
+        spineRight: undefined,
+        spineWidth: width - (CHROME_PADDING + 6) * 2,
+        spineHeight: Math.min(height * 0.14, 110),
+        previewWidth: Math.min(width * 0.32, 190),
+        previewHeight: Math.min(height * 0.1, 84),
+        previewTop: 13,
+        previewLeft: undefined,
+        previewLabelFontSize: 9,
+        guestNameMaxFontSize: 14,
+        guestRoleMaxFontSize: 10
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    padding = _useOrientationBased.padding,
+    introTitleWidth = _useOrientationBased.introTitleWidth,
+    introTitleHeight = _useOrientationBased.introTitleHeight,
+    introTitleMaxFontSize = _useOrientationBased.introTitleMaxFontSize,
+    introTitleTop = _useOrientationBased.introTitleTop,
+    introTitleLeft = _useOrientationBased.introTitleLeft,
+    introTitleCentered = _useOrientationBased.introTitleCentered,
+    introTitleMaxLines = _useOrientationBased.introTitleMaxLines,
+    compactTitleTop = _useOrientationBased.compactTitleTop,
+    compactTitleLeft = _useOrientationBased.compactTitleLeft,
+    compactTitleWidth = _useOrientationBased.compactTitleWidth,
+    compactTitleMaxFontSize = _useOrientationBased.compactTitleMaxFontSize,
+    compactTitleMaxLines = _useOrientationBased.compactTitleMaxLines,
+    topicFontSize = _useOrientationBased.topicFontSize,
+    hostInfoTop = _useOrientationBased.hostInfoTop,
+    hostInfoLeft = _useOrientationBased.hostInfoLeft,
+    hostInfoWidth = _useOrientationBased.hostInfoWidth,
+    hostNameMaxFontSize = _useOrientationBased.hostNameMaxFontSize,
+    hostRoleMaxFontSize = _useOrientationBased.hostRoleMaxFontSize,
+    spineAxis = _useOrientationBased.spineAxis,
+    spineTop = _useOrientationBased.spineTop,
+    spineLeft = _useOrientationBased.spineLeft,
+    spineRight = _useOrientationBased.spineRight,
+    spineWidth = _useOrientationBased.spineWidth,
+    spineHeight = _useOrientationBased.spineHeight,
+    previewWidth = _useOrientationBased.previewWidth,
+    previewHeight = _useOrientationBased.previewHeight,
+    previewTop = _useOrientationBased.previewTop,
+    previewLeft = _useOrientationBased.previewLeft,
+    previewLabelFontSize = _useOrientationBased.previewLabelFontSize,
+    guestNameMaxFontSize = _useOrientationBased.guestNameMaxFontSize,
+    guestRoleMaxFontSize = _useOrientationBased.guestRoleMaxFontSize;
+  var isVerticalSpine = spineAxis === 'vertical';
+  var accent = accentColor || '#38bdf8';
+  var textColor = primaryContrast || '#ffffff';
+  var introOpacity = interpolateWithClamp(frame, [0, fps * 0.9], [0, 1]) * interpolateWithClamp(frame, [fps * 1.85, fps * 2.6], [1, 0]);
+  var introTranslateY = interpolateWithClamp(frame, [0, fps * 0.9, fps * 2.6], [24, 0, -18], Easing.out(Easing.cubic));
+  var compactOpacity = interpolateWithClamp(frame, [fps * 2.05, fps * 2.9], [0, 1]);
+  var hostInfoOpacity = interpolateWithClamp(frame, [fps * 1.25, fps * 2.05], [0, 1]);
+  var spineReveal = interpolateWithClamp(frame, [fps * 1.9, fps * 2.95], [0, 1]);
+  var spineShift = interpolateWithClamp(frame, [fps * 1.9, fps * 2.95], [isVerticalSpine ? 44 : 22, 0]);
+  var titleLinesFit = distributeTextToFit(safeText, introTitleWidth, introTitleHeight, introTitleMaxFontSize);
+  var introTitleLines = clampLines(titleLinesFit.lines, introTitleMaxLines);
+  var compactTitleFit = distributeTextToFit(safeText, compactTitleWidth, 76, compactTitleMaxFontSize);
+  var compactTitleLines = clampLines(compactTitleFit.lines, compactTitleMaxLines);
+  var hostNameFit = distributeTextToFit(safeFullName, hostInfoWidth, 54, hostNameMaxFontSize);
+  var hostNameLines = clampLines(hostNameFit.lines, 2);
+  var hostRoleFit = distributeTextToFit(safeTitle, hostInfoWidth, 34, hostRoleMaxFontSize);
+  var hostRoleLines = clampLines(hostRoleFit.lines, 2);
+  var guestTextWidth = isVerticalSpine ? spineWidth - 36 : spineWidth - previewWidth - 74;
+  var guestNameFit = distributeTextToFit(safeCollaboratorName, Math.max(guestTextWidth, 120), isVerticalSpine ? 54 : 40, guestNameMaxFontSize);
+  var guestNameLines = clampLines(guestNameFit.lines, isVerticalSpine ? 2 : 1);
+  var guestRoleFit = distributeTextToFit(safeCollaboratorTitle, Math.max(guestTextWidth, 120), isVerticalSpine ? 38 : 28, guestRoleMaxFontSize);
+  var guestRoleLines = clampLines(guestRoleFit.lines, 2);
+  var previewPulse = 1 + Math.sin(frame / 22) * 0.015;
+  var holeCount = isVerticalSpine ? 14 : 16;
+  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: {
+      backgroundColor: primaryColor || '#0f172a',
+      color: textColor,
+      fontFamily: bodyFontFamily,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      transform: "scale(1.03) translateY(".concat(Math.sin(frame / 54) * 2, "px)"),
+      filter: creatorActive ? 'saturate(1.02)' : 'brightness(0.9) saturate(0.88)'
+    }
+  }, renderCreatorVideo(width, height, 0)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: isVerticalSpine ? "linear-gradient(96deg, ".concat(withAlpha('#030712', 0.82), " 0%, ").concat(withAlpha('#030712', 0.46), " 30%, ").concat(withAlpha('#030712', 0.16), " 52%, ").concat(withAlpha('#030712', 0.7), " 100%)") : "linear-gradient(180deg, ".concat(withAlpha('#030712', 0.7), " 0%, ").concat(withAlpha('#030712', 0.2), " 34%, ").concat(withAlpha('#030712', 0.8), " 100%)"),
+      zIndex: 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: isVerticalSpine ? "radial-gradient(circle at 84% 38%, ".concat(withAlpha(accent, collaboratorActive ? 0.34 : 0.2), " 0%, ").concat(withAlpha(accent, 0), " 42%)") : "linear-gradient(130deg, ".concat(withAlpha(accent, collaboratorActive ? 0.26 : 0.14), " 0%, ").concat(withAlpha(accent, 0), " 44%)"),
+      zIndex: 3
+    }
+  }), hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: introTitleTop,
+      left: introTitleCentered ? '50%' : introTitleLeft,
+      width: introTitleWidth,
+      textAlign: introTitleCentered ? 'center' : 'left',
+      opacity: introOpacity,
+      transform: "".concat(introTitleCentered ? 'translateX(-50%) ' : '', "translateY(").concat(introTranslateY, "px)"),
+      zIndex: 7
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.28em',
+      textTransform: 'uppercase',
+      fontWeight: 600,
+      color: withAlpha(textColor, 0.76),
+      marginBottom: 10
+    }
+  }, safeTopicLabel), introTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "conversation-spine-title-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: titleLinesFit.fontSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.03em',
+        fontWeight: 500,
+        textShadow: '0 16px 34px rgba(0, 0, 0, 0.42)',
+        marginBottom: index === introTitleLines.length - 1 ? 0 : 4
+      }
+    }, line);
+  })), (safeTopicLabel || hasTitle) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: compactTitleTop,
+      left: compactTitleLeft,
+      width: compactTitleWidth,
+      opacity: compactOpacity,
+      transform: "translateY(".concat(interpolateWithClamp(frame, [fps * 2.05, fps * 2.9], [16, 0]), "px)"),
+      zIndex: 8
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.24em',
+      textTransform: 'uppercase',
+      color: withAlpha(textColor, 0.65),
+      fontWeight: 600,
+      marginBottom: 6
+    }
+  }, safeTopicLabel), compactTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "conversation-compact-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: compactTitleFit.fontSize,
+        lineHeight: 1,
+        letterSpacing: '-0.02em',
+        fontWeight: 500,
+        textShadow: '0 10px 26px rgba(0, 0, 0, 0.4)'
+      }
+    }, line);
+  })), hasCreatorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: hostInfoTop,
+      left: hostInfoLeft,
+      width: hostInfoWidth,
+      opacity: hostInfoOpacity,
+      transform: "translateY(".concat(interpolateWithClamp(frame, [fps * 1.25, fps * 2.05], [16, 0]), "px)"),
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 42,
+      height: 2,
+      backgroundColor: withAlpha(accent, 0.82),
+      marginBottom: 8
+    }
+  }), hostNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "conversation-host-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: hostNameFit.fontSize,
+        lineHeight: 1,
+        letterSpacing: '-0.02em',
+        fontWeight: 500
+      }
+    }, line);
+  }), safeTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 4
+    }
+  }, hostRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "conversation-host-role-".concat(index),
+      style: {
+        fontSize: hostRoleFit.fontSize,
+        lineHeight: 1.2,
+        color: withAlpha(textColor, 0.78),
+        fontWeight: 500
+      }
+    }, line);
+  }))), hasCollaboratorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: spineTop,
+      left: spineLeft,
+      right: spineRight,
+      width: spineWidth,
+      height: spineHeight,
+      opacity: spineReveal,
+      transform: isVerticalSpine ? "translateX(".concat(spineShift, "px) scale(").concat(collaboratorActive ? 1.02 : 1, ")") : "translateY(".concat(spineShift, "px) scale(").concat(collaboratorActive ? 1.02 : 1, ")"),
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      borderRadius: isVerticalSpine ? 28 : 20,
+      backgroundColor: withAlpha('#020617', 0.62),
+      border: "1px solid ".concat(withAlpha(collaboratorActive ? accent : textColor, collaboratorActive ? 0.72 : 0.22)),
+      boxShadow: collaboratorActive ? "0 22px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px ".concat(withAlpha(accent, 0.36)) : '0 18px 36px rgba(0, 0, 0, 0.42)',
+      overflow: 'hidden'
+    }
+  }, Array.from({
+    length: holeCount
+  }).map(function (_, index) {
+    var progress = holeCount === 1 ? 0 : index / (holeCount - 1);
+    var holeSize = isVerticalSpine ? 5 : 4;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "spine-hole-".concat(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: holeSize,
+        height: holeSize,
+        borderRadius: '50%',
+        backgroundColor: withAlpha('#000000', 0.32),
+        left: isVerticalSpine ? 6 : progress * (spineWidth - holeSize),
+        top: isVerticalSpine ? progress * (spineHeight - holeSize) : 6
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: holeSize,
+        height: holeSize,
+        borderRadius: '50%',
+        backgroundColor: withAlpha('#000000', 0.32),
+        left: isVerticalSpine ? spineWidth - holeSize - 6 : progress * (spineWidth - holeSize),
+        top: isVerticalSpine ? progress * (spineHeight - holeSize) : spineHeight - holeSize - 6
+      }
+    }));
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: isVerticalSpine ? 16 : 14,
+      top: 12,
+      fontSize: previewLabelFontSize,
+      letterSpacing: '0.26em',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+      color: collaboratorActive ? accent : withAlpha(textColor, 0.75)
+    }
+  }, collaboratorActive ? 'Now' : 'Next Frame'), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: isVerticalSpine ? previewTop : previewTop,
+      left: isVerticalSpine ? previewLeft : spineWidth - previewWidth - 16,
+      width: previewWidth,
+      height: previewHeight,
+      borderRadius: isVerticalSpine ? 14 : 12,
+      overflow: 'hidden',
+      border: "1px solid ".concat(withAlpha(collaboratorActive ? accent : textColor, collaboratorActive ? 0.64 : 0.25)),
+      transform: "scale(".concat(previewPulse, ")")
+    }
+  }, secondVideoFile ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: '50% 20%',
+      filter: collaboratorActive ? 'brightness(1.06) saturate(1.08)' : 'brightness(0.84) saturate(0.84)'
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(120deg, ".concat(withAlpha(accent, 0.26), " 0%, ").concat(withAlpha(primaryColor || '#0f172a', 0.9), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.08), " 0%, ").concat(withAlpha('#000000', 0.68), " 100%)")
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: isVerticalSpine ? 16 : 16,
+      right: isVerticalSpine ? 16 : previewWidth + 30,
+      bottom: isVerticalSpine ? 16 : 14
+    }
+  }, guestNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "spine-guest-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: guestNameFit.fontSize,
+        lineHeight: 1,
+        letterSpacing: '-0.02em',
+        fontWeight: 500
+      }
+    }, line);
+  }), safeCollaboratorTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 4
+    }
+  }, guestRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "spine-guest-role-".concat(index),
+      style: {
+        fontSize: guestRoleFit.fontSize,
+        lineHeight: 1.2,
+        color: withAlpha(textColor, 0.76),
+        fontWeight: 500
+      }
+    }, line);
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: padding,
+      border: "1px solid ".concat(withAlpha(collaboratorActive ? accent : textColor, collaboratorActive ? 0.24 : 0.1)),
+      opacity: 0.4,
+      pointerEvents: 'none',
+      zIndex: 6
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 100
+    }
+  }, children));
+};