vime-controls

Responsible for positioning and laying out individual/groups of controls.

Visual

Vime controls component

Usage

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-controls full-width active-duration="3200">
<!-- ... -->
</vime-controls>
</vime-ui>
</vime-player>

Properties

PropertyAttributeDescriptionTypeDefault
activeDurationactive-durationThe length in milliseconds that the controls are active for before fading out. Audio players are not effected by this prop.number2750
alignalignSets the align-items flex property that aligns the individual controls on the cross-axis."center" ∣ "end" ∣ "start"'center'
directiondirectionSets the flex-direction property that manages the direction in which the controls are layed out."column" ∣ "row"'row'
fullHeightfull-heightWhether the controls container should be 100% height. This has no effect if the view is of type audio.booleanfalse
fullWidthfull-widthWhether the controls container should be 100% width. This has no effect if the view is of type audio.booleanfalse
hiddenhiddenWhether the controls are visible or not.booleanfalse
hideOnMouseLeavehide-on-mouse-leaveWhether the controls should hide when the mouse leaves the player. Audio players are not effected by this prop.booleanfalse
hideWhenPausedhide-when-pausedWhether the controls should show/hide when paused. Audio players are not effected by this prop.booleanfalse
justifyjustifySets the justify-content flex property that aligns the individual controls on the main-axis."center" ∣ "end" ∣ "space-around" ∣ "space-between" ∣ "space-evenly" ∣ "start"'start'
pinpinPins the controls to the defined position inside the video player. This has no effect when the view is of type audio."bottomLeft" ∣ "bottomRight" ∣ "center" ∣ "topLeft" ∣ "topRight"'bottomLeft'
waitForPlaybackStartwait-for-playback-startWhether the controls should wait for playback to start before being shown. Audio players are not effected by this prop.booleanfalse

Slots

SlotDescription
Used to pass in controls.

CSS Custom Properties

NameDescription
--vm-controls-bgThe background color of the controls.
--vm-controls-paddingThe padding inside the controls.
--vm-controls-spacingThe space between controls.
--vm-controls-z-indexThe position in the UI z-axis stack inside the player.

Dependencies

Used by

Graph

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

Built with StencilJS