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

Overview

<VeltWireframe>
    <VeltRecorderControlPanelWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode />
        <VeltRecorderControlPanelWireframe.ThreadMode />
    </VeltRecorderControlPanelWireframe>
</VeltWireframe>

Floating Mode

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode>
        <VeltRecorderControlPanelWireframe.FloatingMode.Container />
        <VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer />
        <VeltRecorderControlPanelWireframe.FloatingMode.Loading />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar />
    </VeltRecorderControlPanelWireframe.FloatingMode>
</VeltWireframe>

Container (Floating Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Container>
        <VeltRecorderControlPanelWireframe.FloatingMode.Video />
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton />
        <VeltRecorderControlPanelWireframe.FloatingMode.Paused />
        <VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
    </VeltRecorderControlPanelWireframe.FloatingMode.Container>
</VeltWireframe>

Video (Floating Mode Container)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>

Waveform (Floating Mode Container)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
</VeltWireframe>

CollapsedButton (Floating Mode Container)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
    </VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
</VeltWireframe>
On (CollapsedButton)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
</VeltWireframe>
Off (CollapsedButton)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
</VeltWireframe>

Paused (Floating Mode Container)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Paused />
</VeltWireframe>

ScreenMiniContainer (Floating Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
        <VeltRecorderControlPanelWireframe.FloatingMode.Video />
        <VeltRecorderControlPanelWireframe.FloatingMode.Screen />
    </VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
</VeltWireframe>

Video (Floating Mode ScreenMiniContainer)

This is the same Video component as used in the Floating Mode Container.

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>

Screen (Floating Mode ScreenMiniContainer)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Screen />
</VeltWireframe>

Loading (Floating Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Loading />
</VeltWireframe>

ActionBar (Floating Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
    </VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
</VeltWireframe>

TypeIcon (ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
</VeltWireframe>

Time (ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
</VeltWireframe>

Waveform (ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
</VeltWireframe>

Toggle (ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
    </VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
</VeltWireframe>
Pause (Toggle)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
</VeltWireframe>
Play (Toggle)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
</VeltWireframe>

Stop (ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
</VeltWireframe>

Clear (ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
</VeltWireframe>

Thread Mode

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode>
        <VeltRecorderControlPanelWireframe.ThreadMode.Video />
        <VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer />
        <VeltRecorderControlPanelWireframe.ThreadMode.Loading />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar />
    </VeltRecorderControlPanelWireframe.ThreadMode>
</VeltWireframe>

Video (Thread Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>

Loading (Thread Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Loading />
</VeltWireframe>

ActionBar (Thread Mode)

This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
    </VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
</VeltWireframe>

TypeIcon (Thread Mode ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
</VeltWireframe>

Time (Thread Mode ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
</VeltWireframe>

Waveform (Thread Mode ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
</VeltWireframe>

Toggle (Thread Mode ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
    </VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
</VeltWireframe>
Pause (Thread Mode Toggle)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
</VeltWireframe>
Play (Thread Mode Toggle)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
</VeltWireframe>

Stop (Thread Mode ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
</VeltWireframe>

Clear (Thread Mode ActionBar)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
</VeltWireframe>

ScreenMiniContainer (Thread Mode)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
        <VeltRecorderControlPanelWireframe.ThreadMode.Video />
        <VeltRecorderControlPanelWireframe.ThreadMode.Screen />
    </VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
</VeltWireframe>

Video (Thread Mode ScreenMiniContainer)

This is the same Video component as used in the main Thread Mode section.
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>

Screen (Thread Mode ScreenMiniContainer)

<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Screen />
</VeltWireframe>