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>

​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