@zync/zync-screnplay-player 0.1.187

package/dist/bundle.js.LICENSE.txt

@@ -0,0 +1,54 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/index.js

@@ -0,0 +1,4 @@
+import ZyncScreenplayPlayer from "./ZyncScreenplayPlayer";
+import { RemotionRenderer } from "./screenplay/RemotionRenderer/RemotionRenderer";
+export { ZyncScreenplayPlayer, RemotionRenderer };
+export default ZyncScreenplayPlayer;

package/dist/screenplay/RemotionRenderer/RemotionRenderer.js

@@ -0,0 +1,281 @@
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+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 { screenplaySchema } from "./main/screenplaySchema.js";
+import { LayoutFactory } from "./main/lib/layouts/LayoutFactory.js";
+import { toFrames, toPascalCase } from "./main/lib/Sequence.js";
+import { transitionThemes } from "./config.js";
+export var RemotionRenderer = /*#__PURE__*/function () {
+  function RemotionRenderer(screenplay) {
+    _classCallCheck(this, RemotionRenderer);
+    _defineProperty(this, "screenplay", void 0);
+    _defineProperty(this, "fps", 30);
+    _defineProperty(this, "mainVideoTrack", {});
+    _defineProperty(this, "layoutVideoTrack", []);
+    _defineProperty(this, "effectsVideoTrack", []);
+    _defineProperty(this, "captionsVideoTrack", []);
+    _defineProperty(this, "audioTrack", []);
+    _defineProperty(this, "output", void 0);
+    this.screenplay = screenplay;
+    this.output = this.getRemotionOutputSettings();
+  }
+  return _createClass(RemotionRenderer, [{
+    key: "validate",
+    value: function validate() {
+      try {
+        screenplaySchema.parse(this.screenplay);
+      } catch (error) {
+        console.log({
+          error: error
+        });
+      }
+    }
+  }, {
+    key: "getRemotionOutputSettings",
+    value: function getRemotionOutputSettings() {
+      var _this = this;
+      var compositionMetadata = {};
+      var orientation = this.screenplay.output.orientation;
+      var theme = this.screenplay.input.theme || "default";
+      switch (orientation) {
+        case "landscape":
+          {
+            compositionMetadata.width = 1920;
+            compositionMetadata.height = 1080;
+            break;
+          }
+        case "portrait":
+          {
+            compositionMetadata.width = 1080;
+            compositionMetadata.height = 1920;
+            break;
+          }
+        case "square":
+          {
+            compositionMetadata.width = 1080;
+            compositionMetadata.height = 1080;
+            break;
+          }
+      }
+      var segmentTrack = this.getSegmentTrack();
+      var segments = segmentTrack.segments;
+      compositionMetadata.durationInFrames = segments.reduce(function (durationInFrames, segment, index, array) {
+        var segmentDuration = segment.layout.data.duration || 0;
+        var trimLeft = segment.layout.data.trimLeft || 0;
+        var trimRight = segment.layout.data.trimRight || 0;
+        var netDuration = segmentDuration - trimLeft - trimRight;
+        var duration = durationInFrames + netDuration * _this.fps;
+        var transitionTheme = transitionThemes[theme];
+        if (transitionTheme) {
+          var isLast = index === array.length - 1;
+          return toFrames(duration) - (isLast ? 0 : transitionTheme.durationInFrames);
+        }
+        return toFrames(duration);
+      }, 0);
+      compositionMetadata.theme = this.screenplay.input.theme || "default";
+      compositionMetadata.fps = this.fps;
+      return _objectSpread(_objectSpread({}, this.screenplay.output), compositionMetadata);
+    }
+  }, {
+    key: "toRemotionFragment",
+    value: function toRemotionFragment(screenPlaySegment, layout) {
+      var _screenPlaySegment$da, _toFrames, _screenPlaySegment$da2, _screenPlaySegment$da3;
+      var trimLeft = 0;
+      if (layout) {
+        trimLeft = layout.data.trimLeft || 0;
+      }
+      var from = this.fps * (screenPlaySegment.data.offset - trimLeft) || 0;
+      var durationInFrames = toFrames(this.fps * screenPlaySegment.data.duration);
+      var to = from + durationInFrames;
+      return _objectSpread(_objectSpread({}, screenPlaySegment.data), {}, {
+        component: toPascalCase(screenPlaySegment.type),
+        videoUrl: (_screenPlaySegment$da = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da === void 0 ? void 0 : _screenPlaySegment$da.videoUrl,
+        startVideoFrom: (_toFrames = toFrames(this.fps * ((_screenPlaySegment$da2 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da2 === void 0 ? void 0 : _screenPlaySegment$da2.start), false, true)) !== null && _toFrames !== void 0 ? _toFrames : 0,
+        durationInFrames: durationInFrames,
+        from: from,
+        to: to,
+        videoZoom: (_screenPlaySegment$da3 = screenPlaySegment.data.sourceVideo) === null || _screenPlaySegment$da3 === void 0 ? void 0 : _screenPlaySegment$da3.zoom,
+        offset: toFrames(this.fps * (screenPlaySegment.data.offset - trimLeft)) || 0,
+        theme: screenPlaySegment.theme,
+        themeSettings: screenPlaySegment === null || screenPlaySegment === void 0 ? void 0 : screenPlaySegment.themeSettings
+      });
+    }
+  }, {
+    key: "toRemotionAudioFragment",
+    value: function toRemotionAudioFragment(screenPlaySegment) {
+      var _screenPlaySegment$da4, _toFrames2, _screenPlaySegment$da5, _screenPlaySegment$da6, _screenPlaySegment$da7, _screenPlaySegment$da8, _screenPlaySegment$da9, _screenPlaySegment$da10;
+      var from = this.fps * screenPlaySegment.data.offset || 0;
+      var durationInFrames = toFrames(this.fps * screenPlaySegment.data.duration) || undefined;
+      var to = from + durationInFrames;
+      return _objectSpread(_objectSpread({}, screenPlaySegment.data), {}, {
+        component: toPascalCase(screenPlaySegment.type),
+        src: (_screenPlaySegment$da4 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da4 === void 0 ? void 0 : _screenPlaySegment$da4.url,
+        startAudioFrom: (_toFrames2 = toFrames(this.fps * ((_screenPlaySegment$da5 = screenPlaySegment.data.sourceAudio) === null || _screenPlaySegment$da5 === void 0 ? void 0 : _screenPlaySegment$da5.start), false, true)) !== null && _toFrames2 !== void 0 ? _toFrames2 : 0,
+        durationInFrames: durationInFrames,
+        from: from,
+        to: to,
+        offset: this.fps * screenPlaySegment.data.offset || 0,
+        volume: (_screenPlaySegment$da6 = (_screenPlaySegment$da7 = screenPlaySegment.data) === null || _screenPlaySegment$da7 === void 0 ? void 0 : (_screenPlaySegment$da8 = _screenPlaySegment$da7.sourceAudio) === null || _screenPlaySegment$da8 === void 0 ? void 0 : _screenPlaySegment$da8.volume) !== null && _screenPlaySegment$da6 !== void 0 ? _screenPlaySegment$da6 : 1,
+        loop: ((_screenPlaySegment$da9 = screenPlaySegment.data) === null || _screenPlaySegment$da9 === void 0 ? void 0 : (_screenPlaySegment$da10 = _screenPlaySegment$da9.sourceAudio) === null || _screenPlaySegment$da10 === void 0 ? void 0 : _screenPlaySegment$da10.loop) || false
+      });
+    }
+  }, {
+    key: "toRemotionSegment",
+    value: function toRemotionSegment(screenPlaySegment) {
+      var _this2 = this;
+      var layout = screenPlaySegment.layout,
+        effects = screenPlaySegment.effects;
+      return {
+        layout: LayoutFactory.createObject(layout),
+        effects: effects.map(function (effect) {
+          if (effect.type.includes("caption")) {
+            return _this2.toRemotionCaptionSegment(effect, layout);
+          }
+          return _this2.toRemotionFragment(effect, layout);
+        })
+      };
+    }
+  }, {
+    key: "toEffectSegment",
+    value: function toEffectSegment(screenPlaySegment) {
+      return this.toRemotionFragment(screenPlaySegment);
+    }
+  }, {
+    key: "toRemotionCaptionSegment",
+    value: function toRemotionCaptionSegment(screenPlaySegment, screenplayLayout) {
+      var _this3 = this;
+      var trimLeft = screenplayLayout.data.trimLeft || 0;
+      var from = this.fps * (screenPlaySegment.data.offset + trimLeft) || 0;
+      var transcripts = screenPlaySegment.data.transcript_text;
+      if (!transcripts) {
+        throw new Error("No transcript_text provided in transcript segment");
+      }
+      transcripts = transcripts.map(function (transcript) {
+        var transcriptFrom = _this3.fps * (transcript.offset - trimLeft) || 0;
+        var transcriptDurationInFrames = toFrames(_this3.fps * transcript.duration);
+        return {
+          text: transcript.text,
+          from: transcriptFrom,
+          durationInFrames: transcriptDurationInFrames,
+          punctuations: transcript.punctuations ? transcript.punctuations.map(function (p) {
+            return _objectSpread(_objectSpread({}, p), {}, {
+              start: toFrames(_this3.fps * (p.start - trimLeft)),
+              end: toFrames(_this3.fps * (p.end - trimLeft))
+            });
+          }) : []
+        };
+      });
+      return {
+        component: toPascalCase(screenPlaySegment.type),
+        durationInFrames: toFrames(this.screenplay.durationInFrames),
+        from: from,
+        transcripts: transcripts,
+        theme: screenPlaySegment.theme,
+        color: screenPlaySegment.data.color
+      };
+    }
+  }, {
+    key: "generateMainVideoTrack",
+    value: function generateMainVideoTrack() {
+      var _screenPlayLayoutTrac;
+      var screenPlayLayoutTrack = this.screenplay.tracks.find(function (track) {
+        return track.type === "segment";
+      });
+      if (!screenPlayLayoutTrack) {
+        throw new Error("Layout track not found");
+      }
+      if (!screenPlayLayoutTrack.segments && ((_screenPlayLayoutTrac = screenPlayLayoutTrack.segments) === null || _screenPlayLayoutTrac === void 0 ? void 0 : _screenPlayLayoutTrac.length) === 0) {
+        throw new Error("Layout track has no segments specified");
+      }
+      this.mainVideoTrack = this.toRemotionSegment(screenPlayLayoutTrack.segments[0]);
+    }
+  }, {
+    key: "getSegmentTrack",
+    value: function getSegmentTrack() {
+      var screenPlayLayoutTrack = this.screenplay.tracks.find(function (track) {
+        return track.type === "segment";
+      });
+      if (!screenPlayLayoutTrack) {
+        throw new Error("Layout track not found");
+      }
+      return screenPlayLayoutTrack;
+    }
+  }, {
+    key: "generateLayoutTrack",
+    value: function generateLayoutTrack() {
+      var _this4 = this;
+      var segmentTrack = this.getSegmentTrack();
+      var segments = segmentTrack.segments;
+      segments.forEach(function (segment) {
+        _this4.layoutVideoTrack.push(_this4.toRemotionSegment(segment));
+      });
+    }
+  }, {
+    key: "generateEffectsTrack",
+    value: function generateEffectsTrack() {
+      var _this5 = this;
+      var screenPlayEffectTrack = this.screenplay.tracks.find(function (track) {
+        return track.type === "effect";
+      });
+      if (!screenPlayEffectTrack) {
+        throw new Error("Effect track not found");
+      }
+      var segments = screenPlayEffectTrack.segments;
+      segments.forEach(function (segment) {
+        _this5.effectsVideoTrack.push(_this5.toEffectSegment(segment));
+      });
+    }
+  }, {
+    key: "generateCaptionsTrack",
+    value: function generateCaptionsTrack() {
+      var _this6 = this;
+      var screenPlayCaptionTrack = this.screenplay.tracks.find(function (track) {
+        return track.type === "caption";
+      });
+      if (!screenPlayCaptionTrack) {
+        throw new Error("Caption track not found");
+      }
+      var segments = screenPlayCaptionTrack.segments;
+      segments.forEach(function (segment, _ref) {
+        _objectDestructuringEmpty(_ref);
+        _this6.captionsVideoTrack.push(_this6.toRemotionCaptionSegment(segment));
+      });
+    }
+  }, {
+    key: "generateAudioTrack",
+    value: function generateAudioTrack() {
+      var _this7 = this;
+      var screenPlayAudioTrack = this.screenplay.tracks.find(function (track) {
+        return track.type === "audio";
+      });
+      if (!screenPlayAudioTrack) {
+        console.log("[ScreenPlay] Audio track not found. Skipping");
+        return;
+      }
+      var segments = screenPlayAudioTrack.segments;
+      segments.forEach(function (segment) {
+        _this7.audioTrack.push(_this7.toRemotionAudioFragment(segment));
+      });
+    }
+  }, {
+    key: "buildRemotionTimeline",
+    value: function buildRemotionTimeline() {
+      return {
+        input: this.screenplay.input,
+        mainVideoTrack: this.mainVideoTrack,
+        layoutVideoTrack: this.layoutVideoTrack,
+        effectsVideoTrack: this.effectsVideoTrack,
+        captionsVideoTrack: this.captionsVideoTrack,
+        audioTrack: this.audioTrack,
+        output: this.output
+      };
+    }
+  }]);
+}();

package/dist/screenplay/RemotionRenderer/Root.js

@@ -0,0 +1,22 @@
+import { Composition, getInputProps } from "remotion";
+import { DynamicVideoComposition } from "./tracks/DynamicVideoComposition";
+import { defaultProps } from "./development.js";
+export var RemotionRoot = function RemotionRoot() {
+  var props = getInputProps();
+  var _ref = props.output || {},
+    fps = _ref.fps,
+    width = _ref.width,
+    height = _ref.height,
+    durationInFrames = _ref.durationInFrames;
+  return /*#__PURE__*/React.createElement(Composition, {
+    id: "RemotionRenderer",
+    component: DynamicVideoComposition,
+    durationInFrames: durationInFrames || defaultProps.output.durationInFrames,
+    fps: fps || defaultProps.output.fps,
+    width: width || defaultProps.output.width,
+    height: height || defaultProps.output.height,
+    props: props,
+    inputProps: props,
+    defaultProps: defaultProps
+  });
+};

package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js

@@ -0,0 +1,116 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useEffect, useState } from 'react';
+import { delayRender, continueRender, cancelRender } from 'remotion';
+import { Lottie } from '@remotion/lottie';
+
+/**
+ * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
+ * Lottie expects: [r, g, b, a] where each component is 0‑1.
+ */
+var hexToRGBA = function hexToRGBA(hex) {
+  var clean = hex.replace('#', '');
+  var _int = parseInt(clean, 16);
+  return [(_int >> 16 & 255) / 255,
+  // red
+  (_int >> 8 & 255) / 255,
+  // green
+  (_int & 255) / 255,
+  // blue
+  1 // alpha (fully opaque)
+  ];
+};
+
+/**
+ * Recursively walks through shape objects and overrides any fill (fl) or
+ * stroke (st) color with the provided RGBA array.
+ */
+var _applyColor = function applyColor(shapes, rgba) {
+  shapes === null || shapes === void 0 ? void 0 : shapes.forEach(function (shape) {
+    if (shape.ty === 'fl' || shape.ty === 'st') {
+      shape.c.k = rgba;
+    }
+    if (shape.it) {
+      _applyColor(shape.it, rgba);
+    }
+  });
+};
+
+/**
+ * Traverses all layers (top‑level + asset layers) and applies the primary
+ * color to every fill / stroke it encounters. This is useful for Lottie files
+ * that were exported with a single static color (e.g. white) and do not use
+ * layer naming conventions like "PrimaryColor".
+ */
+var replaceGlobalColor = function replaceGlobalColor(data, hex) {
+  var _data$assets;
+  var rgba = hexToRGBA(hex);
+  var traverseLayers = function traverseLayers(layers) {
+    layers === null || layers === void 0 ? void 0 : layers.forEach(function (layer) {
+      return _applyColor(layer.shapes, rgba);
+    });
+  };
+  traverseLayers(data.layers);
+  (_data$assets = data.assets) === null || _data$assets === void 0 ? void 0 : _data$assets.forEach(function (asset) {
+    return traverseLayers(asset.layers);
+  });
+};
+
+/**
+ * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
+ * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
+ * and fill colors with the supplied `primaryColor`.
+ *
+ * Props:
+ *  • animationPath – URL or local path to the json file.
+ *  • primaryColor  – HEX string, defaults to "#ffffff".
+ *  • autoplay      – boolean, whether to start playing immediately.
+ *  • loop          – boolean, whether to loop the animation.
+ */
+export var LottieAnimationGlobal = function LottieAnimationGlobal(_ref) {
+  var animationPath = _ref.animationPath,
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? '#ffffff' : _ref$primaryColor,
+    _ref$autoplay = _ref.autoplay,
+    autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop;
+  var _useState = useState(function () {
+      return delayRender('loading‑bubble‑lottie');
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    handle = _useState2[0];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    animationData = _useState4[0],
+    setAnimationData = _useState4[1];
+  useEffect(function () {
+    fetch(animationPath).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      // Apply color replacement once the JSON is loaded
+      replaceGlobalColor(json, primaryColor);
+      setAnimationData(json);
+      continueRender(handle);
+    })["catch"](function (err) {
+      cancelRender(err);
+      console.error('BubbleLottieAnimation: failed to load', err);
+    });
+  }, [animationPath, primaryColor, handle]);
+  if (!animationData) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lottie-animation-wrapper",
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Lottie, {
+    animationData: animationData,
+    loop: loop,
+    autoplay: autoplay
+  }), /*#__PURE__*/React.createElement("style", null, "\n        .lottie-animation-wrapper *:not(style) {\n          display: block !important;\n          visibility: visible !important;\n        }\n      "));
+};

package/dist/screenplay/RemotionRenderer/components/backgrounds/VirtualBackground.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AbsoluteFill, Img } from 'remotion';
+export var VirtualBackground = function VirtualBackground(_ref) {
+  var url = _ref.url,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 2 : _ref$zIndex,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? '30px' : _ref$borderRadius;
+  if (!url) return null;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      overflow: 'hidden',
+      borderRadius: borderRadius,
+      width: '100%',
+      height: '100%',
+      zIndex: zIndex
+    }
+  }, /*#__PURE__*/React.createElement(Img, {
+    src: url,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    }
+  }));
+};

package/dist/screenplay/RemotionRenderer/components/backgrounds/VirtualBackgroundUnderlay.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Img } from "remotion";
+
+// Places a virtual background image within a positioned rectangle
+export var VirtualBackgroundUnderlay = function VirtualBackgroundUnderlay(_ref) {
+  var url = _ref.url,
+    _ref$top = _ref.top,
+    top = _ref$top === void 0 ? 0 : _ref$top,
+    _ref$left = _ref.left,
+    left = _ref$left === void 0 ? 0 : _ref$left,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "100%" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "100%" : _ref$height,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 2 : _ref$zIndex,
+    borderRadius = _ref.borderRadius,
+    _ref$zoom = _ref.zoom,
+    zoom = _ref$zoom === void 0 ? 1 : _ref$zoom;
+  if (!url) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: top,
+      left: left,
+      width: width,
+      height: height,
+      overflow: "hidden",
+      borderRadius: borderRadius,
+      zIndex: zIndex,
+      transform: "scale(".concat(zoom, ")")
+    }
+  }, /*#__PURE__*/React.createElement(Img, {
+    src: url,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  }));
+};

package/dist/screenplay/RemotionRenderer/components/captions/CaptionSimple.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { useThemedComponents } from "../../theme/hooks/useThemedComponents.js";
+export var CaptionSimple = function CaptionSimple(_ref) {
+  var transcripts = _ref.transcripts,
+    color = _ref.color,
+    theme = _ref.theme;
+  var Caption = useThemedComponents("Caption", theme);
+  return /*#__PURE__*/React.createElement(Caption, {
+    transcripts: transcripts,
+    color: color
+  });
+};

package/dist/screenplay/RemotionRenderer/components/effects/BrollFullscreen.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { AbsoluteFill, OffthreadVideo, Sequence } from "remotion";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
+import { VirtualBackground } from "../backgrounds/VirtualBackground";
+export var BrollFullscreen = function BrollFullscreen(_ref) {
+  var videoUrl = _ref.videoUrl,
+    durationInFrames = _ref.durationInFrames;
+  // Virtual background is typically used under person overlays; here it will
+  // have no effect if covered by fullscreen broll, but keeping parity.
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    url = _useVirtualBackground.url;
+  return /*#__PURE__*/React.createElement(Sequence, {
+    durationInFrames: durationInFrames
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, null, isVirtual && url ? /*#__PURE__*/React.createElement(VirtualBackground, {
+    url: url,
+    zIndex: 1
+  }) : null, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    src: videoUrl,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    muted: true
+  })));
+};

package/dist/screenplay/RemotionRenderer/components/effects/GlitchText.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+export var GlitchText = function GlitchText(_ref) {
+  var text = _ref.text;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      display: "grid",
+      placeItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("style", null, "body {\n  background: transparent;\n  font-family: \"Oswald\", sans-serif;\n  font-style: italic;\n}\n\n.container {\n  position: absolute;\n  transform: translate(-50%, -50%);\n  top: 40%;\n  left: 50%;\n}\n\n.glitch, .glow {\n  color: #dfbfbf;\n  position: relative;\n  font-size: 9vw;\n  animation: glitch 5s 5s infinite;\n}\n\n.glitch::before, .glow::before {\n  content: attr(data-text);\n  position: absolute;\n  left: -2px;\n  text-shadow: -5px 0 magenta;\n  background: transparent;\n  overflow: hidden;\n  top: 0;\n  animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;\n}\n\n.glitch::after, .glow::after {\n  content: attr(data-text);\n  position: absolute;\n  left: 2px;\n  text-shadow: -5px 0 lightgreen;\n  background: transparent;\n  overflow: hidden;\n  top: 0;\n  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;\n}\n\n@keyframes glitch {\n  1% {\n    transform: rotateX(10deg) skewX(90deg);\n  }\n  2% {\n    transform: rotateX(0deg) skewX(0deg);\n  }\n}\n@keyframes noise-1 {\n  3.3333333333% {\n    clip-path: inset(59px 0 12px 0);\n  }\n  6.6666666667% {\n    clip-path: inset(77px 0 14px 0);\n  }\n  10% {\n    clip-path: inset(50px 0 41px 0);\n  }\n  13.3333333333% {\n    clip-path: inset(19px 0 5px 0);\n  }\n  16.6666666667% {\n    clip-path: inset(44px 0 35px 0);\n  }\n  20% {\n    clip-path: inset(78px 0 14px 0);\n  }\n  23.3333333333% {\n    clip-path: inset(41px 0 23px 0);\n  }\n  26.6666666667% {\n    clip-path: inset(21px 0 7px 0);\n  }\n  30% {\n    clip-path: inset(48px 0 18px 0);\n  }\n  33.3333333333% {\n    clip-path: inset(38px 0 57px 0);\n  }\n  36.6666666667% {\n    clip-path: inset(14px 0 4px 0);\n  }\n  40% {\n    clip-path: inset(30px 0 2px 0);\n  }\n  43.3333333333% {\n    clip-path: inset(96px 0 4px 0);\n  }\n  46.6666666667% {\n    clip-path: inset(18px 0 67px 0);\n  }\n  50% {\n    clip-path: inset(60px 0 3px 0);\n  }\n  53.3333333333% {\n    clip-path: inset(92px 0 6px 0);\n  }\n  56.6666666667% {\n    clip-path: inset(74px 0 3px 0);\n  }\n  60% {\n    clip-path: inset(89px 0 12px 0);\n  }\n  63.3333333333% {\n    clip-path: inset(76px 0 24px 0);\n  }\n  66.6666666667% {\n    clip-path: inset(75px 0 7px 0);\n  }\n  70% {\n    clip-path: inset(18px 0 61px 0);\n  }\n  73.3333333333% {\n    clip-path: inset(62px 0 13px 0);\n  }\n  76.6666666667% {\n    clip-path: inset(67px 0 18px 0);\n  }\n  80% {\n    clip-path: inset(43px 0 29px 0);\n  }\n  83.3333333333% {\n    clip-path: inset(40px 0 34px 0);\n  }\n  86.6666666667% {\n    clip-path: inset(13px 0 67px 0);\n  }\n  90% {\n    clip-path: inset(94px 0 4px 0);\n  }\n  93.3333333333% {\n    clip-path: inset(58px 0 41px 0);\n  }\n  96.6666666667% {\n    clip-path: inset(2px 0 92px 0);\n  }\n  100% {\n    clip-path: inset(36px 0 63px 0);\n  }\n}\n@keyframes noise-2 {\n  0% {\n    clip-path: inset(5px 0 57px 0);\n  }\n  3.3333333333% {\n    clip-path: inset(32px 0 67px 0);\n  }\n  6.6666666667% {\n    clip-path: inset(94px 0 5px 0);\n  }\n  10% {\n    clip-path: inset(15px 0 62px 0);\n  }\n  13.3333333333% {\n    clip-path: inset(46px 0 36px 0);\n  }\n  16.6666666667% {\n    clip-path: inset(18px 0 58px 0);\n  }\n  20% {\n    clip-path: inset(25px 0 39px 0);\n  }\n  23.3333333333% {\n    clip-path: inset(65px 0 11px 0);\n  }\n  26.6666666667% {\n    clip-path: inset(49px 0 48px 0);\n  }\n  30% {\n    clip-path: inset(54px 0 17px 0);\n  }\n  33.3333333333% {\n    clip-path: inset(25px 0 28px 0);\n  }\n  36.6666666667% {\n    clip-path: inset(72px 0 28px 0);\n  }\n  40% {\n    clip-path: inset(86px 0 7px 0);\n  }\n  43.3333333333% {\n    clip-path: inset(62px 0 2px 0);\n  }\n  46.6666666667% {\n    clip-path: inset(28px 0 9px 0);\n  }\n  50% {\n    clip-path: inset(96px 0 1px 0);\n  }\n  53.3333333333% {\n    clip-path: inset(65px 0 9px 0);\n  }\n  56.6666666667% {\n    clip-path: inset(87px 0 1px 0);\n  }\n  60% {\n    clip-path: inset(69px 0 9px 0);\n  }\n  63.3333333333% {\n    clip-path: inset(65px 0 26px 0);\n  }\n  66.6666666667% {\n    clip-path: inset(79px 0 5px 0);\n  }\n  70% {\n    clip-path: inset(39px 0 45px 0);\n  }\n  73.3333333333% {\n    clip-path: inset(69px 0 11px 0);\n  }\n  76.6666666667% {\n    clip-path: inset(81px 0 3px 0);\n  }\n  80% {\n    clip-path: inset(44px 0 40px 0);\n  }\n  83.3333333333% {\n    clip-path: inset(89px 0 10px 0);\n  }\n  86.6666666667% {\n    clip-path: inset(7px 0 68px 0);\n  }\n  90% {\n    clip-path: inset(80px 0 6px 0);\n  }\n  93.3333333333% {\n    clip-path: inset(58px 0 2px 0);\n  }\n  96.6666666667% {\n    clip-path: inset(20px 0 57px 0);\n  }\n  100% {\n    clip-path: inset(86px 0 11px 0);\n  }\n}\n.scanlines {\n  overflow: hidden;\n  mix-blend-mode: difference;\n}\n\n.scanlines::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);\n  animation: fudge 7s ease-in-out alternate infinite;\n}\n\n@keyframes fudge {\n  from {\n    transform: translate(0px, 0px);\n  }\n  to {\n    transform: translate(0px, 2%);\n  }\n}\n.glow {\n  text-shadow: 0 0 1000px #dfbfbf;\n  color: transparent;\n  position: absolute;\n  top: 0;\n}\n\n.subtitle {\n  font-family: Arial, Helvetica, sans-serif;\n  font-weight: 100;\n  font-size: 0.8vw;\n  color: rgba(165, 141, 141, 0.4);\n  text-transform: uppercase;\n  letter-spacing: 1em;\n  text-align: center;\n  position: absolute;\n  left: 17%;\n  animation: glitch-2 5s 5.02s infinite;\n}\n\n@keyframes glitch-2 {\n  1% {\n    transform: rotateX(10deg) skewX(70deg);\n  }\n  2% {\n    transform: rotateX(0deg) skewX(0deg);\n  }\n}"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glitch",
+    "data-text": "ELISAB\xC9TH"
+  }, "ELISAB\xC9TH"), /*#__PURE__*/React.createElement("div", {
+    className: "glow"
+  }, "ELISAB\xC9TH"), /*#__PURE__*/React.createElement("p", {
+    className: "subtitle"
+  }, "IMPRACTICAL DEVELOPER")), /*#__PURE__*/React.createElement("div", {
+    className: "scanlines"
+  })));
+};

package/dist/screenplay/RemotionRenderer/components/effects/HandoffNametag.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { useThemedComponents } from "../../theme/hooks/useThemedComponents.js";
+export var HandoffNametag = function HandoffNametag(props) {
+  var HandoffNametag = useThemedComponents("HandoffNametag", props.theme);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, null, /*#__PURE__*/React.createElement(HandoffNametag, props)));
+};