Recording Preview Steps Dialog

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>

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

<velt-wireframe style="display:none;">
    <velt-recording-preview-steps-dialog-wireframe>
        <velt-recording-preview-steps-dialog-audio-wireframe />
        <velt-recording-preview-steps-dialog-video-wireframe />
    </velt-recording-preview-steps-dialog-wireframe>
</velt-wireframe>

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>

<VeltRecordingPreviewStepsDialogWireframe.Audio>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.CloseButton />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Waveform />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.SettingsPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.ButtonPanel />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel />
</VeltRecordingPreviewStepsDialogWireframe.Audio>

<velt-recording-preview-steps-dialog-audio-wireframe>
    <velt-recording-preview-steps-dialog-close-button-wireframe />
    <velt-recording-preview-steps-dialog-timer-wireframe />
    <velt-recording-preview-steps-dialog-waveform-wireframe />
    <velt-recording-preview-steps-dialog-settings-panel-wireframe />
    <velt-recording-preview-steps-dialog-button-panel-wireframe />
    <velt-recording-preview-steps-dialog-bottom-panel-wireframe />
</velt-recording-preview-steps-dialog-audio-wireframe>

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>

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />
</VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel>

<velt-recording-preview-steps-dialog-bottom-panel-wireframe>
    <velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>
    <velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe></velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe>
    <velt-recording-preview-steps-dialog-bottom-panel-close-wireframe></velt-recording-preview-steps-dialog-bottom-panel-close-wireframe>
</velt-recording-preview-steps-dialog-bottom-panel-wireframe>

Icon

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Icon />

<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>

Countdown

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Countdown />

<velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe></velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe>

Close

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />

<VeltRecordingPreviewStepsDialogWireframe.Audio.BottomPanel.Close />

<velt-recording-preview-steps-dialog-bottom-panel-close-wireframe></velt-recording-preview-steps-dialog-bottom-panel-close-wireframe>

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>

<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>

<velt-recording-preview-steps-dialog-button-panel-wireframe>
    <velt-recording-preview-steps-dialog-start-recording-wireframe></velt-recording-preview-steps-dialog-start-recording-wireframe>
    <velt-recording-preview-steps-dialog-mic-button-wireframe>
        <velt-recording-preview-steps-dialog-mic-button-on-wireframe></velt-recording-preview-steps-dialog-mic-button-on-wireframe>
        <velt-recording-preview-steps-dialog-mic-button-off-wireframe></velt-recording-preview-steps-dialog-mic-button-off-wireframe>
    </velt-recording-preview-steps-dialog-mic-button-wireframe>
    <velt-recording-preview-steps-dialog-settings-wireframe></velt-recording-preview-steps-dialog-settings-wireframe>
</velt-recording-preview-steps-dialog-button-panel-wireframe>

Start Recording

<VeltRecordingPreviewStepsDialogWireframe.Audio.StartRecording />

<VeltRecordingPreviewStepsDialogWireframe.Audio.StartRecording />

<velt-recording-preview-steps-dialog-start-recording-wireframe></velt-recording-preview-steps-dialog-start-recording-wireframe>

Mic Button

<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>

<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton>

<velt-recording-preview-steps-dialog-mic-button-wireframe>
    <velt-recording-preview-steps-dialog-mic-button-on-wireframe></velt-recording-preview-steps-dialog-mic-button-on-wireframe>
    <velt-recording-preview-steps-dialog-mic-button-off-wireframe></velt-recording-preview-steps-dialog-mic-button-off-wireframe>
</velt-recording-preview-steps-dialog-mic-button-wireframe>

On

<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />

<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.On />

<velt-recording-preview-steps-dialog-mic-button-on-wireframe></velt-recording-preview-steps-dialog-mic-button-on-wireframe>

Off

<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />

<VeltRecordingPreviewStepsDialogWireframe.Audio.MicButton.Off />

<velt-recording-preview-steps-dialog-mic-button-off-wireframe></velt-recording-preview-steps-dialog-mic-button-off-wireframe>

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>

<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer>
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />
</VeltRecordingPreviewStepsDialogWireframe.Audio.Timer>

<velt-recording-preview-steps-dialog-timer-wireframe>
    <velt-recording-preview-steps-dialog-timer-countdown-wireframe></velt-recording-preview-steps-dialog-timer-countdown-wireframe>
    <velt-recording-preview-steps-dialog-timer-cancel-wireframe></velt-recording-preview-steps-dialog-timer-cancel-wireframe>
</velt-recording-preview-steps-dialog-timer-wireframe>

Countdown

<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />

<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Countdown />

<velt-recording-preview-steps-dialog-timer-countdown-wireframe></velt-recording-preview-steps-dialog-timer-countdown-wireframe>

Cancel

<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />

<VeltRecordingPreviewStepsDialogWireframe.Audio.Timer.Cancel />

<velt-recording-preview-steps-dialog-timer-cancel-wireframe></velt-recording-preview-steps-dialog-timer-cancel-wireframe>

Close Button

<VeltRecordingPreviewStepsDialogWireframe.Audio.CloseButton />

<VeltRecordingPreviewStepsDialogWireframe.Audio.CloseButton />

<velt-recording-preview-steps-dialog-close-button-wireframe></velt-recording-preview-steps-dialog-close-button-wireframe>

Waveform

<VeltRecordingPreviewStepsDialogWireframe.Audio.Waveform />

Settings Panel

<VeltRecordingPreviewStepsDialogWireframe.Audio.SettingsPanel />

<VeltRecordingPreviewStepsDialogWireframe.Audio.SettingsPanel />

<velt-recording-preview-steps-dialog-settings-panel-wireframe></velt-recording-preview-steps-dialog-settings-panel-wireframe>

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>

<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>

<velt-recording-preview-steps-dialog-video-wireframe>
    <velt-recording-preview-steps-dialog-waveform-wireframe />
    <velt-recording-preview-steps-dialog-close-button-wireframe />
    <velt-recording-preview-steps-dialog-timer-wireframe />
    <velt-recording-preview-steps-dialog-camera-off-message-wireframe />
    <velt-recording-preview-steps-dialog-settings-panel-wireframe />
    <velt-recording-preview-steps-dialog-button-panel-wireframe />
    <velt-recording-preview-steps-dialog-bottom-panel-wireframe />
    <velt-recording-preview-steps-dialog-video-player-wireframe />
</velt-recording-preview-steps-dialog-video-wireframe>

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>

<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>

<velt-recording-preview-steps-dialog-bottom-panel-wireframe>
    <velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>
    <velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe></velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe>
    <velt-recording-preview-steps-dialog-bottom-panel-close-wireframe></velt-recording-preview-steps-dialog-bottom-panel-close-wireframe>
</velt-recording-preview-steps-dialog-bottom-panel-wireframe>

<!-- If you want to customize the Icon for individual media types, you can use the following: -->
<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe type="audio">
    <!-- Your custom icon here -->
</velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>

<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe type="video">
    <!-- Your custom icon here -->
</velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>

<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe type="screen">
    <!-- Your custom icon here -->
</velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>

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>

<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>

<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>

<!-- To customize for a specific media type: -->
<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe type="audio"><!-- audio icon --></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>
<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe type="video"><!-- video icon --></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>
<velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe type="screen"><!-- screen icon --></velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe>

Countdown

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Countdown />

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Countdown />

<velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe></velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe>

Close

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Close />

<VeltRecordingPreviewStepsDialogWireframe.Video.BottomPanel.Close />

<velt-recording-preview-steps-dialog-bottom-panel-close-wireframe></velt-recording-preview-steps-dialog-bottom-panel-close-wireframe>

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>

<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>

<velt-recording-preview-steps-dialog-button-panel-wireframe>
    <velt-recording-preview-steps-dialog-start-recording-wireframe></velt-recording-preview-steps-dialog-start-recording-wireframe>
    <velt-recording-preview-steps-dialog-mic-button-wireframe>
        <velt-recording-preview-steps-dialog-mic-button-on-wireframe></velt-recording-preview-steps-dialog-mic-button-on-wireframe>
        <velt-recording-preview-steps-dialog-mic-button-off-wireframe></velt-recording-preview-steps-dialog-mic-button-off-wireframe>
    </velt-recording-preview-steps-dialog-mic-button-wireframe>
    <velt-recording-preview-steps-dialog-camera-button-wireframe>
        <velt-recording-preview-steps-dialog-camera-button-on-wireframe></velt-recording-preview-steps-dialog-camera-button-on-wireframe>
        <velt-recording-preview-steps-dialog-camera-button-off-wireframe></velt-recording-preview-steps-dialog-camera-button-off-wireframe>
    </velt-recording-preview-steps-dialog-camera-button-wireframe>
    <velt-recording-preview-steps-dialog-settings-wireframe></velt-recording-preview-steps-dialog-settings-wireframe>
</velt-recording-preview-steps-dialog-button-panel-wireframe>

Start Recording

<VeltRecordingPreviewStepsDialogWireframe.Video.StartRecording />

<VeltRecordingPreviewStepsDialogWireframe.Video.StartRecording />

<velt-recording-preview-steps-dialog-start-recording-wireframe></velt-recording-preview-steps-dialog-start-recording-wireframe>

Mic Button

<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>

<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.MicButton>

<velt-recording-preview-steps-dialog-mic-button-wireframe>
    <velt-recording-preview-steps-dialog-mic-button-on-wireframe></velt-recording-preview-steps-dialog-mic-button-on-wireframe>
    <velt-recording-preview-steps-dialog-mic-button-off-wireframe></velt-recording-preview-steps-dialog-mic-button-off-wireframe>
</velt-recording-preview-steps-dialog-mic-button-wireframe>

On

<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />

<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.On />

<velt-recording-preview-steps-dialog-mic-button-on-wireframe></velt-recording-preview-steps-dialog-mic-button-on-wireframe>

Off

<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />

<VeltRecordingPreviewStepsDialogWireframe.Video.MicButton.Off />

<velt-recording-preview-steps-dialog-mic-button-off-wireframe></velt-recording-preview-steps-dialog-mic-button-off-wireframe>

Camera Button

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />
    <VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />
</VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton>

<velt-recording-preview-steps-dialog-camera-button-wireframe>
    <velt-recording-preview-steps-dialog-camera-button-on-wireframe></velt-recording-preview-steps-dialog-camera-button-on-wireframe>
    <velt-recording-preview-steps-dialog-camera-button-off-wireframe></velt-recording-preview-steps-dialog-camera-button-off-wireframe>
</velt-recording-preview-steps-dialog-camera-button-wireframe>

On

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.On />

<velt-recording-preview-steps-dialog-camera-button-on-wireframe></velt-recording-preview-steps-dialog-camera-button-on-wireframe>

Off

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraButton.Off />

<velt-recording-preview-steps-dialog-camera-button-off-wireframe></velt-recording-preview-steps-dialog-camera-button-off-wireframe>

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>

<VeltRecordingPreviewStepsDialogWireframe.Video.Timer>
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />
    <VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />
</VeltRecordingPreviewStepsDialogWireframe.Video.Timer>

<velt-recording-preview-steps-dialog-timer-wireframe>
    <velt-recording-preview-steps-dialog-timer-countdown-wireframe></velt-recording-preview-steps-dialog-timer-countdown-wireframe>
    <velt-recording-preview-steps-dialog-timer-cancel-wireframe></velt-recording-preview-steps-dialog-timer-cancel-wireframe>
</velt-recording-preview-steps-dialog-timer-wireframe>

Countdown

<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />

<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Countdown />

<velt-recording-preview-steps-dialog-timer-countdown-wireframe></velt-recording-preview-steps-dialog-timer-countdown-wireframe>

Cancel

<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />

<VeltRecordingPreviewStepsDialogWireframe.Video.Timer.Cancel />

<velt-recording-preview-steps-dialog-timer-cancel-wireframe></velt-recording-preview-steps-dialog-timer-cancel-wireframe>

Waveform

<VeltRecordingPreviewStepsDialogWireframe.Video.Waveform />

Close Button

<VeltRecordingPreviewStepsDialogWireframe.Video.CloseButton />

<VeltRecordingPreviewStepsDialogWireframe.Video.CloseButton />

<velt-recording-preview-steps-dialog-close-button-wireframe></velt-recording-preview-steps-dialog-close-button-wireframe>

Camera Off Message

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraOffMessage />

<VeltRecordingPreviewStepsDialogWireframe.Video.CameraOffMessage />

<velt-recording-preview-steps-dialog-camera-off-message-wireframe></velt-recording-preview-steps-dialog-camera-off-message-wireframe>

Settings Panel

<VeltRecordingPreviewStepsDialogWireframe.Video.SettingsPanel />

<VeltRecordingPreviewStepsDialogWireframe.Video.SettingsPanel />

<velt-recording-preview-steps-dialog-settings-panel-wireframe></velt-recording-preview-steps-dialog-settings-panel-wireframe>

Video Player

<VeltRecordingPreviewStepsDialogWireframe.Video.VideoPlayer />

<VeltRecordingPreviewStepsDialogWireframe.Video.VideoPlayer />

<velt-recording-preview-steps-dialog-video-player-wireframe></velt-recording-preview-steps-dialog-video-player-wireframe>

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Audio

​Audio Bottom Panel

Icon

Countdown

Close

​Audio Button Panel

Start Recording

Mic Button

On

Off

Settings

​Audio Timer

Countdown

Cancel

​Close Button

​Waveform

​Settings Panel

​Video

​Video Bottom Panel

Icon

Countdown

Close

​Video Button Panel

Start Recording

Mic Button

On

Off

Camera Button

On

Off

Settings

​Video Timer

Countdown

Cancel

​Waveform

​Close Button

​Camera Off Message

​Settings Panel

​Video Player

Overview

Audio

Audio Bottom Panel

Audio Button Panel

Audio Timer

Close Button

Waveform

Settings Panel

Video

Video Bottom Panel

Video Button Panel

Video Timer

Waveform

Close Button

Camera Off Message

Settings Panel

Video Player