Recorder Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

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"`

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.

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`

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`	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`	Active recording handle.	Internal — used by playback.
`componentConfigSignal.attachment`	`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`	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`	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`	Identified end-user object.
`RecorderAnnotation`	Recorder annotation — `from`, `recorderId`, `recorders`, etc.
`Attachment`	Saved attachment record.
`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.
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.
Host class	`recorder-pin-container` (always). `recorder-pin-player-container` on the inner player wrapper.

Angular Binding	Type	Default	Description
`[recorderPinAnnotation]`	`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`	—	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 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).

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>

React / Next.js
Other Frameworks

<velt-recorder-player-video-wireframe>
  <video className="my-video" src="{componentConfigSignal.attachment.url}"></video>
</velt-recorder-player-video-wireframe>

<velt-recorder-player-video-wireframe>
  <video class="my-video" [src]="componentConfigSignal.attachment.url"></video>
</velt-recorder-player-video-wireframe>

`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).

The current / total time labels.

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

React / Next.js
Other Frameworks

<velt-recorder-player-time-wireframe>
  <span><VeltData field="componentConfigSignal.currentTimeValue" /></span>
  /
  <span><VeltData field="componentConfigSignal.totalTimeValue" /></span>
</velt-recorder-player-time-wireframe>

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

`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>

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.

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)

Recorder Tool — wireframe overview for the trigger button.
Control Panel — wireframe overview for the recording-in-progress panel.
Recorder Player — wireframe overview for the playback widget.
Recorder Player Expanded — wireframe overview for the full-screen player.
Subtitles, Transcription — wireframe overviews for the subtitles / transcription overlays.
Template Variables — overview of the velt-data / velt-if / velt-class system.

​Overview

​Component Config — Recorder Button

​Component Config — Recorder Pin

​Component Config — Recorder Player (shared)

​Player behaviour callbacks

​Type Reference

​Subcomponents

​recorder-button (root)

​Children

​recorder-control-panel

​recorder-pin

​recorder-player

​Recorder Player Internals

​recorder-player-overlay

​recorder-player-video-container / recorder-player-video

​recorder-player-audio-container / recorder-player-audio

​recorder-player-audio-waveform

​recorder-player-audio-toggle

​recorder-player-timeline

​recorder-player-time

​recorder-player-name

​Action buttons

​recorder-player-subtitles / recorder-player-subtitles-button

​recorder-player-transcription

​Deeply-Nested Wireframe Tags

​Recorder tool tags

​Control panel tags (during recording)

​Expanded player tags (full-screen playback)

​Related

Overview

Component Config — Recorder Button

Component Config — Recorder Pin

Component Config — Recorder Player (shared)

Player behaviour callbacks

Type Reference

Subcomponents

`recorder-button` (root)

Children

`recorder-control-panel`

`recorder-pin`

`recorder-player`

Recorder Player Internals

`recorder-player-overlay`

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

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

`recorder-player-audio-waveform`

`recorder-player-audio-toggle`

`recorder-player-timeline`

`recorder-player-time`

`recorder-player-name`

Action buttons

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

`recorder-player-transcription`

Deeply-Nested Wireframe Tags

Recorder tool tags

Control panel tags (during recording)

Expanded player tags (full-screen playback)

Related