@zync/zync-screnplay-player 0.1.203 → 0.1.205

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

@@ -0,0 +1,589 @@
+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 CreatorCollabStudioSet = function CreatorCollabStudioSet(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    fullName = _ref.fullName,
+    title = _ref.title,
+    collaboratorName = _ref.collaboratorName,
+    collaboratorTitle = _ref.collaboratorTitle,
+    topicLabel = _ref.topicLabel,
+    activeSpeaker = _ref.activeSpeaker,
+    _ref$startVideoFrom = _ref.startVideoFrom,
+    startVideoFrom = _ref$startVideoFrom === void 0 ? 0 : _ref$startVideoFrom,
+    firstVideoFile = _ref.firstVideoFile,
+    _ref$startSecondVideo = _ref.startSecondVideoFrom,
+    startSecondVideoFrom = _ref$startSecondVideo === void 0 ? 0 : _ref$startSecondVideo,
+    secondVideoFile = _ref.secondVideoFile,
+    firstNoBackgroundVideoUrl = _ref.firstNoBackgroundVideoUrl,
+    firstNoBackgroundFaceMetadata = _ref.firstNoBackgroundFaceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    durationInFrames = _useVideoConfig.durationInFrames;
+  var frame = useCurrentFrame();
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!firstNoBackgroundVideoUrl;
+  var safeText = sanitizeText(text);
+  var 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 + 12,
+        titleWidth: Math.min(width * 0.46, 680),
+        titleHeight: height * 0.28,
+        titleMaxFontSize: 88,
+        titleTop: height * 0.2,
+        titleLeft: CHROME_PADDING + 18,
+        titleCentered: false,
+        titleLinesMax: 3,
+        topicFontSize: 13,
+        hostStampTop: CHROME_PADDING + 24,
+        hostStampLeft: CHROME_PADDING + 18,
+        hostStampWidth: Math.min(width * 0.3, 420),
+        hostNameMaxFontSize: 26,
+        hostRoleMaxFontSize: 16,
+        monitorWidth: Math.min(width * 0.35, 560),
+        monitorHeight: Math.min(height * 0.42, 430),
+        monitorTop: height * 0.24,
+        monitorRight: CHROME_PADDING + 8,
+        monitorRadius: 24,
+        monitorRotateY: -9,
+        monitorRotateX: 3,
+        monitorNameMaxFontSize: 28,
+        monitorRoleMaxFontSize: 16,
+        monitorLabelFontSize: 11,
+        cutoutWidth: Math.min(width * 0.44, 700),
+        cutoutHeight: Math.min(height * 0.94, 900),
+        cutoutBottom: -height * 0.04,
+        cutoutLeft: width * 0.04,
+        stageFloorHeight: Math.min(height * 0.34, 340)
+      },
+      portrait: {
+        padding: CHROME_PADDING + 6,
+        titleWidth: Math.min(width * 0.76, 580),
+        titleHeight: height * 0.22,
+        titleMaxFontSize: 60,
+        titleTop: height * 0.14,
+        titleLeft: width / 2,
+        titleCentered: true,
+        titleLinesMax: 3,
+        topicFontSize: 15,
+        hostStampTop: CHROME_PADDING + 20,
+        hostStampLeft: CHROME_PADDING + 8,
+        hostStampWidth: Math.min(width * 0.62, 450),
+        hostNameMaxFontSize: 28,
+        hostRoleMaxFontSize: 18,
+        monitorWidth: Math.min(width * 0.5, 310),
+        monitorHeight: Math.min(height * 0.24, 260),
+        monitorTop: height * 0.53,
+        monitorRight: CHROME_PADDING + 4,
+        monitorRadius: 20,
+        monitorRotateY: -4,
+        monitorRotateX: 1.5,
+        monitorNameMaxFontSize: 20,
+        monitorRoleMaxFontSize: 13,
+        monitorLabelFontSize: 10,
+        cutoutWidth: Math.min(width * 0.65, 470),
+        cutoutHeight: Math.min(height * 0.7, 640),
+        cutoutBottom: -height * 0.02,
+        cutoutLeft: -width * 0.04,
+        stageFloorHeight: Math.min(height * 0.32, 300)
+      },
+      square: {
+        padding: CHROME_PADDING + 4,
+        titleWidth: Math.min(width * 0.74, 500),
+        titleHeight: height * 0.2,
+        titleMaxFontSize: 52,
+        titleTop: height * 0.14,
+        titleLeft: width / 2,
+        titleCentered: true,
+        titleLinesMax: 2,
+        topicFontSize: 12,
+        hostStampTop: CHROME_PADDING + 10,
+        hostStampLeft: CHROME_PADDING + 6,
+        hostStampWidth: Math.min(width * 0.54, 360),
+        hostNameMaxFontSize: 20,
+        hostRoleMaxFontSize: 13,
+        monitorWidth: Math.min(width * 0.46, 250),
+        monitorHeight: Math.min(height * 0.22, 210),
+        monitorTop: height * 0.54,
+        monitorRight: CHROME_PADDING + 4,
+        monitorRadius: 18,
+        monitorRotateY: -4,
+        monitorRotateX: 1.2,
+        monitorNameMaxFontSize: 16,
+        monitorRoleMaxFontSize: 11,
+        monitorLabelFontSize: 9,
+        cutoutWidth: Math.min(width * 0.6, 390),
+        cutoutHeight: Math.min(height * 0.66, 470),
+        cutoutBottom: -height * 0.03,
+        cutoutLeft: -width * 0.05,
+        stageFloorHeight: Math.min(height * 0.3, 230)
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    padding = _useOrientationBased.padding,
+    titleWidth = _useOrientationBased.titleWidth,
+    titleHeight = _useOrientationBased.titleHeight,
+    titleMaxFontSize = _useOrientationBased.titleMaxFontSize,
+    titleTop = _useOrientationBased.titleTop,
+    titleLeft = _useOrientationBased.titleLeft,
+    titleCentered = _useOrientationBased.titleCentered,
+    titleLinesMax = _useOrientationBased.titleLinesMax,
+    topicFontSize = _useOrientationBased.topicFontSize,
+    hostStampTop = _useOrientationBased.hostStampTop,
+    hostStampLeft = _useOrientationBased.hostStampLeft,
+    hostStampWidth = _useOrientationBased.hostStampWidth,
+    hostNameMaxFontSize = _useOrientationBased.hostNameMaxFontSize,
+    hostRoleMaxFontSize = _useOrientationBased.hostRoleMaxFontSize,
+    monitorWidth = _useOrientationBased.monitorWidth,
+    monitorHeight = _useOrientationBased.monitorHeight,
+    monitorTop = _useOrientationBased.monitorTop,
+    monitorRight = _useOrientationBased.monitorRight,
+    monitorRadius = _useOrientationBased.monitorRadius,
+    monitorRotateY = _useOrientationBased.monitorRotateY,
+    monitorRotateX = _useOrientationBased.monitorRotateX,
+    monitorNameMaxFontSize = _useOrientationBased.monitorNameMaxFontSize,
+    monitorRoleMaxFontSize = _useOrientationBased.monitorRoleMaxFontSize,
+    monitorLabelFontSize = _useOrientationBased.monitorLabelFontSize,
+    cutoutWidth = _useOrientationBased.cutoutWidth,
+    cutoutHeight = _useOrientationBased.cutoutHeight,
+    cutoutBottom = _useOrientationBased.cutoutBottom,
+    cutoutLeft = _useOrientationBased.cutoutLeft,
+    stageFloorHeight = _useOrientationBased.stageFloorHeight;
+  var isLandscape = orientation === 'landscape';
+  var accent = accentColor || '#facc15';
+  var textColor = primaryContrast || '#ffffff';
+  var softText = withAlpha(textColor, 0.75) || textColor;
+  var titleIn = interpolateWithClamp(frame, [0, fps * 0.9], [0, 1]);
+  var titleOut = interpolateWithClamp(frame, [fps * 1.8, fps * 2.5], [1, 0]);
+  var titleOpacity = titleIn * titleOut;
+  var titleTranslateY = interpolateWithClamp(frame, [0, fps * 0.9, fps * 2.5], [24, 0, -20], Easing.out(Easing.cubic));
+  var hostStampOpacity = interpolateWithClamp(frame, [fps * 1.1, fps * 1.9], [0, 1]);
+  var monitorOpacity = interpolateWithClamp(frame, [fps * 1.8, fps * 2.9], [0, 1]);
+  var monitorTranslateX = interpolateWithClamp(frame, [fps * 1.8, fps * 2.9], [42, 0]);
+  var monitorDrift = Math.sin(frame / 28) * 3;
+  var hostDrift = Math.sin(frame / 52) * 2;
+  var longHoldFade = durationInFrames > fps * 8 ? interpolateWithClamp(frame, [Math.min(fps * 7, durationInFrames - fps * 1.6), durationInFrames], [1, 0.68]) : 1;
+  var _distributeTextToFit = distributeTextToFit(safeText, titleWidth, titleHeight, titleMaxFontSize),
+    titleLinesRaw = _distributeTextToFit.lines,
+    titleFontSize = _distributeTextToFit.fontSize;
+  var titleLines = clampLines(titleLinesRaw, titleLinesMax);
+  var _distributeTextToFit2 = distributeTextToFit(safeFullName, hostStampWidth, isLandscape ? 60 : 66, hostNameMaxFontSize),
+    hostNameLines = _distributeTextToFit2.lines,
+    hostNameFontSize = _distributeTextToFit2.fontSize;
+  var _distributeTextToFit3 = distributeTextToFit(safeTitle, hostStampWidth, isLandscape ? 44 : 50, hostRoleMaxFontSize),
+    hostRoleLines = _distributeTextToFit3.lines,
+    hostRoleFontSize = _distributeTextToFit3.fontSize;
+  var monitorTextWidth = monitorWidth - 36;
+  var _distributeTextToFit4 = distributeTextToFit(safeCollaboratorName, monitorTextWidth, isLandscape ? 56 : 48, monitorNameMaxFontSize),
+    guestNameLinesRaw = _distributeTextToFit4.lines,
+    guestNameFontSize = _distributeTextToFit4.fontSize;
+  var guestNameLines = clampLines(guestNameLinesRaw, 2);
+  var _distributeTextToFit5 = distributeTextToFit(safeCollaboratorTitle, monitorTextWidth, isLandscape ? 40 : 30, monitorRoleMaxFontSize),
+    guestRoleLinesRaw = _distributeTextToFit5.lines,
+    guestRoleFontSize = _distributeTextToFit5.fontSize;
+  var guestRoleLines = clampLines(guestRoleLinesRaw, 2);
+  var monitorFrameFilter = collaboratorActive ? 'brightness(1.06) saturate(1.08)' : 'brightness(0.86) saturate(0.82)';
+  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 || '#111827',
+      color: textColor,
+      fontFamily: bodyFontFamily,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      transform: "scale(1.035) translateY(".concat(hostDrift, "px)"),
+      transformOrigin: 'center',
+      filter: creatorActive ? 'saturate(1.03)' : 'brightness(0.9) saturate(0.9)'
+    }
+  }, renderCreatorVideo(width, height, 0)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: isLandscape ? "linear-gradient(100deg, ".concat(withAlpha('#05070d', 0.82), " 0%, ").concat(withAlpha('#05070d', 0.5), " 34%, ").concat(withAlpha('#05070d', 0.2), " 58%, ").concat(withAlpha('#05070d', 0.62), " 100%)") : "linear-gradient(180deg, ".concat(withAlpha('#05070d', 0.58), " 0%, ").concat(withAlpha('#05070d', 0.28), " 40%, ").concat(withAlpha('#05070d', 0.8), " 100%)"),
+      zIndex: 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: isLandscape ? width * 0.18 : width * 0.5,
+      top: isLandscape ? height * 0.36 : height * 0.42,
+      width: isLandscape ? width * 0.76 : width * 0.95,
+      height: stageFloorHeight,
+      transform: "translateX(-50%)",
+      borderRadius: '999px',
+      background: "radial-gradient(circle at center, ".concat(withAlpha(accent, collaboratorActive ? 0.32 : 0.22), " 0%, ").concat(withAlpha(accent, 0), " 65%)"),
+      filter: 'blur(4px)',
+      zIndex: 3
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: isLandscape ? width * 0.08 : width * 0.22,
+      top: isLandscape ? height * 0.14 : height * 0.18,
+      width: isLandscape ? width * 0.5 : width * 0.76,
+      height: isLandscape ? height * 0.62 : height * 0.42,
+      borderRadius: isLandscape ? '48% 52% 54% 46% / 40% 44% 56% 60%' : 28,
+      background: "radial-gradient(circle at 28% 38%, ".concat(withAlpha(accent, creatorActive ? 0.2 : 0.11), " 0%, ").concat(withAlpha(accent, 0), " 66%)"),
+      filter: 'blur(2px)',
+      zIndex: 3
+    }
+  }), firstNoBackgroundVideoUrl && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: cutoutLeft,
+      bottom: cutoutBottom,
+      width: cutoutWidth,
+      height: cutoutHeight,
+      opacity: creatorActive ? 0.96 : 0.86,
+      filter: creatorActive ? 'drop-shadow(0 20px 40px rgba(0, 0, 0, 0.42))' : 'drop-shadow(0 20px 36px rgba(0, 0, 0, 0.35)) saturate(0.88)',
+      zIndex: 4
+    }
+  }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: firstNoBackgroundVideoUrl,
+    faceMetadata: firstNoBackgroundFaceMetadata,
+    containerWidth: cutoutWidth,
+    containerHeight: cutoutHeight,
+    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: 'contain'
+    }
+  })), hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: titleTop,
+      left: titleCentered ? '50%' : titleLeft,
+      width: titleWidth,
+      textAlign: titleCentered ? 'center' : 'left',
+      opacity: titleOpacity,
+      transform: "".concat(titleCentered ? 'translateX(-50%) ' : '', "translateY(").concat(titleTranslateY, "px)"),
+      zIndex: 7
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.28em',
+      textTransform: 'uppercase',
+      color: withAlpha(textColor, 0.75),
+      fontWeight: 600,
+      marginBottom: 12
+    }
+  }, safeTopicLabel), titleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "studio-title-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: titleFontSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.03em',
+        fontWeight: 500,
+        textShadow: '0 16px 36px rgba(0, 0, 0, 0.42)',
+        marginBottom: index === titleLines.length - 1 ? 0 : 4
+      }
+    }, line);
+  })), hasCreatorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: hostStampTop,
+      left: hostStampLeft,
+      width: hostStampWidth,
+      opacity: hostStampOpacity * longHoldFade,
+      transform: "translateY(".concat(interpolateWithClamp(frame, [fps * 1.1, fps * 1.9], [18, 0]), "px)"),
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 46,
+      height: 2,
+      backgroundColor: accent,
+      marginBottom: 10
+    }
+  }), hostNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "studio-host-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: hostNameFontSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.02em',
+        fontWeight: 500
+      }
+    }, line);
+  }), safeTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 6
+    }
+  }, hostRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "studio-host-role-".concat(index),
+      style: {
+        fontSize: hostRoleFontSize,
+        lineHeight: 1.2,
+        color: softText,
+        fontWeight: 500
+      }
+    }, line);
+  }))), hasCollaboratorInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: monitorTop,
+      right: monitorRight,
+      width: monitorWidth,
+      height: monitorHeight,
+      opacity: monitorOpacity,
+      transform: "translateX(".concat(monitorTranslateX, "px) translateY(").concat(monitorDrift, "px) perspective(1400px) rotateY(").concat(monitorRotateY, "deg) rotateX(").concat(monitorRotateX, "deg) scale(").concat(collaboratorActive ? 1.02 : 1, ")"),
+      transformOrigin: 'center right',
+      zIndex: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      borderRadius: monitorRadius,
+      overflow: 'hidden',
+      backgroundColor: withAlpha(primaryColor || '#0f172a', 0.68),
+      border: "1px solid ".concat(withAlpha(collaboratorActive ? accent : textColor, collaboratorActive ? 0.75 : 0.22)),
+      boxShadow: collaboratorActive ? "0 20px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px ".concat(withAlpha(accent, 0.42)) : '0 18px 40px rgba(0, 0, 0, 0.4)'
+    }
+  }, secondVideoFile ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: '50% 22%',
+      filter: monitorFrameFilter,
+      transform: "scale(".concat(collaboratorActive ? 1.05 : 1.01, ")")
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(140deg, ".concat(withAlpha(accent, 0.34), " 0%, ").concat(withAlpha(primaryColor || '#111827', 0.92), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(180deg, ".concat(withAlpha('#05070d', 0.08), " 0%, ").concat(withAlpha('#05070d', 0.22), " 54%, ").concat(withAlpha('#05070d', 0.82), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 14,
+      right: 14,
+      bottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-block',
+      fontSize: monitorLabelFontSize,
+      letterSpacing: '0.24em',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+      padding: '4px 8px',
+      borderRadius: 999,
+      backgroundColor: collaboratorActive ? withAlpha(accent, 0.22) : withAlpha('#05070d', 0.42),
+      color: collaboratorActive ? accent : withAlpha(textColor, 0.76),
+      marginBottom: 8
+    }
+  }, collaboratorActive ? 'On Monitor' : 'Coming Up'), guestNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "studio-guest-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: guestNameFontSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.02em',
+        fontWeight: 500,
+        textShadow: '0 10px 24px rgba(0, 0, 0, 0.42)'
+      }
+    }, line);
+  }), safeCollaboratorTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 4
+    }
+  }, guestRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "studio-guest-role-".concat(index),
+      style: {
+        fontSize: guestRoleFontSize,
+        lineHeight: 1.2,
+        color: withAlpha(textColor, 0.8),
+        fontWeight: 500
+      }
+    }, line);
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: padding,
+      border: "1px solid ".concat(withAlpha(accent, collaboratorActive ? 0.3 : 0.16)),
+      pointerEvents: 'none',
+      zIndex: 6,
+      opacity: 0.45
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 100
+    }
+  }, children));
+};

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

@@ -10,6 +10,7 @@ var TOTAL_X_PADDING = 20;
 var GAP_BETWEEN_VIDEOS = 5;
 var MIN_HANDOFF_OVERLAP = 0.5;
 export var Handoff = function Handoff(_ref) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var startFirstVideoFrom = _ref.startFirstVideoFrom,
     startSecondVideoFrom = _ref.startSecondVideoFrom,
     firstVideoFile = _ref.firstVideoFile,
@@ -22,11 +23,18 @@ export var Handoff = function Handoff(_ref) {
     secondNoBackgroundVideoUrl = _ref.secondNoBackgroundVideoUrl,
     secondNoBackgroundFaceMetadata = _ref.secondNoBackgroundFaceMetadata,
     noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
-    handoffOverlapSeconds = _ref.handoffOverlapSeconds;
-  var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height,
-    fps = _useVideoConfig.fps;
+    handoffOverlapSeconds = _ref.handoffOverlapSeconds,
+    _ref$useSquareInLands = _ref.useSquareInLandscapeFirstVideo,
+    useSquareInLandscapeFirstVideo = _ref$useSquareInLands === void 0 ? false : _ref$useSquareInLands;
+  var videoConfig = useVideoConfig();
+  var width = videoConfig.width,
+    height = videoConfig.height,
+    fps = videoConfig.fps,
+    _videoConfig$props = videoConfig.props,
+    compositionProps = _videoConfig$props === void 0 ? {} : _videoConfig$props;
+  var outputOrientation = (compositionProps === null || compositionProps === void 0 ? void 0 : (_compositionProps$out = compositionProps.output) === null || _compositionProps$out === void 0 ? void 0 : _compositionProps$out.orientation) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : (_window$screenplayPro2 = _window$screenplayPro.output) === null || _window$screenplayPro2 === void 0 ? void 0 : _window$screenplayPro2.orientation : undefined);
+  var shouldUseSquareInLandscapeFirstVideo = Boolean(useSquareInLandscapeFirstVideo) && outputOrientation === "landscape";
+  var squareSize = 1080;
   var frame = useCurrentFrame();
   var _useTheme = useTheme(),
     primaryColor = _useTheme.primaryColor;
@@ -68,6 +76,10 @@ export var Handoff = function Handoff(_ref) {
   var secondVideoWidth = useTimeInterpolate(inputRangeInSeconds, secondTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS);
   var firstVideoHeight = useTimeInterpolate(inputRangeInSeconds, firstTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
   var secondVideoHeight = useTimeInterpolate(inputRangeInSeconds, secondTargetVideoHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var firstRenderVideoWidth = shouldUseSquareInLandscapeFirstVideo ? Math.min(firstVideoWidth, squareSize) : firstVideoWidth;
+  var firstRenderVideoHeight = shouldUseSquareInLandscapeFirstVideo ? Math.min(firstVideoHeight, squareSize) : firstVideoHeight;
+  var firstVideoCenteredOffsetX = shouldUseSquareInLandscapeFirstVideo ? Math.max(0, (width - TOTAL_X_PADDING - firstRenderVideoWidth) / 2) : 0;
+  var firstVideoTranslateX = useTimeInterpolate(inputRangeInSeconds, [firstVideoCenteredOffsetX, 0, 0, 0], DEFAULT_TIME_INTERPOLATE_OPTIONS);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       width: width,
@@ -90,24 +102,28 @@ export var Handoff = function Handoff(_ref) {
   }, /*#__PURE__*/React.createElement(Freeze, {
     frame: firstVideoDurationInFrames,
     active: frame >= firstVideoDurationInFrames
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translateX(".concat(firstVideoTranslateX, "px)")
+    }
   }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
     startFrom: startFirstVideoFrom,
     src: firstVideoFile,
     faceMetadata: firstNoBackgroundFaceMetadata,
     aspectRatio: orientation,
-    containerWidth: firstVideoWidth,
-    containerHeight: firstVideoHeight,
+    containerWidth: firstRenderVideoWidth,
+    containerHeight: firstRenderVideoHeight,
     useAveragePosition: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
     startFrom: startFirstVideoFrom,
     src: firstVideoFile,
     style: {
-      height: firstVideoHeight,
+      height: firstRenderVideoHeight,
       objectFit: "cover",
-      width: firstVideoWidth,
+      width: firstRenderVideoWidth,
       borderRadius: "40px"
     }
-  })), /*#__PURE__*/React.createElement(Sequence, {
+  }))), /*#__PURE__*/React.createElement(Sequence, {
     from: delayInFrames,
     layout: "none"
   }, secondNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {