> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Recorder Wireframe Variables

> Template variables exposed by the Recorder wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## Overview

The **Recorder** feature powers audio / video / screen recording inside comments and standalone playback. Variables below are available inside any `<velt-recorder-...-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                                         |
| ------------------------- | --------------------------- | --------------------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="componentConfigSignal.currentTimeValue" />`  |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{componentConfigSignal.recordingInProgress}"`         |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'is-{componentConfigSignal.recordingType}': true"` |

<Note>
  This feature uses the **flat-config** access pattern — every property lives directly on the root of `componentConfigSignal()` (no nested `appState` / `featureState` / `data` / `uiState`). Reach values via `{componentConfigSignal.<name>}`. The shorter `{<name>}` form also works for any field at the root of the recorder's componentConfig **except** for the names listed in the warning below.
</Note>

<Note>
  **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside a Recorder wireframe, prefer the explicit path on the right when reading these values:

  | Conflicting name         | Map points to                                               | Use this for Recorder                          |
  | ------------------------ | ----------------------------------------------------------- | ---------------------------------------------- |
  | `disabled`               | `parentLocalUIState.disabled`                               | `componentConfigSignal.disabled`               |
  | `darkMode`               | `parentLocalUIState.darkMode`                               | `componentConfigSignal.darkMode`               |
  | `variant`                | `parentLocalUIState.variant`                                | `componentConfigSignal.variant`                |
  | `screenSharingSupported` | `componentConfigSignal.featureState.screenSharingSupported` | `componentConfigSignal.screenSharingSupported` |
  | `user`                   | `componentConfigSignal.appState.user`                       | `componentConfigSignal.user`                   |
  | `annotation`             | `componentConfigSignal.data.annotation`                     | `componentConfigSignal.annotation`             |
</Note>

## Component Config — Recorder Button

State on the `<velt-recorder-button>` trigger.

| Variable                                       | Type                                                               | Description                                                                                    | Example                                                                    |
| ---------------------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `componentConfigSignal.buttonLabel`            | `string`                                                           | Custom label text (e.g. `"Record"`).                                                           | `<velt-data field="componentConfigSignal.buttonLabel" />`                  |
| `componentConfigSignal.recordingInProgress`    | `boolean`                                                          | Recording is currently active.                                                                 | `velt-class="'is-recording': {componentConfigSignal.recordingInProgress}"` |
| `componentConfigSignal.types`                  | `RecorderMode[]`                                                   | Recorder modes permitted on this button (subset of `'audio' \| 'video' \| 'screen' \| 'all'`). | `<velt-data field="componentConfigSignal.types.length" />`                 |
| `componentConfigSignal.recorderModes`          | `{ AUDIO: 'audio'; VIDEO: 'video'; SCREEN: 'screen'; ALL: 'all' }` | Constant id map. Useful when comparing to `componentConfigSignal.types`.                       | `<velt-data field="componentConfigSignal.recorderModes.AUDIO" />`          |
| `componentConfigSignal.disabled`               | `boolean`                                                          | Button is disabled.                                                                            | `velt-class="'is-disabled': {componentConfigSignal.disabled}"`             |
| `componentConfigSignal.darkMode`               | `boolean`                                                          | Dark mode is active.                                                                           | `velt-class="'theme-dark': {componentConfigSignal.darkMode}"`              |
| `componentConfigSignal.shadowDom`              | `boolean`                                                          | Shadow-DOM rendering is enabled.                                                               | *Host config — set via element attribute.*                                 |
| `componentConfigSignal.screenSharingSupported` | `boolean`                                                          | Browser supports `getDisplayMedia`.                                                            | `velt-if="{componentConfigSignal.screenSharingSupported}"`                 |
| `componentConfigSignal.recordingCountdown`     | `boolean`                                                          | 3-2-1 countdown overlay is enabled.                                                            | `velt-if="{componentConfigSignal.recordingCountdown}"`                     |
| `componentConfigSignal.variant`                | `string`                                                           | Wireframe variant id.                                                                          | `<velt-data field="componentConfigSignal.variant" />`                      |
| `componentConfigSignal.initRecording`          | `Function`                                                         | Click handler — call `componentConfigSignal.initRecording(type)` from a custom button.         | *Call this from your custom button click.*                                 |

## Component Config — Recorder Pin

State on the `<velt-recorder-pin>` icon shown over a recorder annotation.

| Variable                                             | Type                                                                             | Description                                                                          | Example                                                                               |
| ---------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| `componentConfigSignal.recorderPinAnnotation`        | [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | The annotation this pin represents. Includes `from`, `recorderId`, `recorders`, etc. | `<velt-data field="componentConfigSignal.recorderPinAnnotation.from.name" />`         |
| `componentConfigSignal.recorderPinSelected`          | `boolean`                                                                        | Pin is currently selected.                                                           | `velt-class="'pin-selected': {componentConfigSignal.recorderPinSelected}"`            |
| `componentConfigSignal.multipleRecorderPinsSelected` | `boolean`                                                                        | Multi-select mode is active.                                                         | `velt-class="'multi-selected': {componentConfigSignal.multipleRecorderPinsSelected}"` |
| `componentConfigSignal.dragging`                     | `boolean`                                                                        | Pin is being dragged.                                                                | `velt-class="'dragging': {componentConfigSignal.dragging}"`                           |

## Component Config — Recorder Player (shared)

State shared by `<velt-recorder-player>` and every `recorder-player-*` inner primitive. Each tag receives the same `componentConfigSignal` carrying the active recording's metadata + behaviour callbacks.

| Variable                                              | Type                                                                             | Description                                                      | Example                                                                               |
| ----------------------------------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `componentConfigSignal.recordingTranscriptionEnabled` | `boolean`                                                                        | Transcription overlay is enabled for this recording.             | `velt-class="'transcript-on': {componentConfigSignal.recordingTranscriptionEnabled}"` |
| `componentConfigSignal.recordingType`                 | `'audio'` \| `'video'` \| `'screen'`                                             | Recorder type for this recording.                                | `velt-class="'is-{componentConfigSignal.recordingType}': true"`                       |
| `componentConfigSignal.recorderInitData`              | [`RecorderInitData`](/api-reference/sdk/models/data-models#recorderinitdata)     | Active recording handle.                                         | *Internal — used by playback.*                                                        |
| `componentConfigSignal.attachment`                    | [`Attachment`](/api-reference/sdk/models/data-models#attachment)                 | Saved-attachment record (`url`, etc.).                           | `<velt-data field="componentConfigSignal.attachment.url" />`                          |
| `componentConfigSignal.videoPosterDefaultImage`       | `string`                                                                         | Default poster image used when the video has no first frame yet. | `<velt-data field="componentConfigSignal.videoPosterDefaultImage" />`                 |
| `componentConfigSignal.annotation`                    | [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | Recorder annotation backing this playback.                       | `<velt-data field="componentConfigSignal.annotation.id" />`                           |
| `componentConfigSignal.totalTimeValue`                | `number`                                                                         | Total playback duration in milliseconds.                         | `<velt-data field="componentConfigSignal.totalTimeValue" />`                          |
| `componentConfigSignal.currentTimeValue`              | `number`                                                                         | Current playback position in milliseconds.                       | `<velt-data field="componentConfigSignal.currentTimeValue" />`                        |
| `componentConfigSignal.user`                          | [`User`](/api-reference/sdk/models/data-models#user)                             | Currently identified end-user.                                   | `<velt-data field="componentConfigSignal.user.name" />`                               |
| `componentConfigSignal.dragging`                      | `boolean`                                                                        | Pin / panel is being dragged.                                    | `velt-class="'dragging': {componentConfigSignal.dragging}"`                           |
| `componentConfigSignal.recorderPinSelected`           | `boolean`                                                                        | Pin is currently selected.                                       | `velt-class="'pin-selected': {componentConfigSignal.recorderPinSelected}"`            |
| `componentConfigSignal.sourceFeature`                 | `'comment'` \| `'standalone'` \| ...                                             | Where this player is mounted.                                    | `velt-class="'source-{componentConfigSignal.sourceFeature}': true"`                   |
| `componentConfigSignal.videoContainerHovered`         | `boolean`                                                                        | Video container is hovered.                                      | `velt-class="'hovered': {componentConfigSignal.videoContainerHovered}"`               |
| `componentConfigSignal.mode`                          | `'floating'` \| `'thread'`                                                       | Layout mode.                                                     | `velt-class="'mode-{componentConfigSignal.mode}': true"`                              |
| `componentConfigSignal.variant`                       | `RecorderVariant`                                                                | Wireframe variant id (`'default'` \| ...).                       | `<velt-data field="componentConfigSignal.variant" />`                                 |

### Player behaviour callbacks

The shared player config also exposes \~15 behaviour callbacks you can attach to your own buttons:

| Callback                                                                                                                                                                | Description                       |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `componentConfigSignal.timeUpdate(...)`                                                                                                                                 | Time-update handler.              |
| `componentConfigSignal.toggleVideo(...)`                                                                                                                                | Play / pause toggle.              |
| `componentConfigSignal.onSliderGrab(...)` / `onSliderDrag(...)` / `onSliderRelease(...)`                                                                                | Timeline scrubber handlers.       |
| `componentConfigSignal.onSeekToVideo(seconds)` / `componentConfigSignal.onSeekToAudio(seconds)`                                                                         | Seek to a timestamp.              |
| `componentConfigSignal.onSubtitlesButtonClick(...)` / `onSubtitlesPanelDragged(...)`                                                                                    | Subtitles overlay handlers.       |
| `componentConfigSignal.onTranscriptionButtonClick(...)` / `onTranscriptionPanelDragged(...)` / `onTranscriptionTimestampClick(...)` / `onTranscriptionSummaryCopy(...)` | Transcription overlay handlers.   |
| `componentConfigSignal.toggleAnnotation(...)`                                                                                                                           | Show / hide the annotation badge. |
| `componentConfigSignal.copyLink(...)`                                                                                                                                   | Copy the playback URL.            |
| `componentConfigSignal.deleteRecorderAnnotation(...)`                                                                                                                   | Delete the recording.             |
| `componentConfigSignal.setVideoContainerHovered(boolean)`                                                                                                               | Manual hover toggle.              |

## Type Reference

Types referenced by the variables above:

| Type                                                                             | Description                                                                    |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| [`User`](/api-reference/sdk/models/data-models#user)                             | Identified end-user object.                                                    |
| [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | Recorder annotation — `from`, `recorderId`, `recorders`, etc.                  |
| [`Attachment`](/api-reference/sdk/models/data-models#attachment)                 | Saved attachment record.                                                       |
| [`RecorderInitData`](/api-reference/sdk/models/data-models#recorderinitdata)     | Active-recording handle exposed during playback.                               |
| `RecorderMode`                                                                   | Recorder type discriminator (`'audio'` \| `'video'` \| `'screen'` \| `'all'`). |
| `RecorderVariant`                                                                | Wireframe variant id.                                                          |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `recorder-button` (root)

The record-trigger button.

* **Public element:** `<velt-recorder-button>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.
* **Children:** `recorder-audio-tool`, `recorder-video-tool`, `recorder-screen-tool`, `recorder-all-tool` — one per recorder type.

| Property        | Value                                                                        |
| --------------- | ---------------------------------------------------------------------------- |
| Extra variables | See [Component Config — Recorder Button](#component-config-recorder-button). |
| Host class      | `velt-recorder-tool` (always).                                               |

#### Children

| Primitive              | Public element                | Renders when                                                                                                   |
| ---------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `recorder-audio-tool`  | `<velt-recorder-audio-tool>`  | `'audio'` is in `componentConfigSignal.types`.                                                                 |
| `recorder-video-tool`  | `<velt-recorder-video-tool>`  | `'video'` is in `componentConfigSignal.types`.                                                                 |
| `recorder-screen-tool` | `<velt-recorder-screen-tool>` | `'screen'` is in `componentConfigSignal.types` **and** `componentConfigSignal.screenSharingSupported` is true. |
| `recorder-all-tool`    | `<velt-recorder-all-tool>`    | The unified "record any" button is active.                                                                     |

***

### `recorder-control-panel`

The control panel that appears during an active recording (record / pause / stop / discard).

* **Public element:** `<velt-recorder-control-panel>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.

| Property        | Value                                 |
| --------------- | ------------------------------------- |
| Extra variables | None beyond the shared player config. |

| React Prop | HTML Attribute | Type                       | Default      | Description                                  |
| ---------- | -------------- | -------------------------- | ------------ | -------------------------------------------- |
| `mode`     | `mode`         | `'floating'` \| `'thread'` | `'floating'` | Layout mode.                                 |
| `panelId`  | `panel-id`     | `string`                   | —            | Identifier when multiple panels are mounted. |

***

### `recorder-pin`

The pin icon shown over a recorder annotation.

* **Public element:** `<velt-recorder-pin>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.

| Property        | Value                                                                                           |
| --------------- | ----------------------------------------------------------------------------------------------- |
| Extra variables | See [Component Config — Recorder Pin](#component-config-recorder-pin).                          |
| Host class      | `recorder-pin-container` (always). `recorder-pin-player-container` on the inner player wrapper. |

| Angular Binding                  | Type                                                                             | Default | Description                                   |
| -------------------------------- | -------------------------------------------------------------------------------- | ------- | --------------------------------------------- |
| `[recorderPinAnnotation]`        | [`RecorderAnnotation`](/api-reference/sdk/models/data-models#recorderannotation) | —       | Required. The annotation this pin represents. |
| `[recorderPinSelected]`          | `boolean`                                                                        | `false` | Whether the pin is currently selected.        |
| `[multipleRecorderPinsSelected]` | `boolean`                                                                        | `false` | Whether multi-select mode is active.          |
| `[avatarErrorImage]`             | `string`                                                                         | `''`    | Fallback avatar URL.                          |
| `[user]`                         | [`User`](/api-reference/sdk/models/data-models#user)                             | —       | Required. The current end-user.               |
| `[dragging]`                     | `boolean`                                                                        | `false` | Whether the pin is being dragged.             |
| `[targetElement]`                | `HTMLElement`                                                                    | —       | Anchor element for positioning.               |

***

### `recorder-player`

The playback widget (audio + video). Composes \~20 sub-primitives — each with its own wireframe tag (see [Recorder Player Internals](#recorder-player-internals) below).

* **Public element:** `<velt-recorder-player>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.

| Property        | Value                                                                                        |
| --------------- | -------------------------------------------------------------------------------------------- |
| Extra variables | See [Component Config — Recorder Player (shared)](#component-config-recorder-player-shared). |

## Recorder Player Internals

Each player primitive below has its own `<velt-recorder-player-<name>-wireframe>` tag. All receive the same shared `componentConfigSignal`.

### `recorder-player-overlay`

The overlay UI on top of the playing video (controls + scrubber + buttons). Most controls live inside the overlay.

* **Wireframe tag:** `<velt-recorder-player-overlay-wireframe>`

***

### `recorder-player-video-container` / `recorder-player-video`

Container for the `<video>` element + the inline `<video>` itself.

* **Wireframe tags:** `<velt-recorder-player-video-container-wireframe>`, `<velt-recorder-player-video-wireframe>`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <velt-recorder-player-video-wireframe>
      <video className="my-video" src="{componentConfigSignal.attachment.url}"></video>
    </velt-recorder-player-video-wireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-player-video-wireframe>
      <video class="my-video" [src]="componentConfigSignal.attachment.url"></video>
    </velt-recorder-player-video-wireframe>
    ```
  </Tab>
</Tabs>

***

### `recorder-player-audio-container` / `recorder-player-audio`

Container + inline `<audio>` for audio recordings.

* **Wireframe tags:** `<velt-recorder-player-audio-container-wireframe>`, `<velt-recorder-player-audio-wireframe>`

***

### `recorder-player-audio-waveform`

Animated waveform visualization for audio recordings.

* **Wireframe tag:** `<velt-recorder-player-audio-waveform-wireframe>`

***

### `recorder-player-audio-toggle`

Play / pause button group with separate `play` and `pause` icon tags.

* **Wireframe tags:** `<velt-recorder-player-audio-toggle-wireframe>`, `<velt-recorder-player-audio-toggle-play-wireframe>`, `<velt-recorder-player-audio-toggle-pause-wireframe>`

***

### `recorder-player-timeline`

The scrubber timeline.

* **Wireframe tag:** `<velt-recorder-player-timeline-wireframe>`
* **Children:** `<velt-recorder-player-timeline-seek-bar-wireframe>` (the draggable seek bar).

***

### `recorder-player-time`

The current / total time labels.

* **Wireframe tag:** `<velt-recorder-player-time-wireframe>`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <velt-recorder-player-time-wireframe>
      <span><VeltData field="componentConfigSignal.currentTimeValue" /></span>
      /
      <span><VeltData field="componentConfigSignal.totalTimeValue" /></span>
    </velt-recorder-player-time-wireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-player-time-wireframe>
      <span><velt-data field="componentConfigSignal.currentTimeValue"></velt-data></span>
      /
      <span><velt-data field="componentConfigSignal.totalTimeValue"></velt-data></span>
    </velt-recorder-player-time-wireframe>
    ```
  </Tab>
</Tabs>

***

### `recorder-player-name`

The recording's name / title.

* **Wireframe tag:** `<velt-recorder-player-name-wireframe>`

***

### Action buttons

Action buttons on the player overlay. Each has its own wireframe tag.

| Wireframe tag                                         | Notes                                   |
| ----------------------------------------------------- | --------------------------------------- |
| `<velt-recorder-player-edit-button-wireframe>`        | Edit the recording's name.              |
| `<velt-recorder-player-delete-wireframe>`             | Delete the recording.                   |
| `<velt-recorder-player-copy-link-wireframe>`          | Copy the playback URL.                  |
| `<velt-recorder-player-full-screen-button-wireframe>` | Open the full-screen / expanded player. |

***

### `recorder-player-subtitles` / `recorder-player-subtitles-button`

Subtitles overlay + toggle button.

* **Wireframe tags:** `<velt-recorder-player-subtitles-wireframe>`, `<velt-recorder-player-subtitles-button-wireframe>`

***

### `recorder-player-transcription`

The transcript panel.

* **Wireframe tag:** `<velt-recorder-player-transcription-wireframe>`

<Note>
  The full set of transcription-specific variables (`vttFileTextArray`, `highlightedTextIndex`, etc.) lives on the Transcription feature config when the transcription panel is in standalone mode. Inside the recorder player, a subset of those values is exposed via the shared player config.
</Note>

## Deeply-Nested Wireframe Tags

The recorder feature has a large set of overridable surfaces, particularly in the control panel (during recording) and the expanded full-screen player.

### Recorder tool tags

| Tag                                              | Notes                                                                          | Example                                                     |
| ------------------------------------------------ | ------------------------------------------------------------------------------ | ----------------------------------------------------------- |
| `<velt-recorder-audio-tool-wireframe>`           | Audio-only recorder button variant.                                            | `velt-if="{componentConfigSignal.types.includes('audio')}"` |
| `<velt-recorder-video-tool-wireframe>`           | Video-only recorder button variant.                                            | (per-type variant)                                          |
| `<velt-recorder-screen-tool-wireframe>`          | Screen-only recorder button variant.                                           | `velt-if="{componentConfigSignal.screenSharingSupported}"`  |
| `<velt-recorder-all-tool-wireframe>`             | Multi-mode recorder button (opens a menu with audio / video / screen options). | (composes the menu below)                                   |
| `<velt-recorder-all-tool-menu-wireframe>`        | The opened menu of the all-tool.                                               | (composes menu rows)                                        |
| `<velt-recorder-all-tool-menu-audio-wireframe>`  | Audio option inside the menu.                                                  | `velt-if="{componentConfigSignal.types.includes('audio')}"` |
| `<velt-recorder-all-tool-menu-video-wireframe>`  | Video option inside the menu.                                                  | `velt-if="{componentConfigSignal.types.includes('video')}"` |
| `<velt-recorder-all-tool-menu-screen-wireframe>` | Screen option inside the menu.                                                 | `velt-if="{componentConfigSignal.screenSharingSupported}"`  |

### Control panel tags (during recording)

The control-panel renders during an active recording. It has floating, thread, and collapsed modes plus an action bar with stop / pause / clear / time / waveform indicators.

| Tag                                                               | Notes                                                        | Example                                                           |
| ----------------------------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------- |
| `<velt-recorder-control-panel-floating-mode-wireframe>`           | Floating-mode root.                                          | (composes the floating layout)                                    |
| `<velt-recorder-control-panel-floating-mode-container-wireframe>` | Inner container.                                             | (composes the inner controls)                                     |
| `<velt-recorder-control-panel-floating-mode-waveform-wireframe>`  | Waveform inside floating mode.                               | *Visual only.*                                                    |
| `<velt-recorder-control-panel-thread-mode-wireframe>`             | Thread-mode root (composer-embedded variant).                | (composes the thread layout)                                      |
| `<velt-recorder-control-panel-collapsed-button-wireframe>`        | Collapsed-state minimised button.                            | (click handler)                                                   |
| `<velt-recorder-control-panel-collapsed-button-on-wireframe>`     | Variant when recording is active.                            | `velt-if="{componentConfigSignal.isRecording}"`                   |
| `<velt-recorder-control-panel-collapsed-button-off-wireframe>`    | Variant when recording is paused.                            | `velt-if="!{componentConfigSignal.isRecording}"`                  |
| `<velt-recorder-control-panel-paused-wireframe>`                  | Paused-state overlay.                                        | (composes the paused UI)                                          |
| `<velt-recorder-control-panel-loading-wireframe>`                 | Loading state (initialising recorder).                       | *Visual only.*                                                    |
| `<velt-recorder-control-panel-screen-wireframe>`                  | Screen-recording overlay variant.                            | (composes the screen-record UI)                                   |
| `<velt-recorder-control-panel-screen-mini-container-wireframe>`   | Mini-overlay shown during screen recording.                  | (composes the mini overlay)                                       |
| `<velt-recorder-control-panel-video-wireframe>`                   | Video-recording overlay.                                     | (composes the video-record UI)                                    |
| `<velt-recorder-control-panel-action-bar-wireframe>`              | Action-bar wrapper (stop / pause / clear / time / waveform). | (composes action-bar children)                                    |
| `<velt-recorder-control-panel-action-bar-stop-wireframe>`         | Stop button.                                                 | (click handler)                                                   |
| `<velt-recorder-control-panel-action-bar-clear-wireframe>`        | Discard button.                                              | (click handler)                                                   |
| `<velt-recorder-control-panel-action-bar-toggle-wireframe>`       | Pause / resume toggle wrapper.                               | (composes the two icon variants)                                  |
| `<velt-recorder-control-panel-action-bar-toggle-pause-wireframe>` | Pause-icon variant.                                          | `velt-if="{componentConfigSignal.isRecording}"`                   |
| `<velt-recorder-control-panel-action-bar-toggle-play-wireframe>`  | Resume-icon variant.                                         | `velt-if="!{componentConfigSignal.isRecording}"`                  |
| `<velt-recorder-control-panel-action-bar-pip-wireframe>`          | Picture-in-picture toggle.                                   | (click handler)                                                   |
| `<velt-recorder-control-panel-action-bar-time-wireframe>`         | Elapsed time label.                                          | `<velt-data field="componentConfigSignal.elapsedTime" />`         |
| `<velt-recorder-control-panel-action-bar-type-icon-wireframe>`    | Recorder-type icon (audio / video / screen).                 | `velt-class="'type-{componentConfigSignal.recordingType}': true"` |
| `<velt-recorder-control-panel-action-bar-waveform-wireframe>`     | Live audio waveform.                                         | *Visual only.*                                                    |

### Expanded player tags (full-screen playback)

The expanded (full-screen) player has its own control bar with separate tags for each control.

| Tag                                                                          | Notes                                                   | Example                                                        |
| ---------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------- |
| `<velt-recorder-player-expanded-wireframe>`                                  | Expanded-player root.                                   | (composes the panel + controls)                                |
| `<velt-recorder-player-expanded-panel-wireframe>`                            | Inner panel container.                                  | (composes the panel content)                                   |
| `<velt-recorder-player-expanded-controls-wireframe>`                         | Control-bar wrapper.                                    | (composes the control children)                                |
| `<velt-recorder-player-expanded-controls-toggle-button-wireframe>`           | Play / pause toggle wrapper.                            | (composes the two icon variants)                               |
| `<velt-recorder-player-expanded-controls-toggle-play-wireframe>`             | Play icon.                                              | `velt-if="!{componentConfigSignal.isPlaying}"`                 |
| `<velt-recorder-player-expanded-controls-toggle-pause-wireframe>`            | Pause icon.                                             | `velt-if="{componentConfigSignal.isPlaying}"`                  |
| `<velt-recorder-player-expanded-controls-progress-bar-wireframe>`            | Scrubber progress bar.                                  | (drag handlers)                                                |
| `<velt-recorder-player-expanded-controls-current-time-wireframe>`            | Current-time label.                                     | `<velt-data field="componentConfigSignal.currentTimeValue" />` |
| `<velt-recorder-player-expanded-controls-total-time-wireframe>`              | Total-time label.                                       | `<velt-data field="componentConfigSignal.totalTimeValue" />`   |
| `<velt-recorder-player-expanded-controls-time-wireframe>`                    | Combined "current / total" label.                       | (composes both labels)                                         |
| `<velt-recorder-player-expanded-controls-volume-button-wireframe>`           | Volume button.                                          | (click handler)                                                |
| `<velt-recorder-player-expanded-controls-settings-button-wireframe>`         | Settings button (playback speed, etc.).                 | (click handler)                                                |
| `<velt-recorder-player-expanded-controls-delete-button-wireframe>`           | Delete button.                                          | (click handler)                                                |
| `<velt-recorder-player-expanded-controls-subtitle-button-wireframe>`         | Subtitle toggle.                                        | (click handler)                                                |
| `<velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>`    | Subtitle icon.                                          | *Visual only.*                                                 |
| `<velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>` | Subtitle tooltip.                                       | *Visual only.*                                                 |
| `<velt-recorder-player-expanded-controls-transcription-button-wireframe>`    | Transcription toggle.                                   | (click handler)                                                |
| `<velt-recorder-player-expanded-controls-transcription-icon-wireframe>`      | Transcription icon.                                     | *Visual only.*                                                 |
| `<velt-recorder-player-expanded-controls-transcription-tooltip-wireframe>`   | Transcription tooltip.                                  | *Visual only.*                                                 |
| `<velt-recorder-player-expanded-copy-link-wireframe>`                        | Copy-link action.                                       | (click handler)                                                |
| `<velt-recorder-player-expanded-minimize-button-wireframe>`                  | Minimise (exit fullscreen) button.                      | (click handler)                                                |
| `<velt-recorder-player-avatar-wireframe>`                                    | Recorder author's avatar (shown on the player overlay). | `<velt-data field="componentConfigSignal.user.photoUrl" />`    |
| `<velt-recorder-player-play-button-wireframe>`                               | Play-only button variant (used for compact embed).      | (click handler)                                                |

## Related

* [Recorder Tool](./recorder-tool) — wireframe overview for the trigger button.
* [Control Panel](./control-panel) — wireframe overview for the recording-in-progress panel.
* [Recorder Player](./recorder-player) — wireframe overview for the playback widget.
* [Recorder Player Expanded](./recorder-player-expanded) — wireframe overview for the full-screen player.
* [Subtitles](./subtitles), [Transcription](./transcription) — wireframe overviews for the subtitles / transcription overlays.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.