@twick/video-editor 0.14.0 → 0.14.2

package/README.md

@@ -1,19 +1,19 @@
-# @twick/video-editor
-
-A React component for video editing and timeline management
-
-## Features
-
-- 🎥 Video preview with custom controls
-- ⏱️ Timeline-based editing interface
-- 📊 Multi-track timeline support
-- 🎯 Customizable video dimensions
-- 🔄 Drag-and-drop timeline reordering
-- ⚡ High-performance video rendering
-
-## Requirements
-
-- React 18 or higher
-- Browser environment with HTML5 Video support
-
+# @twick/video-editor
+
+A React component for video editing and timeline management
+
+## Features
+
+- 🎥 Video preview with custom controls
+- ⏱️ Timeline-based editing interface
+- 📊 Multi-track timeline support
+- 🎯 Customizable video dimensions
+- 🔄 Drag-and-drop timeline reordering
+- ⚡ High-performance video rendering
+
+## Requirements
+
+- React 18 or higher
+- Browser environment with HTML5 Video support
+
 ## Installation

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

@@ -8,4 +8,6 @@ export declare const usePlayerManager: ({ videoProps, }: {
     projectData: any;
     updateCanvas: (seekTime: number) => void;
     buildCanvas: any;
+    onPlayerUpdate: (event: CustomEvent) => void;
+    playerUpdating: boolean;
 };

package/dist/index.js

@@ -7779,6 +7779,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 +7813,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 +7835,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 +7846,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       twickCanvas,
       projectData,
       updateCanvas,
-      buildCanvas
+      buildCanvas,
+      onPlayerUpdate,
+      playerUpdating
     };
   };
   const PlayerManager = ({
@@ -7844,7 +7856,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 +7888,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 +7903,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: {
+                opacity: playerUpdating ? 1 : 0
+              },
+              children: playerUpdating ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-editor-loading-spinner" }) : null
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             livePlayer.LivePlayer,
             {
@@ -7900,6 +7922,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
               },
@@ -17392,11 +17415,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 +17441,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);
         }