@zync/zync-screnplay-player 0.1.202 → 0.1.204

package/dist/screenplay/RemotionRenderer/helpers/convertToSeconds.js

@@ -1,11 +1,11 @@
-/**
- * Converts seconds and a portion of frames to a numeric value of seconds.
- *
- * @param {number} seconds - The number of full seconds.
- * @param {number} nthFrame - The current frame within the second.
- * @param {number} delayInSeconds - Optional delay that adds up to the calculation
- * @param {number} frameRate - The frame rate (frames per second).
- * @return {number} The total time in seconds (with decimals for frames).
+/**
+ * Converts seconds and a portion of frames to a numeric value of seconds.
+ *
+ * @param {number} seconds - The number of full seconds.
+ * @param {number} nthFrame - The current frame within the second.
+ * @param {number} delayInSeconds - Optional delay that adds up to the calculation
+ * @param {number} frameRate - The frame rate (frames per second).
+ * @return {number} The total time in seconds (with decimals for frames).
  */
 export var convertToSeconds = function convertToSeconds(seconds, nthFrame) {
   var delayInSeconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;

package/dist/screenplay/RemotionRenderer/helpers/faceBasedVideoStyles.js

@@ -4,10 +4,10 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
-/**
- * Calculate video styles based on face detection metadata
- * This helper adjusts video positioning and transform origin to center faces in the viewport
- * when zooming, accounting for objectFit: "cover" behavior
+/**
+ * Calculate video styles based on face detection metadata
+ * This helper adjusts video positioning and transform origin to center faces in the viewport
+ * when zooming, accounting for objectFit: "cover" behavior
  */
 export var getFaceBasedVideoStyles = function getFaceBasedVideoStyles(_ref) {
   var faceMetadata = _ref.faceMetadata,

package/dist/screenplay/RemotionRenderer/helpers/faceCenteredVideoTransforms.js

@@ -4,33 +4,33 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-/**
- * Face-Centered Video Transform Calculator
- *
- * This helper calculates transform origin and positioning to ensure a video is ALWAYS
- * centered on a person's face, regardless of aspect ratio (landscape, square, portrait).
- *
- * Key features:
- * - Converts absolute face coordinates to relative values
- * - Handles different target aspect ratios (1920x1080, 1080x1080, 1080x1920)
- * - Provides smooth interpolation between frames
- * - Calculates optimal scale and positioning for face centering
+/**
+ * Face-Centered Video Transform Calculator
+ *
+ * This helper calculates transform origin and positioning to ensure a video is ALWAYS
+ * centered on a person's face, regardless of aspect ratio (landscape, square, portrait).
+ *
+ * Key features:
+ * - Converts absolute face coordinates to relative values
+ * - Handles different target aspect ratios (1920x1080, 1080x1080, 1080x1920)
+ * - Provides smooth interpolation between frames
+ * - Calculates optimal scale and positioning for face centering
  */
 
 import { useCurrentFrame } from "remotion";
 
-/**
- * Calculate face-centered video transforms
- * @param {Object} params - Configuration object
- * @param {Object} params.faceMetadata - Face detection metadata
- * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
- * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
- * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
- * @param {number} params.faceScale - Scale factor for face area (1.0 = face fills frame, 0.5 = face takes half frame)
- * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
- * @returns {Object} Transform styles and debug info
+/**
+ * Calculate face-centered video transforms
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
+ * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
+ * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {number} params.faceScale - Scale factor for face area (1.0 = face fills frame, 0.5 = face takes half frame)
+ * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @returns {Object} Transform styles and debug info
  */
 export var calculateFaceCenteredTransforms = function calculateFaceCenteredTransforms(_ref) {
   var _faceMetadata$metadat, _faceMetadata$metadat2;
@@ -173,10 +173,10 @@ export var calculateFaceCenteredTransforms = function calculateFaceCenteredTrans
   };
 };
 
-/**
- * Calculate average face position from all frames with face data
- * @param {Array} frames - Array of frame data
- * @returns {Object|null} Average face data or null if no face data available
+/**
+ * Calculate average face position from all frames with face data
+ * @param {Array} frames - Array of frame data
+ * @returns {Object|null} Average face data or null if no face data available
  */
 function getAverageFaceData(frames) {
   if (!frames || frames.length === 0) return null;
@@ -225,8 +225,8 @@ function getAverageFaceData(frames) {
   return averageFaceData;
 }
 
-/**
- * Get face data for a specific frame with optional interpolation
+/**
+ * Get face data for a specific frame with optional interpolation
  */
 function getFaceDataForFrame(frames, targetFrame, enableInterpolation) {
   if (!frames || frames.length === 0) return null;
@@ -285,8 +285,8 @@ function getFaceDataForFrame(frames, targetFrame, enableInterpolation) {
   };
 }
 
-/**
- * Preset configurations for common aspect ratios
+/**
+ * Preset configurations for common aspect ratios
  */
 export var ASPECT_RATIO_PRESETS = {
   LANDSCAPE: {
@@ -303,17 +303,17 @@ export var ASPECT_RATIO_PRESETS = {
   }
 };
 
-/**
- * Calculate face-centered object-position values
- * @param {Object} params - Configuration object
- * @param {Object} params.faceMetadata - Face detection metadata
- * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
- * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
- * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
- * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
- * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
- * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
- * @returns {Object} Object-position styles and debug info
+/**
+ * Calculate face-centered object-position values
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.targetWidth - Target video width (1920 for landscape, 1080 for square/portrait)
+ * @param {number} params.targetHeight - Target video height (1080 for landscape/square, 1920 for portrait)
+ * @param {number} params.currentFrame - Current frame number (optional, will use useCurrentFrame if not provided)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} params.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @returns {Object} Object-position styles and debug info
  */
 export var calculateFaceCenteredObjectPosition = function calculateFaceCenteredObjectPosition(_ref2) {
   var _faceMetadata$metadat4, _faceMetadata$metadat5;
@@ -435,8 +435,8 @@ export var calculateFaceCenteredObjectPosition = function calculateFaceCenteredO
   };
 };
 
-/**
- * Helper function to get transforms for specific aspect ratios
+/**
+ * Helper function to get transforms for specific aspect ratios
  */
 export var getFaceCenteredTransformsForAspectRatio = function getFaceCenteredTransformsForAspectRatio(aspectRatio, faceMetadata) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -451,8 +451,8 @@ export var getFaceCenteredTransformsForAspectRatio = function getFaceCenteredTra
   }, options));
 };
 
-/**
- * Helper function to get object-position for specific aspect ratios
+/**
+ * Helper function to get object-position for specific aspect ratios
  */
 export var getFaceCenteredObjectPositionForAspectRatio = function getFaceCenteredObjectPositionForAspectRatio(aspectRatio, faceMetadata) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package/dist/screenplay/RemotionRenderer/main/lib/layouts/HandoffLayout.js

@@ -27,7 +27,7 @@ export var HandoffLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(HandoffLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data6$firstNoB, _props$data7, _props$data7$firstNoB, _props$data8, _props$data9, _props$data10, _props$data11, _props$data11$secondN, _props$data12, _props$data12$secondN, _props$data$sourceVid2, _props$data$sourceVid3, _props$data13;
+      var _props$data$sourceVid, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data6$firstNoB, _props$data7, _props$data7$firstNoB, _props$data8, _props$data9, _props$data10, _props$data11, _props$data11$secondN, _props$data12, _props$data12$secondN, _props$data$sourceVid2, _props$data$sourceVid3, _props$data13, _props$data14;
       var sourceVideoOrientation = getVideoOrientation((_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.aspectRatio);
       this.props = {
         startFirstVideoFrom: toFrames(this.fps * (((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.startFirstVideoFrom) + (((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.trimLeft) || 0)), true) || 0,
@@ -43,8 +43,9 @@ export var HandoffLayout = /*#__PURE__*/function (_Layout) {
         videoUrl: (_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.videoUrl,
         sourceVideoOrientation: sourceVideoOrientation,
         videoZoom: ((_props$data$sourceVid3 = props.data.sourceVideo) === null || _props$data$sourceVid3 === void 0 ? void 0 : _props$data$sourceVid3.zoom) || 1,
+        useSquareInLandscapeFirstVideo: ((_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.useSquareInLandscapeFirstVideo) || false,
         text: props.data.text,
-        handoffOverlapSeconds: ((_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.handoffOverlapSeconds) || 0
+        handoffOverlapSeconds: ((_props$data14 = props.data) === null || _props$data14 === void 0 ? void 0 : _props$data14.handoffOverlapSeconds) || 0
       };
     }
   }]);

package/dist/screenplay/RemotionRenderer/main/lib/layouts/SimpleFrameLayout.js

@@ -26,7 +26,7 @@ export var SimpleFrameLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(SimpleFrameLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$noBackgro, _props$data$noBackgro2, _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3;
+      var _props$data$noBackgro, _props$data$noBackgro2, _props$data$sourceVid, _props$data$sourceVid2, _props$data, _props$data2, _props$data3, _props$data4;
       this.props = {
         noBackgroundVideoEffects: props.data.noBackgroundVideoEffects,
         noBackgroundVideoUrl: (_props$data$noBackgro = props.data.noBackgroundVideo) === null || _props$data$noBackgro === void 0 ? void 0 : _props$data$noBackgro.videoUrl,
@@ -34,8 +34,9 @@ export var SimpleFrameLayout = /*#__PURE__*/function (_Layout) {
         videoUrl: (_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.videoUrl,
         videoZoom: ((_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.zoom) || 1,
         disableTransitionSounds: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.disableTransitionSounds,
-        brollUrl: (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.brollUrl,
-        sentenceText: (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : _props$data3.sentenceText,
+        useSquareInLandscape: (props === null || props === void 0 ? void 0 : (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.useSquareInLandscape) || false,
+        brollUrl: (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : _props$data3.brollUrl,
+        sentenceText: (_props$data4 = props.data) === null || _props$data4 === void 0 ? void 0 : _props$data4.sentenceText,
         theme: props === null || props === void 0 ? void 0 : props.theme
       };
     }

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

@@ -39,8 +39,8 @@ import { DynamicTriangle } from "./components/layouts/DynamicTriangle";
 import { KeywordStudioBackdrop } from "./components/layouts/KeywordStudioBackdrop";
 import { MotionStillGreenScreenV2 } from "./components/layouts/MotionStillGreenScreenV2";
 
-/** 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/theme/themes/default/HandoffNametag.js

@@ -156,17 +156,23 @@ var HighlightLines = function HighlightLines(_ref3) {
   }));
 };
 export var HandoffNametag = function HandoffNametag(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var pictureUrl = _ref4.pictureUrl,
     fullName = _ref4.fullName,
     title = _ref4.title,
     alignment = _ref4.alignment,
     duration = _ref4.duration,
     _ref4$handoffNametagV = _ref4.handoffNametagVariant,
-    handoffNametagVariant = _ref4$handoffNametagV === void 0 ? HANDOFF_NAMETAG_VARIANTS.BOXED : _ref4$handoffNametagV;
-  var _useVideoConfig = useVideoConfig(),
-    fps = _useVideoConfig.fps,
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height;
+    handoffNametagVariant = _ref4$handoffNametagV === void 0 ? HANDOFF_NAMETAG_VARIANTS.BOXED : _ref4$handoffNametagV,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscapeFirstVideo,
+    useSquareInLandscapeFirstVideo = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand;
+  var videoConfig = useVideoConfig();
+  var fps = videoConfig.fps,
+    width = videoConfig.width,
+    height = videoConfig.height,
+    _videoConfig$props = videoConfig.props,
+    compositionProps = _videoConfig$props === void 0 ? {} : _videoConfig$props;
+  var outputOrientation = (compositionProps === null || compositionProps === void 0 ? void 0 : (_compositionProps$out = compositionProps.output) === null || _compositionProps$out === void 0 ? void 0 : _compositionProps$out.orientation) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : (_window$screenplayPro2 = _window$screenplayPro.output) === null || _window$screenplayPro2 === void 0 ? void 0 : _window$screenplayPro2.orientation : undefined);
   var _useTheme = useTheme(),
     primaryColor = _useTheme.primaryColor,
     primaryContrast = _useTheme.primaryContrast,
@@ -257,6 +263,14 @@ export var HandoffNametag = function HandoffNametag(_ref4) {
   var initialsFontSize = Math.max(Math.round(mediaBaseSize * 0.45), 22);
   var contentAlignItems = lineJustifyContent[alignment] === "flex-end" ? "flex-end" : "flex-start";
   var staticContainerTop = containerTop === null || containerTop === void 0 ? void 0 : containerTop[alignment];
+  var baseContainerLeft = containerLeft === null || containerLeft === void 0 ? void 0 : containerLeft[alignment];
+  var shouldShiftFirstLeftInLandscape = Boolean(useSquareInLandscapeFirstVideo) && outputOrientation === "landscape" && alignment === "first-left" && typeof baseContainerLeft === "number";
+  var centerAlignedLeft = (width - textContainerWidth) / 2;
+  var initialLeftOffset = 60;
+  var initialStartLeft = centerAlignedLeft - initialLeftOffset;
+  var holdCenteredFrames = 3.2 * fps;
+  var slideLeftFrames = 0.5 * fps;
+  var containerLeftPosition = shouldShiftFirstLeftInLandscape ? interpolate(frame, [0, holdCenteredFrames, holdCenteredFrames + slideLeftFrames], [initialStartLeft, initialStartLeft, baseContainerLeft], DEFAULT_TIME_INTERPOLATE_OPTIONS) : baseContainerLeft;
   var _getTypewriterState = getTypewriterState({
       frame: frame,
       fps: fps,
@@ -292,7 +306,7 @@ export var HandoffNametag = function HandoffNametag(_ref4) {
     style: {
       position: "absolute",
       top: staticContainerTop,
-      left: containerLeft[alignment],
+      left: containerLeftPosition,
       right: containerRight[alignment],
       bottom: typeof staticContainerTop === "number" ? undefined : containerBottom,
       borderRadius: "10px",

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.202",
-  "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.208",
-    "@remotion/lottie": "4.0.208",
-    "@remotion/motion-blur": "4.0.208",
-    "@remotion/player": "4.0.208",
-    "@remotion/transitions": "4.0.208",
-    "remotion": "4.0.208"
-  },
-  "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.204",
+  "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.208",
+    "@remotion/lottie": "4.0.208",
+    "@remotion/motion-blur": "4.0.208",
+    "@remotion/player": "4.0.208",
+    "@remotion/transitions": "4.0.208",
+    "remotion": "4.0.208"
+  },
+  "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
+  }
+}