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 |
<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.
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.
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>
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>
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 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. |
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.
| 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}" |
| 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. |
| 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) |
