From 507d3e20425c758529faf4eaef869debb79bab3f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 19 May 2026 19:35:41 -0400
Subject: [PATCH] Fix audio progress bar to use actual audio duration

---
 clio-ui/components/RecordingDetail.jsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/clio-ui/components/RecordingDetail.jsx b/clio-ui/components/RecordingDetail.jsx
index 74a55af..e6cf251 100644
--- a/clio-ui/components/RecordingDetail.jsx
+++ b/clio-ui/components/RecordingDetail.jsx
@@ -7,6 +7,7 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
   const [currentTime, setCurrentTime] = useStateRD(0); // seconds into recording
   const [playing, setPlaying] = useStateRD(false);
   const [speed, setSpeed] = useStateRD(1.0);
+  const [audioDuration, setAudioDuration] = useStateRD(null); // actual audio duration
   const [activeSegId, setActiveSegId] = useStateRD(null);
   const [showAddHighlight, setShowAddHighlight] = useStateRD(false);
   const [newHighlightTag, setNewHighlightTag] = useStateRD('important');
@@ -14,7 +15,8 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
   const audioRef = useRefRD(null);
   const transcriptRef = useRefRD(null);
 
-  const totalSeconds = r.durationMinutes * 60;
+  // Use actual audio duration if available, fallback to metadata
+  const totalSeconds = audioDuration || r.durationMinutes * 60;
   const recHighlights = allHighlights.filter(h => h.recordingId === r.id);
 
   // Audio URL from API
@@ -24,11 +26,12 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
   const lastRecordingId = useRefRD(null);
   const hasAutoPlayed = useRefRD(false);
 
-  // Reset auto-play flag when recording changes
+  // Reset state when recording changes
   useEffectRD(() => {
     if (lastRecordingId.current !== r.id) {
       hasAutoPlayed.current = false;
       lastRecordingId.current = r.id;
+      setAudioDuration(null); // Reset to use metadata until audio loads
     }
   }, [r.id]);
 
@@ -80,17 +83,31 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
     const handleEnded = () => setPlaying(false);
     const handlePlay = () => setPlaying(true);
     const handlePause = () => setPlaying(false);
+    const handleDurationChange = () => {
+      if (audio.duration && isFinite(audio.duration)) {
+        setAudioDuration(audio.duration);
+      }
+    };
 
     audio.addEventListener('timeupdate', handleTimeUpdate);
     audio.addEventListener('ended', handleEnded);
     audio.addEventListener('play', handlePlay);
     audio.addEventListener('pause', handlePause);
+    audio.addEventListener('loadedmetadata', handleDurationChange);
+    audio.addEventListener('durationchange', handleDurationChange);
+
+    // Check if duration is already available
+    if (audio.duration && isFinite(audio.duration)) {
+      setAudioDuration(audio.duration);
+    }
 
     return () => {
       audio.removeEventListener('timeupdate', handleTimeUpdate);
       audio.removeEventListener('ended', handleEnded);
       audio.removeEventListener('play', handlePlay);
       audio.removeEventListener('pause', handlePause);
+      audio.removeEventListener('loadedmetadata', handleDurationChange);
+      audio.removeEventListener('durationchange', handleDurationChange);
     };
   }, []);