@twick/video-editor 0.14.4 → 0.14.6

package/dist/components/player/player-manager.d.ts

@@ -1,9 +1,12 @@
 
-export declare const PlayerManager: ({ videoProps, canvasMode, }: {
+export declare const PlayerManager: ({ videoProps, playerProps, canvasMode, }: {
     videoProps: {
         width: number;
         height: number;
         backgroundColor?: string;
     };
+    playerProps?: {
+        quality?: number;
+    };
     canvasMode: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/timeline/timeline-manager.d.ts

@@ -1,5 +1,4 @@
-declare const TimelineManager: ({ timelineControls, trackZoom, }: {
-    timelineControls?: React.ReactNode;
+declare const TimelineManager: ({ trackZoom, }: {
     trackZoom: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TimelineManager;

package/dist/components/timeline/timeline-view.d.ts

@@ -1,7 +1,6 @@
 import { Track, TrackElement } from '@twick/timeline';
 
 declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onAddTrack, onReorder, onSelectionChange, onElementDrag, }: {
-    timelineControls?: React.ReactNode;
     zoomLevel: number;
     duration: number;
     tracks: Track[];

package/dist/components/video-editor.d.ts

@@ -22,6 +22,11 @@ export interface VideoEditorConfig {
         /** Background color of the video */
         backgroundColor?: string;
     };
+    playerProps?: {
+        quality?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    };
     /** Whether to use canvas mode for rendering */
     canvasMode?: boolean;
 }
@@ -50,8 +55,6 @@ export interface VideoEditorProps {
     rightPanel?: React.ReactNode;
     /** Custom bottom panel component (e.g., effects library) */
     bottomPanel?: React.ReactNode;
-    /** Custom play controls component */
-    playControls?: React.ReactNode;
     /** Whether to show default play controls if no custom controls provided */
     defaultPlayControls?: boolean;
     /** Editor configuration including video properties and mode settings */

package/dist/index.js

@@ -6958,8 +6958,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     videoProps
   }) => {
     const [projectData, setProjectData] = React.useState(null);
-    const { timelineAction, setTimelineAction, setSelectedItem, editor } = timeline.useTimelineContext();
+    const { timelineAction, setTimelineAction, setSelectedItem, editor, changeLog } = timeline.useTimelineContext();
+    const currentChangeLog = React.useRef(changeLog);
     const [playerUpdating, setPlayerUpdating] = React.useState(false);
     const handleCanvasReady = (canvas) => {
       console.log("canvas ready", canvas);
@@ -7851,6 +7852,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         case CANVAS_OPERATIONS.ITEM_UPDATED:
           if (element) {
             const updatedElement = editor.updateElement(element);
+            currentChangeLog.current = currentChangeLog.current + 1;
             setSelectedItem(updatedElement);
           }
           break;
@@ -7862,6 +7864,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     });
     const updateCanvas = (seekTime) => {
       var _a2;
+      if (changeLog === currentChangeLog.current) {
+        return;
+      }
       const elements = timeline.getCurrentElements(
         seekTime,
         ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) ?? []
@@ -7872,6 +7877,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         captionProps: {},
         cleanAndAdd: true
       });
+      currentChangeLog.current = changeLog;
     };
     const onPlayerUpdate = (event) => {
       var _a2;
@@ -7913,6 +7919,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const PlayerManager = ({
     videoProps,
+    playerProps,
     canvasMode
   }) => {
     const { changeLog } = timeline.useTimelineContext();
@@ -7979,6 +7986,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             {
               seekTime,
               projectData,
+              quality: playerProps == null ? void 0 : playerProps.quality,
               videoSize: {
                 width: videoProps.width,
                 height: videoProps.height
@@ -12548,7 +12556,7 @@ This message will only show in development mode. It won't appear in production.
       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 @@ This message will only show in development mode. It won't appear in production.
     };
   };
   const TimelineManager = ({
-    timelineControls,
     trackZoom
   }) => {
     var _a2;
@@ -17424,7 +17431,6 @@ This message will only show in development mode. It won't appear in production.
     return /* @__PURE__ */ jsxRuntime.jsx(
       TimelineView,
       {
-        timelineControls,
         tracks: (timelineData == null ? void 0 : timelineData.tracks) ?? [],
         zoomLevel: trackZoom,
         duration: totalDuration,
@@ -17514,67 +17520,67 @@ This message will only show in development mode. It won't appear in production.
         setZoomLevel(zoomLevel - ZOOM_STEP);
       }
     }, [zoomLevel, setZoomLevel]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-16 bg-gray-800 border-t border-gray-700 p-4 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Trash2, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleSplit,
-              disabled: !(selectedItem instanceof timeline.TrackElement),
-              title: "Split",
-              className: `btn btn-ghost ${selectedItem instanceof timeline.TrackElement ? "text-purple-400 hover:text-purple-300" : "text-gray-500 cursor-not-allowed"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            UndoRedoControls,
-            {
-              canUndo,
-              canRedo,
-              onUndo,
-              onRedo
-            }
-          )
-        ] }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `player-controls ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "edit-controls", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            disabled: !selectedItem,
+            title: "Delete",
+            className: `control-btn delete-btn ${!selectedItem ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleSplit,
+            disabled: !(selectedItem instanceof timeline.TrackElement),
+            title: "Split",
+            className: `control-btn split-btn ${!(selectedItem instanceof timeline.TrackElement) ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          UndoRedoControls,
+          {
+            canUndo,
+            canRedo,
+            onUndo,
+            onRedo
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "playback-controls", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: togglePlayback,
             disabled: playerState === livePlayer.PLAYER_STATE.REFRESH,
             title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
-            className: "btn btn-ghost text-white",
-            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "w-6 h-6" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "w-6 h-6 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "w-6 h-6" })
+            className: "control-btn play-pause-btn",
+            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "icon-lg" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "icon-lg animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "icon-lg" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: formatTime(currentTime) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "/" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: formatTime(duration) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-display", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "current-time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "time-separator", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "total-time", children: formatTime(duration) })
         ] })
       ] }),
-      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-track-zoom-container", children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ZoomOut, { className: "w-5 h-5" })
+            className: `control-btn ${zoomLevel <= MIN_ZOOM ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { className: "icon-md" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-300 font-medium min-w-[3rem] text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zoom-level", children: [
           Math.round(zoomLevel * 100),
           "%"
         ] }),
@@ -17584,12 +17590,12 @@ This message will only show in development mode. It won't appear in production.
             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__ */ jsxRuntime.jsx(ZoomIn, { className: "w-5 h-5" })
+            className: `control-btn ${zoomLevel >= MAX_ZOOM ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "icon-md" })
           }
         )
       ] })
-    ] }) });
+    ] });
   };
   const usePlayerControl = () => {
     const { playerState, setPlayerState } = livePlayer.useLivePlayerContext();
@@ -17675,7 +17681,6 @@ This message will only show in development mode. It won't appear in production.
     rightPanel,
     bottomPanel,
     editorConfig,
-    playControls,
     defaultPlayControls = true
   }) => {
     const [trackZoom, setTrackZoom] = React.useState(DEFAULT_TIMELINE_ZOOM);
@@ -17684,6 +17689,7 @@ This message will only show in development mode. It won't appear in production.
         PlayerManager,
         {
           videoProps: editorConfig.videoProps,
+          playerProps: editorConfig.playerProps,
           canvasMode: editorConfig.canvasMode ?? true
         }
       ),
@@ -17697,7 +17703,7 @@ This message will only show in development mode. It won't appear in production.
       ] }),
       bottomPanel ? bottomPanel : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-editor-timeline-section", children: [
-        playControls ? playControls : defaultPlayControls ? /* @__PURE__ */ jsxRuntime.jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
+        defaultPlayControls ? /* @__PURE__ */ jsxRuntime.jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(TimelineManager, { trackZoom })
       ] })
     ] });