refactor all timeline components

1 files changed, 117 insertions, 118 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
index 60cd7122..afb83e54 100644
--- a/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useRef } from "react";
 import { toast } from "sonner";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
@@ -7,138 +7,137 @@ 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;
+  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,
+  isDragOver,
+  setIsDragOver,
+  isProcessing,
+  setIsProcessing,
+  progress,
+  setProgress,
 }: TimelineDragHandlersProps) {
-	const { mediaItems, addMediaItem } = useMediaStore();
-	const { activeProject } = useProjectStore();
-	const dragCounterRef = useRef(0);
+  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 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 handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
 
-	const handleDragLeave = (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;
-		}
+    // 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);
-		}
-	};
+    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;
+  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;
-		}
+    // 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);
+    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;
-					}
+        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;
-			}
+          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);
-			}
-		}
-	};
+      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,
-	};
+  const dragProps = {
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+  };
 
-	return { dragProps };
+  return { dragProps };
 }