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>

Panel

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Panel>
        <VeltRecorderPlayerExpandedWireframe.Display />
        <VeltRecorderPlayerExpandedWireframe.CopyLink />
        <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
        <VeltRecorderPlayerExpandedWireframe.Subtitles />
        <VeltRecorderPlayerExpandedWireframe.Controls />
    </VeltRecorderPlayerExpandedWireframe.Panel>
</VeltWireframe>

Display

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

Subtitles

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

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.CopyLink />
</VeltWireframe>

MinimizeButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
</VeltWireframe>

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>

ProgressBar

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
</VeltWireframe>

ToggleButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
    </VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
</VeltWireframe>
Pause
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
</VeltWireframe>
Play
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
</VeltWireframe>

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>
CurrentTime
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
</VeltWireframe>
TotalTime
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
</VeltWireframe>

SubtitleButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
    </VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
</VeltWireframe>
Icon
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
</VeltWireframe>
Tooltip
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
</VeltWireframe>

TranscriptionButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
    </VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
</VeltWireframe>
Icon
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
</VeltWireframe>
Tooltip
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
</VeltWireframe>

VolumeButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
</VeltWireframe>

SettingsButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
</VeltWireframe>

DeleteButton

<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
</VeltWireframe>

Transcription

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