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

Remove debug logging, keep audio duration fix
Some checks failed
Deploy API / deploy (push) Failing after 1s
Details
Deploy UI / deploy (push) Successful in 1s
Details

Browse source
This commit is contained in:
Your Name 2026-05-19 19:46:00 -04:00
parent 7cef4a6aaa
commit 080b4bdaf1
1 changed files with 3 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,6 @@ const { useState: useStateRD, useEffect: useEffectRD, useRef: useRefRD, useCallb
const API_BASE = ''; const API_BASE = '';
function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHighlights, initialSeekTime, onSeekHandled }) { function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHighlights, initialSeekTime, onSeekHandled }) {
console.log('[RecordingDetail] render, recording id:', r?.id, 'r.durationMinutes:', r?.durationMinutes);
const [currentTime, setCurrentTime] = useStateRD(0); // seconds into recording const [currentTime, setCurrentTime] = useStateRD(0); // seconds into recording
const [playing, setPlaying] = useStateRD(false); const [playing, setPlaying] = useStateRD(false);
const [speed, setSpeed] = useStateRD(1.0); const [speed, setSpeed] = useStateRD(1.0);
@ -19,7 +18,6 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
// Use actual audio duration if available, fallback to metadata // Use actual audio duration if available, fallback to metadata
const metadataDuration = r.durationMinutes * 60; const metadataDuration = r.durationMinutes * 60;
const totalSeconds = audioDuration || metadataDuration || 1; // avoid division by zero const totalSeconds = audioDuration || metadataDuration || 1; // avoid division by zero
console.log('[duration] audioDuration:', audioDuration, 'r.durationMinutes:', r.durationMinutes, 'totalSeconds:', totalSeconds);
const recHighlights = allHighlights.filter(h => h.recordingId === r.id); const recHighlights = allHighlights.filter(h => h.recordingId === r.id);
// Audio URL from API // Audio URL from API
@ -82,27 +80,16 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
const audio = audioRef.current; const audio = audioRef.current;
if (!audio) return; if (!audio) return;
const handleTimeUpdate = () => { const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
console.log('[audio] timeupdate:', audio.currentTime, 'duration:', audio.duration);
setCurrentTime(audio.currentTime);
};
const handleEnded = () => setPlaying(false); const handleEnded = () => setPlaying(false);
const handlePlay = () => { const handlePlay = () => setPlaying(true);
console.log('[audio] play event'); const handlePause = () => setPlaying(false);
setPlaying(true);
};
const handlePause = () => {
console.log('[audio] pause event');
setPlaying(false);
};
const handleDurationChange = () => { const handleDurationChange = () => {
console.log('[audio] durationchange:', audio.duration, 'isFinite:', isFinite(audio.duration));
if (audio.duration && isFinite(audio.duration)) { if (audio.duration && isFinite(audio.duration)) {
setAudioDuration(audio.duration); setAudioDuration(audio.duration);
} }
}; };
const handleLoadedMetadata = () => { const handleLoadedMetadata = () => {
console.log('[audio] loadedmetadata - duration:', audio.duration, 'readyState:', audio.readyState);
if (audio.duration && isFinite(audio.duration)) { if (audio.duration && isFinite(audio.duration)) {
setAudioDuration(audio.duration); setAudioDuration(audio.duration);
} }
@ -116,7 +103,6 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
audio.addEventListener('durationchange', handleDurationChange); audio.addEventListener('durationchange', handleDurationChange);
// Check if duration is already available // Check if duration is already available
console.log('[audio] initial check - duration:', audio.duration, 'readyState:', audio.readyState);
if (audio.duration && isFinite(audio.duration)) { if (audio.duration && isFinite(audio.duration)) {
setAudioDuration(audio.duration); setAudioDuration(audio.duration);
} }
@ -157,10 +143,8 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
const rect = e.currentTarget.getBoundingClientRect(); const rect = e.currentTarget.getBoundingClientRect();
const pct = (e.clientX - rect.left) / rect.width; const pct = (e.clientX - rect.left) / rect.width;
const newTime = pct * totalSeconds; const newTime = pct * totalSeconds;
console.log('[seek] clicked pct:', pct, 'newTime:', newTime, 'totalSeconds:', totalSeconds, 'audioDuration:', audioDuration);
if (audioRef.current) { if (audioRef.current) {
audioRef.current.currentTime = newTime; audioRef.current.currentTime = newTime;
console.log('[seek] set audio.currentTime to:', audioRef.current.currentTime);
} }
setCurrentTime(newTime); setCurrentTime(newTime);
} }
@ -266,7 +250,6 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
}; };
const progressPct = (currentTime / totalSeconds) * 100; const progressPct = (currentTime / totalSeconds) * 100;
console.log('[render] currentTime:', currentTime, 'totalSeconds:', totalSeconds, 'progressPct:', progressPct, 'audioDuration state:', audioDuration);
// Waveform: fake bars // Waveform: fake bars
const waveformBars = 120; const waveformBars = 120;