@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,183 @@
+import React from "react";
+import { AbsoluteFill, OffthreadVideo, Audio, Easing, useVideoConfig } from "remotion";
+import { CHROME_PADDING } from "../../config.js";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import PausableImg from "../utils/PausableImg";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackground } from "../backgrounds/VirtualBackground";
+export var SimpleFrame = function SimpleFrame(_ref) {
+  var videoUrl = _ref.videoUrl,
+    startVideoFrom = _ref.startVideoFrom,
+    muted = _ref.muted,
+    frameColor = _ref.frameColor,
+    logoUrl = _ref.logoUrl,
+    videoZoom = _ref.videoZoom,
+    faceMetadata = _ref.faceMetadata,
+    children = _ref.children,
+    _ref$disableTransitio = _ref.disableTransitionSounds,
+    disableTransitionSounds = _ref$disableTransitio === void 0 ? false : _ref$disableTransitio,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+
+  // Determine if we should show a virtual background image (orientation-aware)
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var videoZoomInterpolated = useTimeInterpolate([0, 0.5], [1, videoZoom || 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  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(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: width,
+      height: height
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      borderRadius: "30px",
+      // Disable dimming for virtual backgrounds
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined,
+      transform: videoZoom > 1 ? "scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: videoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: width,
+    containerHeight: height,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    muted: muted
+  })) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%",
+      // Disable dimming for virtual backgrounds
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      position: "relative",
+      top: "50%",
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      borderRadius: "30px",
+      transform: videoZoom ? "translateY(-50%) scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      margin: frameColor ? CHROME_PADDING : 0,
+      width: frameColor ? width - CHROME_PADDING * 2 : width,
+      height: frameColor ? height - CHROME_PADDING * 2 : height,
+      transform: videoZoom > 1 ? "scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  }, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: virtualBgUrl
+  }) : null), !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur && noBackgroundVideoUrl ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      backdropFilter: "blur(10px)",
+      zIndex: 1
+    }
+  }) : 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: {
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      borderRadius: "30px",
+      transform: videoZoom > 1 ? "scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: width,
+    containerHeight: height,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    muted: true,
+    transparent: true
+  }))) : 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: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      position: "relative",
+      top: "50%",
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      borderRadius: "30px",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      transform: videoZoom ? "translateY(-50%) scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  }))) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: frameColor ? CHROME_PADDING : 25,
+      top: frameColor ? CHROME_PADDING : 25,
+      padding: 20,
+      zIndex: 11
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null));
+};

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

@@ -0,0 +1,181 @@
+import React from "react";
+import { AbsoluteFill, Img, OffthreadVideo, Audio, Easing, Sequence, useVideoConfig } from "remotion";
+import { CHROME_PADDING } from "../../config.js";
+import { useTimeInterpolate } from "../../hooks/useTimeInterpolate.js";
+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 BROLL_TIME_IN_FRAMES = 180;
+export var SimpleFrameBroll = function SimpleFrameBroll(_ref) {
+  var videoUrl = _ref.videoUrl,
+    startVideoFrom = _ref.startVideoFrom,
+    durationInFrames = _ref.durationInFrames,
+    muted = _ref.muted,
+    frameColor = _ref.frameColor,
+    logoUrl = _ref.logoUrl,
+    videoZoom = _ref.videoZoom,
+    brollUrl = _ref.brollUrl,
+    children = _ref.children,
+    sourceVideoOrientation = _ref.sourceVideoOrientation,
+    _ref$disableTransitio = _ref.disableTransitionSounds,
+    disableTransitionSounds = _ref$disableTransitio === void 0 ? false : _ref$disableTransitio,
+    faceMetadata = _ref.faceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref.noBackgroundVideoUrl;
+  var videoZoomInterpolated = useTimeInterpolate([0, 0.5], [1, videoZoom || 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing["in"](Easing.quad)
+  });
+  var startFrame = durationInFrames / 2 - BROLL_TIME_IN_FRAMES / 2;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+
+  // Virtual background activation (only when we have a no-background overlay)
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  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(AbsoluteFill, {
+    style: {
+      backgroundColor: frameColor || "transparent",
+      padding: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%"
+    }
+  }, faceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    faceMetadata: faceMetadata,
+    containerWidth: width,
+    containerHeight: height,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    style: {
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
+    }
+  }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: videoUrl,
+    muted: muted,
+    style: {
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      borderRadius: "30px",
+      objectPosition: sourceVideoOrientation === "portrait" ? "0% 30%" : undefined,
+      filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined,
+      transform: videoZoom ? "scale(".concat(videoZoomInterpolated, ")") : undefined
+    }
+  })), showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    top: CHROME_PADDING,
+    left: CHROME_PADDING,
+    width: width - CHROME_PADDING * 2,
+    height: height - CHROME_PADDING * 2,
+    borderRadius: "30px",
+    zIndex: 2
+  }) : null, /*#__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: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: width - CHROME_PADDING,
+      height: height,
+      zIndex: 9,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+    src: noBackgroundVideoUrl,
+    startFrom: startVideoFrom,
+    containerWidth: width,
+    containerHeight: height,
+    faceMetadata: faceMetadata,
+    useAveragePosition: true,
+    centerHorizontally: false,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    transparent: true,
+    muted: true
+  })) : 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: frameColor ? CHROME_PADDING : 0,
+      isolation: "isolate",
+      width: width,
+      height: height,
+      overflow: "hidden",
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      overflow: "hidden",
+      borderRadius: "30px",
+      width: "100%",
+      height: "100%",
+      zIndex: 11
+    }
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startVideoFrom,
+    src: noBackgroundVideoUrl,
+    muted: true,
+    transparent: true,
+    style: {
+      position: "relative",
+      top: "50%",
+      height: "100%",
+      objectFit: "cover",
+      width: "100%",
+      borderRadius: "30px",
+      filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
+      transform: videoZoom ? "translateY(-50%) scale(".concat(videoZoomInterpolated, ")") : "translateY(-50%)"
+    }
+  }))) : null, durationInFrames > BROLL_TIME_IN_FRAMES && brollUrl ? /*#__PURE__*/React.createElement(Sequence, {
+    from: startFrame,
+    durationInFrames: BROLL_TIME_IN_FRAMES
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: brollUrl,
+    style: {
+      zIndex: 10,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    muted: true
+  }))) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 10
+    }
+  }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: frameColor ? CHROME_PADDING : 25,
+      top: frameColor ? CHROME_PADDING : 25,
+      padding: 20,
+      zIndex: 11
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    delayRenderTimeoutInMilliseconds: 61000,
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    src: logoUrl
+  })) : null));
+};

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

@@ -0,0 +1,17 @@
+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); }
+import React from "react";
+import { Sentence } from "../effects/Sentence";
+import { SimpleFrame } from "./SimpleFrame";
+import { useVideoConfig } from "remotion";
+import { KeyPointOverlayDepth } from "./KeyPointOverlayDepth";
+export var SimpleFrameSentence = function SimpleFrameSentence(props) {
+  if (props.theme === "depth") {
+    return /*#__PURE__*/React.createElement(KeyPointOverlayDepth, _extends({
+      sentence: props.sentenceText
+    }, props));
+  }
+  return /*#__PURE__*/React.createElement(SimpleFrame, props, /*#__PURE__*/React.createElement(Sentence, {
+    theme: props.theme,
+    sentence: props.sentenceText
+  }), props.children);
+};

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

@@ -0,0 +1,13 @@
+var _excluded = ["children"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { SimpleFrame } from "./SimpleFrame";
+export var SimpleFrameZoomCut = function SimpleFrameZoomCut(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(SimpleFrame, _extends({}, props, {
+    videoZoom: 1.2
+  }), children);
+};