@zync/zync-screnplay-player 0.1.228 → 0.1.230

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

@@ -46,8 +46,8 @@ import { KeywordStudioBackdrop } from "./components/layouts/KeywordStudioBackdro
 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

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

@@ -4,11 +4,50 @@ var _excluded = ["component", "index"],
 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 { Easing, Sequence, Series, useVideoConfig } from "remotion";
+import { AbsoluteFill, Audio, Easing, Sequence, Series, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
 import React from "react";
 import { RegisteredComponents } from "../registeredComponents";
 import { linearTiming, TransitionSeries } from "@remotion/transitions";
 import { glitchOnePresentation } from "./transitions/GlitchOne";
+var HOOK_EXIT_PRE_FRAMES = 8;
+var HOOK_EXIT_POST_FRAMES = 7;
+var GLITCH_SLAM_TEAR_BARS = [{
+  top: 8,
+  height: 2.6,
+  phase: -4,
+  direction: 1,
+  weight: 0.72
+}, {
+  top: 19,
+  height: 4.8,
+  phase: -2,
+  direction: -1,
+  weight: 0.94
+}, {
+  top: 35,
+  height: 2.2,
+  phase: 0,
+  direction: 1,
+  weight: 0.84
+}, {
+  top: 49,
+  height: 5.8,
+  phase: 1,
+  direction: -1,
+  weight: 1
+}, {
+  top: 64,
+  height: 3.2,
+  phase: 3,
+  direction: 1,
+  weight: 0.68
+}, {
+  top: 79,
+  height: 4.4,
+  phase: 4,
+  direction: -1,
+  weight: 0.78
+}];
 var motionBlurComponents = {
   SentenceSimple: true,
   Sentence: true
@@ -23,32 +62,219 @@ 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) {
+var isTruthy = function isTruthy(value) {
+  return value === true || value === "true" || value === 1 || value === "1";
+};
+var isHookExitEffectEnabled = function isHookExitEffectEnabled(_ref) {
   var component = _ref.component,
-    index = _ref.index,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+    hasNextSegment = _ref.hasNextSegment,
+    props = _ref.props;
+  return component === "HookVideo" && hasNextSegment && !isTruthy(props.disableHookExitEffect);
+};
+var withAlpha = function withAlpha(color, alpha) {
+  return /^#[0-9a-fA-F]{6}$/.test(color || "") ? "".concat(color).concat(alpha) : color;
+};
+var getHookGlitchSlamShake = function getHookGlitchSlamShake(overlay, frame, width) {
+  if (!overlay) {
+    return {
+      x: 0,
+      scale: 1
+    };
+  }
+  var localFrame = frame - overlay.from;
+  var fadeOutEnd = Math.max(overlay.durationInFrames - 1, overlay.peakFrame + 1);
+  var relativeFrame = localFrame - overlay.peakFrame;
+  var preImpact = interpolate(localFrame, [0, overlay.peakFrame], [0, 1], {
+    easing: Easing["in"](Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var postDecay = localFrame <= overlay.peakFrame ? 1 : interpolate(localFrame, [overlay.peakFrame, fadeOutEnd], [1, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var impact = localFrame <= overlay.peakFrame ? preImpact : postDecay;
+  var cutPulse = interpolate(Math.abs(relativeFrame), [0, 2, 7], [1, 0.52, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var jitter = (localFrame % 2 === 0 ? 0.86 : -0.86) + Math.sin((localFrame + 1) * 2.37) * 0.24;
+  var baseAmplitude = Math.max(6, width * 0.008) * impact;
+  var slamAmplitude = Math.max(14, width * 0.018) * cutPulse;
+  var x = Math.round((baseAmplitude + slamAmplitude) * jitter * 10) / 10;
+  var scale = 1 + impact * 0.004 + cutPulse * 0.012;
+  return {
+    x: x,
+    scale: scale
+  };
+};
+var HookGlitchSlamOverlay = function HookGlitchSlamOverlay(_ref2) {
+  var _window, _window$screenplayPro;
+  var durationInFrames = _ref2.durationInFrames,
+    peakFrame = _ref2.peakFrame;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$props;
+  var inputProps = (compositionProps === null || compositionProps === void 0 ? void 0 : compositionProps.input) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : _window$screenplayPro.input : {}) || {};
+  var accentColor = inputProps.accentColor || "#ffffff";
+  var accentWash = withAlpha(accentColor, "40") || "rgba(255,255,255,0.24)";
+  var fadeOutEnd = Math.max(durationInFrames - 1, peakFrame + 1);
+  var relativeFrame = frame - peakFrame;
+  var preImpact = interpolate(frame, [0, peakFrame], [0, 1], {
+    easing: Easing["in"](Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var postDecay = frame <= peakFrame ? 1 : interpolate(frame, [peakFrame, fadeOutEnd], [1, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var impact = frame <= peakFrame ? preImpact : postDecay;
+  var cutPulse = interpolate(Math.abs(relativeFrame), [0, 2, 6], [1, 0.46, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var tearWindow = interpolate(Math.abs(relativeFrame), [0, 5, 9], [1, 0.72, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var flashOpacity = cutPulse * 0.46 + impact * 0.05;
+  var accentOpacity = cutPulse * 0.16 * postDecay;
+  var splitOpacity = Math.min(0.22, (cutPulse * 0.16 + tearWindow * 0.05) * postDecay);
+  var splitOffset = Math.max(5, width * 0.006) * (0.4 + cutPulse);
+  var maxTearOffset = Math.max(22, width * 0.04);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 9999,
+      overflow: "hidden",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: accentOpacity,
+      backgroundColor: accentWash,
+      mixBlendMode: "screen"
+    }
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: splitOpacity,
+      backgroundColor: "rgba(0,240,255,0.72)",
+      mixBlendMode: "screen",
+      transform: "translate3d(".concat(-splitOffset, "px, 0, 0)")
+    }
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: splitOpacity,
+      backgroundColor: "rgba(255,32,96,0.66)",
+      mixBlendMode: "screen",
+      transform: "translate3d(".concat(splitOffset, "px, 0, 0)")
+    }
+  }), GLITCH_SLAM_TEAR_BARS.map(function (bar, index) {
+    var barPulse = interpolate(Math.abs(relativeFrame - bar.phase), [0, 2, 5], [1, 0.48, 0], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }) * impact;
+    var tearOffset = bar.direction * maxTearOffset * bar.weight * barPulse;
+    var colorOpacity = Math.min(0.58, barPulse * 0.46);
+    var shadowOpacity = Math.min(0.18, barPulse * 0.18);
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "glitch-slam-tear-".concat(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: "".concat(bar.top, "%"),
+        left: "-8%",
+        width: "116%",
+        height: "".concat(bar.height, "%"),
+        opacity: colorOpacity,
+        background: index % 2 === 0 ? "linear-gradient(90deg, rgba(0,240,255,0), rgba(0,240,255,0.78) 18%, rgba(255,255,255,0.42) 52%, rgba(0,240,255,0) 100%)" : "linear-gradient(90deg, rgba(255,32,96,0), rgba(255,32,96,0.72) 22%, rgba(255,255,255,0.38) 58%, rgba(255,32,96,0) 100%)",
+        mixBlendMode: "screen",
+        transform: "translate3d(".concat(tearOffset, "px, 0, 0)")
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: "".concat(bar.top + bar.height * 0.35, "%"),
+        left: "-8%",
+        width: "116%",
+        height: "0.5%",
+        opacity: shadowOpacity,
+        backgroundColor: "rgba(0,0,0,0.72)",
+        transform: "translate3d(".concat(-tearOffset * 0.55, "px, 0, 0)")
+      }
+    }));
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: flashOpacity,
+      backgroundColor: "rgba(255,255,255,0.86)",
+      mixBlendMode: "screen"
+    }
+  }));
+};
+var buildHookExitOverlays = function buildHookExitOverlays(track) {
+  var overlays = [];
+  var timelineCursor = 0;
+  track.forEach(function (_ref3, index) {
+    var layout = _ref3.layout;
+    var durationInFrames = layout.durationInFrames;
+    var hasNextSegment = index < track.length - 1;
+    var hookExitEffectEnabled = isHookExitEffectEnabled({
+      component: layout.component,
+      hasNextSegment: hasNextSegment,
+      props: layout
+    });
+    var segmentEnd = timelineCursor + durationInFrames;
+    if (hookExitEffectEnabled) {
+      var _track, _track$layout;
+      var nextDuration = ((_track = track[index + 1]) === null || _track === void 0 ? void 0 : (_track$layout = _track.layout) === null || _track$layout === void 0 ? void 0 : _track$layout.durationInFrames) || 0;
+      var preFrames = Math.min(HOOK_EXIT_PRE_FRAMES, durationInFrames);
+      var postFrames = Math.min(HOOK_EXIT_POST_FRAMES, nextDuration);
+      var from = Math.max(0, segmentEnd - preFrames);
+      var overlayDuration = preFrames + postFrames;
+      if (overlayDuration > 0) {
+        overlays.push({
+          from: from,
+          durationInFrames: overlayDuration,
+          peakFrame: segmentEnd - from,
+          playSound: !isTruthy(layout.disableHookSounds) && !isTruthy(layout.disableTransitionSounds),
+          soundFrom: segmentEnd
+        });
+      }
+    }
+    timelineCursor += durationInFrames;
+  });
+  return overlays;
+};
+var NestedEffects = function NestedEffects(_ref4) {
+  var component = _ref4.component,
+    index = _ref4.index,
+    otherProps = _objectWithoutProperties(_ref4, _excluded);
   var ComponentToRender = RegisteredComponents[component];
   if (!ComponentToRender) {
     return null;
@@ -59,15 +285,44 @@ var NestedEffects = function NestedEffects(_ref) {
     name: "NestedEffect-".concat(component)
   }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps));
 };
-var StandardVideoTrack = function StandardVideoTrack(_ref2) {
-  var track = _ref2.track;
-  return /*#__PURE__*/React.createElement(Series, null, track.map(function (_ref3, index) {
-    var _ref3$layout = _ref3.layout,
-      component = _ref3$layout.component,
-      otherProps = _objectWithoutProperties(_ref3$layout, _excluded2),
-      _ref3$effects = _ref3.effects,
-      effects = _ref3$effects === void 0 ? [] : _ref3$effects;
+var StandardVideoTrack = function StandardVideoTrack(_ref5) {
+  var track = _ref5.track;
+  var frame = useCurrentFrame();
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width;
+  var hookExitOverlays = buildHookExitOverlays(track);
+  var activeHookExitOverlay = hookExitOverlays.find(function (_ref6) {
+    var from = _ref6.from,
+      durationInFrames = _ref6.durationInFrames;
+    return frame >= from && frame < from + durationInFrames;
+  });
+  var _getHookGlitchSlamSha = getHookGlitchSlamShake(activeHookExitOverlay, frame, width),
+    shakeX = _getHookGlitchSlamSha.x,
+    shakeScale = _getHookGlitchSlamSha.scale;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      transform: "translate3d(".concat(shakeX, "px, 0, 0) scale(").concat(shakeScale, ")"),
+      transformOrigin: "center center"
+    }
+  }, /*#__PURE__*/React.createElement(Series, null, track.map(function (_ref7, index, array) {
+    var _ref7$layout = _ref7.layout,
+      component = _ref7$layout.component,
+      otherProps = _objectWithoutProperties(_ref7$layout, _excluded2),
+      _ref7$effects = _ref7.effects,
+      effects = _ref7$effects === void 0 ? [] : _ref7$effects;
     var ComponentToRender = RegisteredComponents[component];
+    var hookExitEffectEnabled = isHookExitEffectEnabled({
+      component: component,
+      hasNextSegment: index < array.length - 1,
+      props: otherProps
+    });
+    var hookExitProps = component === "HookVideo" ? {
+      hookExitEffectEnabled: hookExitEffectEnabled
+    } : {};
     if (!ComponentToRender) {
       return null;
     }
@@ -76,26 +331,53 @@ var StandardVideoTrack = function StandardVideoTrack(_ref2) {
       name: "Layout - " + component,
       durationInFrames: otherProps.durationInFrames,
       premountFor: 100
-    }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps, effects.map(function (effect, i) {
+    }, /*#__PURE__*/React.createElement(ComponentToRender, _extends({}, otherProps, hookExitProps), effects.map(function (effect, i) {
       return /*#__PURE__*/React.createElement(NestedEffects, _extends({
         key: i
       }, effect, {
         index: index
       }));
     })));
+  }))), hookExitOverlays.map(function (_ref8, index) {
+    var from = _ref8.from,
+      durationInFrames = _ref8.durationInFrames,
+      peakFrame = _ref8.peakFrame,
+      playSound = _ref8.playSound,
+      soundFrom = _ref8.soundFrom;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "hook-glitch-slam-".concat(from, "-").concat(index)
+    }, /*#__PURE__*/React.createElement(Sequence, {
+      from: from,
+      durationInFrames: durationInFrames,
+      name: "HookGlitchSlamOverlay"
+    }, /*#__PURE__*/React.createElement(HookGlitchSlamOverlay, {
+      durationInFrames: durationInFrames,
+      peakFrame: peakFrame
+    })), playSound ? /*#__PURE__*/React.createElement(Sequence, {
+      from: soundFrom,
+      name: "HookGlitchSlamSound"
+    }, /*#__PURE__*/React.createElement(Audio, {
+      src: staticFile("blip.mp3"),
+      volume: function volume(localFrame) {
+        return interpolate(localFrame, [0, 2, 10], [0, 0.32, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+      }
+    })) : null);
   }));
 };
-var TransitionVideoTrack = function TransitionVideoTrack(_ref4) {
-  var track = _ref4.track,
-    transition = _ref4.transition;
-  return /*#__PURE__*/React.createElement(TransitionSeries, null, track.map(function (_ref5, index, array) {
-    var _ref5$layout = _ref5.layout,
-      component = _ref5$layout.component,
-      otherProps = _objectWithoutProperties(_ref5$layout, _excluded3),
-      _ref5$effects = _ref5.effects,
-      effects = _ref5$effects === void 0 ? [] : _ref5$effects,
-      _ref5$transitionAfter = _ref5.transitionAfter,
-      transitionAfter = _ref5$transitionAfter === void 0 ? true : _ref5$transitionAfter;
+var TransitionVideoTrack = function TransitionVideoTrack(_ref9) {
+  var track = _ref9.track,
+    transition = _ref9.transition;
+  return /*#__PURE__*/React.createElement(TransitionSeries, null, track.map(function (_ref10, index, array) {
+    var _ref10$layout = _ref10.layout,
+      component = _ref10$layout.component,
+      otherProps = _objectWithoutProperties(_ref10$layout, _excluded3),
+      _ref10$effects = _ref10.effects,
+      effects = _ref10$effects === void 0 ? [] : _ref10$effects,
+      _ref10$transitionAfte = _ref10.transitionAfter,
+      transitionAfter = _ref10$transitionAfte === void 0 ? true : _ref10$transitionAfte;
     var ComponentToRender = RegisteredComponents[component];
     var hasNextSegment = index < array.length - 1;
     var shouldTransition = hasNextSegment && transitionAfter !== false;
@@ -120,18 +402,18 @@ var TransitionVideoTrack = function TransitionVideoTrack(_ref4) {
     }) : null];
   }));
 };
-export var LayoutVideoTrack = function LayoutVideoTrack(_ref6) {
-  var track = _ref6.track;
+export var LayoutVideoTrack = function LayoutVideoTrack(_ref11) {
+  var track = _ref11.track;
   if (!track) {
     return null;
   }
-  var _useVideoConfig = useVideoConfig(),
-    _useVideoConfig$props = _useVideoConfig.props.output,
-    _useVideoConfig$props2 = _useVideoConfig$props === void 0 ? {
+  var _useVideoConfig3 = useVideoConfig(),
+    _useVideoConfig3$prop = _useVideoConfig3.props.output,
+    _useVideoConfig3$prop2 = _useVideoConfig3$prop === void 0 ? {
       theme: window.screenplayProps.output.theme
-    } : _useVideoConfig$props,
-    _useVideoConfig$props3 = _useVideoConfig$props2.theme,
-    theme = _useVideoConfig$props3 === void 0 ? "default" : _useVideoConfig$props3;
+    } : _useVideoConfig3$prop,
+    _useVideoConfig3$prop3 = _useVideoConfig3$prop2.theme,
+    theme = _useVideoConfig3$prop3 === void 0 ? "default" : _useVideoConfig3$prop3;
   var transition = transitionThemes[theme];
   if (transition) {
     return /*#__PURE__*/React.createElement(TransitionVideoTrack, {

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@zync/zync-screnplay-player",
-  "version": "0.1.228",
-  "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.230",
+  "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
+  }
+}