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

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

Browse source
This commit is contained in:
Your Name 2026-05-19 20:54:48 -04:00
parent 1ca5e4a3a8
commit aa5741eafb
8 changed files with 76 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -88,6 +88,7 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
// Handle seeking to initial time (from search results, highlights, etc.)
useEffectRD(() => {
if (initialSeekTime == null) return;
if (!audioBlobUrl) return; // Wait for audio to be loaded
const audio = audioRef.current;
if (!audio) return;
@ -103,7 +104,7 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
audio.addEventListener('loadedmetadata', doSeek, { once: true });
return () => audio.removeEventListener('loadedmetadata', doSeek);
}
}, [initialSeekTime, onSeekHandled]);
}, [initialSeekTime, onSeekHandled, audioBlobUrl]);
// Sync playback state with audio element
useEffectRD(() => {
@ -279,13 +280,10 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
'follow-up': 'var(--amber-dim)', meeting: 'var(--green)', personal: 'var(--text2)', work: 'var(--teal)',
};
const qualityDetails = [
{ label: 'Quality', value: r.quality, cls: `q-${r.quality}` },
{ label: 'Sample Rate', value: `${r.sampleRate / 1000} kHz`, cls: '' },
{ label: 'Bit Depth', value: `${r.bitDepth}-bit`, cls: '' },
{ label: 'Peak', value: `${r.peakDB.toFixed(1)} dB`, cls: r.peakDB > -30 ? 'q-good' : r.peakDB > -45 ? 'q-fair' : 'q-poor' },
{ label: 'Size', value: `${r.fileSizeMB} MB`, cls: '' },
{ label: 'Source', value: r.source, cls: `source-${r.source}` },
const recordingDetails = [
{ label: 'Sample Rate', value: `${r.sampleRate / 1000} kHz` },
{ label: 'Bit Depth', value: `${r.bitDepth}-bit` },
{ label: 'Size', value: `${r.fileSizeMB} MB` },
];
return (
@ -300,10 +298,10 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
</div>
<div style={{ display: 'flex', gap: 10, marginTop: 3, alignItems: 'center' }}>
<span className={`source-pill source-${r.source}`}>{r.source}</span>
{qualityDetails.map(q => (
<span key={q.label} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>
<span style={{ color: 'var(--text3)' }}>{q.label}: </span>
<span className={q.cls} style={{ color: q.cls ? undefined : 'var(--text2)' }}>{q.value}</span>
{recordingDetails.map(d => (
<span key={d.label} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>
<span style={{ color: 'var(--text3)' }}>{d.label}: </span>
<span style={{ color: 'var(--text2)' }}>{d.value}</span>
</span>
))}
</div>