@twick/video-editor 0.15.19 → 0.15.20

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

@@ -1,7 +1,8 @@
 import { Track, TrackElement, Size } from '@twick/timeline';
 import { ElementColors } from '../../helpers/types';
+import { DropTarget } from '../../utils/drop-target';
 
-declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onAddTrack, onReorder, onItemSelect, onEmptyClick, onMarqueeSelect, onElementDrag, elementColors, selectedIds, playheadPositionPx, isPlayheadActive, onDropOnTimeline, videoResolution, enableDropOnTimeline, }: {
+declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekTrack, onAddTrack, onReorder, onItemSelect, onEmptyClick, onMarqueeSelect, onElementDrag, onElementDrop, elementColors, selectedIds, playheadPositionPx, isPlayheadActive, onDropOnTimeline, videoResolution, enableDropOnTimeline, }: {
     zoomLevel: number;
     duration: number;
     tracks: Track[];
@@ -9,7 +10,7 @@ declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekT
     seekTrack?: React.ReactNode;
     onAddTrack: () => void;
     onReorder: (tracks: Track[]) => void;
-    onElementDrag: ({ element, dragType, updates, }: {
+    onElementDrag: (params: {
         element: TrackElement;
         dragType: string;
         updates: {
@@ -17,6 +18,15 @@ declare function TimelineView({ zoomLevel, selectedItem, duration, tracks, seekT
             end: number;
         };
     }) => void;
+    onElementDrop?: (params: {
+        element: TrackElement;
+        dragType: string;
+        updates: {
+            start: number;
+            end: number;
+        };
+        dropTarget: DropTarget | null;
+    }) => Promise<void>;
     onSeek: (time: number) => void;
     onItemSelect: (item: Track | TrackElement, event: React.MouseEvent) => void;
     onEmptyClick: () => void;

package/dist/components/track/track-base.d.ts

@@ -1,5 +1,6 @@
 import { Track, TrackElement } from '@twick/timeline';
 import { ElementColors } from '../../helpers/types';
+import { TrackElementDragPayload, DropPointer } from './track-element';
 
 interface TrackBaseProps {
     duration: number;
@@ -10,15 +11,9 @@ interface TrackBaseProps {
     selectedIds: Set<string>;
     allowOverlap?: boolean;
     onItemSelection: (element: TrackElement, event: React.MouseEvent) => void;
-    onDrag: ({ element, dragType, updates, }: {
-        element: TrackElement;
-        dragType: string;
-        updates: {
-            start: number;
-            end: number;
-        };
-    }) => void;
+    onDrag: (payload: TrackElementDragPayload, dropPointer?: DropPointer) => void;
+    onDragStateChange?: (isDragging: boolean, element?: TrackElement) => void;
     elementColors?: ElementColors;
 }
-declare const TrackBase: ({ duration, zoom, track, trackWidth, selectedItem, selectedIds, onItemSelection, onDrag, allowOverlap, elementColors, }: TrackBaseProps) => import("react/jsx-runtime").JSX.Element;
+declare const TrackBase: ({ duration, zoom, track, trackWidth, selectedItem, selectedIds, onItemSelection, onDrag, allowOverlap, onDragStateChange, elementColors, }: TrackBaseProps) => import("react/jsx-runtime").JSX.Element;
 export default TrackBase;

package/dist/components/track/track-element.d.ts

@@ -1,6 +1,18 @@
 import { TrackElement } from '@twick/timeline';
 import { ElementColors } from '../../helpers/types';
 
+export interface TrackElementDragPayload {
+    element: TrackElement;
+    dragType: string;
+    updates: {
+        start: number;
+        end: number;
+    };
+}
+export interface DropPointer {
+    clientX: number;
+    clientY: number;
+}
 export declare const TrackElementView: React.FC<{
     element: TrackElement;
     selectedItem: TrackElement | null;
@@ -11,14 +23,8 @@ export declare const TrackElementView: React.FC<{
     prevEnd: number;
     allowOverlap: boolean;
     onSelection: (element: TrackElement, event: React.MouseEvent) => void;
-    onDrag: ({ element, dragType, updates, }: {
-        element: TrackElement;
-        dragType: string;
-        updates: {
-            start: number;
-            end: number;
-        };
-    }) => void;
+    onDrag: (payload: TrackElementDragPayload, dropPointer?: DropPointer) => void;
+    onDragStateChange?: (isDragging: boolean, element?: TrackElement) => void;
     elementColors?: ElementColors;
 }>;
 export default TrackElementView;

package/dist/hooks/use-edge-auto-scroll.d.ts

@@ -0,0 +1,12 @@
+export interface UseEdgeAutoScrollParams {
+    isActive: boolean;
+    getMouseClientX: () => number;
+    scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+    contentWidth: number;
+    edgeThreshold?: number;
+    maxScrollSpeed?: number;
+}
+/**
+ * Auto-scrolls the timeline horizontally when the pointer is near the left/right edge during drag (OpenVideo-style).
+ */
+export declare function useEdgeAutoScroll({ isActive, getMouseClientX, scrollContainerRef, contentWidth, edgeThreshold, maxScrollSpeed, }: UseEdgeAutoScrollParams): void;

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

@@ -30,6 +30,7 @@ export declare const usePlayerManager: ({ videoProps, canvasConfig, }: {
     updateCanvas: (seekTime: number, forceRefresh?: boolean) => void;
     buildCanvas: any;
     resizeCanvas: any;
+    setBackgroundColor: any;
     onPlayerUpdate: (event: CustomEvent) => void;
     playerUpdating: boolean;
     handleDropOnCanvas: (payload: CanvasDropPayload) => Promise<void>;

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

@@ -1,19 +1,30 @@
 import { TrackElement, Track } from '@twick/timeline';
+import { DropTarget } from '../utils/drop-target';
 
+export interface ElementDropParams {
+    element: TrackElement;
+    dragType: string;
+    updates: {
+        start: number;
+        end: number;
+    };
+    dropTarget: DropTarget | null;
+}
 interface TimelineManagerReturn {
     timelineData: {
         tracks: Track[];
         version: number;
     } | null;
     onAddTrack: () => void;
-    onElementDrag: ({ element, dragType, updates, }: {
+    onElementDrag: (params: {
+        element: TrackElement;
+        dragType: string;
         updates: {
             start: number;
             end: number;
         };
-        element: TrackElement;
-        dragType: string;
     }) => void;
+    onElementDrop: (params: ElementDropParams) => Promise<void>;
     onReorder: (reorderedItems: Track[]) => void;
     onSeek: (time: number) => void;
     onSelectionChange: (selectedItem: TrackElement | Track | null) => void;