opinion
VoiceComposer
A voice-message composer: a record button that changes with state, and an editable transcript.
Voice noteRecord, stop, edit the transcript, send
Ready to record.
00:12
Transcribing as you speak…
Transcribing…
Ready to send
The microphone is blocked.
Error: The microphone is blocked.In context
Crew chatReply to Jonas by voice
Mobile release
What slipped on the mobile release this week?
Two things. Offline sync is in review and the crew-interview notes are late.
Can you draft a note for the crew?
Ready to record.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
state | VoiceComposerState | Yes | — |
draftText | string | undefined | No | — |
onDraftTextChange | ((text: string) => void) | undefined | No | — |
elapsedSeconds | number | undefined | No | — |
onStartRecording | () => void | Yes | — |
onStopRecording | () => void | Yes | — |
onSend | () => void | Yes | — |
onCancel | () => void | Yes | — |
errorMessage | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Presentational
No MediaRecorder inside: the caller records and transcribes, and drives the component with state and draftText. The draft is an editable textarea once ready.
data-rebar-* attributes
data-rebar-component="voice-composer"; parts include main-button, cancel-button, draft-textarea, elapsed-time.
Migrating to Ant Design
Not codemod-covered. Compose AntD's Button and Input.TextArea against the same state machine.