iconocl4st/clio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix audio progress bar to use actual audio duration
All checks were successful
Deploy UI / deploy (push) Successful in 2s
Details

Browse source
This commit is contained in:
Your Name 2026-05-19 19:35:41 -04:00
parent 30999a2cb2
commit 507d3e2042
1 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
clio-ui/components/RecordingDetail.jsx
View file

@ -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);
};
}, []);