@twick/video-editor 0.14.0 → 0.14.3

package/dist/helpers/types.d.ts

@@ -1,50 +1,200 @@
+/**
+ * Represents a media item in the video editor.
+ * Defines the structure for images, videos, and audio files
+ * that can be used in video editing projects.
+ *
+ * @example
+ * ```js
+ * const mediaItem: MediaItem = {
+ *   id: "media-123",
+ *   type: "video",
+ *   url: "https://example.com/video.mp4",
+ *   thumbnail: "https://example.com/thumbnail.jpg",
+ *   metadata: {
+ *     duration: 30,
+ *     width: 1920,
+ *     height: 1080
+ *   }
+ * };
+ * ```
+ */
 export type MediaItem = {
+    /** Unique identifier for the media item */
     id: string;
+    /** Type of media (image, video, or audio) */
     type: 'image' | 'video' | 'audio';
+    /** URL or path to the media file */
     url: string;
+    /** Optional array buffer containing the media data */
     arrayBuffer?: ArrayBuffer;
+    /** Optional thumbnail URL for the media item */
     thumbnail?: string;
+    /** Optional metadata about the media item */
     metadata?: Record<string, any>;
 };
+/**
+ * Pagination options for media library queries.
+ * Used to control the number of items returned and pagination.
+ *
+ * @example
+ * ```js
+ * const pagination: PaginationOptions = {
+ *   page: 1,
+ *   limit: 20
+ * };
+ *
+ * // Fetch first 20 items
+ * const mediaItems = await mediaManager.getMedia(pagination);
+ * ```
+ */
 export type PaginationOptions = {
+    /** Page number (1-based) */
     page: number;
+    /** Number of items per page */
     limit: number;
 };
+/**
+ * Search options for filtering media items.
+ * Defines search criteria for finding specific media content.
+ *
+ * @example
+ * ```js
+ * const searchOptions: SearchOptions = {
+ *   query: "nature",
+ *   type: "image",
+ *   metadata: {
+ *     tags: ["landscape", "outdoor"]
+ *   }
+ * };
+ *
+ * // Search for nature images with specific tags
+ * const results = await mediaManager.searchMedia(searchOptions);
+ * ```
+ */
 export type SearchOptions = {
+    /** Search query string */
     query: string;
+    /** Optional media type filter */
     type?: 'image' | 'video' | 'audio';
+    /** Optional metadata filters */
     metadata?: Record<string, any>;
 };
+/**
+ * Text effect configuration for animated text elements.
+ * Defines how text animations are applied to timeline elements.
+ *
+ * @example
+ * ```js
+ * const textEffect: TextEffect = {
+ *   name: "typewriter",
+ *   delay: 0.5,
+ *   bufferTime: 0.1,
+ *   getSample: (effect) => "Sample text animation"
+ * };
+ *
+ * // Apply text effect to element
+ * textElement.setTextEffect(textEffect);
+ * ```
+ */
 export type TextEffect = {
+    /** Name of the text effect */
     name: string;
+    /** Delay before effect starts (in seconds) */
     delay?: number;
+    /** Buffer time between characters (in seconds) */
     bufferTime?: number;
+    /** Function to get sample text for preview */
     getSample: (textEffect?: TextEffect) => string;
 };
+/**
+ * Animation configuration for timeline elements.
+ * Defines how elements are animated during playback.
+ *
+ * @example
+ * ```js
+ * const animation: Animation = {
+ *   name: "fade",
+ *   interval: 0.5,
+ *   animate: "enter",
+ *   mode: "in",
+ *   direction: "center",
+ *   options: {
+ *     animate: ["enter", "exit"],
+ *     direction: ["up", "down", "left", "right"],
+ *     mode: ["in", "out"]
+ *   },
+ *   getSample: (anim) => "Sample animation preview"
+ * };
+ *
+ * // Apply animation to element
+ * element.setAnimation(animation);
+ * ```
+ */
 export type Animation = {
+    /** Name of the animation */
     name: string;
+    /** Interval between animation cycles (in seconds) */
     interval?: number;
+    /** When to apply the animation */
     animate?: "enter" | "exit" | "both";
+    /** Animation mode (in/out) */
     mode?: "in" | "out";
+    /** Direction of the animation */
     direction?: "up" | "down" | "left" | "right" | "center";
+    /** Available options for the animation */
     options?: {
+        /** Available animation types */
         animate?: string[];
+        /** Available directions */
         direction?: string[];
+        /** Available modes */
         mode?: string[];
     };
+    /** Function to get sample preview */
     getSample: (animation?: Animation) => string;
 };
+/**
+ * Color scheme for different element types in the timeline.
+ * Provides consistent visual distinction between various timeline elements.
+ * Each property represents the default color for a specific element type.
+ *
+ * @example
+ * ```js
+ * const colors: ElementColors = {
+ *   video: "#4B2E83",
+ *   text: "#375A7F",
+ *   image: "#805A38",
+ *   audio: "#3C665B",
+ *   // ... other element colors
+ * };
+ *
+ * // Apply color to element
+ * element.style.backgroundColor = colors[element.type];
+ * ```
+ */
 export interface ElementColors {
+    /** Fragment element color */
     fragment: string;
+    /** Video element color */
     video: string;
+    /** Caption element color */
     caption: string;
+    /** Image element color */
     image: string;
+    /** Audio element color */
     audio: string;
+    /** Text element color */
     text: string;
+    /** Generic element color */
     element: string;
+    /** Rectangle element color */
     rect: string;
+    /** Frame effect color */
     frameEffect: string;
+    /** Filters color */
     filters: string;
+    /** Transition color */
     transition: string;
+    /** Animation color */
     animation: string;
 }

package/dist/hooks/use-player-control.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Custom hook to manage player control state and playback.
+ * Handles play/pause toggling and synchronization with timeline context
+ * for video editor playback control.
+ *
+ * @returns Object containing player control functions
+ *
+ * @example
+ * ```js
+ * const { togglePlayback } = usePlayerControl();
+ *
+ * // Toggle between play and pause states
+ * togglePlayback();
+ * ```
+ */
 export declare const usePlayerControl: () => {
     togglePlayback: () => void;
 };

package/dist/hooks/use-player-manager.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Custom hook to manage player state and canvas interactions.
+ * Handles player data updates, canvas operations, and timeline synchronization
+ * for the video editor component.
+ *
+ * @param videoProps - Object containing video dimensions
+ * @returns Object containing player management functions and state
+ *
+ * @example
+ * ```js
+ * const { twickCanvas, projectData, updateCanvas } = usePlayerManager({
+ *   videoProps: { width: 1920, height: 1080 }
+ * });
+ * ```
+ */
 export declare const usePlayerManager: ({ videoProps, }: {
     videoProps: {
         width: number;
@@ -8,4 +23,6 @@ export declare const usePlayerManager: ({ videoProps, }: {
     projectData: any;
     updateCanvas: (seekTime: number) => void;
     buildCanvas: any;
+    onPlayerUpdate: (event: CustomEvent) => void;
+    playerUpdating: boolean;
 };

package/dist/hooks/use-timeline-control.d.ts

@@ -1,5 +1,23 @@
 import { TrackElement, Track } from '@twick/timeline';
 
+/**
+ * Custom hook to manage timeline control operations.
+ * Provides functions for deleting items, splitting elements,
+ * and handling undo/redo operations in the video editor.
+ *
+ * @returns Object containing timeline control functions
+ *
+ * @example
+ * ```js
+ * const { deleteItem, splitElement, handleUndo, handleRedo } = useTimelineControl();
+ *
+ * // Delete a track or element
+ * deleteItem(trackOrElement);
+ *
+ * // Split an element at current time
+ * splitElement(element, 5.5);
+ * ```
+ */
 declare const useTimelineControl: () => {
     splitElement: (element: TrackElement, currentTime: number) => void;
     deleteItem: (item: Track | TrackElement) => void;

package/dist/hooks/use-timeline-manager.d.ts

@@ -1,5 +1,23 @@
 import { TrackElement, Track } from '@twick/timeline';
 
+/**
+ * Custom hook to manage timeline operations and state.
+ * Provides functions for handling element dragging, track reordering,
+ * seeking, and selection changes in the video editor.
+ *
+ * @returns Object containing timeline management functions and state
+ *
+ * @example
+ * ```js
+ * const { timelineData, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
+ *
+ * // Handle element dragging
+ * onElementDrag({ element, dragType: "START", updates: { start: 5, end: 10 } });
+ *
+ * // Seek to specific time
+ * onSeek(15.5);
+ * ```
+ */
 export declare const useTimelineManager: () => {
     timelineData: import('@twick/timeline/dist/services/data.service').TimelineTrackData | null;
     onElementDrag: ({ element, dragType, updates, }: {

package/dist/index.d.ts

@@ -1,16 +1,17 @@
-import { default as VideoEditor } from './components/video-editor';
-import { default as PlayerControls } from './components/controls/player-controls';
+import { default as VideoEditor, VideoEditorProps, VideoEditorConfig } from './components/video-editor';
+import { default as PlayerControls, PlayerControlsProps } from './components/controls/player-controls';
 import { default as TimelineManager } from './components/timeline/timeline-manager';
 import { usePlayerControl } from './hooks/use-player-control';
 import { default as BrowserMediaManager } from './helpers/media-manager/browser-media-manager';
-import { MediaItem, PaginationOptions, SearchOptions, Animation } from './helpers/types';
+import { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors } from './helpers/types';
 import { default as BaseMediaManager } from './helpers/media-manager/base-media-manager';
 import { animationGifs, getAnimationGif } from './assets';
 import { ANIMATIONS } from './helpers/animation-manager';
 import { TEXT_EFFECTS } from './helpers/text-effects-manager';
 import { default as useTimelineControl } from './hooks/use-timeline-control';
 
-export type { MediaItem, PaginationOptions, SearchOptions, Animation };
+export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors };
+export type { PlayerControlsProps, VideoEditorProps, VideoEditorConfig };
 export { ANIMATIONS, TEXT_EFFECTS };
 export { usePlayerControl, BrowserMediaManager, BaseMediaManager, animationGifs, getAnimationGif, PlayerControls, TimelineManager, useTimelineControl };
 export * from './helpers/constants';

package/dist/index.js

@@ -6816,32 +6816,53 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   t(vh$1, "type", "Vibrance"), t(vh$1, "defaults", { vibrance: 0 }), t(vh$1, "uniformLocations", ["uVibrance"]), tt.setClass(vh$1);
   const DEFAULT_TEXT_PROPS = {
+    /** Font family for text elements */
     family: "Poppins",
+    /** Font size in pixels */
     size: 48,
+    /** Text fill color */
     fill: "#FFFFFF",
+    /** Text stroke color */
     stroke: "#000000",
+    /** Stroke line width */
     lineWidth: 0
   };
   const DEFAULT_CAPTION_PROPS = {
+    /** Font family for caption elements */
     family: "Poppins",
+    /** Font size in pixels */
     size: 48,
+    /** Text fill color */
     fill: "#FFFFFF",
+    /** Font weight */
     fontWeight: 600,
+    /** Text stroke color */
     stroke: "#000000",
+    /** Stroke line width */
     lineWidth: 0.2,
+    /** Shadow color */
     shadowColor: "#000000",
+    /** Shadow blur radius */
     shadowBlur: 2,
+    /** Shadow offset [x, y] */
     shadowOffset: [0, 0]
   };
   const CANVAS_OPERATIONS = {
+    /** An item has been selected on the canvas */
     ITEM_SELECTED: "ITEM_SELECTED",
+    /** An item has been updated/modified on the canvas */
     ITEM_UPDATED: "ITEM_UPDATED"
   };
   const ELEMENT_TYPES = {
+    /** Text element type */
     TEXT: "text",
+    /** Caption element type */
     CAPTION: "caption",
+    /** Image element type */
     IMAGE: "image",
+    /** Video element type */
     VIDEO: "video",
+    /** Rectangle element type */
     RECT: "rect"
   };
   const isBrowser$2 = typeof window !== "undefined";
@@ -6944,14 +6965,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return currentFrameEffect;
   };
   const disabledControl = new Hs({
+    /** X position offset */
     x: 0,
+    /** Y position offset */
     y: -0.5,
+    /** Additional Y offset */
     offsetY: 0,
+    /** Cursor style when hovering */
     cursorStyle: "pointer",
+    /** Action handler that does nothing */
     actionHandler: () => {
       return true;
     },
+    /** Name of the action */
     actionName: "scale",
+    /** Render function for the control */
     render: function(ctx, left, top) {
       const size = 0;
       ctx.save();
@@ -6962,12 +6990,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   });
   const rotateControl = new Hs({
+    /** X position offset */
     x: 0,
+    /** Y position offset */
     y: -0.5,
+    /** Additional Y offset for positioning */
     offsetY: -25,
+    /** Cursor style when hovering */
     cursorStyle: "crosshair",
+    /** Action handler with rotation and snapping */
     actionHandler: Ma.rotationWithSnapping,
+    /** Name of the action */
     actionName: "rotate",
+    /** Whether to show connection line */
     withConnection: true
   });
   const getThumbnail = async (videoUrl, seekTime = 0.1, playbackRate = 1) => {
@@ -7779,6 +7814,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => {
     const [projectData, setProjectData] = React.useState(null);
     const { timelineAction, setTimelineAction, setSelectedItem, editor } = timeline.useTimelineContext();
+    const [playerUpdating, setPlayerUpdating] = React.useState(false);
     const handleCanvasReady = (canvas) => {
       console.log("canvas ready", canvas);
     };
@@ -7812,12 +7848,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         cleanAndAdd: true
       });
     };
+    const onPlayerUpdate = (event) => {
+      var _a2;
+      if (((_a2 = event == null ? void 0 : event.detail) == null ? void 0 : _a2.status) === "ready") {
+        setPlayerUpdating(false);
+        setTimelineAction(timeline.TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
+      }
+    };
     React.useEffect(() => {
       var _a2, _b, _c, _d;
       switch (timelineAction.type) {
         case timeline.TIMELINE_ACTION.UPDATE_PLAYER_DATA:
           if (videoProps) {
             if (((_a2 = timelineAction.payload) == null ? void 0 : _a2.forceUpdate) || editor.getLatestVersion() !== ((_b = projectData == null ? void 0 : projectData.input) == null ? void 0 : _b.version)) {
+              setPlayerUpdating(true);
               const _latestProjectData = {
                 input: {
                   properties: videoProps,
@@ -7826,9 +7870,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 }
               };
               setProjectData(_latestProjectData);
+            } else {
+              setTimelineAction(timeline.TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
             }
           }
-          setTimelineAction(timeline.TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
           break;
       }
     }, [timelineAction]);
@@ -7836,7 +7881,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       twickCanvas,
       projectData,
       updateCanvas,
-      buildCanvas
+      buildCanvas,
+      onPlayerUpdate,
+      playerUpdating
     };
   };
   const PlayerManager = ({
@@ -7844,7 +7891,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     canvasMode
   }) => {
     const { changeLog } = timeline.useTimelineContext();
-    const { twickCanvas, projectData, updateCanvas, buildCanvas } = usePlayerManager({ videoProps });
+    const { twickCanvas, projectData, updateCanvas, playerUpdating, onPlayerUpdate, buildCanvas } = usePlayerManager({ videoProps });
     const durationRef = React.useRef(0);
     const {
       playerState,
@@ -7876,7 +7923,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }, [twickCanvas, playerState, seekTime, changeLog]);
     const handleTimeUpdate = (time2) => {
-      if (time2 >= durationRef.current) {
+      if (durationRef.current && time2 >= durationRef.current) {
         setCurrentTime(0);
         setPlayerState(livePlayer.PLAYER_STATE.PAUSED);
       } else {
@@ -7891,6 +7938,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           aspectRatio: `${videoProps.width}/${videoProps.height}`
         },
         children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "twick-editor-loading-overlay",
+              style: {
+                display: playerUpdating ? "flex" : "none"
+              },
+              children: playerUpdating ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-editor-loading-spinner" }) : null
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             livePlayer.LivePlayer,
             {
@@ -7900,6 +7957,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 width: videoProps.width,
                 height: videoProps.height
               },
+              onPlayerUpdate,
               containerStyle: {
                 opacity: canvasMode ? playerState === livePlayer.PLAYER_STATE.PAUSED ? 0 : 1 : 1
               },
@@ -16826,61 +16884,87 @@ This message will only show in development mode. It won't appear in production.
   };
   const MIN_DURATION = 0.1;
   const DRAG_TYPE = {
+    /** Drag operation is starting */
     START: "start",
+    /** Drag operation is in progress */
     MOVE: "move",
+    /** Drag operation has ended */
     END: "end"
   };
   const DEFAULT_TIMELINE_ZOOM = 1.5;
   const DEFAULT_ELEMENT_COLORS = {
+    /** Fragment element color */
     fragment: "#111111",
+    /** Video element color - muted deep violet */
     video: "#4B2E83",
-    // Muted deep violet (primary purple tone)
+    /** Caption element color - faded violet/blue */
     caption: "#5C5470",
-    // Faded violet/blue
+    /** Image element color - earthy brown-orange */
     image: "#805A38",
-    // Earthy brown-orange
+    /** Audio element color - dark muted teal-green */
     audio: "#3C665B",
-    // Dark muted teal-green
+    /** Text element color - dusty steel blue */
     text: "#375A7F",
-    // Dusty steel blue
+    /** Generic element color - muted berry purple */
     element: "#6B3A5B",
-    // Muted berry purple
+    /** Rectangle element color - desaturated deep indigo */
     rect: "#4C3A72",
-    // Desaturated deep indigo
+    /** Frame effect color - dusty rose/maroon */
     frameEffect: "#703C57",
-    // Dusty rose/maroon
+    /** Filters color - muted twilight purple */
     filters: "#5A4C82",
-    // Muted twilight purple
+    /** Transition color - toasted copper */
     transition: "#7A573A",
-    // Toasted copper
+    /** Animation color - slate pine green */
     animation: "#32645C"
-    // Slate pine green
   };
   const AVAILABLE_TEXT_FONTS = {
     // Google Fonts
+    /** Modern sans-serif font */
     RUBIK: "Rubik",
+    /** Clean and readable font */
     MULISH: "Mulish",
+    /** Bold display font */
     LUCKIEST_GUY: "Luckiest Guy",
+    /** Elegant serif font */
     PLAYFAIR_DISPLAY: "Playfair Display",
+    /** Classic sans-serif font */
     ROBOTO: "Roboto",
+    /** Modern geometric font */
     POPPINS: "Poppins",
     // Display and Decorative Fonts
+    /** Comic-style display font */
     BANGERS: "Bangers",
+    /** Handwritten-style font */
     BIRTHSTONE: "Birthstone",
+    /** Elegant script font */
     CORINTHIA: "Corinthia",
+    /** Formal script font */
     IMPERIAL_SCRIPT: "Imperial Script",
+    /** Bold outline font */
     KUMAR_ONE_OUTLINE: "Kumar One Outline",
+    /** Light outline font */
     LONDRI_OUTLINE: "Londrina Outline",
+    /** Casual script font */
     MARCK_SCRIPT: "Marck Script",
+    /** Modern sans-serif font */
     MONTSERRAT: "Montserrat",
+    /** Stylish display font */
     PATTAYA: "Pattaya",
     // CDN Fonts
+    /** Unique display font */
     PERALTA: "Peralta",
+    /** Bold impact font */
     IMPACT: "Impact",
+    /** Handwritten-style font */
     LUMANOSIMO: "Lumanosimo",
+    /** Custom display font */
     KAPAKANA: "Kapakana",
+    /** Handwritten font */
     HANDYRUSH: "HandyRush",
+    /** Decorative font */
     DASHER: "Dasher",
+    /** Signature-style font */
     BRITTANY_SIGNATURE: "Brittany Signature"
   };
   let ELEMENT_COLORS = { ...DEFAULT_ELEMENT_COLORS };
@@ -17392,11 +17476,11 @@ This message will only show in development mode. It won't appear in production.
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
-                className: `control-btn play-pause-btn player-controls-play-pause-btn${playerState === livePlayer.PLAYER_STATE.PLAYING ? " playing" : ""}${playerState === livePlayer.PLAYER_STATE.REFRESHING ? " refreshing" : ""}`,
+                className: `control-btn play-pause-btn player-controls-play-pause-btn${playerState === livePlayer.PLAYER_STATE.PLAYING ? " playing" : ""}${playerState === livePlayer.PLAYER_STATE.REFRESH ? " refreshing" : ""}`,
                 onClick: togglePlayback,
-                title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESHING ? "Refreshing" : "Play",
-                disabled: playerState === livePlayer.PLAYER_STATE.REFRESHING,
-                children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { size: 28, strokeWidth: 2 }) : playerState === livePlayer.PLAYER_STATE.REFRESHING ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { size: 28, strokeWidth: 2, className: "refreshing-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { size: 28, strokeWidth: 2 })
+                title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
+                disabled: playerState === livePlayer.PLAYER_STATE.REFRESH,
+                children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { size: 28, strokeWidth: 2 }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { size: 28, strokeWidth: 2, className: "refreshing-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { size: 28, strokeWidth: 2 })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-display player-controls-time-display", children: [
@@ -17418,14 +17502,14 @@ This message will only show in development mode. It won't appear in production.
         playerStateRef.current = livePlayer.PLAYER_STATE.PAUSED;
         setPlayerState(livePlayer.PLAYER_STATE.PAUSED);
       } else if (playerState === livePlayer.PLAYER_STATE.PAUSED) {
-        playerStateRef.current = livePlayer.PLAYER_STATE.REFRESHING;
-        setPlayerState(livePlayer.PLAYER_STATE.REFRESHING);
+        playerStateRef.current = livePlayer.PLAYER_STATE.REFRESH;
+        setPlayerState(livePlayer.PLAYER_STATE.REFRESH);
         setTimelineAction(timeline.TIMELINE_ACTION.UPDATE_PLAYER_DATA, present);
       }
     };
     React.useEffect(() => {
       if (timelineAction.type === timeline.TIMELINE_ACTION.ON_PLAYER_UPDATED) {
-        if (playerStateRef.current === livePlayer.PLAYER_STATE.REFRESHING) {
+        if (playerStateRef.current === livePlayer.PLAYER_STATE.REFRESH) {
           playerStateRef.current = livePlayer.PLAYER_STATE.PLAYING;
           setPlayerState(livePlayer.PLAYER_STATE.PLAYING);
         }