From cb2a7484ed3c6797a33acc2d4ab21130f8f00008 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 14:50:22 +0200
Subject: add drag and drop to the timeline

---
 apps/web/src/hooks/use-drag-drop.ts | 52 +++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 apps/web/src/hooks/use-drag-drop.ts

(limited to 'apps/web/src/hooks')

diff --git a/apps/web/src/hooks/use-drag-drop.ts b/apps/web/src/hooks/use-drag-drop.ts
new file mode 100644
index 00000000..6b0c5a9f
--- /dev/null
+++ b/apps/web/src/hooks/use-drag-drop.ts
@@ -0,0 +1,52 @@
+import { useState, useRef } from "react";
+
+interface UseDragDropOptions {
+  onDrop?: (files: FileList) => void;
+}
+
+export function useDragDrop(options: UseDragDropOptions = {}) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current += 1;
+    if (!isDragOver) {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    dragCounterRef.current = 0;
+
+    if (options.onDrop && e.dataTransfer.files) {
+      options.onDrop(e.dataTransfer.files);
+    }
+  };
+
+  const dragProps = {
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+  };
+
+  return {
+    isDragOver,
+    dragProps,
+  };
+}
-- 
cgit v1.3.1