@zync/zync-screnplay-player 0.1.196 → 0.1.198

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

@@ -0,0 +1,924 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } 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 _loadFont = loadFont(),
+  fontFamily = _loadFont.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 getRevealStyle = function getRevealStyle(frame, delayFrames) {
+  var distance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16;
+  var opacity = interpolate(frame, [delayFrames, delayFrames + 12], [0, 1], {
+    easing: Easing.out(Easing.ease),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var translateY = interpolate(frame, [delayFrames, delayFrames + 12], [distance, 0], {
+    easing: Easing.out(Easing.ease),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return {
+    opacity: opacity,
+    transform: "translateY(".concat(translateY, "px)")
+  };
+};
+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(function (filter) {
+    return Boolean(filter);
+  });
+  return merged.length ? merged.join(" ") : undefined;
+};
+export var CreatorCollabSplit = function CreatorCollabSplit(_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;
+  var frame = useCurrentFrame();
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!firstNoBackgroundVideoUrl;
+  var safeText = sanitizeText(text);
+  var safeFullName = sanitizeText(fullName);
+  var safeTitle = sanitizeText(title);
+  var safeCollaboratorName = sanitizeText(collaboratorName);
+  var safeCollaboratorTitle = sanitizeText(collaboratorTitle);
+  var safeTopicLabel = sanitizeText(topicLabel);
+  var speaker = sanitizeText(activeSpeaker).toLowerCase();
+  var creatorActive = speaker !== "collaborator";
+  var collaboratorActive = speaker === "collaborator";
+  var hasTitle = Boolean(safeText);
+  var hasCreatorInfo = Boolean(safeFullName || safeTitle);
+  var hasCollaboratorText = Boolean(safeCollaboratorName || safeCollaboratorTitle);
+  var hasCollaboratorInfo = Boolean(hasCollaboratorText || secondVideoFile);
+  var showCollaboratorVideo = Boolean(secondVideoFile);
+  var basePadding = CHROME_PADDING + 10;
+  var landscapeGap = 36;
+  var portraitGap = 24;
+  var landscapeContentWidth = width - basePadding * 2;
+  var landscapeContentHeight = height - basePadding * 2;
+  var landscapeRightWidth = landscapeContentHeight * (4 / 3);
+  var landscapeLeftWidth = Math.max(0, landscapeContentWidth - landscapeGap - landscapeRightWidth);
+  var portraitContentWidth = width - CHROME_PADDING * 2;
+  var portraitContentHeight = height - CHROME_PADDING * 2;
+  var portraitVideoHeight = (portraitContentHeight - portraitGap) * 0.6;
+  var portraitInfoHeight = (portraitContentHeight - portraitGap) * 0.4;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        layoutDirection: "row",
+        padding: basePadding,
+        gap: landscapeGap,
+        stackGap: 18,
+        titleStackGap: 10,
+        cardGap: 8,
+        infoWidth: landscapeLeftWidth,
+        infoHeight: landscapeContentHeight,
+        videoWidth: landscapeRightWidth,
+        videoHeight: landscapeContentHeight,
+        infoPadding: 28,
+        cardPadding: 22,
+        titleMaxFontSize: 80,
+        titleLineHeight: 1.12,
+        titleMaxWidth: Math.min(landscapeLeftWidth, 520),
+        nameMaxFontSize: 34,
+        roleMaxFontSize: 20,
+        titleMaxLines: 3,
+        previewAspectRatio: 1,
+        previewWidth: landscapeLeftWidth,
+        previewMaxHeightRatio: 0.55,
+        statusFontSize: 14,
+        badgeFontSize: 14
+      },
+      portrait: {
+        layoutDirection: "column",
+        padding: CHROME_PADDING,
+        gap: portraitGap,
+        stackGap: 16,
+        titleStackGap: 8,
+        cardGap: 8,
+        infoWidth: portraitContentWidth,
+        infoHeight: portraitInfoHeight,
+        videoWidth: portraitContentWidth,
+        videoHeight: portraitVideoHeight,
+        infoPadding: 22,
+        cardPadding: 18,
+        titleMaxFontSize: 46,
+        titleLineHeight: 1.12,
+        titleMaxWidth: portraitContentWidth,
+        nameMaxFontSize: 60,
+        roleMaxFontSize: 40,
+        titleMaxLines: 3,
+        previewAspectRatio: 1,
+        previewWidth: portraitContentWidth,
+        previewMaxHeightRatio: 0.55,
+        statusFontSize: 24,
+        badgeFontSize: 24
+      },
+      square: {
+        layoutDirection: "column",
+        padding: CHROME_PADDING,
+        gap: portraitGap,
+        stackGap: 16,
+        titleStackGap: 8,
+        cardGap: 8,
+        infoWidth: portraitContentWidth,
+        infoHeight: portraitInfoHeight,
+        videoWidth: portraitContentWidth,
+        videoHeight: portraitVideoHeight,
+        infoPadding: 22,
+        cardPadding: 18,
+        titleMaxFontSize: 46,
+        titleLineHeight: 1.12,
+        titleMaxWidth: portraitContentWidth,
+        nameMaxFontSize: 30,
+        roleMaxFontSize: 20,
+        titleMaxLines: 1,
+        previewAspectRatio: 1,
+        previewWidth: portraitContentWidth,
+        previewMaxHeightRatio: 0.55,
+        statusFontSize: 13,
+        badgeFontSize: 12
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    layoutDirection = _useOrientationBased.layoutDirection,
+    padding = _useOrientationBased.padding,
+    gap = _useOrientationBased.gap,
+    stackGap = _useOrientationBased.stackGap,
+    titleStackGap = _useOrientationBased.titleStackGap,
+    cardGap = _useOrientationBased.cardGap,
+    infoWidth = _useOrientationBased.infoWidth,
+    infoHeight = _useOrientationBased.infoHeight,
+    videoWidth = _useOrientationBased.videoWidth,
+    videoHeight = _useOrientationBased.videoHeight,
+    infoPadding = _useOrientationBased.infoPadding,
+    cardPadding = _useOrientationBased.cardPadding,
+    titleMaxFontSize = _useOrientationBased.titleMaxFontSize,
+    titleLineHeight = _useOrientationBased.titleLineHeight,
+    titleMaxWidth = _useOrientationBased.titleMaxWidth,
+    nameMaxFontSize = _useOrientationBased.nameMaxFontSize,
+    roleMaxFontSize = _useOrientationBased.roleMaxFontSize,
+    titleMaxLines = _useOrientationBased.titleMaxLines,
+    previewAspectRatio = _useOrientationBased.previewAspectRatio,
+    previewWidth = _useOrientationBased.previewWidth,
+    previewMaxHeightRatio = _useOrientationBased.previewMaxHeightRatio,
+    statusFontSize = _useOrientationBased.statusFontSize,
+    badgeFontSize = _useOrientationBased.badgeFontSize;
+  var isLandscape = orientation === "landscape";
+  var isPortrait = orientation === "portrait";
+  var isSquare = orientation === "square";
+  var surfaceRadius = isLandscape ? 28 : 24;
+  var columnInTranslate = interpolate(frame, [0, 18], [-40, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateRight: "clamp"
+  });
+  var columnOpacity = interpolate(frame, [0, 18], [0, 1], {
+    easing: Easing.out(Easing.ease),
+    extrapolateRight: "clamp"
+  });
+  var previewInScale = interpolate(frame, [6, 20], [0.96, 1], {
+    easing: Easing.out(Easing.ease),
+    extrapolateRight: "clamp"
+  });
+  var previewInOpacity = interpolate(frame, [6, 20], [0, 1], {
+    easing: Easing.out(Easing.ease),
+    extrapolateRight: "clamp"
+  });
+  var shouldCardReveal = isSquare || isPortrait;
+  var cardTitleRevealDelay = 0;
+  var cardHostRevealDelay = 10;
+  var cardFeaturingRevealDelay = 18;
+  var cardTitleLineReveal = function cardTitleLineReveal(index) {
+    return getRevealStyle(frame, cardTitleRevealDelay + index * 4, 12);
+  };
+  var cardHostReveal = getRevealStyle(frame, cardHostRevealDelay, 14);
+  var cardFeaturingReveal = getRevealStyle(frame, cardFeaturingRevealDelay, 14);
+  var titleWidth = Math.min(infoWidth, titleMaxWidth);
+  var titleHeight = titleMaxFontSize * titleLineHeight * titleMaxLines;
+  var _distributeTextToFit = distributeTextToFit(safeText, titleWidth, titleHeight, titleMaxFontSize),
+    titleLines = _distributeTextToFit.lines,
+    titleFontSize = _distributeTextToFit.fontSize;
+  var clampedTitleLines = clampLines(titleLines, titleMaxLines);
+  var _distributeTextToFit2 = distributeTextToFit(safeFullName, infoWidth - infoPadding * 2, 90, nameMaxFontSize),
+    creatorNameLines = _distributeTextToFit2.lines,
+    creatorNameFontSize = _distributeTextToFit2.fontSize;
+  var _distributeTextToFit3 = distributeTextToFit(safeTitle, infoWidth - infoPadding * 2, 70, roleMaxFontSize),
+    creatorTitleLines = _distributeTextToFit3.lines,
+    creatorTitleFontSize = _distributeTextToFit3.fontSize;
+  var _distributeTextToFit4 = distributeTextToFit(safeCollaboratorName, infoWidth - infoPadding * 2, 90, nameMaxFontSize),
+    collaboratorNameLines = _distributeTextToFit4.lines,
+    collaboratorNameFontSize = _distributeTextToFit4.fontSize;
+  var _distributeTextToFit5 = distributeTextToFit(safeCollaboratorTitle, infoWidth - infoPadding * 2, 70, roleMaxFontSize),
+    collaboratorTitleLines = _distributeTextToFit5.lines,
+    collaboratorTitleFontSize = _distributeTextToFit5.fontSize;
+  var cardBackground = withAlpha(primaryColor || "#0f172a", 0.6) || "#0f172a";
+  var cardBorder = withAlpha(accentColor || "#ffffff", 0.35) || "#ffffff";
+  var textColor = primaryContrast || "#ffffff";
+  var subTextColor = withAlpha(textColor, 0.75) || textColor;
+  var mutedTextColor = withAlpha(textColor, 0.6) || textColor;
+  var ringColor = accentColor || "#ffffff";
+  var hostBadgeBackground = withAlpha(ringColor, 0.2) || ringColor;
+  var hostBadgeColor = ringColor;
+  var featuringBackground = ringColor;
+  var featuringColor = accentContrast || primaryColor || "#0f172a";
+  var previewMaxHeight = infoHeight * previewMaxHeightRatio;
+  var rawPreviewHeight = previewWidth / previewAspectRatio;
+  var previewHeight = Math.min(rawPreviewHeight, previewMaxHeight);
+  var previewWidthAdjusted = previewHeight * previewAspectRatio;
+  var creatorScale = creatorActive ? 1.03 : 1;
+  var collaboratorScale = collaboratorActive ? 1.03 : 1;
+  var inactiveOpacity = 0.92;
+  var inactiveFilter = "saturate(0.85) brightness(0.95)";
+  var activeFilter = "saturate(1.05)";
+  var creatorFrameWidth = videoWidth;
+  var creatorFrameHeight = videoHeight;
+  var nowName = safeFullName || "Host";
+  var nextName = safeCollaboratorName || "Guest";
+  var squareBarHeight = Math.min(height * 0.36, 320);
+  var portraitBarHeight = Math.min(height * 0.34, 320);
+  var barHeight = isPortrait ? undefined : isSquare ? undefined : Math.min(height * 0.3, 230);
+  var barPadding = isPortrait ? 18 : 16;
+  var barWidth = width - padding * 2;
+  var barTop = isSquare || isPortrait ? padding : undefined;
+  var barBottom = isSquare || isPortrait ? undefined : padding;
+  var barNameFontSize = isPortrait ? 39 : isSquare ? 20 : 18;
+  var barRoleFontSize = isPortrait ? 27 : isSquare ? 14 : 13;
+  var cardGridGap = 12;
+  var cardColumnWidth = isSquare || isPortrait ? (barWidth - cardGridGap) / 2 : barWidth;
+  var squarePipSize = Math.max(84, Math.min(160, squareBarHeight - barPadding * 2 - 24));
+  var portraitCardPipHeight = Math.max(96, Math.min(200, portraitBarHeight - barPadding * 2 - 64));
+  var portraitCardPipWidth = portraitCardPipHeight;
+  var portraitGridPipWidth = Math.min(portraitCardPipWidth, Math.max(72, cardColumnWidth * 0.45));
+  var portraitGridPipHeight = portraitGridPipWidth;
+  var pipAspectRatio = isPortrait ? 4 / 5 : 1;
+  var pipMaxWidth = width * (isPortrait ? 0.36 : 0.34);
+  var pipMaxHeight = height * (isPortrait ? 0.28 : 0.3);
+  var availablePipHeight = isPortrait ? height - barHeight - padding * 2 : height - padding * 2;
+  var pipHeight = Math.max(0, Math.min(pipMaxHeight, availablePipHeight));
+  var pipWidth = pipHeight * pipAspectRatio;
+  if (pipWidth > pipMaxWidth) {
+    pipWidth = pipMaxWidth;
+    pipHeight = pipWidth / pipAspectRatio;
+  }
+  var pipTop = isPortrait ? padding : undefined;
+  var pipBottom = isPortrait ? undefined : padding;
+  var showBar = hasTitle || hasCreatorInfo || hasCollaboratorText;
+  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, creatorActive && isLandscape && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: 16,
+        left: 16,
+        backgroundColor: ringColor,
+        color: featuringColor,
+        padding: "6px 14px",
+        borderRadius: 999,
+        fontSize: badgeFontSize,
+        fontWeight: 700,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        zIndex: 6
+      }
+    }, "Speaking"), !creatorActive && isLandscape && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: 16,
+        left: 16,
+        backgroundColor: withAlpha(primaryColor || "#0f172a", 0.6),
+        color: textColor,
+        padding: "6px 14px",
+        borderRadius: 999,
+        fontSize: badgeFontSize,
+        fontWeight: 700,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        zIndex: 6
+      }
+    }, "Listening"), 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 || "transparent",
+      fontFamily: fontFamily,
+      color: textColor
+    }
+  }, isLandscape ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      flexDirection: layoutDirection,
+      gap: gap,
+      padding: padding,
+      alignItems: "stretch",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: infoWidth,
+      height: infoHeight,
+      display: "flex",
+      flexDirection: "column",
+      gap: 0,
+      transform: isLandscape ? "translateX(".concat(columnInTranslate, "px)") : "translateY(".concat(columnInTranslate, "px)"),
+      opacity: columnOpacity
+    }
+  }, hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: titleWidth,
+      height: titleHeight
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, getRevealStyle(frame, 0, 8)), {}, {
+      fontSize: badgeFontSize,
+      letterSpacing: "0.28em",
+      textTransform: "uppercase",
+      color: mutedTextColor,
+      fontWeight: 700,
+      marginBottom: 8
+    })
+  }, safeTopicLabel), clampedTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "title-line-".concat(index),
+      style: _objectSpread(_objectSpread({}, getRevealStyle(frame, index * 4 + 2)), {}, {
+        marginBottom: index === clampedTitleLines.length - 1 ? 0 : 6
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: titleFontSize,
+        fontWeight: 600,
+        lineHeight: titleLineHeight,
+        letterSpacing: "0.01em"
+      }
+    }, line));
+  })), (hasCreatorInfo || hasCollaboratorInfo) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: stackGap,
+      marginTop: hasTitle ? titleStackGap : 0
+    }
+  }, hasCreatorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: cardBackground,
+      borderRadius: surfaceRadius,
+      padding: cardPadding,
+      display: "flex",
+      flexDirection: "column",
+      gap: cardGap,
+      border: "1px solid ".concat(cardBorder),
+      boxShadow: "0 16px 36px rgba(15, 23, 42, 0.35)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, getRevealStyle(frame, 6, 10)), {}, {
+      alignSelf: "flex-start",
+      backgroundColor: hostBadgeBackground,
+      color: hostBadgeColor,
+      padding: "5px 12px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 700,
+      letterSpacing: "0.2em",
+      textTransform: "uppercase"
+    })
+  }, "Host"), safeFullName && /*#__PURE__*/React.createElement("div", {
+    style: getRevealStyle(frame, 8, 10)
+  }, creatorNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "creator-name-".concat(index),
+      style: {
+        fontSize: creatorNameFontSize,
+        fontWeight: 700,
+        lineHeight: 1.12
+      }
+    }, line);
+  })), safeTitle && /*#__PURE__*/React.createElement("div", {
+    style: getRevealStyle(frame, 12, 10)
+  }, creatorTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "creator-title-".concat(index),
+      style: {
+        fontSize: creatorTitleFontSize,
+        fontWeight: 500,
+        color: subTextColor,
+        lineHeight: 1.2,
+        marginTop: index === 0 ? 4 : 0
+      }
+    }, line);
+  }))), hasCollaboratorText && /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: cardBackground,
+      borderRadius: surfaceRadius,
+      padding: cardPadding,
+      display: "flex",
+      flexDirection: "column",
+      gap: cardGap,
+      border: "1px solid ".concat(cardBorder),
+      boxShadow: "0 16px 36px rgba(15, 23, 42, 0.35)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, getRevealStyle(frame, 14, 10)), {}, {
+      alignSelf: "flex-start",
+      backgroundColor: featuringBackground,
+      color: featuringColor,
+      padding: "5px 12px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 700,
+      letterSpacing: "0.2em",
+      textTransform: "uppercase"
+    })
+  }, "Featuring"), safeCollaboratorName && /*#__PURE__*/React.createElement("div", {
+    style: getRevealStyle(frame, 16, 10)
+  }, collaboratorNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "collab-name-".concat(index),
+      style: {
+        fontSize: collaboratorNameFontSize,
+        fontWeight: 700,
+        lineHeight: 1.12
+      }
+    }, line);
+  })), safeCollaboratorTitle && /*#__PURE__*/React.createElement("div", {
+    style: getRevealStyle(frame, 18, 10)
+  }, collaboratorTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "collab-title-".concat(index),
+      style: {
+        fontSize: collaboratorTitleFontSize,
+        fontWeight: 500,
+        color: subTextColor,
+        lineHeight: 1.2,
+        marginTop: index === 0 ? 4 : 0
+      }
+    }, line);
+  }))), showCollaboratorVideo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: previewInOpacity * (collaboratorActive ? 1 : inactiveOpacity),
+      transform: "scale(".concat(previewInScale * collaboratorScale, ")"),
+      transformOrigin: "top left",
+      filter: collaboratorActive ? activeFilter : inactiveFilter
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: previewWidthAdjusted,
+      height: previewHeight,
+      borderRadius: surfaceRadius,
+      overflow: "hidden",
+      border: collaboratorActive ? "2px solid ".concat(ringColor) : "1px solid ".concat(cardBorder),
+      boxShadow: "0 14px 30px rgba(15, 23, 42, 0.35)",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      objectPosition: "50% 20%"
+    }
+  }), safeCollaboratorName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: 12,
+      bottom: 12,
+      backgroundColor: withAlpha(primaryColor || "#0f172a", 0.7),
+      color: textColor,
+      padding: "6px 12px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 600,
+      letterSpacing: "0.02em"
+    }
+  }, safeCollaboratorName), collaboratorActive && isLandscape && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 12,
+      left: 12,
+      backgroundColor: ringColor,
+      color: featuringColor,
+      padding: "4px 10px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 700,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase"
+    }
+  }, "Speaking"))), hasCollaboratorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "auto",
+      color: mutedTextColor,
+      fontSize: statusFontSize,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase",
+      display: "flex",
+      flexDirection: "column",
+      gap: 6
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: getRevealStyle(frame, 20, 8)
+  }, "Now: ", nowName, " asking"), /*#__PURE__*/React.createElement("div", {
+    style: getRevealStyle(frame, 22, 8)
+  }, "Next: ", nextName, " answering")))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: videoWidth,
+      height: videoHeight,
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: creatorActive ? 1 : inactiveOpacity
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: creatorFrameWidth,
+      height: creatorFrameHeight,
+      position: "relative",
+      borderRadius: surfaceRadius,
+      overflow: "hidden",
+      boxShadow: "0 30px 60px rgba(15, 23, 42, 0.35)",
+      border: creatorActive ? "2px solid ".concat(ringColor) : "1px solid ".concat(cardBorder),
+      filter: creatorActive ? activeFilter : inactiveFilter,
+      transform: "scale(".concat(creatorScale, ")"),
+      transformOrigin: "center"
+    }
+  }, renderCreatorVideo(creatorFrameWidth, creatorFrameHeight, surfaceRadius)))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      borderRadius: isSquare ? surfaceRadius : 0,
+      overflow: "hidden",
+      border: creatorActive ? "2px solid ".concat(ringColor) : "1px solid ".concat(cardBorder),
+      opacity: creatorActive ? 1 : inactiveOpacity,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      transform: "scale(".concat(creatorScale, ")"),
+      transformOrigin: "center",
+      filter: creatorActive ? activeFilter : inactiveFilter
+    }
+  }, renderCreatorVideo(width, height, isSquare ? surfaceRadius : 0))), showCollaboratorVideo && !isSquare && !isPortrait && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: pipTop,
+      bottom: pipBottom,
+      right: padding,
+      width: pipWidth,
+      height: pipHeight,
+      opacity: previewInOpacity * (collaboratorActive ? 1 : inactiveOpacity) * columnOpacity,
+      transform: "scale(".concat(previewInScale * collaboratorScale, ")"),
+      transformOrigin: "top right",
+      zIndex: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: surfaceRadius,
+      overflow: "hidden",
+      border: collaboratorActive ? "2px solid ".concat(ringColor) : "1px solid ".concat(cardBorder),
+      boxShadow: "0 16px 32px rgba(15, 23, 42, 0.35)",
+      position: "relative",
+      filter: collaboratorActive ? activeFilter : inactiveFilter
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      objectPosition: "50% 20%"
+    }
+  }), safeCollaboratorName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: 12,
+      bottom: 12,
+      backgroundColor: withAlpha(primaryColor || "#0f172a", 0.7),
+      color: textColor,
+      padding: "6px 12px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 600,
+      letterSpacing: "0.02em"
+    }
+  }, safeCollaboratorName), collaboratorActive && isLandscape ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 12,
+      left: 12,
+      backgroundColor: ringColor,
+      color: featuringColor,
+      padding: "4px 10px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 700,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase"
+    }
+  }, "Speaking") : null)), showBar && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: padding,
+      right: padding,
+      top: barTop,
+      bottom: barBottom,
+      height: barHeight,
+      backgroundColor: cardBackground,
+      borderRadius: surfaceRadius,
+      padding: barPadding,
+      border: "1px solid ".concat(cardBorder),
+      boxShadow: "0 16px 36px rgba(15, 23, 42, 0.35)",
+      display: "flex",
+      flexDirection: "column",
+      gap: 10,
+      opacity: columnOpacity,
+      zIndex: 6
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: badgeFontSize,
+      letterSpacing: "0.28em",
+      textTransform: "uppercase",
+      color: mutedTextColor,
+      fontWeight: 700
+    }
+  }, safeTopicLabel), hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: barWidth
+    }
+  }, clampedTitleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "stacked-title-".concat(index),
+      style: _objectSpread(_objectSpread({}, shouldCardReveal ? cardTitleLineReveal(index) : null), {}, {
+        fontSize: titleFontSize,
+        fontWeight: 600,
+        lineHeight: titleLineHeight,
+        letterSpacing: "0.01em"
+      })
+    }, line);
+  })), (hasCreatorInfo || hasCollaboratorText || showCollaboratorVideo) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: isSquare || isPortrait ? "1fr 1fr" : "1fr",
+      gap: cardGridGap,
+      alignItems: "stretch"
+    }
+  }, hasCreatorInfo && /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({
+      backgroundColor: withAlpha(primaryColor || "#0f172a", 0.35),
+      borderRadius: surfaceRadius,
+      padding: 14,
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+      height: "100%",
+      justifyContent: "center",
+      position: "relative"
+    }, shouldCardReveal ? cardHostReveal : null)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: hostBadgeBackground,
+      color: hostBadgeColor,
+      padding: "4px 10px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 700,
+      letterSpacing: "0.2em",
+      textTransform: "uppercase",
+      position: "absolute",
+      top: 10,
+      left: 10
+    }
+  }, "Host"), safeFullName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: barNameFontSize,
+      fontWeight: 700,
+      lineHeight: 1.15
+    }
+  }, safeFullName), safeTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: barRoleFontSize,
+      fontWeight: 500,
+      color: subTextColor,
+      lineHeight: 1.2,
+      marginTop: safeFullName ? 4 : 0
+    }
+  }, safeTitle)), (hasCollaboratorText || showCollaboratorVideo) && /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({
+      backgroundColor: withAlpha(primaryColor || "#0f172a", 0.35),
+      borderRadius: surfaceRadius,
+      padding: 14,
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      gap: 12,
+      alignItems: "center",
+      height: "100%",
+      position: "relative"
+    }, shouldCardReveal ? cardFeaturingReveal : null)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+      justifyContent: "center",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: featuringBackground,
+      color: featuringColor,
+      padding: "4px 10px",
+      borderRadius: 999,
+      fontSize: badgeFontSize,
+      fontWeight: 700,
+      letterSpacing: "0.2em",
+      textTransform: "uppercase",
+      position: "absolute",
+      top: 10,
+      left: 10
+    }
+  }, "Featuring"), safeCollaboratorName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: barNameFontSize,
+      fontWeight: 700,
+      lineHeight: 1.15
+    }
+  }, safeCollaboratorName), safeCollaboratorTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: barRoleFontSize,
+      fontWeight: 500,
+      color: subTextColor,
+      lineHeight: 1.2,
+      marginTop: safeCollaboratorName ? 4 : 0
+    }
+  }, safeCollaboratorTitle)), showCollaboratorVideo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isSquare ? squarePipSize : isPortrait ? portraitGridPipWidth : portraitCardPipWidth,
+      height: isSquare ? squarePipSize : isPortrait ? portraitGridPipHeight : portraitCardPipHeight,
+      borderRadius: surfaceRadius,
+      overflow: "hidden",
+      border: collaboratorActive ? "2px solid ".concat(ringColor) : "1px solid ".concat(cardBorder),
+      boxShadow: "0 12px 24px rgba(15, 23, 42, 0.3)",
+      position: "relative",
+      filter: collaboratorActive ? activeFilter : inactiveFilter
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      objectPosition: "50% 20%"
+    }
+  }))))))), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 100
+    }
+  }, children));
+};