How szidzse/transcribe-poc-frontend works
This is a browser-based voice recorder: the user opens the recorder, captures microphone audio, previews and plays it, then downloads a named WebM file or discards it. The dialog coordinates UI actions and the recorder hook owns browser media capture, audio analysis, playback, and cleanup; the waveform visualizes analyzer data. README mentions a future AWS conversion/upload workflow, but it is explicitly TODO and not implemented, so it is not modeled as a runtime capability. Edges reflect shown imports and calls; no persistent backend or file store is present.
Main entry points: voice-recorder-dialog.tsx Recorder dialog · useVoiceRecorder.ts Recorder controller · waveform-visualizer.tsx Waveform visualizer · voice-recorder-types.ts Recorder state types
Components 14
Recorder interface
- Application shell
src/App.tsx - Recorder dialog
src/components/voice-recorder-dialog.tsx - Recorder actions
src/components/recorder-actions.tsx - Waveform visualizer
src/components/waveform-visualizer.tsx - Audio preview element
src/components/voice-recorder-dialog.tsx
Audio capture and playback
- Recorder controller
src/hooks/useVoiceRecorder.ts
Shared UI and types
- Recorder state types
src/lib/types/voice-recorder-types.ts - Button primitive
src/components/ui/button.tsx - Dialog primitives
src/components/ui/dialog.tsx - Slider primitive
src/components/ui/slider.tsx - Class utilities
src/lib/utils.ts
Other components
- User
- Browser audio APIs
- Local file download
Connections 20
- User → Application shell: uses
- Application shell → Recorder dialog: renders
src/App.tsx - Recorder dialog → Recorder controller: invokes
src/components/voice-recorder-dialog.tsx - Recorder dialog → Waveform visualizer: renders
src/components/voice-recorder-dialog.tsx - Recorder dialog → Recorder actions: renders
src/components/voice-recorder-dialog.tsx - Recorder actions → Recorder dialog: dispatches actions
src/components/recorder-actions.tsx - Recorder dialog → Local file download: downloads audio
src/components/voice-recorder-dialog.tsx - Recorder controller → Browser audio APIs: captures and plays
src/hooks/useVoiceRecorder.ts - Recorder dialog → Audio preview element: binds audio URL
src/components/voice-recorder-dialog.tsx - Recorder controller → Audio preview element: controls playback
src/hooks/useVoiceRecorder.ts - Recorder controller → Waveform visualizer: provides analyser
src/components/voice-recorder-dialog.tsx - Waveform visualizer → Browser audio APIs: reads frequency data
src/components/waveform-visualizer.tsx - Recorder dialog → Recorder state types: uses state contract
src/components/voice-recorder-dialog.tsx - Recorder actions → Recorder state types: uses state contract
src/components/recorder-actions.tsx - Recorder controller → Recorder state types: implements contract
src/hooks/useVoiceRecorder.ts - Waveform visualizer → Recorder state types: uses state type
src/components/waveform-visualizer.tsx - Dialog primitives → Button primitive: uses
src/components/ui/dialog.tsx - Dialog primitives → Class utilities: merges classes
src/components/ui/dialog.tsx - Button primitive → Class utilities: merges classes
src/components/ui/button.tsx - Slider primitive → Class utilities: merges classes
src/components/ui/slider.tsx