> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Recorder & Transcription

> Customize Velt recorder, playback, video, and transcription surfaces with supported options.

Async audio/video/screen recording: a record tool, a control panel (while recording), a player (playback), plus subtitles & a transcript panel. **The deepest wireframe surface in the SDK** (a very large slot tree). All four layers apply, but the wireframe variables are **flat-config** (`{componentConfig.<x>}`).

## Components

|                            | Primitive                            | Wireframe                                                                                                         |
| -------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| Record button              | `VeltRecorderTool`                   | `VeltRecorderAllToolWireframe`, `VeltRecorderAllToolMenuWireframe`, `VeltRecorderAudio/Video/ScreenToolWireframe` |
| Control panel (recording)  | `VeltRecorderControlPanel`           | `VeltRecorderControlPanelWireframe`                                                                               |
| Player (playback)          | `VeltRecorderPlayer`                 | `VeltRecorderPlayerWireframe`, `VeltRecorderPlayerExpandedWireframe`                                              |
| Preview / settings dialogs | None                                 | `VeltRecordingPreviewStepsDialogWireframe`, `VeltMediaSourceSettingsWireframe`                                    |
| Subtitles / transcript     | `VeltSubtitles`, `VeltTranscription` | `VeltSubtitlesWireframe`, `VeltTranscriptionWireframe`                                                            |

> **There is no `VeltRecorderAudioTool` / `…VideoTool` / `…ScreenTool` primitive.** You pick the recording type with `VeltRecorderTool`'s **`type` prop** (`'audio' | 'video' | 'screen' | 'all'`); the per-type tools exist only as wireframe slots.

## Config props

Do this first.

| Component                                  | Props                                                                                                                                                                                                          |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Record tool (`VeltRecorderTool`)           | `type` (audio/video/screen/all), `buttonLabel`, `recordingCountdown`, `darkMode`, `shadowDom`, `variant`, `maxLength`, `pictureInPicture`                                                                      |
| Control panel (`VeltRecorderControlPanel`) | `mode` (`'floating' \| 'thread'`), `recordingTranscription` (enable transcript capture), `videoEditor` / `autoOpenVideoEditor` / `retakeOnVideoEditor`, `settingsEmbedded`, `playVideoInFullScreen`, `panelId` |
| Player (`VeltRecorderPlayer`)              | `recorderId`, `summary` (show AI summary), `videoEditor`, `playbackOnPreviewClick`, `shadowDom`                                                                                                                |
| Subtitles / Transcription                  | `mode` (`'floating' \| 'embed'`; transcription also `'summaryMode'`), `visible`, `transcription`, `timeToRead`, `variant`                                                                                      |

## CSS: stateful classes

(Override with `!important`, R9b.)

| Class                                                                                 | Applied when                                                |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `velt-recorder-all-tool-container--active` / `--disabled`                             | Tool menu open / recording in progress; also `[attr.dark]`  |
| `recorder-panel`, `[class.audio/.video/.screen]`                                      | Control panel, by recording type                            |
| `velt-recorder-saving`, `…floating--container-collapsed`                              | Loading; collapsed floating panel                           |
| `velt-video-player--controls`, `--toggle-button`, `--progress-bar`, `--time`, `.flip` | Expanded player (BEM); hover reveals `--controls-container` |
| `velt-transcription-content-item--selected`                                           | Active transcript segment                                   |
| `velt-transcription-button--disabled`, `velt-transcription-summary-mode`              | Transcription states                                        |
| `velt-subtitles-button--disabled`                                                     | Subtitles button disabled                                   |

## Wireframes: slot trees + tokens

The trees are large (overview only); the major groups:

* **`VeltRecorderControlPanelWireframe`** → `.FloatingMode` / `.ThreadMode`, each with `.Video` / `.Screen` / `.Waveform` / `.Loading` / `.Paused` and an **ActionBar** (`.Clear`, `.Stop`, `.Time`, `.Toggle`→`.Play`/`.Pause`, `.TypeIcon` \[prop `type`], `.Waveform`, `.Pip`).
* **`VeltRecorderPlayerWireframe`** → `.AudioContainer` / `.VideoContainer`, each with toggle/time/seek/subtitles/transcription/copy-link/delete/avatar/name; video adds `.Timeline`→`.SeekBar`, `.FullScreenButton`, `.EditButton`.
* **`VeltRecorderPlayerExpandedWireframe`** → `.Controls` (`.ToggleButton`, `.ProgressBar`, `.Time`/`.CurrentTime`/`.TotalTime`, `.VolumeButton`, `.SettingsButton`, `.SubtitleButton`→`.Icon`/`.Tooltip`, `.TranscriptionButton`, `.DeleteButton`) + `.Panel` / `.Subtitles` / `.Transcription` / `.MinimizeButton` / `.CopyLink`.
* **`VeltRecordingPreviewStepsDialogWireframe`** → `.Video` / `.Audio`, each with `.MicButton`→`.On`/`.Off`, `.CameraButton`, `.StartRecording`, `.Timer`→`.Countdown`/`.Cancel`, `.Settings`, `.Waveform`.
* **`VeltMediaSourceSettingsWireframe`** → `.Audio` / `.Video` → `.ToggleIcon`, `.SelectedLabel`, `.Options`→`.Item`→`.Icon`/`.Label`.
* **`VeltTranscriptionWireframe`** → `.EmbedMode`(→`.Panel`) / `.FloatingMode`(→`.Button`/`.Tooltip`/`.Panel`); panel → `.CloseButton`, `.CopyLink`, `.Summary`→`.ExpandToggle`(`.On`/`.Off`)/`.Text`, `.Content`→`.Item`→`.Time`/`.Text`.
* **`VeltSubtitlesWireframe`** → `.EmbedMode`(→`.Text`) / `.FloatingMode`(→`.Button`/`.Tooltip`/`.Panel`/`.CloseButton`/`.Text`).

Only a couple of slots take input props: both are `type: 'audio'|'video'|'screen'` (the ActionBar `TypeIcon` and the preview-dialog `BottomPanel.Icon`).

**Key tokens** (flat: use `{componentConfig.<x>}`; shorthand collides for `disabled`/`darkMode`/`variant`/`screenSharingSupported`/`user`/`annotation` → use the full path): `recordingInProgress` 🔑, `mode` (`'floating'|'thread'`), `loading` 🔑, `isRecording` 🔑 (pause/play gate), `recordingType` (`'audio'|'video'|'screen'`), `recordingTranscriptionEnabled` 🔑, `isPlaying` 🔑, `transcriptionVisible` 🔑, `subtitlesVisible` 🔑, `highlightedTextIndex`, `vttFileTextArray`. Player callbacks you can bind to custom buttons: `copyLink`, `deleteRecorderAnnotation`, `onSeekToVideo`/`onSeekToAudio`, `onSubtitlesButtonClick`, `onTranscriptionButtonClick`.

## Headless hooks

| Hook                                         | Returns                                                                    |
| -------------------------------------------- | -------------------------------------------------------------------------- |
| `useRecordings(query?)`                      | Recordings list                                                            |
| `useRecorderUtils()`                         | Imperative recorder element                                                |
| `useRecorderEventCallback(action)`           | Events: `'recordingStarted' \| 'recordingStopped' \| 'recordingDone' \| …` |
| `useGetRecording()` / `useDeleteRecording()` | Via the comment element                                                    |

**Transcription/subtitles have no headless hooks**: they're surfaced through the recorder player config + the Transcription/Subtitles wireframe slots.

## Limitations

* Tool variants (audio/video/screen/all) have **no standalone primitive**: use `VeltRecorderTool type` + wireframe slots.
* **Transcription & subtitles are not independently embeddable** as public `<velt-*>` elements: their real customization surface is the **recorder player's Transcription/Subtitles slots**, and they have **no hooks**.
* Recorder wireframe variables are **flat** (`{componentConfig.<x>}`), and several names collide → use the full path.
* The player's top level uses internal rendering; the wireframe slot decomposition starts one level in.