@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,539 @@
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import React from "react";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
+import { CHROME_PADDING } from "../../config.js";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import { variants } from "../../main/lib/layouts/TextWithVideoLayout.js";
+import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
+import { KeyPointOverlayDepth } from "./KeyPointOverlayDepth";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import PausableImg from "../utils/PausableImg";
+import { BlurOverlay } from "../utils/BlurOverlay";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
+var _loadFont = loadFont(),
+  fontFamily = _loadFont.fontFamily;
+var landscapeClipPath = "polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%)";
+var portraitClipPath = "polygon(0 0, 100% 0, 100% 90%, 0% 100%)";
+var squareClipPath = "polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%)";
+var Logo = function Logo(_ref) {
+  var logoUrl = _ref.logoUrl,
+    top = _ref.top,
+    left = _ref.left,
+    right = _ref.right;
+  return logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 11,
+      top: top,
+      left: left,
+      right: right
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    delayRenderTimeoutInMilliseconds: 60000,
+    src: logoUrl
+  })) : null;
+};
+var Word = function Word(_ref2) {
+  var word = _ref2.word,
+    index = _ref2.index;
+  var _distributeTextToFit = distributeTextToFit(word, 300, 120, 50),
+    fontSize = _distributeTextToFit.fontSize,
+    lines = _distributeTextToFit.lines;
+  var frame = useCurrentFrame();
+  var timings = [0, 90];
+  var options = {};
+  var translation = interpolate(frame, timings, [0, 30], options);
+  var directions = ["translate(".concat(translation, "px, ").concat(translation, "px)"), "translateX(".concat(translation / 2, "px)"), "translate(".concat(translation, "px)"), "translateY(".concat(translation, "px)"), "translateX(".concat(translation, "px)")];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: directions[index % directions.length],
+      display: "flex",
+      alignItems: "center",
+      gap: 30,
+      willChange: "transform"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      width: 3,
+      height: 3,
+      borderRadius: "100%",
+      backgroundColor: "white",
+      border: "1px solid white",
+      padding: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: 45,
+      height: 45,
+      transform: "translate(-50%, -50%)",
+      borderRadius: "100%",
+      border: "1px solid white"
+    }
+  })), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "white",
+      textTransform: "uppercase",
+      fontWeight: 300,
+      letterSpacing: "10px",
+      fontSize: fontSize,
+      margin: 0,
+      height: 80,
+      display: "flex",
+      alignItems: "center",
+      gap: 20
+    }
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: line + index,
+      style: {
+        willChange: "transform"
+      }
+    }, line);
+  })));
+};
+var RotatingWordsContainer = /*#__PURE__*/React.memo(function (_ref3) {
+  var _ref3$words = _ref3.words,
+    words = _ref3$words === void 0 ? [] : _ref3$words;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: fontFamily,
+      position: "absolute",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "space-evenly"
+    }
+  }, words.map(function (word, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index + word
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        display: "flex",
+        gap: "30px",
+        alignItems: "center",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        display: "flex",
+        gap: "30px",
+        alignItems: "center",
+        width: "100%",
+        left: "75%"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        display: "flex",
+        gap: "30px",
+        alignItems: "center",
+        width: "100%",
+        left: "-75%"
+      }
+    }, /*#__PURE__*/React.createElement(Word, {
+      word: word,
+      index: index
+    })));
+  })));
+});
+var KeywordComponent = function KeywordComponent(_ref4) {
+  var startVideoFrom = _ref4.startVideoFrom,
+    videoUrl = _ref4.videoUrl,
+    logoUrl = _ref4.logoUrl,
+    children = _ref4.children,
+    textColor = _ref4.textColor,
+    textBackgroundColor = _ref4.textBackgroundColor,
+    accentColor = _ref4.accentColor,
+    _ref4$variant = _ref4.variant,
+    variant = _ref4$variant === void 0 ? variants.LEFT_TO_RIGHT : _ref4$variant,
+    _ref4$words = _ref4.words,
+    words = _ref4$words === void 0 ? [] : _ref4$words,
+    durationInFrames = _ref4.durationInFrames,
+    faceMetadata = _ref4.faceMetadata,
+    muted = _ref4.muted,
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps;
+  var frame = useCurrentFrame();
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var stylesByVariant = _defineProperty(_defineProperty({}, variants.RIGHT_TO_LEFT, {
+    flowDirection: "row-reverse",
+    logoLeft: CHROME_PADDING * 2,
+    logoRight: undefined
+  }), variants.LEFT_TO_RIGHT, {
+    flowDirection: "row",
+    logoLeft: undefined,
+    logoRight: CHROME_PADDING * 2
+  });
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        containerWidth: "100%",
+        imageContainerOutputRange: [-height, -height * 0.41],
+        targetVideoWidth: width - 2 * CHROME_PADDING,
+        targetVideoHeight: height * 0.5,
+        clipPath: portraitClipPath,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: CHROME_PADDING * 2 - 5,
+        logoRight: undefined,
+        flowDirection: "column-reverse"
+      },
+      landscape: {
+        containerWidth: "65%",
+        imageContainerOutputRange: [-width, -width * 0.35],
+        targetVideoWidth: width * 0.45,
+        targetVideoHeight: height,
+        clipPath: landscapeClipPath,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: stylesByVariant[variant].logoLeft,
+        logoRight: stylesByVariant[variant].logoRight,
+        flowDirection: "row-reverse"
+      },
+      square: {
+        containerWidth: "65%",
+        imageContainerOutputRange: [-width, -width * 0.45],
+        targetVideoWidth: width * 0.55,
+        targetVideoHeight: height,
+        clipPath: squareClipPath,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: stylesByVariant[variant].logoLeft,
+        logoRight: stylesByVariant[variant].logoRight,
+        flowDirection: "row-reverse"
+      }
+    }),
+    imageContainerOutputRange = _useOrientationBased.imageContainerOutputRange,
+    containerWidth = _useOrientationBased.containerWidth,
+    targetVideoWidth = _useOrientationBased.targetVideoWidth,
+    targetVideoHeight = _useOrientationBased.targetVideoHeight,
+    clipPath = _useOrientationBased.clipPath,
+    logoTop = _useOrientationBased.logoTop,
+    logoLeft = _useOrientationBased.logoLeft,
+    logoRight = _useOrientationBased.logoRight,
+    flowDirection = _useOrientationBased.flowDirection,
+    orientation = _useOrientationBased.orientation;
+  var isPortrait = orientation === "portrait";
+
+  // Animation timing configuration
+  var entranceEndTime = 0.5; // 0.5 seconds for entrance
+  var exitStartTime = durationInFrames ? durationInFrames / fps - 0.5 : null; // 0.5 seconds before end for exit
+  var currentTime = frame / fps;
+  var animationProgress = 0;
+  if (durationInFrames && exitStartTime && currentTime >= exitStartTime) {
+    // Exit animation - reverse the progress
+    var exitProgress = (currentTime - exitStartTime) / 0.5;
+    animationProgress = Math.max(0, 1 - exitProgress);
+  } else if (currentTime <= entranceEndTime) {
+    // Entrance animation
+    animationProgress = Math.min(1, currentTime / entranceEndTime);
+  } else {
+    // Middle section - fully animated
+    animationProgress = 1;
+  }
+
+  // Apply easing to the progress
+  var easedProgress = Easing["in"](Easing.quad)(animationProgress);
+
+  // Calculate animated values based on progress
+  var imageContainerTranslate = imageContainerOutputRange[0] + (imageContainerOutputRange[1] - imageContainerOutputRange[0]) * easedProgress;
+  var videoWidth = width + (targetVideoWidth - width) * easedProgress;
+  var videoHeight = height + (targetVideoHeight - height) * easedProgress;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      isolation: "isolate",
+      width: width,
+      height: height,
+      padding: CHROME_PADDING,
+      backgroundColor: accentColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 999,
+      height: CHROME_PADDING,
+      width: width,
+      top: 0,
+      backgroundColor: accentColor
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 999,
+      width: CHROME_PADDING,
+      height: height,
+      right: 0,
+      backgroundColor: accentColor
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      zIndex: 999,
+      width: CHROME_PADDING,
+      height: height,
+      left: 0,
+      backgroundColor: accentColor
+    }
+  }), /*#__PURE__*/React.createElement(Logo, {
+    logoUrl: logoUrl,
+    top: logoTop,
+    left: logoLeft,
+    right: logoRight
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: flowDirection,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: containerWidth,
+      position: "absolute",
+      backgroundColor: textColor,
+      fontFamily: fontFamily,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      clipPath: clipPath,
+      transform: "translateX(".concat(isPortrait ? 0 : imageContainerTranslate, "px) translateY(").concat(isPortrait ? imageContainerTranslate : 0, "px)"),
+      height: height - CHROME_PADDING * 2,
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      mixBlendMode: "screen"
+    },
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
+    startFrom: 120
+  }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
+    words: words
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: videoWidth,
+      height: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+      overflow: "hidden",
+      position: "relative",
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1
+  }) : null, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    faceMetadata: faceMetadata,
+    containerWidth: videoWidth,
+    containerHeight: videoHeight,
+    useObjectPosition: isPortrait,
+    centerHorizontally: isPortrait
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: videoWidth
+    }
+  })), /*#__PURE__*/React.createElement(BlurOverlay, {
+    show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && noBackgroundVideoUrl,
+    width: width,
+    height: height,
+    zIndex: 1
+  }), noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      padding: CHROME_PADDING,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: flowDirection,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: containerWidth,
+      position: "absolute",
+      backgroundColor: textColor,
+      fontFamily: fontFamily,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      clipPath: clipPath,
+      transform: "translateX(".concat(isPortrait ? 0 : imageContainerTranslate, "px) translateY(").concat(isPortrait ? imageContainerTranslate : 0, "px)"),
+      height: height - CHROME_PADDING * 2,
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      mixBlendMode: "screen"
+    },
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
+    startFrom: 120
+  }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
+    words: words
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: videoWidth,
+      height: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    faceMetadata: faceMetadata,
+    containerWidth: videoWidth,
+    containerHeight: videoHeight,
+    useObjectPosition: isPortrait,
+    centerHorizontally: isPortrait,
+    noBackgroundVideoEffects: noBackgroundVideoEffects
+  })))) : null, noBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) && !faceMetadata ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      backgroundColor: "transparent",
+      padding: CHROME_PADDING,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: flowDirection,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: containerWidth,
+      position: "absolute",
+      backgroundColor: textColor,
+      fontFamily: fontFamily,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      clipPath: clipPath,
+      transform: "translateX(".concat(isPortrait ? 0 : imageContainerTranslate, "px) translateY(").concat(isPortrait ? imageContainerTranslate : 0, "px)"),
+      height: height - CHROME_PADDING * 2,
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      height: "100%",
+      mixBlendMode: "screen"
+    },
+    src: "https://storage.googleapis.com/zync-media/assets/static/plexus1.mov",
+    startFrom: 120
+  }), /*#__PURE__*/React.createElement(RotatingWordsContainer, {
+    words: words
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: videoWidth,
+      height: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: videoWidth,
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+    }
+  })))) : null), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children));
+};
+export var Keyword = function Keyword(props) {
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var _ref5 = props || {},
+    _ref5$disableTransiti = _ref5.disableTransitionSounds,
+    disableTransitionSounds = _ref5$disableTransiti === void 0 ? false : _ref5$disableTransiti;
+  var _useVideoConfig2 = useVideoConfig(),
+    _useVideoConfig2$outp = _useVideoConfig2.output,
+    _useVideoConfig2$outp2 = _useVideoConfig2$outp === void 0 ? {
+      theme: window.screenplayProps.output.theme
+    } : _useVideoConfig2$outp,
+    _useVideoConfig2$outp3 = _useVideoConfig2$outp2.theme,
+    theme = _useVideoConfig2$outp3 === void 0 ? "default" : _useVideoConfig2$outp3;
+  if (props.theme === "depth" || theme === "depth") {
+    return /*#__PURE__*/React.createElement(KeyPointOverlayDepth, props, props.children);
+  }
+  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(KeywordComponent, _extends({}, props, {
+    textBackgroundColor: primaryContrast,
+    textColor: primaryColor,
+    accentColor: accentColor,
+    variant: props.variant,
+    durationInFrames: props.durationInFrames
+  })));
+};