@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,161 @@
+import { AbsoluteFill, Freeze, OffthreadVideo, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import React from "react";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { calculateInputRangeInPhases, DEFAULT_TIME_INTERPOLATE_OPTIONS, useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import { BlurOverlay } from "../utils/BlurOverlay";
+var TOTAL_Y_PADDING = 20;
+var TOTAL_X_PADDING = 20;
+var GAP_BETWEEN_VIDEOS = 5;
+export var Handoff = function Handoff(_ref) {
+  var startFirstVideoFrom = _ref.startFirstVideoFrom,
+    startSecondVideoFrom = _ref.startSecondVideoFrom,
+    firstVideoFile = _ref.firstVideoFile,
+    secondVideoFile = _ref.secondVideoFile,
+    firstVideoDuration = _ref.firstVideoDuration,
+    firstVideoDurationWithoutLastSegment = _ref.firstVideoDurationWithoutLastSegment,
+    children = _ref.children,
+    firstNoBackgroundVideoUrl = _ref.firstNoBackgroundVideoUrl,
+    firstNoBackgroundFaceMetadata = _ref.firstNoBackgroundFaceMetadata,
+    secondNoBackgroundVideoUrl = _ref.secondNoBackgroundVideoUrl,
+    secondNoBackgroundFaceMetadata = _ref.secondNoBackgroundFaceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor;
+  var firstVideoDurationInFrames = firstVideoDuration * fps;
+  var handoffOverlapSeconds = 1;
+  var delayInSeconds = Math.max(0, firstVideoDuration - handoffOverlapSeconds);
+  var delayInFrames = delayInSeconds * fps;
+  var handoffOverlapFrames = handoffOverlapSeconds * fps;
+  var secondFreezeFrameStartInFrames = firstVideoDurationWithoutLastSegment * fps + delayInFrames;
+  var phaseDurationsInSeconds = [0.5, 1, 0.5]; // Durations for each phase in seconds
+  var inputRangeInSeconds = calculateInputRangeInPhases(phaseDurationsInSeconds, delayInSeconds);
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        firstTargetVideoHeights: [height - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, 0],
+        secondTargetVideoHeights: [0, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height / 2 - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS, height - TOTAL_Y_PADDING - GAP_BETWEEN_VIDEOS],
+        firstTargetVideoWidths: [width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING],
+        secondTargetVideoWidths: [width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING],
+        secondTargetVideoFreezeFrameWidths: [width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING, width - TOTAL_X_PADDING]
+      },
+      landscape: {
+        firstTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        secondTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        firstTargetVideoWidths: [width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, 0],
+        secondTargetVideoWidths: [width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS],
+        secondTargetVideoFreezeFrameWidths: [0, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS]
+      },
+      square: {
+        firstTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        secondTargetVideoHeights: [height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING, height - TOTAL_Y_PADDING],
+        firstTargetVideoWidths: [width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, 0],
+        secondTargetVideoWidths: [width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS],
+        secondTargetVideoFreezeFrameWidths: [0, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width / 2 - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS, width - TOTAL_X_PADDING - GAP_BETWEEN_VIDEOS]
+      }
+    }),
+    firstTargetVideoWidths = _useOrientationBased.firstTargetVideoWidths,
+    secondTargetVideoWidths = _useOrientationBased.secondTargetVideoWidths,
+    firstTargetVideoHeights = _useOrientationBased.firstTargetVideoHeights,
+    secondTargetVideoHeights = _useOrientationBased.secondTargetVideoHeights,
+    orientation = _useOrientationBased.orientation;
+  var isPortrait = orientation === "portrait";
+  var firstVideoWidth = useTimeInterpolate(inputRangeInSeconds, firstTargetVideoWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  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);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      backgroundColor: primaryColor
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      padding: "10px 10px",
+      gap: frame >= delayInFrames + 2 * fps ? "0px" : "10px",
+      flexDirection: isPortrait ? "column" : "row"
+    }
+  }, /*#__PURE__*/React.createElement(Freeze, {
+    frame: firstVideoDurationInFrames,
+    active: frame >= firstVideoDurationInFrames
+  }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startFirstVideoFrom,
+    src: firstVideoFile,
+    faceMetadata: firstNoBackgroundFaceMetadata,
+    aspectRatio: orientation,
+    containerWidth: firstVideoWidth,
+    containerHeight: firstVideoHeight,
+    useAveragePosition: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startFirstVideoFrom,
+    src: firstVideoFile,
+    style: {
+      height: firstVideoHeight,
+      objectFit: "cover",
+      width: firstVideoWidth,
+      borderRadius: "40px"
+    }
+  })), /*#__PURE__*/React.createElement(Sequence, {
+    from: delayInFrames,
+    layout: "none",
+    durationInFrames: 1.01 * fps
+  }, /*#__PURE__*/React.createElement(Freeze, {
+    frame: secondFreezeFrameStartInFrames
+  }, secondNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    faceMetadata: secondNoBackgroundFaceMetadata,
+    aspectRatio: orientation,
+    containerWidth: secondVideoWidth,
+    containerHeight: secondVideoHeight,
+    useAveragePosition: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    style: {
+      height: secondVideoHeight,
+      objectFit: "cover",
+      width: secondVideoWidth,
+      borderRadius: "40px"
+    },
+    muted: true
+  }))), /*#__PURE__*/React.createElement(Sequence, {
+    from: delayInFrames + handoffOverlapFrames,
+    layout: "none"
+  }, secondNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    faceMetadata: secondNoBackgroundFaceMetadata,
+    aspectRatio: orientation,
+    containerWidth: secondVideoWidth,
+    containerHeight: secondVideoHeight,
+    useAveragePosition: true
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    style: {
+      height: secondVideoHeight,
+      objectFit: "cover",
+      width: secondVideoWidth,
+      borderRadius: "40px"
+    }
+  }))), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && (firstNoBackgroundVideoUrl || secondNoBackgroundVideoUrl),
+    width: width,
+    height: height,
+    zIndex: 1
+  })));
+};