> ## 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, Video & Huddle > Reference runtime behavior for recorder, video, and huddle components. This file owns the layer above [`Props`](/ui-customization/reference/props) for the **async-media + live-collaboration** family: the recorder (`VeltRecorderControlPanel`, `VeltRecorderPlayer`, and the `VeltRecorderTool` / `VeltRecorderNotes` siblings), the media surfaces (`VeltVideoPlayer`, `VeltVideoEditor`), and the live surfaces (`VeltHuddle`, `VeltUserInviteTool`). For each component below you get **what every prop does at runtime, its default, and how it combines with the others**, plus the default behaviors you get with no prop at all. For the cross-component default table and prop-interaction matrix that spans the whole SDK, see [`Behaviors`](/ui-customization/reference/behaviors). These components share two recurring mechanics, documented once here: * **Boolean → string attribute conversion.** The React wrappers convert a boolean prop to the string `'true'` / `'false'` **only when the value is literally `true` or `false`** (`[true, false].includes(value) ? (value ? 'true' : 'false') : undefined`); any other value (including `undefined`) leaves the attribute **unset**, so the element keeps its own default. The underlying element setters then `JSON.parse` the string back to a boolean. Net effect: omitting a boolean prop = "use the element/service default", not "false". * **Feature-service backing.** Recorder and huddle boolean props don't hold local state: they flip a process-wide `BehaviorSubject` on a feature service (e.g. `enableRecordingCountdown()` / `disableRecordingCountdown()`). That subject carries the **real default**, and because it is shared, the **last component to set it wins** if you mount two control panels with different values. Those service defaults are the "Default" column below. *** ## Per-prop behavior (exhaustive) The exhaustive per-prop behavior for the async-media + live-collaboration family is organized **per component** below: each `## Velt…` subsection carries that component's full prop table (default + runtime behavior + interactions) and its own `### Default behaviors (no prop needed)` block (sibling tools are folded into their parent's subsection). Every prop in [`Props`](/ui-customization/reference/props) for these components is covered; see [Provable coverage](#provable-coverage). ## VeltRecorderControlPanel The control panel is the **recording UI**: it drives device selection, the countdown, the live recording session, pause/resume, and the post-recording hand-off (preview, editor, transcription). Its layout is chosen by `mode`; every other prop toggles a recorder feature-service flag. | Prop | Default | Behavior | Interactions & gotchas | | ---------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `mode` | `'floating'` | Layout of the panel. `'floating'` renders the expandable floating control panel; `'thread'` renders the inline/thread-attached layout used inside a comment thread. | Enum `RecorderLayoutMode` = `'floating'` \| `'thread'`. Passed straight through to the internal panel; affects positioning and which sub-controls show. Not a boolean: no string-conversion dance. | | `panelId` | (none) | Identifies this panel instance so a `VeltRecorderTool` (and the recorded-data callback) can target it. | Bind a tool to this panel by passing the same `panelId` on both. No validation if omitted: a single unnamed panel still works. | | `onRecordedData` | (no handler) | Fires when a recording **completes**, receiving the `RecordedData` payload (blob + metadata). | Wired as a custom DOM event listener; the callback ref is refreshed on every render so the latest closure is used. No callback → recording still completes, just silently. | | `recordingCountdown` | `true` | Shows the pre-recording countdown before capture starts. | Backed by `recordingCountdownEnabled$` (default **`true`**), so the countdown is **on out of the box**; pass `false` to suppress it. Shared service flag (last setter wins across panels). | | `recordingTranscription` | `true` | Enables speech-to-text transcription of the recording. | Backed by `recordingTranscriptionEnabled$` (default **`true`**) on the recorder-annotation service. Transcription is **on by default**. The player's `summary` uses the transcript; disabling transcription removes the source for the summary. | | `videoEditor` | `false` | Enables the post-recording video editor (trim / zoom / split) for recordings made from this panel. | Backed by `videoEditor$` (default **`false`**). Gate for `autoOpenVideoEditor`, `retakeOnVideoEditor`, and `videoEditorTimelinePreview`: those have no effect unless the editor is enabled. | | `settingsEmbedded` | `false` | Embeds the device/quality settings **inside** the panel instead of a separate modal. | Backed by `settingsEmbedded$` (default **`false`** → settings open as a modal). Pure layout choice. | | `autoOpenVideoEditor` | `false` | Opens the video editor automatically the moment recording stops. | Backed by `autoOpenVideoEditor$` (default **`false`**). Only meaningful when `videoEditor` is on; otherwise there is no editor to open. | | `playVideoInFullScreen` | (unset) | Forces preview playback to expand to full screen. | Backed by `playVideoInFullScreen$` whose default is **`undefined`** (not `false`): i.e. unmanaged, playback stays windowed unless you opt in. | | `retakeOnVideoEditor` | `false` | Adds a **Retake** button in the editor to discard the take and re-record. | Backed by `retakeOnVideoEditor$` (default **`false`**). Only renders when `videoEditor` is on. | | `pictureInPicture` | `false` | Enables a Picture-in-Picture floating window so the user can keep working while recording. | Backed by `pictureInPicture$` on the **PiP service** (default **`false`**), separate from the recorder service. Browser-gated (requires PiP support). | | `maxLength` | (no limit, `null`) | Caps recording duration in **seconds**; capture stops automatically at the limit. | Backed by `maxRecordingLength` (default **`null`** = unlimited). Parsed with `parseInt(value, 10)`; a value ≤ 0 is ignored, leaving it unlimited. | | `videoEditorTimelinePreview` | `false` | Shows thumbnail previews along the editor's timeline scrubber. | Backed by `videoEditorTimelinePreview$` (default **`false`**). Only visible when `videoEditor` is on. | ### Default behaviors (no prop needed) * **Layout:** floating control panel (`mode` defaults to `'floating'`). * **Countdown + transcription on:** the pre-record countdown and speech-to-text transcription are **both enabled by default** (their service subjects default `true`). This is the one place the recorder defaults are "on, opt out" rather than "off, opt in". * **Editor off:** no video editor, no auto-open, no retake, no timeline preview, no PiP: all default `false`. Settings open as a modal (`settingsEmbedded` false). * **No duration cap:** recording continues until the user stops it (`maxRecordingLength` is `null`). * **No completion callback:** with no `onRecordedData`, the recording completes and is stored, but nothing is handed back to your code. *** ## VeltRecorderPlayer The player renders a **finished** recording (the one identified by `recorderId`): preview thumbnail, playback, transcription/summary, optional edit + delete. Several of its booleans share the same recorder feature-service flags as the control panel. | Prop | Default | Behavior | Interactions & gotchas | | ------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `recorderId` | (none) | The recording to display; the player resolves that annotation's media, transcript, and summary. | Effectively required: with no `recorderId` (and no scope) the player renders an empty container and logs that `recorderId` is required. Change it to swap recordings. | | `onDelete` | (no handler) | Fires when the user clicks the player's **delete** control; receives `{ id }` where `id` is the `recorderId`. | Wired as a DOM event listener (ref refreshed each render). The callback owns the actual deletion: without it the delete control fires the event but nothing is removed server-side. | | `showSummary` | `'true'` | **@deprecated alias feeding the summary gate**: kept for back-compat alongside `summary`. | The summary renders only when **both** `showSummary` **and** `summary` resolve truthy (`showSummary?.toLowerCase() === 'true' && summary?.toLowerCase() === 'true'`): an **AND**, not a last-writer alias. Setting `showSummary={false}` hides the summary even if `summary` is true. Prefer `summary`. | | `summary` | `'true'` | Shows the AI-generated recording summary (condensed transcript). | Defaults to `'true'`, so the summary shows out of the box, but only if the recording has a transcript (governed by `recordingTranscription` at record time). Gated by the AND with `showSummary` above. | | `shadowDom` | `true` | Style-isolates the player in shadow DOM. `false` exposes it to selector CSS. | Boolean→string converted by the wrapper. Default **`true`**: set `false` to style with plain CSS classes. | | `videoEditor` | (unset) | Enables the **Edit** affordance on the player. | Stored in a `signal(undefined)` on the player; when unset the player inherits the recorder-service `videoEditor$` state (default `false`). Edit is off unless turned on here or on the panel. | | `playVideoInFullScreen` | (unset) | Auto-fullscreen on play / preview-click. | Same `signal(undefined)` pattern: unmanaged by default, so playback is windowed. | | `retakeOnVideoEditor` | `false` | Adds the **Retake** button in the editor opened from this player. | Backed by the recorder-service `retakeOnVideoEditor$` (default `false`). Only meaningful when the editor (`videoEditor`) is enabled. | | `playbackOnPreviewClick` | `true` | Clicking the preview thumbnail starts playback inline. | Backed by `playbackOnPreviewClick$` (default **`true`**): preview is clickable-to-play out of the box; pass `false` for a static preview. | ### Default behaviors (no prop needed) * **Needs a `recorderId`:** with none, the player is an empty shell and logs that the id is required. * **Summary shown:** both summary gates default `'true'`, so a summary renders: **provided the recording has a transcript** (which requires `recordingTranscription` to have been on at record time). No transcript → nothing to summarize. * **Shadow-DOM isolated** (`shadowDom` true) and **click-to-play preview on** (`playbackOnPreviewClick` true). * **Editor / retake / fullscreen off** unless enabled (the editor follows the shared recorder-service flag, default off). * **Delete control present but inert** until you supply `onDelete`. *** ### VeltRecorderTool & VeltRecorderNotes (siblings) * **`VeltRecorderTool`**: the button that *starts* a recording, bound to a panel via `panelId`. Its `recordingCountdown`, `retakeOnVideoEditor`, `pictureInPicture`, and `maxLength` flip the **same recorder/PiP service flags** documented above (same defaults). `shadowDom` defaults `true`; `darkMode` defaults off (the string `"false"` is treated as off). `variant` picks the named tool wireframe (`...-wireframe---`, falling back to base). `buttonLabel` sets the button text. **`type`** (`RecorderMode`, default **`'video'`**) selects the capture mode: `'audio'` / `'video'` / `'screen'` start that mode directly; `'all'` shows a dropdown of all three; a **comma-separated** string (e.g. `'audio, video'`) is split into a `types` array and rendered as a dropdown limited to those options (internally the type is set to `'all'`). * **`VeltRecorderNotes`**: a notes-oriented recorder surface; its `shadowDom`, `videoEditor`, `recordingCountdown`, `recordingTranscription`, `playVideoInFullScreen`, and `videoEditorTimelinePreview` props behave identically to the control-panel props of the same name (same shared service flags and defaults). *** ## VeltVideoPlayer A collaborative video player for an **arbitrary `src`** (not a Velt recording): playback controls plus an optional timestamped comment tool and an optional cross-collaborator playback sync. Comment markers render on the timeline (`VeltCommentPlayerTimeline`). | Prop | Default | Behavior | Interactions & gotchas | | ------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `src` | (**required**) | The video URL; set directly on the underlying `