changed to python312

frontend/src/components/WaveformTimeline.tsx

@@ -10,6 +10,7 @@ export default function WaveformTimeline() {
 
   const videoUrl = useEditorStore((s) => s.videoUrl);
   const videoPath = useEditorStore((s) => s.videoPath);
+  const backendUrl = useEditorStore((s) => s.backendUrl);
   const duration = useEditorStore((s) => s.duration);
   const deletedRanges = useEditorStore((s) => s.deletedRanges);
   const setCurrentTime = useEditorStore((s) => s.setCurrentTime);
@@ -25,18 +26,62 @@ export default function WaveformTimeline() {
 
     const loadAudio = async () => {
       try {
+        const waveformUrl = `${backendUrl}/audio/waveform?path=${encodeURIComponent(videoPath!)}`;
+        console.log('[WaveformTimeline] Loading audio from waveform endpoint:', waveformUrl);
         const ctx = new AudioContext();
         audioContextRef.current = ctx;
 
-        const response = await fetch(videoUrl);
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const response = await fetch(waveformUrl);
+        if (!response.ok) {
+          const body = await response.text().catch(() => '');
+          console.error(
+            `[WaveformTimeline] Fetch failed — HTTP ${response.status} ${response.statusText}`,
+            { url: waveformUrl, body }
+          );
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const contentType = response.headers.get('content-type') ?? 'unknown';
+        const contentLength = response.headers.get('content-length');
+        console.log(
+          `[WaveformTimeline] Fetch OK — content-type: ${contentType}, size: ${contentLength ?? 'unknown'} bytes`
+        );
+
         const arrayBuffer = await response.arrayBuffer();
-        const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+        console.log(`[WaveformTimeline] ArrayBuffer size: ${arrayBuffer.byteLength} bytes`);
+
+        if (arrayBuffer.byteLength === 0) {
+          throw new Error('Server returned an empty file');
+        }
+
+        let audioBuffer: AudioBuffer;
+        try {
+          audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+        } catch (decodeErr) {
+          console.error(
+            '[WaveformTimeline] decodeAudioData failed — browser cannot decode this format.',
+            {
+              contentType,
+              byteLength: arrayBuffer.byteLength,
+              videoPath,
+              error: decodeErr,
+            }
+          );
+          throw new Error(
+            `Browser could not decode audio (${contentType}). ` +
+            `For best compatibility use MP4/AAC or WebM/Opus. Raw error: ${decodeErr}`
+          );
+        }
+
+        console.log(
+          `[WaveformTimeline] Decoded OK — duration: ${audioBuffer.duration.toFixed(2)}s, ` +
+          `channels: ${audioBuffer.numberOfChannels}, sampleRate: ${audioBuffer.sampleRate}Hz`
+        );
         audioBufferRef.current = audioBuffer;
         drawStaticWaveform();
       } catch (err) {
-        console.warn('Could not decode audio for waveform:', err);
-        setAudioError('Waveform unavailable — audio could not be decoded');
+        console.error('[WaveformTimeline] Waveform load failed:', err);
+        setAudioError(`Waveform unavailable — ${err instanceof Error ? err.message : 'audio could not be decoded'}`);
       }
     };
 
@@ -45,7 +90,7 @@ export default function WaveformTimeline() {
     return () => {
       audioContextRef.current?.close();
     };
-  }, [videoUrl, videoPath]);
+  }, [videoUrl, videoPath, backendUrl]);
 
   const drawStaticWaveform = useCallback(() => {
     const canvas = waveCanvasRef.current;