Merge branch 'main' into split-issue-83

4 files changed, 239 insertions, 55 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/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx
index 95cfa0a8..f2b3f657 100644
--- a/apps/web/src/components/editor/media-panel.tsx
+++ b/apps/web/src/components/editor/media-panel.tsx
@@ -84,17 +84,20 @@ export function MediaPanel() {
 
   useEffect(() => {
     const filtered = mediaItems.filter((item) => {
-      if (mediaFilter && mediaFilter !== 'all' && item.type !== mediaFilter) {
+      if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
         return false;
       }
-      
-      if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) {
+
+      if (
+        searchQuery &&
+        !item.name.toLowerCase().includes(searchQuery.toLowerCase())
+      ) {
         return false;
       }
-      
+
       return true;
     });
-    
+
     setFilteredMediaItems(filtered);
   }, [mediaItems, mediaFilter, searchQuery]);
 
@@ -209,23 +212,23 @@ export function MediaPanel() {
           {/* Button to add/upload media */}
           <div className="flex gap-2">
             {/* Search and filter controls */}
-              <select
-                value={mediaFilter}
-                onChange={(e) => setMediaFilter(e.target.value)}
-                className="px-2 py-1 text-xs border rounded bg-background"
-              >
-                <option value="all">All</option>
-                <option value="video">Video</option>
-                <option value="audio">Audio</option>
-                <option value="image">Image</option>
-              </select>
-              <input
-                type="text"
-                placeholder="Search media..."
-                className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
+            <select
+              value={mediaFilter}
+              onChange={(e) => setMediaFilter(e.target.value)}
+              className="px-2 py-1 text-xs border rounded bg-background"
+            >
+              <option value="all">All</option>
+              <option value="video">Video</option>
+              <option value="audio">Audio</option>
+              <option value="image">Image</option>
+            </select>
+            <input
+              type="text"
+              placeholder="Search media..."
+              className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
 
             {/* Add media button */}
             <Button
@@ -233,21 +236,26 @@ export function MediaPanel() {
               size="sm"
               onClick={handleFileSelect}
               disabled={isProcessing}
-              className="flex-none min-w-[80px] whitespace-nowrap"
+              className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
             >
               {isProcessing ? (
                 <>
-                  <Upload className="h-4 w-4 mr-2 animate-spin" />
-                  Processing...
+                  <Upload className="h-4 w-4 animate-spin" />
+                  <span className="hidden md:inline ml-2">Processing...</span>
                 </>
               ) : (
                 <>
                   <Plus className="h-4 w-4" />
-                  Add
+                  <span
+                    className="hidden sm:inline ml-2"
+                    aria-label="Add file"
+                  >
+                    Add
+                  </span>
                 </>
               )}
             </Button>
-            </div>
+          </div>
         </div>
 
         <div className="flex-1 overflow-y-auto p-2">
@@ -276,7 +284,15 @@ export function MediaPanel() {
                     <AspectRatio ratio={item.aspectRatio}>
                       {renderPreview(item)}
                     </AspectRatio>
-                    <span className="text-xs truncate px-1">{item.name}</span>
+                    <span
+                      className="text-xs truncate px-1 max-w-full"
+                      aria-label={item.name}
+                      title={item.name}
+                    >
+                      {item.name.length > 8
+                        ? `${item.name.slice(0, 4)}...${item.name.slice(-3)}`
+                        : item.name}
+                    </span>
                   </Button>
 
                   {/* Show remove button on hover */}
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 624a549e..33bfe688 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -5,16 +5,17 @@ import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";

 import { VideoPlayer } from "@/components/ui/video-player";

 import { Button } from "@/components/ui/button";

-import { Play, Pause } from "lucide-react";

+import { Play, Pause, Volume2, VolumeX } from "lucide-react";

 import { useState, useRef } from "react";

 

 // Debug flag - set to false to hide active clips info

-const SHOW_DEBUG_INFO = process.env.NODE_ENV === 'development';

+const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";

 

 export function PreviewPanel() {

   const { tracks } = useTimelineStore();

   const { mediaItems } = useMediaStore();

-  const { isPlaying, toggle, currentTime } = usePlaybackStore();

+  const { isPlaying, toggle, currentTime, muted, toggleMute, volume } =

+    usePlaybackStore();

   const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });

   const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);

   const previewRef = useRef<HTMLDivElement>(null);

@@ -30,12 +31,14 @@ export function PreviewPanel() {
     tracks.forEach((track) => {

       track.clips.forEach((clip) => {

         const clipStart = clip.startTime;

-        const clipEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

+        const clipEnd =

+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

 

         if (currentTime >= clipStart && currentTime < clipEnd) {

-          const mediaItem = clip.mediaId === "test"

-            ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }

-            : mediaItems.find((item) => item.id === clip.mediaId);

+          const mediaItem =

+            clip.mediaId === "test"

+              ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }

+              : mediaItems.find((item) => item.id === clip.mediaId);

 

           if (mediaItem || clip.mediaId === "test") {

             activeClips.push({ clip, track, mediaItem });

@@ -134,13 +137,19 @@ export function PreviewPanel() {
         <select

           value={`${canvasSize.width}x${canvasSize.height}`}

           onChange={(e) => {

-            const preset = canvasPresets.find(p => `${p.width}x${p.height}` === e.target.value);

-            if (preset) setCanvasSize({ width: preset.width, height: preset.height });

+            const preset = canvasPresets.find(

+              (p) => `${p.width}x${p.height}` === e.target.value

+            );

+            if (preset)

+              setCanvasSize({ width: preset.width, height: preset.height });

           }}

           className="bg-background border rounded px-2 py-1 text-xs"

         >

-          {canvasPresets.map(preset => (

-            <option key={preset.name} value={`${preset.width}x${preset.height}`}>

+          {canvasPresets.map((preset) => (

+            <option

+              key={preset.name}

+              value={`${preset.width}x${preset.height}`}

+            >

               {preset.name} ({preset.width}×{preset.height})

             </option>

           ))}

@@ -154,12 +163,30 @@ export function PreviewPanel() {
             onClick={() => setShowDebug(!showDebug)}

             className="text-xs"

           >

-            Debug {showDebug ? 'ON' : 'OFF'}

+            Debug {showDebug ? "ON" : "OFF"}

           </Button>

         )}

 

-        <Button variant="outline" size="sm" onClick={toggle} className="ml-auto">

-          {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}

+        <Button

+          variant="outline"

+          size="sm"

+          onClick={toggleMute}

+          className="ml-auto"

+        >

+          {muted || volume === 0 ? (

+            <VolumeX className="h-3 w-3 mr-1" />

+          ) : (

+            <Volume2 className="h-3 w-3 mr-1" />

+          )}

+          {muted || volume === 0 ? "Unmute" : "Mute"}

+        </Button>

+

+        <Button variant="outline" size="sm" onClick={toggle}>

+          {isPlaying ? (

+            <Pause className="h-3 w-3 mr-1" />

+          ) : (

+            <Play className="h-3 w-3 mr-1" />

+          )}

           {isPlaying ? "Pause" : "Play"}

         </Button>

       </div>

@@ -177,7 +204,9 @@ export function PreviewPanel() {
         >

           {activeClips.length === 0 ? (

             <div className="absolute inset-0 flex items-center justify-center text-white/50">

-              {tracks.length === 0 ? "Drop media to start editing" : "No clips at current time"}

+              {tracks.length === 0

+                ? "Drop media to start editing"

+                : "No clips at current time"}

             </div>

           ) : (

             activeClips.map((clipData, index) => renderClip(clipData, index))

@@ -188,7 +217,9 @@ export function PreviewPanel() {
       {/* Debug Info Panel - Conditionally rendered */}

       {showDebug && (

         <div className="border-t bg-background p-2 flex-shrink-0">

-          <div className="text-xs font-medium mb-1">Debug: Active Clips ({activeClips.length})</div>

+          <div className="text-xs font-medium mb-1">

+            Debug: Active Clips ({activeClips.length})

+          </div>

           <div className="flex gap-2 overflow-x-auto">

             {activeClips.map((clipData, index) => (

               <div

@@ -199,7 +230,9 @@ export function PreviewPanel() {
                   {index + 1}

                 </span>

                 <span>{clipData.clip.name}</span>

-                <span className="text-muted-foreground">({clipData.mediaItem?.type || 'test'})</span>

+                <span className="text-muted-foreground">

+                  ({clipData.mediaItem?.type || "test"})

+                </span>

               </div>

             ))}

             {activeClips.length === 0 && (

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 7d3c85fb..591eac89 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -29,6 +29,7 @@ import {
   SelectTrigger,

   SelectValue,

 } from "../ui/select";

+

 import {

   Tooltip,

   TooltipContent,

@@ -36,6 +37,9 @@ import {
   TooltipTrigger,

 } from "../ui/tooltip";

 

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

+

+

 export function Timeline() {

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

   // You can drag media here to add it to your project.

@@ -566,15 +570,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}>

@@ -950,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>

@@ -1625,7 +1631,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>

     );