VoiceRecorder
The voice step of consent, visual part only (Figma "Voice Recorder" 191:1857, v2): the phrase first, then Ready (record on tap, listen, an accommodation path), Countdown 3-2-1, Reading (live prompter, "Gravando" with the time, "Terminei de ler") and Recorded (Audio Player, "Continuar", "Gravar de novo").
The state word is announced in a polite live region. Microphone and recording logic stay in the app's hooks.
<VoiceRecorder state="ready" phrase={phrase} labels={labels} onStart={record} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Voice Recorder
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Ready | Countdown | Reading | Recorded |
|---|---|---|---|
Eu, Lia, concordo que a Superdinda proteja meu WhatsApp. Mariana não lê minhas conversas: só recebe um aviso, com o trecho e quem mandou, se houver perigo. Posso pedir pra parar quando quiser. | Eu, Lia, concordo que a Superdinda proteja meu WhatsApp. Mariana não lê minhas conversas: só recebe um aviso, com o trecho e quem mandou, se houver perigo. Posso pedir pra parar quando quiser. 3 Comece a ler quando aparecer “Gravando”. | Eu, Lia, concordo que a Superdinda proteja meu WhatsApp. Mariana não lê minhas conversas: só recebe um aviso, com o trecho e quem mandou, se houver perigo. Posso pedir pra parar quando quiser. Gravando0:07 | Eu, Lia, concordo que a Superdinda proteja meu WhatsApp. Mariana não lê minhas conversas: só recebe um aviso, com o trecho e quem mandou, se houver perigo. Posso pedir pra parar quando quiser. 0:12 |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| state? | "countdown" | "reading" | "ready" | "recorded" | "ready" | Figma State. The app's recorder hook drives it; the mic never starts by itself, only on "Começar a gravar". |
| phrase | string | — | The exact consent phrase, shown first in every state. |
| currentWordIndex? | number | 0 | Reading: the word being read (live prompter). |
| count? | number | 3 | Countdown: the number on screen (3, 2, 1). |
| elapsed? | string | "0:00" | Reading: elapsed time as text ("0:07"). |
| duration? | string | "0:00" | Recorded: length of the take ("0:12"). |
| labels | VoiceRecorderLabels | — | |
| onStart? | (() => void) | — | |
| onListen? | (() => void) | — | |
| onAccommodation? | (() => void) | — | |
| onStop? | (() => void) | — | |
| onContinue? | (() => void) | — | |
| onRetry? | (() => void) | — | |
| onPlayingChange? | ((playing: boolean) => void) | — | Recorded: play/pause of the take (wire to the app's audio element). |
| className? | string | — |