diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-06-22 14:50:22 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-06-22 14:50:22 +0200 |
| commit | cb2a7484ed3c6797a33acc2d4ab21130f8f00008 (patch) | |
| tree | cf33e28081945558309d1d0ca4b4e222cd81fb9e /apps/web/src/components/editor/timeline.tsx | |
| parent | 6c8d6d99a94cdd1317872efc41028a0706a9d52d (diff) | |
| download | opencut-cb2a7484ed3c6797a33acc2d4ab21130f8f00008.tar.gz | |
add drag and drop to the timeline
Diffstat (limited to 'apps/web/src/components/editor/timeline.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index da44022e..dd312764 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -17,13 +17,33 @@ import { TooltipTrigger,
TooltipProvider,
} from "../ui/tooltip";
+import { DragOverlay } from "../ui/drag-overlay";
import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
+import { useDragDrop } from "@/hooks/use-drag-drop";
export function Timeline() {
const { tracks, addTrack } = useTimelineStore();
+ const { isDragOver, dragProps } = useDragDrop({
+ onDrop: (files) => {
+ // TODO: Handle file drop functionality for timeline
+ console.log("Files dropped on timeline:", files);
+ },
+ });
+
return (
- <div className="h-full flex flex-col">
+ <div
+ className={`h-full flex flex-col transition-colors duration-200 relative ${
+ isDragOver ? "bg-accent/30 border-accent" : ""
+ }`}
+ {...dragProps}
+ >
+ <DragOverlay
+ isVisible={isDragOver}
+ title="Drop files here"
+ description="Add media to timeline tracks"
+ />
+
{/* Toolbar */}
<div className="border-b flex items-center px-2 py-1 gap-1">
<TooltipProvider delayDuration={500}>
|