Control Panel

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

Overview

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-wireframe>
        <velt-recorder-control-panel-floating-mode-wireframe />
        <velt-recorder-control-panel-thread-mode-wireframe />
    </velt-recorder-control-panel-wireframe>
</velt-wireframe>

Floating Mode

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-floating-mode-wireframe>
        <velt-recorder-control-panel-floating-mode-container-wireframe />
        <velt-recorder-control-panel-screen-mini-container-wireframe />
        <velt-recorder-control-panel-loading-wireframe />
        <velt-recorder-control-panel-action-bar-wireframe />
    </velt-recorder-control-panel-floating-mode-wireframe>
</velt-wireframe>

Container (Floating Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-floating-mode-container-wireframe>
        <velt-recorder-control-panel-video-wireframe />
        <velt-recorder-control-panel-floating-mode-waveform-wireframe />
        <velt-recorder-control-panel-collapsed-button-wireframe />
        <velt-recorder-control-panel-paused-wireframe />
    </velt-recorder-control-panel-floating-mode-container-wireframe>
</velt-wireframe>

Video (Floating Mode Container)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-video-wireframe />
</velt-wireframe>

Waveform (Floating Mode Container)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-floating-mode-waveform-wireframe />
</velt-wireframe>

CollapsedButton (Floating Mode Container)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-collapsed-button-wireframe>
        <velt-recorder-control-panel-collapsed-button-on-wireframe />
        <velt-recorder-control-panel-collapsed-button-off-wireframe />
    </velt-recorder-control-panel-collapsed-button-wireframe>
</velt-wireframe>

On (CollapsedButton)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-collapsed-button-on-wireframe />
</velt-wireframe>

Off (CollapsedButton)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-collapsed-button-off-wireframe />
</velt-wireframe>

Paused (Floating Mode Container)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-paused-wireframe />
</velt-wireframe>

ScreenMiniContainer (Floating Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-screen-mini-container-wireframe>
        <velt-recorder-control-panel-video-wireframe />
        <velt-recorder-control-panel-screen-wireframe />
    </velt-recorder-control-panel-screen-mini-container-wireframe>
</velt-wireframe>

Video (Floating Mode ScreenMiniContainer)

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

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-video-wireframe />
</velt-wireframe>

Screen (Floating Mode ScreenMiniContainer)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-screen-wireframe />
</velt-wireframe>

Loading (Floating Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-loading-wireframe />
</velt-wireframe>

ActionBar (Floating Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-wireframe>
        <velt-recorder-control-panel-action-bar-type-icon-wireframe />
        <velt-recorder-control-panel-action-bar-time-wireframe />
        <velt-recorder-control-panel-action-bar-waveform-wireframe />
        <velt-recorder-control-panel-action-bar-toggle-wireframe />
        <velt-recorder-control-panel-action-bar-pip-wireframe />
        <velt-recorder-control-panel-action-bar-stop-wireframe />
        <velt-recorder-control-panel-action-bar-clear-wireframe />
    </velt-recorder-control-panel-action-bar-wireframe>
</velt-wireframe>

TypeIcon (ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-type-icon-wireframe />
</velt-wireframe>

Time (ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-time-wireframe />
</velt-wireframe>

Waveform (ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-waveform-wireframe />
</velt-wireframe>

Toggle (ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-toggle-wireframe>
        <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
        <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
    </velt-recorder-control-panel-action-bar-toggle-wireframe>
</velt-wireframe>

Pause (Toggle)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
</velt-wireframe>

Play (Toggle)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
</velt-wireframe>

Pip (ActionBar)

Picture-in-Picture button for screen recordings with camera. This allows users to view the recording in a floating window during screen capture.

Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-pip-wireframe />
</velt-wireframe>

Stop (ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-stop-wireframe />
</velt-wireframe>

Clear (ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-clear-wireframe />
</velt-wireframe>

Thread Mode

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-thread-mode-wireframe>
        <velt-recorder-control-panel-video-wireframe />
        <velt-recorder-control-panel-loading-wireframe />
        <velt-recorder-control-panel-action-bar-wireframe />
        <velt-recorder-control-panel-screen-mini-container-wireframe />
    </velt-recorder-control-panel-thread-mode-wireframe>
</velt-wireframe>

Video (Thread Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-video-wireframe />
</velt-wireframe>

Loading (Thread Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-loading-wireframe />
</velt-wireframe>

ActionBar (Thread Mode)

This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-wireframe>
        <velt-recorder-control-panel-action-bar-type-icon-wireframe />
        <velt-recorder-control-panel-action-bar-time-wireframe />
        <velt-recorder-control-panel-action-bar-waveform-wireframe />
        <velt-recorder-control-panel-action-bar-toggle-wireframe />
        <velt-recorder-control-panel-action-bar-pip-wireframe />
        <velt-recorder-control-panel-action-bar-stop-wireframe />
        <velt-recorder-control-panel-action-bar-clear-wireframe />
    </velt-recorder-control-panel-action-bar-wireframe>
</velt-wireframe>

TypeIcon (Thread Mode ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-type-icon-wireframe />
</velt-wireframe>

Time (Thread Mode ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-time-wireframe />
</velt-wireframe>

Waveform (Thread Mode ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-waveform-wireframe />
</velt-wireframe>

Toggle (Thread Mode ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-toggle-wireframe>
        <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
        <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
    </velt-recorder-control-panel-action-bar-toggle-wireframe>
</velt-wireframe>

Pause (Thread Mode Toggle)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
</velt-wireframe>

Play (Thread Mode Toggle)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
</velt-wireframe>

Pip (Thread Mode ActionBar)

Picture-in-Picture button for screen recordings with camera in Thread Mode. This allows users to view the recording in a floating window during screen capture.

Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-pip-wireframe />
</velt-wireframe>

Stop (Thread Mode ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-stop-wireframe />
</velt-wireframe>

Clear (Thread Mode ActionBar)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-action-bar-clear-wireframe />
</velt-wireframe>

ScreenMiniContainer (Thread Mode)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-screen-mini-container-wireframe>
        <velt-recorder-control-panel-video-wireframe />
        <velt-recorder-control-panel-screen-wireframe />
    </velt-recorder-control-panel-screen-mini-container-wireframe>
</velt-wireframe>

Video (Thread Mode ScreenMiniContainer)

This is the same Video component as used in the main Thread Mode section.

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-video-wireframe />
</velt-wireframe>

Screen (Thread Mode ScreenMiniContainer)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-control-panel-screen-wireframe />
</velt-wireframe>

​Overview

​Floating Mode

​Container (Floating Mode)

​Video (Floating Mode Container)

​Waveform (Floating Mode Container)

​CollapsedButton (Floating Mode Container)

On (CollapsedButton)

Off (CollapsedButton)

​Paused (Floating Mode Container)

​ScreenMiniContainer (Floating Mode)

​Video (Floating Mode ScreenMiniContainer)

​Screen (Floating Mode ScreenMiniContainer)

​Loading (Floating Mode)

​ActionBar (Floating Mode)

​TypeIcon (ActionBar)

​Time (ActionBar)

​Waveform (ActionBar)

​Toggle (ActionBar)

Pause (Toggle)

Play (Toggle)

​Pip (ActionBar)

​Stop (ActionBar)

​Clear (ActionBar)

​Thread Mode

​Video (Thread Mode)

​Loading (Thread Mode)

​ActionBar (Thread Mode)

​TypeIcon (Thread Mode ActionBar)

​Time (Thread Mode ActionBar)

​Waveform (Thread Mode ActionBar)

​Toggle (Thread Mode ActionBar)

Pause (Thread Mode Toggle)

Play (Thread Mode Toggle)

​Pip (Thread Mode ActionBar)

​Stop (Thread Mode ActionBar)

​Clear (Thread Mode ActionBar)

​ScreenMiniContainer (Thread Mode)

​Video (Thread Mode ScreenMiniContainer)

​Screen (Thread Mode ScreenMiniContainer)

Overview

Floating Mode

Container (Floating Mode)

Video (Floating Mode Container)

Waveform (Floating Mode Container)

CollapsedButton (Floating Mode Container)

Paused (Floating Mode Container)

ScreenMiniContainer (Floating Mode)

Video (Floating Mode ScreenMiniContainer)

Screen (Floating Mode ScreenMiniContainer)

Loading (Floating Mode)

ActionBar (Floating Mode)

TypeIcon (ActionBar)

Time (ActionBar)

Waveform (ActionBar)

Toggle (ActionBar)

Pip (ActionBar)

Stop (ActionBar)

Clear (ActionBar)

Thread Mode

Video (Thread Mode)

Loading (Thread Mode)

ActionBar (Thread Mode)

TypeIcon (Thread Mode ActionBar)

Time (Thread Mode ActionBar)

Waveform (Thread Mode ActionBar)

Toggle (Thread Mode ActionBar)

Pip (Thread Mode ActionBar)

Stop (Thread Mode ActionBar)

Clear (Thread Mode ActionBar)

ScreenMiniContainer (Thread Mode)

Video (Thread Mode ScreenMiniContainer)

Screen (Thread Mode ScreenMiniContainer)