> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Control Panel
> Recorder control panel component.
> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.
## Overview
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
## Floating Mode
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
### Container (Floating Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
#### Video (Floating Mode Container)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Waveform (Floating Mode Container)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### CollapsedButton (Floating Mode Container)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### On (CollapsedButton)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### Off (CollapsedButton)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Paused (Floating Mode Container)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### ScreenMiniContainer (Floating Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Video (Floating Mode ScreenMiniContainer)
> [!NOTE]
>
> This is the same Video component as used in the Floating Mode Container.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Screen (Floating Mode ScreenMiniContainer)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Loading (Floating Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### ActionBar (Floating Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
> ```
#### TypeIcon (ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Time (ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Waveform (ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Toggle (ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### Pause (Toggle)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### Play (Toggle)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### 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.
> [!WARNING]
>
> 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.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Stop (ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Clear (ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Thread Mode
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
### Video (Thread Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Loading (Thread Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### ActionBar (Thread Mode)
> [!NOTE]
>
> This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
> ```
#### TypeIcon (Thread Mode ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Time (Thread Mode ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Waveform (Thread Mode ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Toggle (Thread Mode ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### Pause (Thread Mode Toggle)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### Play (Thread Mode Toggle)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### 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.
> [!WARNING]
>
> 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.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Stop (Thread Mode ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Clear (Thread Mode ActionBar)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### ScreenMiniContainer (Thread Mode)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Video (Thread Mode ScreenMiniContainer)
> [!NOTE]
>
> This is the same Video component as used in the main Thread Mode section.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Screen (Thread Mode ScreenMiniContainer)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.