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

​
Overview

<VeltWireframe>
    <VeltRecordingPreviewStepsDialogWireframe>
        <VeltRecordingPreviewStepsDialogWireframe.Audio />
        <VeltRecordingPreviewStepsDialogWireframe.Video />
    </VeltRecordingPreviewStepsDialogWireframe>
</VeltWireframe>

​
Audio

This component is used for audio recording preview. 
<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. 
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />
</VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel>
Icon
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />
Countdown
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />
Close
<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />

​
Audio Button Panel

Button panel of the audio recording preview dialog. 
<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
<VeltRecordingPreviewStepsDialogWireframe.Audio.StartRecording />
Mic Button
<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
On
<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
Off
<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
Settings
<VeltRecordingPreviewStepsDialogWireframe.Audio.Settings />

​
Audio Timer

Timer of the audio recording preview dialog. 
<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />
</VeltRecordingPreviewStepsDialogWireframe.Audio.Timer>
Countdown
<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />
Cancel
<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />

​
Close Button

<VeltRecordingPreviewStepsDialogWireframe.Audio.CloseButton />

​
Waveform

<VeltRecordingPreviewStepsDialogWireframe.Audio.Waveform />

​
Settings Panel

<VeltRecordingPreviewStepsDialogWireframe.Audio.SettingsPanel />

​
Video

This component is used for both video and screen recording previews. 
<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. 
<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
<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
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Countdown />
Close
<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Close />

​
Video Button Panel

Button panel of the video recording preview dialog. 
<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
<VeltRecordingPreviewStepsDialogWireframe.Video.StartRecording />
Mic Button
<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
On
<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
Off
<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
Camera Button
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
On
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
Off
<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
Settings
<VeltRecordingPreviewStepsDialogWireframe.Video.Settings />

​
Video Timer

Timer of the video recording preview dialog. 
<VeltRecordingPreviewStepsDialogWireframe.Video.Timer>
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />
</VeltRecordingPreviewStepsDialogWireframe.Video.Timer>
Countdown
<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />
Cancel
<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />

​
Waveform

<VeltRecordingPreviewStepsDialogWireframe.Video.Waveform />

​
Close Button

<VeltRecordingPreviewStepsDialogWireframe.Video.CloseButton />

​
Camera Off Message

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraOffMessage />

​
Settings Panel

<VeltRecordingPreviewStepsDialogWireframe.Video.SettingsPanel />

​
Video Player

<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. 
<VeltWireframe>
    <VeltRecordingPreviewStepsDialogWireframe.Video.ScreenPlayer />
</VeltWireframe>