diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx index 476fa80..8e2a3b4 100644 --- a/components/tracks/Track.tsx +++ b/components/tracks/Track.tsx @@ -192,6 +192,50 @@ export function Track({ fileInputRef.current?.click(); }; + const [isDragging, setIsDragging] = React.useState(false); + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(true); + }; + + const handleDragLeave = (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(false); + }; + + const handleDrop = async (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(false); + + const file = e.dataTransfer.files?.[0]; + if (!file || !onLoadAudio) return; + + // Check if it's an audio file + if (!file.type.startsWith('audio/')) { + console.warn('Dropped file is not an audio file'); + return; + } + + try { + const arrayBuffer = await file.arrayBuffer(); + const audioContext = new AudioContext(); + const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); + onLoadAudio(audioBuffer); + + // Update track name to filename if it's still default + if (track.name === 'New Track' || track.name === 'Untitled Track') { + const fileName = file.name.replace(/\.[^/.]+$/, ''); + onNameChange(fileName); + } + } catch (error) { + console.error('Failed to load audio file:', error); + } + }; + const trackHeight = track.collapsed ? 48 : track.height; return ( @@ -354,15 +398,21 @@ export function Track({ ) : ( <>
{ e.stopPropagation(); handleLoadAudioClick(); }} + onDragOver={handleDragOver} + onDragLeave={handleDragLeave} + onDrop={handleDrop} > - -

Click to load audio file

-

or drag & drop (coming soon)

+ +

{isDragging ? 'Drop audio file here' : 'Click to load audio file'}

+

or drag & drop