@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,397 @@
+import React from "react";
+import { AbsoluteFill, Audio, OffthreadVideo, useVideoConfig, spring, useCurrentFrame, interpolate } from "remotion";
+import StretchText from "../utils/StretchText";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../hooks/useOrientationBased";
+import { useTheme } from "../../theme/hooks/useTheme";
+import { getBrighterColor } from "../../helpers/hexToRgb";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackground } from "../backgrounds/VirtualBackground";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var KeyPointOverlayDepthComponent = function KeyPointOverlayDepthComponent(_ref) {
+  var children = _ref.children,
+    startVideoFrom = _ref.startVideoFrom,
+    videoUrl = _ref.videoUrl,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
+    _ref$words = _ref.words,
+    words = _ref$words === void 0 ? [] : _ref$words,
+    exitStartFrame = _ref.exitStartFrame,
+    durationInFrames = _ref.durationInFrames,
+    faceMetadata = _ref.faceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects;
+  var _useVideoConfig = useVideoConfig(),
+    height = _useVideoConfig.height,
+    width = _useVideoConfig.width,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var textContainerStyle = {
+    width: "100%",
+    margin: "0 auto"
+  };
+  var landscapeContainerStyle = {
+    width: "90%",
+    margin: "0 auto"
+  };
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        bottom: 800,
+        wordsContainerStyle: textContainerStyle,
+        justifyWords: "start"
+      },
+      landscape: {
+        bottom: 200,
+        wordsContainerStyle: landscapeContainerStyle,
+        justifyWords: "end"
+      },
+      square: {
+        bottom: 400,
+        wordsContainerStyle: textContainerStyle,
+        justifyWords: "start"
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    bottom = _useOrientationBased.bottom,
+    wordsContainerStyle = _useOrientationBased.wordsContainerStyle,
+    justifyWords = _useOrientationBased.justifyWords;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    accentColor = _useTheme.accentColor;
+  var secondLineColor = getBrighterColor(primaryColor, accentColor);
+
+  // Calculate when text should disappear (half second before end)
+  var textDisappearFrame = durationInFrames - Math.floor(fps * 0.5);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "transparent",
+      padding: 0,
+      isolation: "isolate",
+      zIndex: 0
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, null, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: virtualBgUrl,
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    faceMetadata: faceMetadata,
+    aspectRatio: orientation,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    style: {
+      position: "relative",
+      zIndex: 0,
+      isolation: "isolate",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      height: "100%",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: true,
+    transparent: false,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }))), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3,
+      isolation: "isolate",
+      paddingBottom: bottom,
+      justifyContent: justifyWords
+    }
+  }, words.filter(function (word) {
+    return word !== undefined && word !== null;
+  }).map(function (word, index, array) {
+    // Create entrance animation with delay based on index
+    var entranceDelay = index * 15; // 15 frames delay between each word
+
+    // Drop from top animation
+    var dropFromTopDuration = 30; // One second pause at top (30 frames at 30fps)
+    var fallToBounceStart = entranceDelay + dropFromTopDuration;
+    var fallDuration = 8; // Fast fall
+    var bounceStart = fallToBounceStart + fallDuration;
+    var yPosition = 0;
+    var entranceSpring = 0;
+    if (frame < entranceDelay) {
+      // 1. Before animation starts - words are offscreen
+      yPosition = -height;
+      entranceSpring = 0;
+    } else if (frame < fallToBounceStart) {
+      // 2. Words fall to top edge and pause for 1 second - visible
+      yPosition = -(height - bottom); // Same absolute top edge position for all words
+      entranceSpring = 0.8;
+    } else if (frame < bounceStart) {
+      // 3. Words fall to final destination - fast fall
+      var fallProgress = (frame - fallToBounceStart) / fallDuration;
+      yPosition = interpolate(fallProgress, [0, 1], [-(height - bottom - 50), 0]);
+      entranceSpring = 0.3;
+    } else {
+      // 3. Words bounce into final position
+      var bounceSpring = spring({
+        frame: frame - bounceStart,
+        from: 0,
+        to: 0.9,
+        fps: fps,
+        config: {
+          damping: 8,
+          stiffness: 300
+        }
+      });
+      yPosition = 0;
+      entranceSpring = bounceSpring;
+    }
+
+    // Create exit animation
+    var isExiting = frame >= exitStartFrame;
+    var exitProgress = isExiting ? Math.max(0, (frame - exitStartFrame) / (textDisappearFrame - exitStartFrame)) : 0;
+
+    // Create flickering effect during exit
+    var flickerFrequency = 2; // Higher value = more frequent flickering
+    var flickerPhase = isExiting ? Math.sin(frame * flickerFrequency) : 1;
+    var flickerOpacity = isExiting ? interpolate(flickerPhase, [-1, 1], [0.3, 0.9]) : 0.9;
+
+    // Combine entrance and exit animations
+    var opacity = frame < entranceDelay ? 0 : frame > textDisappearFrame ? 0 : isExiting ? flickerOpacity * (1 - exitProgress) : entranceSpring;
+
+    // Scale animation
+    var scale = frame < entranceDelay ? 0.5 : isExiting ? 1 - exitProgress * 0.05 // Subtle scale down during exit
+    : interpolate(entranceSpring, [0, 1], [0.8, 1]); // Scale up during entrance
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: wordsContainerStyle,
+      key: "word-layer1-".concat(index, "-").concat(word)
+    }, /*#__PURE__*/React.createElement(StretchText, {
+      text: word,
+      maxFontSize: (height - bottom) / array.length,
+      fontFamily: fontFamily,
+      color: index % 2 === 1 ? secondLineColor : "white",
+      minFontSize: 50,
+      style: {
+        fontStyle: "italic",
+        fontWeight: 800,
+        textShadow: index === 0 && "2px 2px 5px rgba(255, 255, 255, 0.5), 5px 5px 10px rgba(255, 255, 255, 0.5), 10px 10px 70px rgba(255, 255, 255, 0.5)",
+        textTransform: "uppercase",
+        opacity: opacity,
+        backdropFilter: "blur(10px)",
+        transition: "transform 0.1s ease-out",
+        transform: "translateY(".concat(yPosition, "px) scale(").concat(scale, ")")
+      }
+    }));
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3,
+      isolation: "isolate"
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    aspectRatio: orientation,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      zIndex: 2,
+      height: "100%",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }))), noBackgroundVideoUrl && (showVirtual || (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.facePop) || (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundDim) || (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur)) && /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3,
+      isolation: "isolate"
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    aspectRatio: orientation,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      overflow: "hidden",
+      borderRadius: "20px",
+      zIndex: 2,
+      height: "100%",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: false,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+    }
+  }))), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 3,
+      paddingBottom: bottom,
+      justifyContent: justifyWords
+    }
+  }, words.filter(function (word) {
+    return word !== undefined && word !== null;
+  }).map(function (word, index, array) {
+    // Create entrance animation with delay based on index
+    var entranceDelay = index * 15; // 15 frames delay between each word
+
+    // Drop from top animation - same as first layer
+    var dropFromTopDuration = 10; // Brief pause at top
+    var fallToBounceStart = entranceDelay + dropFromTopDuration;
+    var fallDuration = 8; // Fast fall
+    var bounceStart = fallToBounceStart + fallDuration;
+    var yPosition = 0;
+    var entranceSpring = 0;
+    if (frame < entranceDelay) {
+      // 1. Before animation starts - words are offscreen
+      yPosition = -height;
+      entranceSpring = 0;
+    } else if (frame < fallToBounceStart) {
+      // 2. Words fall to top edge and pause for 1 second - visible
+      yPosition = -(height - bottom - 50); // Same absolute top edge position for all words
+      entranceSpring = 0.8;
+    } else if (frame < bounceStart) {
+      // Fast fall to position
+      var fallProgress = (frame - fallToBounceStart) / fallDuration;
+      yPosition = interpolate(fallProgress, [0, 1], [-(height - bottom - 50), 0]);
+      entranceSpring = 0.3;
+    } else {
+      // Bounce animation
+      var bounceSpring = spring({
+        frame: frame - bounceStart,
+        from: 0,
+        to: 1,
+        fps: fps,
+        config: {
+          damping: 8,
+          stiffness: 300
+        }
+      });
+      yPosition = 0;
+      entranceSpring = bounceSpring;
+    }
+
+    // Create exit animation
+    var isExiting = frame >= exitStartFrame;
+    var exitProgress = isExiting ? Math.max(0, (frame - exitStartFrame) / (textDisappearFrame - exitStartFrame)) : 0;
+
+    // Create flickering effect during exit
+    var flickerFrequency = 3; // Higher value = more frequent flickering
+    var flickerPhase = isExiting ? Math.sin(frame * flickerFrequency) : 1;
+    var flickerOpacity = isExiting ? interpolate(flickerPhase, [-1, 1], [0.3, 1]) : 1;
+
+    // Scale animation
+    var scale = frame < entranceDelay ? 0.5 : isExiting ? 1 - exitProgress * 0.05 // Subtle scale down during exit
+    : interpolate(entranceSpring, [0, 1], [0.8, 1]); // Scale up during entrance
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: wordsContainerStyle,
+      key: "word-layer2-".concat(index, "-").concat(word)
+    }, /*#__PURE__*/React.createElement(StretchText, {
+      text: word,
+      maxFontSize: height / array.length,
+      color: "transparent",
+      textStrokeWidth: "2px",
+      textFillColor: "transparent",
+      textStrokeColor: index % 2 === 1 ? secondLineColor : "white",
+      minFontSize: 50,
+      fontFamily: fontFamily,
+      style: {
+        fontStyle: "italic",
+        fontWeight: 800,
+        textTransform: "uppercase",
+        opacity: 0,
+        transition: "transform 0.1s ease-out",
+        transform: "translateY(".concat(yPosition, "px) scale(").concat(scale, ")")
+      }
+    }));
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 11
+    }
+  }, children));
+};
+
+// Configuration for different orientation split screens
+var KeyPointOverlayDepth = function KeyPointOverlayDepth(_ref2) {
+  var videoUrl = _ref2.videoUrl,
+    startVideoFrom = _ref2.startVideoFrom,
+    children = _ref2.children,
+    sourceVideoOrientation = _ref2.sourceVideoOrientation,
+    _ref2$disableTransiti = _ref2.disableTransitionSounds,
+    disableTransitionSounds = _ref2$disableTransiti === void 0 ? false : _ref2$disableTransiti,
+    noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
+    durationInFrames = _ref2.durationInFrames,
+    _ref2$words = _ref2.words,
+    words = _ref2$words === void 0 ? [] : _ref2$words,
+    noBackgroundVideoEffects = _ref2.noBackgroundVideoEffects,
+    faceMetadata = _ref2.faceMetadata;
+  // Calculate when exit animation should start (60 frames or 2 seconds before end)
+  var exitStartFrame = durationInFrames - 60;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+    src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
+    volume: 0.25
+  }), /*#__PURE__*/React.createElement(KeyPointOverlayDepthComponent, {
+    videoUrl: videoUrl,
+    startVideoFrom: startVideoFrom,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
+    sourceVideoOrientation: sourceVideoOrientation,
+    exitStartFrame: exitStartFrame,
+    durationInFrames: durationInFrames,
+    words: words,
+    faceMetadata: faceMetadata,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  }, children));
+};
+export { KeyPointOverlayDepth };