Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
- Single Editor Mode
Recorder
Recorder Player Expanded
Recorder player expanded component. This is the expanded player that appears when user wants to view the recording in full screen.
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
Overview
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe>
<VeltRecorderPlayerExpandedWireframe.Panel />
<VeltRecorderPlayerExpandedWireframe.Transcription />
</VeltRecorderPlayerExpandedWireframe>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe>
<VeltRecorderPlayerExpandedWireframe.Panel />
<VeltRecorderPlayerExpandedWireframe.Transcription />
</VeltRecorderPlayerExpandedWireframe>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-wireframe>
<velt-recorder-player-expanded-panel-wireframe></velt-recorder-player-expanded-panel-wireframe>
<velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
</velt-recorder-player-expanded-wireframe>
</velt-wireframe>
Panel
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Panel>
<VeltRecorderPlayerExpandedWireframe.Display />
<VeltRecorderPlayerExpandedWireframe.CopyLink />
<VeltRecorderPlayerExpandedWireframe.MinimizeButton />
<VeltRecorderPlayerExpandedWireframe.Subtitles />
<VeltRecorderPlayerExpandedWireframe.Controls />
</VeltRecorderPlayerExpandedWireframe.Panel>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Panel>
<VeltRecorderPlayerExpandedWireframe.Display />
<VeltRecorderPlayerExpandedWireframe.CopyLink />
<VeltRecorderPlayerExpandedWireframe.MinimizeButton />
<VeltRecorderPlayerExpandedWireframe.Subtitles />
<VeltRecorderPlayerExpandedWireframe.Controls />
</VeltRecorderPlayerExpandedWireframe.Panel>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-panel-wireframe>
<velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
<velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
<velt-recorder-player-expanded-copy-link-wireframe></velt-recorder-player-expanded-copy-link-wireframe>
<velt-recorder-player-expanded-minimize-button-wireframe></velt-recorder-player-expanded-minimize-button-wireframe>
<velt-recorder-player-expanded-controls-wireframe></velt-recorder-player-expanded-controls-wireframe>
</velt-recorder-player-expanded-panel-wireframe>
</velt-wireframe>
Display
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Display />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Display />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
</velt-wireframe>
Subtitles
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Subtitles />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Subtitles />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
</velt-wireframe>
CopyLink
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.CopyLink />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.CopyLink />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-copy-link-wireframe></velt-recorder-player-expanded-copy-link-wireframe>
</velt-wireframe>
MinimizeButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.MinimizeButton />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.MinimizeButton />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-minimize-button-wireframe></velt-recorder-player-expanded-minimize-button-wireframe>
</velt-wireframe>
Controls
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls>
<VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton />
<VeltRecorderPlayerExpandedWireframe.Controls.Time />
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton />
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton />
<VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
<VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
<VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
</VeltRecorderPlayerExpandedWireframe.Controls>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls>
<VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton />
<VeltRecorderPlayerExpandedWireframe.Controls.Time />
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton />
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton />
<VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
<VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
<VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
</VeltRecorderPlayerExpandedWireframe.Controls>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-wireframe>
<velt-recorder-player-expanded-controls-progress-bar-wireframe></velt-recorder-player-expanded-controls-progress-bar-wireframe>
<velt-recorder-player-expanded-controls-toggle-button-wireframe></velt-recorder-player-expanded-controls-toggle-button-wireframe>
<velt-recorder-player-expanded-controls-time-wireframe></velt-recorder-player-expanded-controls-time-wireframe>
<velt-recorder-player-expanded-controls-subtitle-button-wireframe></velt-recorder-player-expanded-controls-subtitle-button-wireframe>
<velt-recorder-player-expanded-controls-transcription-button-wireframe></velt-recorder-player-expanded-controls-transcription-button-wireframe>
<velt-recorder-player-expanded-controls-volume-button-wireframe></velt-recorder-player-expanded-controls-volume-button-wireframe>
<velt-recorder-player-expanded-controls-settings-button-wireframe></velt-recorder-player-expanded-controls-settings-button-wireframe>
<velt-recorder-player-expanded-controls-delete-button-wireframe></velt-recorder-player-expanded-controls-delete-button-wireframe>
</velt-recorder-player-expanded-controls-wireframe>
</velt-wireframe>
ProgressBar
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-progress-bar-wireframe></velt-recorder-player-expanded-controls-progress-bar-wireframe>
</velt-wireframe>
ToggleButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
</VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
</VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-toggle-button-wireframe>
<velt-recorder-player-expanded-controls-toggle-pause-wireframe></velt-recorder-player-expanded-controls-toggle-pause-wireframe>
<velt-recorder-player-expanded-controls-toggle-play-wireframe></velt-recorder-player-expanded-controls-toggle-play-wireframe>
</velt-recorder-player-expanded-controls-toggle-button-wireframe>
</velt-wireframe>
Pause
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-toggle-pause-wireframe></velt-recorder-player-expanded-controls-toggle-pause-wireframe>
</velt-wireframe>
Play
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-toggle-play-wireframe></velt-recorder-player-expanded-controls-toggle-play-wireframe>
</velt-wireframe>
Time
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.Time>
<VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
<!-- Add custom divider by adding any tag like <p> / <p> -->
<VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
</VeltRecorderPlayerExpandedWireframe.Controls.Time>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.Time>
<VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
<!-- Add custom divider by adding any tag like <p> / <p> -->
<VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
</VeltRecorderPlayerExpandedWireframe.Controls.Time>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-time-wireframe>
<velt-recorder-player-expanded-controls-current-time-wireframe></velt-recorder-player-expanded-controls-current-time-wireframe>
<velt-recorder-player-expanded-controls-total-time-wireframe></velt-recorder-player-expanded-controls-total-time-wireframe>
</velt-recorder-player-expanded-controls-time-wireframe>
</velt-wireframe>
CurrentTime
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-current-time-wireframe></velt-recorder-player-expanded-controls-current-time-wireframe>
</velt-wireframe>
TotalTime
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-total-time-wireframe></velt-recorder-player-expanded-controls-total-time-wireframe>
</velt-wireframe>
SubtitleButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
</VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
</VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-subtitle-button-wireframe>
<velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe></velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>
<velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe></velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>
</velt-recorder-player-expanded-controls-subtitle-button-wireframe>
</velt-wireframe>
Icon
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe></velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>
</velt-wireframe>
Tooltip
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe></velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>
</velt-wireframe>
TranscriptionButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
</VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
</VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-transcription-button-wireframe>
<velt-recorder-player-expanded-controls-transcription-button-icon-wireframe></velt-recorder-player-expanded-controls-transcription-button-icon-wireframe>
<velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe></velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe>
</velt-recorder-player-expanded-controls-transcription-button-wireframe>
</velt-wireframe>
Icon
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-transcription-button-icon-wireframe></velt-recorder-player-expanded-controls-transcription-button-icon-wireframe>
</velt-wireframe>
Tooltip
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe></velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe>
</velt-wireframe>
VolumeButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-volume-button-wireframe></velt-recorder-player-expanded-controls-volume-button-wireframe>
</velt-wireframe>
SettingsButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-settings-button-wireframe></velt-recorder-player-expanded-controls-settings-button-wireframe>
</velt-wireframe>
DeleteButton
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-controls-delete-button-wireframe></velt-recorder-player-expanded-controls-delete-button-wireframe>
</velt-wireframe>
Transcription
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Transcription />
</VeltWireframe>
<VeltWireframe>
<VeltRecorderPlayerExpandedWireframe.Transcription />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
</velt-wireframe>
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.