diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-07-17 19:46:23 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-07-17 19:46:23 +0200 |
| commit | 648f0b8529b9f3bafb3bfd9a84a31bc9ac6623ae (patch) | |
| tree | 00a438ce93f12b3b58f705189142a9385d497e4a /apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx | |
| parent | 0b919d4df84ea523ac9e069bdad5c3b34b7c603d (diff) | |
| download | opencut-648f0b8529b9f3bafb3bfd9a84a31bc9ac6623ae.tar.gz | |
stable timeline
Diffstat (limited to 'apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx | 143 |
1 files changed, 0 insertions, 143 deletions
diff --git a/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx b/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx deleted file mode 100644 index afb83e54..00000000 --- a/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { useRef } from "react"; -import { toast } from "sonner"; -import { useTimelineStore } from "@/stores/timeline-store"; -import { useMediaStore } from "@/stores/media-store"; -import { useProjectStore } from "@/stores/project-store"; -import { processMediaFiles } from "@/lib/media-processing"; -import type { DragData } from "@/types/timeline"; - -export interface TimelineDragHandlersProps { - isDragOver: boolean; - setIsDragOver: (isDragOver: boolean) => void; - isProcessing: boolean; - setIsProcessing: (isProcessing: boolean) => void; - progress: number; - setProgress: (progress: number) => void; -} - -export function useTimelineDragHandlers({ - isDragOver, - setIsDragOver, - isProcessing, - setIsProcessing, - progress, - setProgress, -}: TimelineDragHandlersProps) { - const { mediaItems, addMediaItem } = useMediaStore(); - const { activeProject } = useProjectStore(); - const dragCounterRef = useRef(0); - - const handleDragEnter = (e: React.DragEvent) => { - // When something is dragged over the timeline, show overlay - e.preventDefault(); - // Don't show overlay for timeline elements - they're handled by tracks - if (e.dataTransfer.types.includes("application/x-timeline-element")) { - return; - } - dragCounterRef.current += 1; - if (!isDragOver) { - setIsDragOver(true); - } - }; - - const handleDragOver = (e: React.DragEvent) => { - e.preventDefault(); - }; - - const handleDragLeave = (e: React.DragEvent) => { - e.preventDefault(); - - // Don't update state for timeline elements - they're handled by tracks - if (e.dataTransfer.types.includes("application/x-timeline-element")) { - return; - } - - dragCounterRef.current -= 1; - if (dragCounterRef.current === 0) { - setIsDragOver(false); - } - }; - - const handleDrop = async (e: React.DragEvent) => { - // When media is dropped, add it as a new track/element - e.preventDefault(); - setIsDragOver(false); - dragCounterRef.current = 0; - - // Ignore timeline element drags - they're handled by track-specific handlers - const hasTimelineElement = e.dataTransfer.types.includes( - "application/x-timeline-element" - ); - if (hasTimelineElement) { - return; - } - - const itemData = e.dataTransfer.getData("application/x-media-item"); - if (itemData) { - try { - const dragData: DragData = JSON.parse(itemData); - - if (dragData.type === "text") { - // Always create new text track to avoid overlaps - useTimelineStore.getState().addTextToNewTrack(dragData); - } else { - // Handle media items - const mediaItem = mediaItems.find( - (item: any) => item.id === dragData.id - ); - if (!mediaItem) { - toast.error("Media item not found"); - return; - } - - useTimelineStore.getState().addMediaToNewTrack(mediaItem); - } - } catch (error) { - console.error("Error parsing dropped item data:", error); - toast.error("Failed to add item to timeline"); - } - } else if (e.dataTransfer.files?.length > 0) { - // Handle file drops by creating new tracks - if (!activeProject) { - toast.error("No active project"); - return; - } - - setIsProcessing(true); - setProgress(0); - try { - const processedItems = await processMediaFiles( - e.dataTransfer.files, - (p) => setProgress(p) - ); - for (const processedItem of processedItems) { - await addMediaItem(activeProject.id, processedItem); - const currentMediaItems = useMediaStore.getState().mediaItems; - const addedItem = currentMediaItems.find( - (item) => - item.name === processedItem.name && item.url === processedItem.url - ); - if (addedItem) { - useTimelineStore.getState().addMediaToNewTrack(addedItem); - } - } - } catch (error) { - // Show error if file processing fails - console.error("Error processing external files:", error); - toast.error("Failed to process dropped files"); - } finally { - setIsProcessing(false); - setProgress(0); - } - } - }; - - const dragProps = { - onDragEnter: handleDragEnter, - onDragOver: handleDragOver, - onDragLeave: handleDragLeave, - onDrop: handleDrop, - }; - - return { dragProps }; -} |
