> ## 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.

* **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.) Tools: `velt-recorder-all-tool-container--active` (menu open) / `--disabled` (recording in progress); `[attr.dark]`. Control panel: `recorder-panel`, `[class.audio/.video/.screen]` (by recording type), `velt-recorder-saving` (loading), `…floating--container-collapsed`. Player (expanded, BEM `velt-video-player--*`): `--controls`, `--toggle-button`, `--progress-bar`, `--time`, `.flip` (video), hover reveals `--controls-container`. Transcription: `velt-transcription-content-item--selected` (active segment), `velt-transcription-button--disabled`, `velt-transcription-summary-mode`. Subtitles: `velt-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

* `useRecordings(query?)` → recordings list; `useRecorderUtils()` → imperative recorder element; `useRecorderEventCallback('recordingStarted' | 'recordingStopped' | 'recordingDone' | …)`.
* Via comment element: `useGetRecording()`, `useDeleteRecording()`.
* **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.