@twick/video-editor 0.14.4 → 0.14.5

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,
@@ -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 })
       ] })
     ] });