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

bug fix
All checks were successful
Deploy UI / deploy (push) Successful in 1s
Details

Browse source
This commit is contained in:
Your Name 2026-05-19 19:38:01 -04:00
parent 507d3e2042
commit a4c8e94796
1 changed files with 25 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -79,11 +79,27 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
const audio = audioRef.current;
if (!audio) return;
const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
const handleTimeUpdate = () => {
console.log('[audio] timeupdate:', audio.currentTime, 'duration:', audio.duration);
setCurrentTime(audio.currentTime);
};
const handleEnded = () => setPlaying(false);
const handlePlay = () => setPlaying(true);
const handlePause = () => setPlaying(false);
const handlePlay = () => {
console.log('[audio] play event');
setPlaying(true);
};
const handlePause = () => {
console.log('[audio] pause event');
setPlaying(false);
};
const handleDurationChange = () => {
console.log('[audio] durationchange:', audio.duration, 'isFinite:', isFinite(audio.duration));
if (audio.duration && isFinite(audio.duration)) {
setAudioDuration(audio.duration);
}
};
const handleLoadedMetadata = () => {
console.log('[audio] loadedmetadata - duration:', audio.duration, 'readyState:', audio.readyState);
if (audio.duration && isFinite(audio.duration)) {
setAudioDuration(audio.duration);
}
@ -93,10 +109,11 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
audio.addEventListener('ended', handleEnded);
audio.addEventListener('play', handlePlay);
audio.addEventListener('pause', handlePause);
audio.addEventListener('loadedmetadata', handleDurationChange);
audio.addEventListener('loadedmetadata', handleLoadedMetadata);
audio.addEventListener('durationchange', handleDurationChange);
// Check if duration is already available
console.log('[audio] initial check - duration:', audio.duration, 'readyState:', audio.readyState);
if (audio.duration && isFinite(audio.duration)) {
setAudioDuration(audio.duration);
}
@ -106,7 +123,7 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
audio.removeEventListener('ended', handleEnded);
audio.removeEventListener('play', handlePlay);
audio.removeEventListener('pause', handlePause);
audio.removeEventListener('loadedmetadata', handleDurationChange);
audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
audio.removeEventListener('durationchange', handleDurationChange);
};
}, []);
@ -137,8 +154,10 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
const rect = e.currentTarget.getBoundingClientRect();
const pct = (e.clientX - rect.left) / rect.width;
const newTime = pct * totalSeconds;
console.log('[seek] clicked pct:', pct, 'newTime:', newTime, 'totalSeconds:', totalSeconds, 'audioDuration:', audioDuration);
if (audioRef.current) {
audioRef.current.currentTime = newTime;
console.log('[seek] set audio.currentTime to:', audioRef.current.currentTime);
}
setCurrentTime(newTime);
}
@ -244,6 +263,7 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
};
const progressPct = (currentTime / totalSeconds) * 100;
console.log('[render] currentTime:', currentTime, 'totalSeconds:', totalSeconds, 'progressPct:', progressPct, 'audioDuration state:', audioDuration);
// Waveform: fake bars
const waveformBars = 120;