vime-control

A generic player control that is designed to work with both touch and mouse devices. It also seamlessly works with vime-tooltip, which can be passed in via the default slot.

Visual

Vime control component

Usage

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-controls full-width>
<vime-control label="Playback" keys="k" pressed="false">
<vime-icon href="#vime-play"></vime-icon>
<vime-tooltip>Play (k)</vime-tooltip>
</vime-control>
</vime-controls>
</vime-ui>
</vime-player>

Properties

PropertyAttributeDescriptionTypeDefault
expandedexpandedIf the control has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenhiddenWhether the control should be displayed or not.booleanfalse
identifieridentifierThe id attribute of the control.string ∣ undefinedundefined
keyskeysA slash (/) separated string of JS keyboard keys (KeyboardEvent.key), that when caught in a keydown event, will trigger a click event on the control.string ∣ undefinedundefined
label (required)labelThe aria-label property of the control.stringundefined
menumenuIf the control has a popup menu, then this should be the id of said menu. Sets the aria-controls property.string ∣ undefinedundefined
pressedpressedIf the control is a toggle, this indicated whether the control is in a "pressed" state or not. Sets the aria-pressed property.boolean ∣ undefinedundefined

Events

EventDescriptionType
vInteractionChangeEmitted when the user is interacting with the control by focusing, touching or hovering on it.CustomEvent<boolean>

Slots

SlotDescription
Used to pass in the content of the control (text/icon/tooltip).

CSS Custom Properties

NameDescription
--vm-control-bgThe background of the control.
--vm-control-borderThe border of the control.
--vm-control-border-radiusThe border radius of the control.
--vm-control-colorThe text color of the control.
--vm-control-focus-bgThe background colour of a control when it is being hovered on or focused.
--vm-control-focus-colorThe text colour of a control when it is being hovered on or focused.
--vm-control-paddingThe padding inside the control.
--vm-control-scaleThe amount to scale the control up/down by.
--vm-control-tap-highlightThe highlight color when a control is tapped.

Dependencies

Used by

Graph

graph TD;
vime-caption-control --> vime-control
vime-fullscreen-control --> vime-control
vime-mute-control --> vime-control
vime-pip-control --> vime-control
vime-playback-control --> vime-control
vime-settings-control --> vime-control
style vime-control fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS