Skip to main content
Version: 4.x

vime-settings

A container for a collection of submenus and options for the player. On desktop, the settings is displayed as a small popup menu (scroll appears if height >= maxHeight) on the bottom right-hand side of a video player, or slightly above the right-hand side of an audio player. On mobile, the settings is displayed as a bottom sheet.

Visual#

Vime settings component

Usage#

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-settings>
<!-- ... -->
</vime-settings>
</vime-ui>
</vime-player>

Properties#

PropertyAttributeDescriptionTypeDefault
activeactiveWhether the settings menu is opened/closed.booleanfalse
controlsHeightcontrols-heightThe height of any lower control bar in pixels so that the settings can re-position itself accordingly.number0
pinpinPins the settings to the defined position inside the video player. This has no effect when the view is of type audio (always bottomRight) and on mobile devices (always bottom sheet)."bottomLeft" ∣ "bottomRight" ∣ "topLeft" ∣ "topRight"'bottomRight'

Methods#

setController(id: string, controller: SettingsController) => Promise<void>#

Sets the controller responsible for opening/closing this settings.

Returns#

Type: Promise<void>

Slots#

SlotDescription
Used to pass in the body of the settings menu, which usually contains submenus.

CSS Custom Properties#

NameDescription
--vm-settings-border-radiusThe border radius of the settings menu.
--vm-settings-max-heightThe max height of the settings menu.
--vm-settings-paddingThe padding inside the settings menu.
--vm-settings-scroll-thumb-colorThe color of the settings scrollbar thumb.
--vm-settings-scroll-track-colorThe color of the settings scrollbar track.
--vm-settings-scroll-widthThe width of the settings scrollbar.
--vm-settings-shadowThe shadow cast around the settings menu frame.
--vm-settings-transitionThe CSS transitions for the settings menu.
--vm-settings-widthThe width of the settings menu.

Dependencies#

Used by#

Depends on#

Graph#

graph TD;
vime-settings --> vime-menu
vime-default-settings --> vime-settings
style vime-settings fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS