3 files changed, 143 insertions, 11 deletions

diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx
new file mode 100644
index 00000000..75a5ae06
--- /dev/null
+++ b/apps/web/src/components/editor/audio-waveform.tsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useRef, useState } from 'react';
+import WaveSurfer from 'wavesurfer.js';
+
+interface AudioWaveformProps {
+  audioUrl: string;
+  height?: number;
+  className?: string;
+}
+
+const AudioWaveform: React.FC<AudioWaveformProps> = ({ 
+  audioUrl, 
+  height = 32, 
+  className = '' 
+}) => {
+  const waveformRef = useRef<HTMLDivElement>(null);
+  const wavesurfer = useRef<WaveSurfer | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const initWaveSurfer = async () => {
+      if (!waveformRef.current || !audioUrl) return;
+
+      try {
+        // Clean up any existing instance
+        if (wavesurfer.current) {
+          try {
+            wavesurfer.current.destroy();
+          } catch (e) {
+            // Silently ignore destroy errors
+          }
+          wavesurfer.current = null;
+        }
+
+        wavesurfer.current = WaveSurfer.create({
+          container: waveformRef.current,
+          waveColor: 'rgba(255, 255, 255, 0.6)',
+          progressColor: 'rgba(255, 255, 255, 0.9)',
+          cursorColor: 'transparent',
+          barWidth: 2,
+          barGap: 1,
+          height: height,
+          normalize: true,
+          interact: false,
+        });
+
+        // Event listeners
+        wavesurfer.current.on('ready', () => {
+          if (mounted) {
+            setIsLoading(false);
+            setError(false);
+          }
+        });
+
+        wavesurfer.current.on('error', (err) => {
+          console.error('WaveSurfer error:', err);
+          if (mounted) {
+            setError(true);
+            setIsLoading(false);
+          }
+        });
+
+        await wavesurfer.current.load(audioUrl);
+
+      } catch (err) {
+        console.error('Failed to initialize WaveSurfer:', err);
+        if (mounted) {
+          setError(true);
+          setIsLoading(false);
+        }
+      }
+    };
+
+    initWaveSurfer();
+
+    return () => {
+      mounted = false;
+      if (wavesurfer.current) {
+        try {
+          wavesurfer.current.destroy();
+        } catch (e) {
+          // Silently ignore destroy errors
+        }
+        wavesurfer.current = null;
+      }
+    };
+  }, [audioUrl, height]);
+
+  if (error) {
+    return (
+      <div className={`flex items-center justify-center ${className}`} style={{ height }}>
+        <span className="text-xs text-foreground/60">Audio unavailable</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-xs text-foreground/60">Loading...</span>
+        </div>
+      )}
+      <div 
+        ref={waveformRef} 
+        className={`w-full transition-opacity duration-200 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
+        style={{ height }}
+      />
+    </div>
+  );
+};
+
+export default AudioWaveform;
\ No newline at end of file
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ce0ffa30..c1b8f3e8 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -35,6 +35,7 @@ import {
   SelectTrigger,

   SelectValue,

 } from "../ui/select";

+import AudioWaveform from "./audio-waveform";

 

 export function Timeline() {

   // Timeline shows all tracks (video, audio, effects) and their clips.

@@ -566,15 +567,6 @@ export function Timeline() {
       onMouseLeave={() => setIsInTimeline(false)}

       onWheel={handleWheel}

     >

-      {/* Show overlay when dragging media over the timeline */}

-      {isDragOver && (

-        <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">

-          <div>

-            Drop media here to add to timeline

-          </div>

-        </div>

-      )}

-

       {/* Toolbar */}

       <div className="border-b flex items-center px-2 py-1 gap-1">

         <TooltipProvider delayDuration={500}>

@@ -953,6 +945,17 @@ export function Timeline() {
                     )}

                   </>

                 )}

+                {isDragOver && (

+                  <div

+                    className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground"

+                    style={{

+                      top: `${tracks.length * 60}px`,

+                      height: "60px",

+                    }}

+                  >

+                    <div>Drop media here to add a new track</div>

+                  </div>

+                )}

               </div>

             </div>

           </div>

@@ -1626,7 +1629,21 @@ function TimelineTrackContent({
       );

     }

 

-    // Fallback for audio or videos without thumbnails

+    if (mediaItem.type === "audio") {

+    return (

+      <div className="w-full h-full flex items-center gap-2">

+        <div className="flex-1 min-w-0">

+          <AudioWaveform 

+            audioUrl={mediaItem.url} 

+            height={24}

+            className="w-full"

+          />

+        </div>

+      </div>

+    );

+  }

+

+    // Fallback for videos without thumbnails

     return (

       <span className="text-xs text-foreground/80 truncate">{clip.name}</span>

     );

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index d99a4fc5..74ba9359 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -50,7 +50,7 @@ export function Header() {
       ) : (

         <Link href="https://github.com/OpenCut-app/OpenCut" target="_blank">

           <Button size="sm" className="text-sm ml-4">

-            GitHub

+            GitHub {star}+

             <ArrowRight className="h-4 w-4" />

           </Button>

         </Link>