@twick/video-editor 0.14.4 → 0.14.6

package/dist/index.mjs

@@ -6958,8 +6958,8 @@ const convertToCanvasPosition = (x2, y2, canvasMetadata) => {
 };
 const convertToVideoPosition = (x2, y2, canvasMetadata, videoSize) => {
   return {
-    x: x2 / canvasMetadata.scaleX - videoSize.width / 2,
-    y: y2 / canvasMetadata.scaleY - videoSize.height / 2
+    x: Number((x2 / canvasMetadata.scaleX - videoSize.width / 2).toFixed(2)),
+    y: Number((y2 / canvasMetadata.scaleY - videoSize.height / 2).toFixed(2))
   };
 };
 const getCurrentFrameEffect = (item, seekTime) => {
@@ -6994,7 +6994,7 @@ const disabledControl = new Hs({
     ctx.save();
     ctx.translate(left, top);
     ctx.fillStyle = "#red";
-    ctx.fillRect(-0 / 2, -0 / 2, size, size);
+    ctx.fillRect(-size / 2, -size / 2, size, size);
     ctx.restore();
   }
 });
@@ -7837,7 +7837,8 @@ const usePlayerManager = ({
   videoProps
 }) => {
   const [projectData, setProjectData] = useState(null);
-  const { timelineAction, setTimelineAction, setSelectedItem, editor } = useTimelineContext();
+  const { timelineAction, setTimelineAction, setSelectedItem, editor, changeLog } = useTimelineContext();
+  const currentChangeLog = useRef(changeLog);
   const [playerUpdating, setPlayerUpdating] = useState(false);
   const handleCanvasReady = (canvas) => {
     console.log("canvas ready", canvas);
@@ -7851,6 +7852,7 @@ const usePlayerManager = ({
       case CANVAS_OPERATIONS.ITEM_UPDATED:
         if (element) {
           const updatedElement = editor.updateElement(element);
+          currentChangeLog.current = currentChangeLog.current + 1;
           setSelectedItem(updatedElement);
         }
         break;
@@ -7862,6 +7864,9 @@ const usePlayerManager = ({
   });
   const updateCanvas = (seekTime) => {
     var _a2;
+    if (changeLog === currentChangeLog.current) {
+      return;
+    }
     const elements = getCurrentElements(
       seekTime,
       ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) ?? []
@@ -7872,6 +7877,7 @@ const usePlayerManager = ({
       captionProps: {},
       cleanAndAdd: true
     });
+    currentChangeLog.current = changeLog;
   };
   const onPlayerUpdate = (event) => {
     var _a2;
@@ -7913,6 +7919,7 @@ const usePlayerManager = ({
 };
 const PlayerManager = ({
   videoProps,
+  playerProps,
   canvasMode
 }) => {
   const { changeLog } = useTimelineContext();
@@ -7979,6 +7986,7 @@ const PlayerManager = ({
           {
             seekTime,
             projectData,
+            quality: playerProps == null ? void 0 : playerProps.quality,
             videoSize: {
               width: videoProps.width,
               height: videoProps.height
@@ -12548,7 +12556,7 @@ function findSpring({ duration = springDefaults.duration, bounce = springDefault
     envelope = (undampedFreq2) => {
       const a2 = Math.exp(-undampedFreq2 * duration);
       const b2 = (undampedFreq2 - velocity) * duration + 1;
-      return -1e-3 + a2 * b2;
+      return -safeMin + a2 * b2;
     };
     derivative = (undampedFreq2) => {
       const a2 = Math.exp(-undampedFreq2 * duration);
@@ -17416,7 +17424,6 @@ const useTimelineManager = () => {
   };
 };
 const TimelineManager = ({
-  timelineControls,
   trackZoom
 }) => {
   var _a2;
@@ -17424,7 +17431,6 @@ const TimelineManager = ({
   return /* @__PURE__ */ jsx(
     TimelineView,
     {
-      timelineControls,
       tracks: (timelineData == null ? void 0 : timelineData.tracks) ?? [],
       zoomLevel: trackZoom,
       duration: totalDuration,
@@ -17514,67 +17520,67 @@ const PlayerControls = ({
       setZoomLevel(zoomLevel - ZOOM_STEP);
     }
   }, [zoomLevel, setZoomLevel]);
-  return /* @__PURE__ */ jsx("div", { className: `h-16 bg-gray-800 border-t border-gray-700 p-4 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleDelete,
-            disabled: !selectedItem,
-            title: "Delete",
-            className: `btn btn-ghost ${!!selectedItem ? "text-red-400 hover:text-red-300" : "text-gray-500 cursor-not-allowed"}`,
-            children: /* @__PURE__ */ jsx(Trash2, { className: "w-5 h-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleSplit,
-            disabled: !(selectedItem instanceof TrackElement),
-            title: "Split",
-            className: `btn btn-ghost ${selectedItem instanceof TrackElement ? "text-purple-400 hover:text-purple-300" : "text-gray-500 cursor-not-allowed"}`,
-            children: /* @__PURE__ */ jsx(Scissors, { className: "w-5 h-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          UndoRedoControls,
-          {
-            canUndo,
-            canRedo,
-            onUndo,
-            onRedo
-          }
-        )
-      ] }),
+  return /* @__PURE__ */ jsxs("div", { className: `player-controls ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "edit-controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDelete,
+          disabled: !selectedItem,
+          title: "Delete",
+          className: `control-btn delete-btn ${!selectedItem ? "btn-disabled" : ""}`,
+          children: /* @__PURE__ */ jsx(Trash2, { className: "icon-md" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSplit,
+          disabled: !(selectedItem instanceof TrackElement),
+          title: "Split",
+          className: `control-btn split-btn ${!(selectedItem instanceof TrackElement) ? "btn-disabled" : ""}`,
+          children: /* @__PURE__ */ jsx(Scissors, { className: "icon-md" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        UndoRedoControls,
+        {
+          canUndo,
+          canRedo,
+          onUndo,
+          onRedo
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "playback-controls", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: togglePlayback,
           disabled: playerState === PLAYER_STATE.REFRESH,
           title: playerState === PLAYER_STATE.PLAYING ? "Pause" : playerState === PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
-          className: "btn btn-ghost text-white",
-          children: playerState === PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsx(Pause, { className: "w-6 h-6" }) : playerState === PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsx(LoaderCircle, { className: "w-6 h-6 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "w-6 h-6" })
+          className: "control-btn play-pause-btn",
+          children: playerState === PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsx(Pause, { className: "icon-lg" }) : playerState === PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsx(LoaderCircle, { className: "icon-lg animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "icon-lg" })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-300", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: formatTime(currentTime) }),
-        /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "/" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm", children: formatTime(duration) })
+      /* @__PURE__ */ jsxs("div", { className: "time-display", children: [
+        /* @__PURE__ */ jsx("span", { className: "current-time", children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsx("span", { className: "time-separator", children: "/" }),
+        /* @__PURE__ */ jsx("span", { className: "total-time", children: formatTime(duration) })
       ] })
     ] }),
-    setZoomLevel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    setZoomLevel && /* @__PURE__ */ jsxs("div", { className: "twick-track-zoom-container", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: handleZoomOut,
           disabled: zoomLevel <= MIN_ZOOM,
           title: "Zoom Out",
-          className: `btn btn-ghost ${zoomLevel > MIN_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
-          children: /* @__PURE__ */ jsx(ZoomOut, { className: "w-5 h-5" })
+          className: `control-btn ${zoomLevel <= MIN_ZOOM ? "btn-disabled" : ""}`,
+          children: /* @__PURE__ */ jsx(ZoomOut, { className: "icon-md" })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-300 font-medium min-w-[3rem] text-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "zoom-level", children: [
         Math.round(zoomLevel * 100),
         "%"
       ] }),
@@ -17584,12 +17590,12 @@ const PlayerControls = ({
           onClick: handleZoomIn,
           disabled: zoomLevel >= MAX_ZOOM,
           title: "Zoom In",
-          className: `btn btn-ghost ${zoomLevel < MAX_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
-          children: /* @__PURE__ */ jsx(ZoomIn, { className: "w-5 h-5" })
+          className: `control-btn ${zoomLevel >= MAX_ZOOM ? "btn-disabled" : ""}`,
+          children: /* @__PURE__ */ jsx(ZoomIn, { className: "icon-md" })
         }
       )
     ] })
-  ] }) });
+  ] });
 };
 const usePlayerControl = () => {
   const { playerState, setPlayerState } = useLivePlayerContext();
@@ -17675,7 +17681,6 @@ const VideoEditor = ({
   rightPanel,
   bottomPanel,
   editorConfig,
-  playControls,
   defaultPlayControls = true
 }) => {
   const [trackZoom, setTrackZoom] = useState(DEFAULT_TIMELINE_ZOOM);
@@ -17684,6 +17689,7 @@ const VideoEditor = ({
       PlayerManager,
       {
         videoProps: editorConfig.videoProps,
+        playerProps: editorConfig.playerProps,
         canvasMode: editorConfig.canvasMode ?? true
       }
     ),
@@ -17697,7 +17703,7 @@ const VideoEditor = ({
     ] }),
     bottomPanel ? bottomPanel : null,
     /* @__PURE__ */ jsxs("div", { className: "twick-editor-timeline-section", children: [
-      playControls ? playControls : defaultPlayControls ? /* @__PURE__ */ jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
+      defaultPlayControls ? /* @__PURE__ */ jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
       /* @__PURE__ */ jsx(TimelineManager, { trackZoom })
     ] })
   ] });