Browse Source

fix: add click-to-seek on GenerateAudioNode waveform

The waveform container was missing an onClick handler, preventing
scrubbing. Added handleSeek using audioRef.current.duration directly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 5 months ago
parent
commit
7406bf5a4c
  1. 13
      src/components/nodes/GenerateAudioNode.tsx

13
src/components/nodes/GenerateAudioNode.tsx

@ -193,6 +193,18 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
updateNodeData(id, { outputAudio: null, status: "idle", error: null, duration: null, format: null }); updateNodeData(id, { outputAudio: null, status: "idle", error: null, duration: null, format: null });
}, [id, updateNodeData]); }, [id, updateNodeData]);
const handleSeek = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
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 * audioRef.current.duration;
audioRef.current.currentTime = newTime;
setCurrentTime(newTime);
}, []);
const handlePlayPause = useCallback(() => { const handlePlayPause = useCallback(() => {
if (!audioRef.current) return; if (!audioRef.current) return;
@ -418,6 +430,7 @@ export function GenerateAudioNode({ id, data, selected }: NodeProps<GenerateAudi
<div <div
ref={waveformContainerRef} ref={waveformContainerRef}
className="h-16 bg-neutral-900/50 rounded cursor-pointer relative" className="h-16 bg-neutral-900/50 rounded cursor-pointer relative"
onClick={handleSeek}
> >
<canvas ref={canvasRef} className="w-full h-full" /> <canvas ref={canvasRef} className="w-full h-full" />
</div> </div>

Loading…
Cancel
Save