@zync/zync-screnplay-player 0.1.218 → 0.1.220

package/dist/screenplay/RemotionRenderer/main/screenplaySchema.js

@@ -29,58 +29,58 @@ export var screenplaySchema = z.object({
   }), z.object({
     type: "segmentx"
   })])),
-  /* z.object({
-      type: "segment",
-      segments: z.array(
-        z.object({
-          layout: z.any(),
-          effects: z.array(effectSchema),
-        })
-      ),
+  /* z.object({
+      type: "segment",
+      segments: z.array(
+        z.object({
+          layout: z.any(),
+          effects: z.array(effectSchema),
+        })
+      ),
     })*/
-  /*z.object({
-        type: "effect",
-        segments: z.array(effectSchema),
-      }),
-      z.object({
-        type: z.enum(segmentTypes),
-        segments: z.array([
-          {
-            type: "caption",
-            segments: z.array(
-              z.object({
-                type: "caption_simple",
-                data: {
-                  transcript_text: z.array(
-                    z.object({
-                      text: z.string(),
-                      offset: z.number(),
-                      duration: z.number(),
-                    })
-                  ),
-                  duration: z.number().optional(),
-                  offset: z.number().optional(),
-                },
-              })
-            ),
-          },
-        ]),
-      }),
-      z.object({
-        type: "audio",
-        segments: z.array([
-          z.object({
-            type: z.string(),
-            data: {
-              sourceAudio: {
-                url: z.string().url(),
-                volume: z.number().min(0).max(1),
-                start: z.number(),
-              },
-              offset: z.number(),
-            },
-          }),
-        ]),
+  /*z.object({
+        type: "effect",
+        segments: z.array(effectSchema),
+      }),
+      z.object({
+        type: z.enum(segmentTypes),
+        segments: z.array([
+          {
+            type: "caption",
+            segments: z.array(
+              z.object({
+                type: "caption_simple",
+                data: {
+                  transcript_text: z.array(
+                    z.object({
+                      text: z.string(),
+                      offset: z.number(),
+                      duration: z.number(),
+                    })
+                  ),
+                  duration: z.number().optional(),
+                  offset: z.number().optional(),
+                },
+              })
+            ),
+          },
+        ]),
+      }),
+      z.object({
+        type: "audio",
+        segments: z.array([
+          z.object({
+            type: z.string(),
+            data: {
+              sourceAudio: {
+                url: z.string().url(),
+                volume: z.number().min(0).max(1),
+                start: z.number(),
+              },
+              offset: z.number(),
+            },
+          }),
+        ]),
       }),*/
   output: z.object({
     orientation: z["enum"](orientations),

package/dist/screenplay/RemotionRenderer/registeredComponents.js

@@ -43,9 +43,10 @@ import { MotionStillGreenScreen } from "./components/layouts/MotionStillGreenScr
 import { DynamicTriangle } from "./components/layouts/DynamicTriangle";
 import { KeywordStudioBackdrop } from "./components/layouts/KeywordStudioBackdrop";
 import { MotionStillGreenScreenV2 } from "./components/layouts/MotionStillGreenScreenV2";
+import { HookVideo } from "./components/layouts/HookVideo";
 
-/** Update this so that Remotion knows which component to render when it is passed via screenplay. Ex. "title" will have rendered "Title" component
- *  Here we are mapping directly types and component names. Types are snake_case and components PascalCase.
+/** Update this so that Remotion knows which component to render when it is passed via screenplay. Ex. "title" will have rendered "Title" component
+ *  Here we are mapping directly types and component names. Types are snake_case and components PascalCase.
  * */
 export var RegisteredComponents = {
   // Layouts
@@ -74,6 +75,7 @@ export var RegisteredComponents = {
   StretchTextDemo: StretchTextDemo,
   KeyPointOverlayDepth: KeyPointOverlayDepth,
   DynamicTriangle: DynamicTriangle,
+  HookVideo: HookVideo,
   //effects
   BrollFullscreen: BrollFullscreen,
   PhraseRainbowEffect: PhraseRainbowEffect,

package/dist/screenplay/RemotionRenderer/tracks/DynamicVideoComposition.js

@@ -1,81 +1,67 @@
-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; }
+var _excluded = ["playerOptions"];
+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 { AbsoluteFill, Internals } from "remotion";
+import { AbsoluteFill, Internals, useRemotionEnvironment } from "remotion";
 import { LayoutVideoTrack } from "./LayoutVideoTrack";
 import { EffectsVideoTrack } from "./EffectsVideoTrack";
 import { CaptionsVideoTrack } from "./CaptionsVideoTrack";
 import { AudioTrack } from "./AudioTrack";
 import { SafeZones } from "../components/utils/SafeZones";
 var isSafeZoneDisplayed = false;
-var BufferingOverlay = function BufferingOverlay() {
-  var _bufferingContext$buf;
-  var bufferingContext = React.useContext(Internals.BufferingContextReact);
-  var _React$useState = React.useState((_bufferingContext$buf = bufferingContext === null || bufferingContext === void 0 ? void 0 : bufferingContext.buffering.current) !== null && _bufferingContext$buf !== void 0 ? _bufferingContext$buf : false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isBuffering = _React$useState2[0],
-    setIsBuffering = _React$useState2[1];
-  React.useEffect(function () {
-    if (!bufferingContext) {
-      return;
-    }
-    setIsBuffering(bufferingContext.buffering.current);
-    var onBuffer = bufferingContext.listenForBuffering(function () {
-      setIsBuffering(true);
-    });
-    var onResume = bufferingContext.listenForResume(function () {
-      setIsBuffering(false);
-    });
-    return function () {
-      onBuffer.remove();
-      onResume.remove();
+var DISABLED_BUFFER_MANAGER = {
+  addBlock: function addBlock() {
+    return {
+      unblock: function unblock() {
+        return undefined;
+      }
+    };
+  },
+  buffering: {
+    current: false
+  },
+  listenForBuffering: function listenForBuffering() {
+    return {
+      remove: function remove() {
+        return undefined;
+      }
+    };
+  },
+  listenForResume: function listenForResume() {
+    return {
+      remove: function remove() {
+        return undefined;
+      }
     };
-  }, [bufferingContext]);
-  if (!isBuffering) {
-    return null;
   }
-  return /*#__PURE__*/React.createElement(AbsoluteFill, {
-    style: {
-      alignItems: "center",
-      justifyContent: "center",
-      pointerEvents: "none"
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: 100,
-    height: 100,
-    viewBox: "0 0 30 30",
-    "aria-label": "Buffering"
-  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("animateTransform", {
-    attributeName: "transform",
-    type: "rotate",
-    from: "0 15 15",
-    to: "360 15 15",
-    dur: "0.9s",
-    repeatCount: "indefinite"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "15",
-    cy: "15",
-    r: "11",
-    fill: "none",
-    stroke: "#FF1253",
-    strokeWidth: "3",
-    strokeLinecap: "round",
-    strokeDasharray: "50 18"
-  }))));
 };
-var DynamicVideoCompositionComponent = function DynamicVideoCompositionComponent(props) {
+var PreviewBufferingProvider = function PreviewBufferingProvider(_ref) {
+  var children = _ref.children,
+    pauseWhenBufferingInPlayer = _ref.pauseWhenBufferingInPlayer;
+  var env = useRemotionEnvironment();
+  if (!env.isPlayer || pauseWhenBufferingInPlayer) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(Internals.BufferingContextReact.Provider, {
+    value: DISABLED_BUFFER_MANAGER
+  }, children);
+};
+var DynamicVideoCompositionComponent = function DynamicVideoCompositionComponent(_ref2) {
+  var _ref2$playerOptions = _ref2.playerOptions,
+    playerOptions = _ref2$playerOptions === void 0 ? {} : _ref2$playerOptions,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var layoutVideoTrack = (props === null || props === void 0 ? void 0 : props.layoutVideoTrack) || [];
   var effectsVideoTrack = (props === null || props === void 0 ? void 0 : props.effectsVideoTrack) || [];
   var captionsVideoTrack = (props === null || props === void 0 ? void 0 : props.captionsVideoTrack) || [];
   var audioTrack = (props === null || props === void 0 ? void 0 : props.audioTrack) || [];
+  var _playerOptions$pauseW = playerOptions.pauseWhenBufferingInPlayer,
+    pauseWhenBufferingInPlayer = _playerOptions$pauseW === void 0 ? false : _playerOptions$pauseW;
   return /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       backgroundColor: props.output.backgroundColor
     }
+  }, /*#__PURE__*/React.createElement(PreviewBufferingProvider, {
+    pauseWhenBufferingInPlayer: pauseWhenBufferingInPlayer
   }, isSafeZoneDisplayed && /*#__PURE__*/React.createElement(SafeZones, null), /*#__PURE__*/React.createElement(LayoutVideoTrack, {
     track: layoutVideoTrack
   }), /*#__PURE__*/React.createElement(EffectsVideoTrack, {
@@ -84,7 +70,7 @@ var DynamicVideoCompositionComponent = function DynamicVideoCompositionComponent
     track: captionsVideoTrack
   }), /*#__PURE__*/React.createElement(AudioTrack, {
     track: audioTrack
-  }), /*#__PURE__*/React.createElement(BufferingOverlay, null));
+  })));
 };
 export var DynamicVideoComposition = function DynamicVideoComposition(props) {
   if (props) {

package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js

@@ -23,26 +23,26 @@ var transitionThemes = {
   }
 };
 
-/*
-const UseMotionBlur = ({ children, componentName }) => {
-  const {
-    props: {
-      output: { theme = "default" } = {
-        theme: window.screenplayProps.output.theme,
-      },
-    },
-  } = useVideoConfig();
-
-  if (motionBlurComponents[componentName] && motionBlurThemes[theme]) {
-    return (
-      <CameraMotionBlur shutterAngle={180} samples={5}>
-        {children}
-      </CameraMotionBlur>
-    );
-  }
-
-  return children;
-};
+/*
+const UseMotionBlur = ({ children, componentName }) => {
+  const {
+    props: {
+      output: { theme = "default" } = {
+        theme: window.screenplayProps.output.theme,
+      },
+    },
+  } = useVideoConfig();
+
+  if (motionBlurComponents[componentName] && motionBlurThemes[theme]) {
+    return (
+      <CameraMotionBlur shutterAngle={180} samples={5}>
+        {children}
+      </CameraMotionBlur>
+    );
+  }
+
+  return children;
+};
  */
 
 var NestedEffects = function NestedEffects(_ref) {

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@zync/zync-screnplay-player",
-  "version": "0.1.218",
-  "files": [
-    "dist"
-  ],
-  "main": "dist/bundle.js",
-  "module": "dist/index.js",
-  "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/bundle.js"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files && webpack",
-    "publish-lib": "npm run build && npm publish --access public"
-  },
-  "dependencies": {
-    "@remotion/google-fonts": "4.0.441",
-    "@remotion/lottie": "4.0.441",
-    "@remotion/motion-blur": "4.0.441",
-    "@remotion/player": "4.0.441",
-    "@remotion/transitions": "4.0.441",
-    "remotion": "4.0.441"
-  },
-  "peerDependencies": {
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.21.5",
-    "@babel/core": "7.21.5",
-    "@babel/preset-env": "7.21.5",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "^7.26.0",
-    "babel-loader": "^9.2.1",
-    "terser-webpack-plugin": "^5.3.11",
-    "ts-loader": "^9.5.2",
-    "typescript": "^5.7.3",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1",
-    "rimraf": "^5.0.7"
-  },
-  "browser": {
-    "fs": false
-  }
-}
+{
+  "name": "@zync/zync-screnplay-player",
+  "version": "0.1.220",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/bundle.js",
+  "module": "dist/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/bundle.js"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files && webpack",
+    "publish-lib": "npm run build && npm publish --access public"
+  },
+  "dependencies": {
+    "@remotion/google-fonts": "4.0.441",
+    "@remotion/lottie": "4.0.441",
+    "@remotion/motion-blur": "4.0.441",
+    "@remotion/player": "4.0.441",
+    "@remotion/transitions": "4.0.441",
+    "remotion": "4.0.441"
+  },
+  "peerDependencies": {
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.21.5",
+    "@babel/core": "7.21.5",
+    "@babel/preset-env": "7.21.5",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
+    "babel-loader": "^9.2.1",
+    "terser-webpack-plugin": "^5.3.11",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "rimraf": "^5.0.7"
+  },
+  "browser": {
+    "fs": false
+  }
+}