Merge branch 'staging' of https://github.com/mazeincoding/AppCut into staging

1 files changed, 144 insertions, 0 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
new file mode 100644
index 00000000..60cd7122
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx
@@ -0,0 +1,144 @@
+import { useState, 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 };
+}