Player full fonctionnel !

frontend/components/AudioPlayer.tsx

@@ -49,19 +49,30 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
     if (!audio) return
 
     const updateTime = () => setCurrentTime(audio.currentTime)
-    const updateDuration = () => setDuration(audio.duration)
+    const updateDuration = () => {
+      if (audio.duration && isFinite(audio.duration)) {
+        setDuration(audio.duration)
+      }
+    }
     const handleEnded = () => setIsPlaying(false)
 
     audio.addEventListener("timeupdate", updateTime)
     audio.addEventListener("loadedmetadata", updateDuration)
+    audio.addEventListener("durationchange", updateDuration)
     audio.addEventListener("ended", handleEnded)
 
+    // Initialize duration if already loaded
+    if (audio.duration && isFinite(audio.duration)) {
+      setDuration(audio.duration)
+    }
+
     return () => {
       audio.removeEventListener("timeupdate", updateTime)
       audio.removeEventListener("loadedmetadata", updateDuration)
+      audio.removeEventListener("durationchange", updateDuration)
       audio.removeEventListener("ended", handleEnded)
     }
-  }, [])
+  }, [track?.id])
 
   const loadWaveform = async (trackId: string) => {
     setIsLoadingWaveform(true)
@@ -195,24 +206,26 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
               </div>
             ) : waveformPeaks.length > 0 ? (
               <div className="flex items-center h-full w-full gap-[1px] px-1">
-                {waveformPeaks.map((peak: number, index: number) => {
+                {waveformPeaks
-                  const isPlayed = (index / waveformPeaks.length) * 100 <= progress
+                  .filter((_: number, index: number) => index % 4 === 0) // Take every 4th peak to reduce from 800 to 200
+                  .map((peak: number, index: number) => {
+                    const originalIndex = index * 4
+                    const isPlayed = (originalIndex / waveformPeaks.length) * 100 <= progress
                     return (
                       <div
                         key={index}
-                      className="flex items-center justify-center"
+                        className="flex-1 flex items-center justify-center"
                         style={{
-                        width: "2px",
+                          minWidth: "1px",
+                          maxWidth: "4px",
                           height: "100%",
-                        flexShrink: 0
                         }}
                       >
                         <div
-                        className={`rounded-sm transition-colors ${
+                          className={`w-full rounded-sm transition-colors ${
                             isPlayed ? "bg-orange-500" : "bg-gray-400"
                           }`}
                           style={{
-                          width: "2px",
                             height: `${Math.max(peak * 70, 4)}%`,
                           }}
                         />