Media Source Settings

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

Overview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe>
        <VeltMediaSourceSettingsWireframe.Audio />
        <VeltMediaSourceSettingsWireframe.Video />
    </VeltMediaSourceSettingsWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-wireframe>
        <velt-media-source-settings-audio-wireframe></velt-media-source-settings-audio-wireframe>
        <velt-media-source-settings-video-wireframe></velt-media-source-settings-video-wireframe>
    </velt-media-source-settings-wireframe>
</velt-wireframe>

Audio

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Audio>
        <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon />
        <VeltMediaSourceSettingsWireframe.Audio.SelectedLabel />
        <VeltMediaSourceSettingsWireframe.Audio.Divider />
        <VeltMediaSourceSettingsWireframe.Audio.Options />
    </VeltMediaSourceSettingsWireframe.Audio>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-audio-wireframe>
        <velt-media-source-settings-toggle-icon-wireframe></velt-media-source-settings-toggle-icon-wireframe>
        <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
        <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
        <velt-media-source-settings-options-wireframe></velt-media-source-settings-options-wireframe>
    </velt-media-source-settings-audio-wireframe>
</velt-wireframe>

ToggleIcon

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon>
        <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon.Open />
        <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon.Close />
    </VeltMediaSourceSettingsWireframe.Audio.ToggleIcon>
</VeltWireframe>

<velt-wireframe style="display:none;">
	<velt-media-source-settings-toggle-icon-wireframe>
		<velt-media-source-settings-toggle-icon-open-wireframe></velt-media-source-settings-toggle-icon-open-wireframe>
        <velt-media-source-settings-toggle-icon-close-wireframe></velt-media-source-settings-toggle-icon-close-wireframe>
    </velt-media-source-settings-toggle-icon-wireframe>
</velt-wireframe>

SelectedLabel

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Audio.SelectedLabel />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
</velt-wireframe>

Divider

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Audio.Divider />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
</velt-wireframe>

Options

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Audio.Options>
        <VeltMediaSourceSettingsWireframe.Audio.Options.Item />
    </VeltMediaSourceSettingsWireframe.Audio.Options>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-options-wireframe>
        <velt-media-source-settings-options-item-wireframe></velt-media-source-settings-options-item-wireframe>
    </velt-media-source-settings-options-wireframe>
</velt-wireframe>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Audio.Options.Item>
        <VeltMediaSourceSettingsWireframe.Audio.Options.Item.Icon />
        <VeltMediaSourceSettingsWireframe.Audio.Options.Item.Label />
    </VeltMediaSourceSettingsWireframe.Audio.Options.Item>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-options-item-wireframe>
        <velt-media-source-settings-options-item-icon-wireframe></velt-media-source-settings-options-item-icon-wireframe>
        <velt-media-source-settings-options-item-label-wireframe></velt-media-source-settings-options-item-label-wireframe>
    </velt-media-source-settings-options-item-wireframe>
</velt-wireframe>

Video

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Video>
        <VeltMediaSourceSettingsWireframe.Video.ToggleIcon />
        <VeltMediaSourceSettingsWireframe.Video.SelectedLabel />
        <VeltMediaSourceSettingsWireframe.Video.Divider />
        <VeltMediaSourceSettingsWireframe.Video.Options />
    </VeltMediaSourceSettingsWireframe.Video>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-video-wireframe>
        <velt-media-source-settings-toggle-icon-wireframe></velt-media-source-settings-toggle-icon-wireframe>
        <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
        <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
        <velt-media-source-settings-options-wireframe></velt-media-source-settings-options-wireframe>
    </velt-media-source-settings-video-wireframe>
</velt-wireframe>

ToggleIcon

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Video.ToggleIcon>
        <VeltMediaSourceSettingsWireframe.Video.ToggleIcon.Open />
        <VeltMediaSourceSettingsWireframe.Video.ToggleIcon.Close />
    </VeltMediaSourceSettingsWireframe.Video.ToggleIcon>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-toggle-icon-wireframe>
        <velt-media-source-settings-toggle-icon-open-wireframe></velt-media-source-settings-toggle-icon-open-wireframe>
        <velt-media-source-settings-toggle-icon-close-wireframe></velt-media-source-settings-toggle-icon-close-wireframe>
    </velt-media-source-settings-toggle-icon-wireframe>
</velt-wireframe>

SelectedLabel

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Video.SelectedLabel />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
</velt-wireframe>

Divider

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Video.Divider />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
</velt-wireframe>

Options

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Video.Options>
        <VeltMediaSourceSettingsWireframe.Video.Options.Item />
    </VeltMediaSourceSettingsWireframe.Video.Options>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-options-wireframe>
        <velt-media-source-settings-options-item-wireframe></velt-media-source-settings-options-item-wireframe>
    </velt-media-source-settings-options-wireframe>
</velt-wireframe>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltMediaSourceSettingsWireframe.Video.Options.Item>
        <VeltMediaSourceSettingsWireframe.Video.Options.Item.Icon />
        <VeltMediaSourceSettingsWireframe.Video.Options.Item.Label />
    </VeltMediaSourceSettingsWireframe.Video.Options.Item>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-media-source-settings-options-item-wireframe>
        <velt-media-source-settings-options-item-icon-wireframe></velt-media-source-settings-options-item-icon-wireframe>
        <velt-media-source-settings-options-item-label-wireframe></velt-media-source-settings-options-item-label-wireframe>
    </velt-media-source-settings-options-item-wireframe>
</velt-wireframe>

​Overview

​Audio

​ToggleIcon

​SelectedLabel

​Divider

​Options

​Item

​Video

​ToggleIcon

​SelectedLabel

​Divider

​Options

​Item

Overview

Audio

ToggleIcon

SelectedLabel

Divider

Options

Item

Video

ToggleIcon

SelectedLabel

Divider

Options

Item