From 1284f8561512d50fc5578f45461dc912800e9a90 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Wed, 18 Feb 2026 19:54:03 +1300
Subject: [PATCH] fix: use audio element duration directly for waveform
 progress rendering

Both GenerateAudioNode and AudioInputNode relied on nodeData.duration
for the waveform progress calculation, but this was often null (never
set by the audio executor). Using audioRef.current.duration directly
avoids the store roundtrip and works as soon as audio metadata loads.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/AudioInputNode.tsx    | 16 ++++++++--------
 src/components/nodes/GenerateAudioNode.tsx | 10 +++++-----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/nodes/AudioInputNode.tsx b/src/components/nodes/AudioInputNode.tsx
index cf8b6612..37e74645 100644
--- a/src/components/nodes/AudioInputNode.tsx
+++ b/src/components/nodes/AudioInputNode.tsx
@@ -52,7 +52,6 @@ export function AudioInputNode({ id, data, selected }: NodeProps<AudioInputNodeT
       const handleTimeUpdate = () => {
         setCurrentTime(audio.currentTime);
       };
-
       audio.addEventListener("ended", handleEnded);
       audio.addEventListener("timeupdate", handleTimeUpdate);
 
@@ -146,9 +145,10 @@ export function AudioInputNode({ id, data, selected }: NodeProps<AudioInputNodeT
     const height = canvas.height;
     if (width === 0 || height === 0) return;
 
-    const progress = nodeData.duration && currentTime > 0 ? currentTime / nodeData.duration : undefined;
+    const duration = audioRef.current?.duration;
+    const progress = duration && isFinite(duration) && currentTime > 0 ? currentTime / duration : undefined;
     drawWaveform(ctx, width, height, waveformData.peaks, progress);
-  }, [isPlaying, currentTime, nodeData.duration, waveformData, drawWaveform]);
+  }, [isPlaying, currentTime, waveformData, drawWaveform]);
 
   // Animation loop for smooth playback position updates
   useEffect(() => {
@@ -256,16 +256,16 @@ export function AudioInputNode({ id, data, selected }: NodeProps<AudioInputNodeT
   }, [isPlaying]);
 
   const handleSeek = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (!audioRef.current || !nodeData.duration || !waveformContainerRef.current) return;
+    if (!audioRef.current || !audioRef.current.duration || !isFinite(audioRef.current.duration) || !waveformContainerRef.current) return;
 
     const rect = waveformContainerRef.current.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const progress = x / rect.width;
-    const newTime = progress * nodeData.duration;
+    const newTime = progress * audioRef.current.duration;
 
     audioRef.current.currentTime = newTime;
     setCurrentTime(newTime);
-  }, [nodeData.duration]);
+  }, []);
 
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
@@ -347,10 +347,10 @@ export function AudioInputNode({ id, data, selected }: NodeProps<AudioInputNodeT
 
             {/* Progress bar / scrubber */}
             <div className="flex-1 h-1 bg-neutral-700 rounded-full overflow-hidden relative">
-              {nodeData.duration && (
+              {audioRef.current?.duration && isFinite(audioRef.current.duration) && (
                 <div
                   className="h-full bg-violet-500 transition-all"
-                  style={{ width: `${(currentTime / nodeData.duration) * 100}%` }}
+                  style={{ width: `${(currentTime / audioRef.current.duration) * 100}%` }}
                 />
               )}
             </div>
diff --git a/src/components/nodes/GenerateAudioNode.tsx b/src/components/nodes/GenerateAudioNode.tsx
index f3bcaef9..0779d3bc 100644
--- a/src/components/nodes/GenerateAudioNode.tsx
+++ b/src/components/nodes/GenerateAudioNode.tsx
@@ -73,7 +73,6 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
     const handleTimeUpdate = () => {
       setCurrentTime(audio.currentTime);
     };
-
     audio.addEventListener("ended", handleEnded);
     audio.addEventListener("timeupdate", handleTimeUpdate);
 
@@ -159,9 +158,10 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
     const height = canvas.height;
     if (width === 0 || height === 0) return;
 
-    const progress = nodeData.duration && currentTime > 0 ? currentTime / nodeData.duration : undefined;
+    const duration = audioRef.current?.duration;
+    const progress = duration && isFinite(duration) && currentTime > 0 ? currentTime / duration : undefined;
     drawWaveform(ctx, width, height, waveformData.peaks, progress);
-  }, [isPlaying, currentTime, nodeData.duration, waveformData, drawWaveform]);
+  }, [isPlaying, currentTime, waveformData, drawWaveform]);
 
   // Animation loop for smooth playback position updates
   useEffect(() => {
@@ -447,10 +447,10 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
 
               {/* Progress bar */}
               <div className="flex-1 h-1 bg-neutral-700 rounded-full overflow-hidden relative">
-                {nodeData.duration && (
+                {audioRef.current?.duration && isFinite(audioRef.current.duration) && (
                   <div
                     className="h-full bg-violet-500 transition-all"
-                    style={{ width: `${(currentTime / nodeData.duration) * 100}%` }}
+                    style={{ width: `${(currentTime / audioRef.current.duration) * 100}%` }}
                   />
                 )}
               </div>