@zync/zync-screnplay-player 0.1.187

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

@@ -0,0 +1,373 @@
+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 React from "react";
+import { AbsoluteFill, Audio, Easing, OffthreadVideo, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Poppins";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.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 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 adjustTimings = function adjustTimings(timings, adjustment) {
+  return timings.map(function (timing) {
+    return timing + adjustment;
+  });
+};
+var indexFactor = function indexFactor(index) {
+  return index * 0.15;
+};
+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: 1,
+      top: top,
+      left: left,
+      right: right
+    }
+  }, /*#__PURE__*/React.createElement(PausableImg, {
+    style: {
+      width: "225px",
+      maxHeight: "auto",
+      objectFit: "contain"
+    },
+    delayRenderTimeoutInMilliseconds: 60000,
+    src: logoUrl
+  })) : null;
+};
+var RevealingLine = function RevealingLine(_ref2) {
+  var children = _ref2.children,
+    revealBlockColor = _ref2.revealBlockColor,
+    _ref2$startRevealAtFr = _ref2.startRevealAtFrame,
+    startRevealAtFrame = _ref2$startRevealAtFr === void 0 ? 120 : _ref2$startRevealAtFr,
+    _ref2$index = _ref2.index,
+    index = _ref2$index === void 0 ? 0 : _ref2$index;
+  var inTimings = adjustTimings([startRevealAtFrame, startRevealAtFrame + 0.5], indexFactor(index));
+  var opacityTimings = adjustTimings([startRevealAtFrame + 1, startRevealAtFrame + 1.5], indexFactor(index));
+  var outTimings = adjustTimings([startRevealAtFrame + 1.5, startRevealAtFrame + 2], indexFactor(index));
+  var blockRevealerPositionIn = useTimeInterpolate(inTimings, [-105, 0], {
+    easing: Easing.out(Easing.quad),
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+  var textOpacity = useTimeInterpolate(opacityTimings, [0, 1], {
+    extrapolateRight: "clamp"
+  });
+  var blockRevealerPositionOut = useTimeInterpolate(outTimings, [0, 105], {
+    easing: Easing.out(Easing.quad),
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+  var currentRevealerPosition = blockRevealerPositionOut || blockRevealerPositionIn;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      position: "relative",
+      textAlign: "left"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: textOpacity,
+      willChange: "opacity",
+      zIndex: 10
+    }
+  }, children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: revealBlockColor,
+      transform: "translateX(".concat(currentRevealerPosition, "%)"),
+      willChange: "transform"
+    }
+  }));
+};
+var TextWithVideoLandscape = function TextWithVideoLandscape(_ref3) {
+  var startVideoFrom = _ref3.startVideoFrom,
+    videoUrl = _ref3.videoUrl,
+    logoUrl = _ref3.logoUrl,
+    text = _ref3.text,
+    children = _ref3.children,
+    textColor = _ref3.textColor,
+    textBackgroundColor = _ref3.textBackgroundColor,
+    accentColor = _ref3.accentColor,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? variants.LEFT_TO_RIGHT : _ref3$variant,
+    faceMetadata = _ref3.faceMetadata,
+    muted = _ref3.muted,
+    noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
+    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  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: {
+        targetTextWidth: width - 2 * CHROME_PADDING,
+        targetVideoWidth: width - 2 * CHROME_PADDING,
+        targetVideoHeight: height * 0.6,
+        targetTextHeight: height * 0.4,
+        logoTop: height * 0.4 + CHROME_PADDING,
+        logoLeft: CHROME_PADDING * 2 - 5,
+        logoRight: undefined,
+        maxFontSize: 80,
+        flowDirection: "column"
+      },
+      landscape: {
+        targetTextWidth: width / 2,
+        targetVideoWidth: width / 2,
+        targetVideoHeight: height,
+        targetTextHeight: height,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: stylesByVariant[variant].logoLeft,
+        logoRight: stylesByVariant[variant].logoRight,
+        maxFontSize: 80,
+        flowDirection: stylesByVariant[variant].flowDirection
+      },
+      square: {
+        targetTextWidth: width / 2,
+        targetVideoWidth: width / 2,
+        targetVideoHeight: height,
+        targetTextHeight: height,
+        logoTop: CHROME_PADDING * 2,
+        logoLeft: stylesByVariant[variant].logoLeft,
+        logoRight: stylesByVariant[variant].logoRight,
+        maxFontSize: 50,
+        flowDirection: stylesByVariant[variant].flowDirection
+      }
+    }),
+    targetTextWidth = _useOrientationBased.targetTextWidth,
+    targetTextHeight = _useOrientationBased.targetTextHeight,
+    targetVideoWidth = _useOrientationBased.targetVideoWidth,
+    targetVideoHeight = _useOrientationBased.targetVideoHeight,
+    logoTop = _useOrientationBased.logoTop,
+    logoLeft = _useOrientationBased.logoLeft,
+    logoRight = _useOrientationBased.logoRight,
+    maxFontSize = _useOrientationBased.maxFontSize,
+    flowDirection = _useOrientationBased.flowDirection,
+    orientation = _useOrientationBased.orientation;
+  var transitionTimings = [0, 0.5];
+  var isPortrait = orientation === "portrait";
+  var textWidth = useTimeInterpolate(transitionTimings, [0, targetTextWidth], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var textHeight = useTimeInterpolate(transitionTimings, [0, targetTextHeight], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var videoWidth = useTimeInterpolate(transitionTimings, [width, targetVideoWidth], {
+    extrapolateRight: "clamp"
+  });
+  var videoHeight = useTimeInterpolate(transitionTimings, [height, targetVideoHeight], {
+    extrapolateRight: "clamp"
+  });
+  var _distributeTextToFit = distributeTextToFit(text, targetTextWidth - 100, targetTextHeight - 100, maxFontSize),
+    lines = _distributeTextToFit.lines,
+    fontSize = _distributeTextToFit.fontSize;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      isolation: "isolate",
+      width: width,
+      height: height,
+      padding: CHROME_PADDING,
+      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%",
+      borderRadius: 30,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? width - CHROME_PADDING * 2 : textWidth,
+      height: isPortrait ? textHeight : height - CHROME_PADDING * 2,
+      backgroundColor: textBackgroundColor,
+      color: textColor,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", null, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement(RevealingLine, {
+      startRevealAtFrame: transitionTimings[1],
+      revealBlockColor: accentColor,
+      index: index,
+      key: index
+    }, line);
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? width - CHROME_PADDING * 2 : 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: isPortrait ? width - CHROME_PADDING * 2 : videoWidth,
+    containerHeight: isPortrait ? videoHeight : height - CHROME_PADDING * 2
+  }) : /*#__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: 0
+  }), 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%",
+      borderRadius: 30,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? width - CHROME_PADDING * 2 : textWidth,
+      height: isPortrait ? textHeight : height - CHROME_PADDING * 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? width - CHROME_PADDING * 2 : 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: isPortrait ? width - CHROME_PADDING * 2 : videoWidth,
+    containerHeight: isPortrait ? videoHeight : height - CHROME_PADDING * 2,
+    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%",
+      borderRadius: 30,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? width - CHROME_PADDING * 2 : textWidth,
+      height: isPortrait ? textHeight : height - CHROME_PADDING * 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? width - CHROME_PADDING * 2 : 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 TextWithVideo = function TextWithVideo(props) {
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var _ref4 = props || {},
+    _ref4$disableTransiti = _ref4.disableTransitionSounds,
+    disableTransitionSounds = _ref4$disableTransiti === void 0 ? false : _ref4$disableTransiti;
+  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(TextWithVideoLandscape, _extends({}, props, {
+    textBackgroundColor: primaryContrast,
+    textColor: primaryColor,
+    accentColor: accentColor,
+    variant: props.variant
+  })));
+};

package/dist/screenplay/RemotionRenderer/components/layouts/quote-bubble-animation.json

@@ -0,0 +1 @@
+{"v":"5.12.1","fr":30,"ip":0,"op":91,"w":800,"h":800,"nm":"Interface_Icon_21","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Line","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-0.019,"ix":10},"p":{"a":0,"k":[-0.086,0.017,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[99.972,99.972,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-93,-67],[90,-67]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"k":[{"s":[30],"t":9,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[30],"t":90,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}]},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":9,"s":[0],"e":[100]},{"t":43}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":9,"op":91,"st":9,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Line 2","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-0.019,"ix":10},"p":{"a":0,"k":[-0.069,52.003,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[99.972,99.972,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-93,-67],[90,-67]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"k":[{"s":[30],"t":12,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[30],"t":90,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}]},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":12,"s":[0],"e":[100]},{"t":46}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":12,"op":91,"st":12,"ct":1,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Line 3","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-0.019,"ix":10},"p":{"a":0,"k":[-0.052,104.988,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[99.972,99.972,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-93,-67],[90,-67]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"k":[{"s":[30],"t":15,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[30],"t":90,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}]},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":15,"s":[0],"e":[100]},{"t":49}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":15,"op":91,"st":15,"ct":1,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Box","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"k":[{"s":[-67],"t":18,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":24,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[5.578],"t":25,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[8.344],"t":26,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[8.743],"t":27,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[7.485],"t":28,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[5.336],"t":29,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[2.965],"t":30,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.859],"t":31,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.703],"t":32,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-1.627],"t":33,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-1.963],"t":34,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-1.846],"t":35,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-1.445],"t":36,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.925],"t":37,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.414],"t":38,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":39,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.278],"t":40,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.415],"t":41,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.435],"t":42,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.373],"t":43,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.266],"t":44,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.148],"t":45,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.043],"t":46,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.035],"t":47,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.081],"t":48,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.098],"t":49,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.092],"t":50,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.072],"t":51,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.046],"t":52,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.021],"t":53,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":54,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.014],"t":55,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.021],"t":56,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.022],"t":57,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.019],"t":58,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.013],"t":59,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.007],"t":60,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.002],"t":61,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.002],"t":62,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.004],"t":63,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.005],"t":64,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.005],"t":65,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.004],"t":66,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.002],"t":67,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[-0.001],"t":68,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":69,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.001],"t":70,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.001],"t":71,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.001],"t":72,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.001],"t":73,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0.001],"t":74,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":75,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":76,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":77,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":78,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":79,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":80,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":81,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":83,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":84,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":85,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":86,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[0],"t":88,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}]},"p":{"a":0,"k":[300,579,0],"ix":2,"l":2},"a":{"a":0,"k":[-100,179,0],"ix":1,"l":2},"s":{"k":[{"s":[0,0,100],"t":18,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100,100,100],"t":24,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[108.325,108.325,100],"t":25,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[112.454,112.454,100],"t":26,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[113.049,113.049,100],"t":27,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[111.172,111.172,100],"t":28,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[107.965,107.965,100],"t":29,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[104.426,104.426,100],"t":30,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[101.282,101.282,100],"t":31,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[98.951,98.951,100],"t":32,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[97.571,97.571,100],"t":33,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[97.07,97.07,100],"t":34,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[97.245,97.245,100],"t":35,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[97.843,97.843,100],"t":36,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[98.62,98.62,100],"t":37,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[99.382,99.382,100],"t":38,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100,100,100],"t":39,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100.414,100.414,100],"t":40,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100.62,100.62,100],"t":41,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100.556,100.556,100],"t":43,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100.397,100.397,100],"t":44,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100.22,100.22,100],"t":45,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[100.064,100.064,100],"t":46,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}},{"s":[99.948,99.948,100],"t":47,"i":{"x":[1,1,1],"y":[1,1,1]},"o":{"x":[0,0,0],"y":[0,0,0]}}],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[161,-133],[-160,-133],[-161,110],[-100,110],[-100,179],[-42,109],[161,109]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"k":[{"s":[30],"t":12,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"s":[30],"t":90,"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}]},"lc":1,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":12,"op":91,"st":-29,"ct":1,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Ellipse01","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,400,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"d":1,"ty":"el","s":{"a":0,"k":[620,620],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":3,"s":[0],"e":[100]},{"t":40}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":35,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":3,"op":91,"st":3,"ct":1,"bm":0}],"markers":[],"props":{}}

package/dist/screenplay/RemotionRenderer/components/utils/BlurOverlay.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+export var BlurOverlay = function BlurOverlay(_ref) {
+  var show = _ref.show,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex;
+  if (!show) return null;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      backdropFilter: "blur(10px)",
+      isolation: "isolate",
+      zIndex: zIndex
+    }
+  });
+};

package/dist/screenplay/RemotionRenderer/components/utils/ChromaKeyedVideo.js

@@ -0,0 +1,59 @@
+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 { AbsoluteFill, OffthreadVideo, useVideoConfig } from "remotion";
+import { useCallback, useRef } from "react";
+import { CHROME_PADDING } from "../../config.js";
+export var ChromaKeyedVideo = function ChromaKeyedVideo(props) {
+  var canvas = useRef(null);
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  var onVideoFrame = useCallback(function (frame) {
+    if (!canvas.current) return;
+    var context = canvas.current.getContext("2d");
+    if (!context) return;
+    var targetWidth = width;
+    var targetHeight = height;
+    var sourceWidth = frame.videoWidth || frame.width;
+    var sourceHeight = frame.videoHeight || frame.height;
+    var scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
+    var drawWidth = sourceWidth * scale;
+    var drawHeight = sourceHeight * scale;
+    var offsetX = (targetWidth - drawWidth) / 2;
+    var offsetY = (targetHeight - drawHeight) / 2;
+    context.clearRect(0, 0, targetWidth, targetHeight);
+    context.drawImage(frame, offsetX, offsetY, drawWidth, drawHeight);
+    var imageFrame = context.getImageData(0, 0, targetWidth, targetHeight);
+    var length = imageFrame.data.length;
+    for (var i = 0; i < length; i += 4) {
+      var red = imageFrame.data[i];
+      var green = imageFrame.data[i + 1];
+      var blue = imageFrame.data[i + 2];
+      if (green > 160 && red < 150 && blue < 150) {
+        imageFrame.data[i + 3] = 0;
+      }
+      if (green > 100 && red < 100 && blue < 100) {
+        imageFrame.data[i + 1] = 0;
+      }
+    }
+    context.putImageData(imageFrame, 0, 0);
+  }, [height, width]);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(OffthreadVideo, _extends({}, props, {
+    onVideoFrame: onVideoFrame
+  }))), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      borderRadius: 30,
+      overflow: "hidden",
+      transform: "translate(-50%, -50%)",
+      left: "50%",
+      top: "50%",
+      width: width - 2 * CHROME_PADDING,
+      height: height - 2 * CHROME_PADDING
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    id: "canvas",
+    ref: canvas,
+    width: width,
+    height: height
+  })));
+};