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

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecordingPreviewStepsDialogWireframe>
        <VeltRecordingPreviewStepsDialogWireframe.Audio />
        <VeltRecordingPreviewStepsDialogWireframe.Video />
    </VeltRecordingPreviewStepsDialogWireframe>
</VeltWireframe>

​
Audio

This component is used for audio recording preview.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.CloseButton />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Waveform />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.SettingsPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.ButtonPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel />
</VeltRecordingPreviewStepsDialogWireframe.Audio>

​
Audio Bottom Panel

Bottom panel of the audio recording preview dialog.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />
</VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel>
Icon
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />
Countdown
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />
Close
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />

​
Audio Button Panel

Button panel of the audio recording preview dialog.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.ButtonPanel>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.StartRecording />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
        <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
        <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
    </VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Settings />
</VeltRecordingPreviewStepsDialogWireframe.Audio.ButtonPanel>
Start Recording
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.StartRecording />
Mic Button
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
On
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
Off
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
Settings
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.Settings />

​
Audio Timer

Timer of the audio recording preview dialog.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />
</VeltRecordingPreviewStepsDialogWireframe.Audio.Timer>
Countdown
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />
Cancel
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />

​
Close Button

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.CloseButton />

​
Waveform

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.Waveform />

​
Settings Panel

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Audio.SettingsPanel />

​
Video

This component is used for both video and screen recording previews.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video>
    <VeltRecordingPreviewStepsDialogWireframe.Video.Waveform />
    <VeltRecordingPreviewStepsDialogWireframe.Video.CloseButton />
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer />
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraOffMessage />
    <VeltRecordingPreviewStepsDialogWireframe.Video.SettingsPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Video.ButtonPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Video.VideoPlayer />
    <VeltRecordingPreviewStepsDialogWireframe.Video.ScreenPlayer />
</VeltRecordingPreviewStepsDialogWireframe.Video>

​
Video Bottom Panel

Bottom panel of the video recording preview dialog.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel>
    <VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon />
    <VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Close />
</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel>

// If you want to customize the Icon for individual media types, you can use the following:

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon type="audio">
    {/* Your custom icon here */}
</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon>

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon type="video">
    {/* Your custom icon here */}
</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon>

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon type="screen">
    {/* Your custom icon here */}
</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon>
Icon
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon />

// To customize for a specific media type:
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon type="audio">{/* audio icon */}</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon>
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon type="video">{/* video icon */}</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon>
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon type="screen">{/* screen icon */}</VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Icon>
Countdown
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Countdown />
Close
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Close />

​
Video Button Panel

Button panel of the video recording preview dialog.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.ButtonPanel>
    <VeltRecordingPreviewStepsDialogWireframe.Video.StartRecording />
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
        <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
        <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
    </VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
        <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
        <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
    </VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.Settings />
</VeltRecordingPreviewStepsDialogWireframe.Video.ButtonPanel>
Start Recording
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.StartRecording />
Mic Button
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
On
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
Off
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
Camera Button
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
On
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
Off
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
Settings
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.Settings />

​
Video Timer

Timer of the video recording preview dialog.
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.Timer>
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />
</VeltRecordingPreviewStepsDialogWireframe.Video.Timer>
Countdown
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />
Cancel
  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />

​
Waveform

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.Waveform />

​
Close Button

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.CloseButton />

​
Camera Off Message

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraOffMessage />

​
Settings Panel

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.SettingsPanel />

​
Video Player

  • React / Next.js
  • Other Frameworks
<VeltRecordingPreviewStepsDialogWireframe.Video.VideoPlayer />

​
ScreenPlayer (Video)

This component is used for screen recording preview within the video dialog. It displays the screen capture content for screen recordings.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecordingPreviewStepsDialogWireframe.Video.ScreenPlayer />
</VeltWireframe>
⌘I