endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore(admin): add minimal network states to Recorder (upload/transcribe)

Browse Source
This commit is contained in:
Ender 2025-10-24 02:52:28 +02:00
parent 1bade47194
commit 1545310945
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/admin/src/features/recorder/Recorder.tsx
View File

@ -11,6 +11,8 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
const [uploadBucket, setUploadBucket] = useState<string | null>(null); const [uploadBucket, setUploadBucket] = useState<string | null>(null);
const [transcript, setTranscript] = useState<string>(''); const [transcript, setTranscript] = useState<string>('');
const [error, setError] = useState<string>(''); const [error, setError] = useState<string>('');
const [isUploading, setIsUploading] = useState(false);
const [isTranscribing, setIsTranscribing] = useState(false);
const requestStream = async (): Promise<MediaStream | null> => { const requestStream = async (): Promise<MediaStream | null> => {
try { try {
@ -63,6 +65,7 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
setUploadKey(null); setUploadKey(null);
setUploadBucket(null); setUploadBucket(null);
setTranscript(''); setTranscript('');
setIsUploading(true);
if (!audioBlob) { if (!audioBlob) {
setError('No audio to upload'); setError('No audio to upload');
return; return;
@ -82,6 +85,8 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
setUploadBucket(data.bucket || null); setUploadBucket(data.bucket || null);
} catch (e: any) { } catch (e: any) {
setError(e?.message || 'Upload failed'); setError(e?.message || 'Upload failed');
} finally {
setIsUploading(false);
} }
}; };
@ -89,6 +94,7 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
try { try {
setError(''); setError('');
setTranscript(''); setTranscript('');
setIsTranscribing(true);
if (!uploadKey) { if (!uploadKey) {
setError('Upload audio before transcribing'); setError('Upload audio before transcribing');
return; return;
@ -108,6 +114,8 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
if (onTranscript) onTranscript(t); if (onTranscript) onTranscript(t);
} catch (e: any) { } catch (e: any) {
setError(e?.message || 'Transcription failed'); setError(e?.message || 'Transcription failed');
} finally {
setIsTranscribing(false);
} }
}; };
@ -121,12 +129,17 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
<Box> <Box>
<Typography variant="h6" sx={{ mb: 1 }}>Audio Recorder</Typography> <Typography variant="h6" sx={{ mb: 1 }}>Audio Recorder</Typography>
<Stack direction="row" spacing={2} sx={{ mb: 2 }}> <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
<Button variant="contained" disabled={recording} onClick={startRecording}>Start</Button> <Button variant="contained" disabled={recording || isUploading || isTranscribing} onClick={startRecording}>Start</Button>
<Button variant="outlined" disabled={!recording} onClick={stopRecording}>Stop</Button> <Button variant="outlined" disabled={!recording || isUploading || isTranscribing} onClick={stopRecording}>Stop</Button>
<Button variant="text" disabled={!audioBlob} onClick={uploadAudio}>Upload</Button> <Button variant="text" disabled={!audioBlob || isUploading || isTranscribing} onClick={uploadAudio}>Upload</Button>
<Button variant="text" disabled={!uploadKey} onClick={transcribe}>Transcribe</Button> <Button variant="text" disabled={!uploadKey || isUploading || isTranscribing} onClick={transcribe}>Transcribe</Button>
</Stack> </Stack>
{error && <Typography color="error" sx={{ mb: 2 }}>{error}</Typography>} {error && <Typography color="error" sx={{ mb: 2 }}>{error}</Typography>}
{(isUploading || isTranscribing) && (
<Typography variant="body2" sx={{ mb: 1 }}>
{isUploading ? 'Uploading…' : 'Transcribing…'}
</Typography>
)}
{audioUrl && ( {audioUrl && (
<Box> <Box>
<audio controls src={audioUrl} /> <audio controls src={audioUrl} />