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