Recorder Player Expanded

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Display />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
</velt-wireframe>

Subtitles

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Subtitles />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
</velt-wireframe>

CopyLink

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Transcription />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
</velt-wireframe>

Concepts

Async Collaboration

Realtime Collaboration

Recorder Player Expanded

Overview

Panel

Display

Subtitles

CopyLink

MinimizeButton

Controls

ProgressBar

ToggleButton

Pause

Play

Time

CurrentTime

TotalTime

SubtitleButton

Icon

Tooltip

TranscriptionButton

Icon

Tooltip

VolumeButton

SettingsButton

DeleteButton

Transcription

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Panel

​Display

​Subtitles

​CopyLink

​MinimizeButton

​Controls

​ProgressBar

​ToggleButton

Pause

Play

​Time

CurrentTime

TotalTime

​SubtitleButton

Icon

Tooltip

​TranscriptionButton

Icon

Tooltip

​VolumeButton

​SettingsButton

​DeleteButton

​Transcription

Overview

Panel

Display

Subtitles

CopyLink

MinimizeButton

Controls

ProgressBar

ToggleButton

Time

SubtitleButton

TranscriptionButton

VolumeButton

SettingsButton

DeleteButton

Transcription