Constructor
new UI(player, parent, optionsopt)
Creates an instance of the UI component.
| Name | Type | Attributes | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
player |
Player |
Reference to the VisionPlayer instance. |
|||||||||
parent |
Player |
Reference to the parent instance. |
|||||||||
options |
Object | optional |
Additional options.
|
Members
private #config :Object
Holds the instance configuration for this component.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
alwaysVisible
|
boolean | optional | false | If |
autoHide
|
number | optional | 5 | Time (in seconds) after which the UI auto-hides (0 disables). |
clickToPlay
|
boolean | optional | true | If |
showScaleSlider
|
boolean | optional | true | If |
iconStyle
|
string | optional | 'default' | The style of the icons: 'default' or 'filled'. |
uiScale
|
number | optional | 1 | Initial scale factor for the UI. |
private #player :Player
private #subscriptions :Array<number>
Holds tokens of subscriptions to player events, for later unsubscribe.
private #apiKey :symbol
Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.
private #rootEle :HTMLElement
private #menu :DomSmith|undefined
private #settingsPopup :DomSmith|undefined
private #state :Object
Reflects the state of the UI.
| Name | Type | Description |
|---|---|---|
state
|
string | The UI's current state: 'visible' or 'hidden'. |
hasFocus
|
boolean | string | Reflects whether the video player currently has focus and which type of element has focus. |
playerWidth
|
number | Current known width of the player's container. |
playerHeight
|
number | Current known height of the player's container. |
lastInput
|
string | Type of last user interaction: |
private #resizeObserver :ResizeObserver
Resize Observer, used for resize functionality (uses standard resize event if API not available).
private #suppressNextTouch :boolean
Flag indicating that the next tap is only meant to reveal the UI.
private #hideTimeOutId :number
private #initialized :boolean
Methods
private #onDomReady()
private #onDataReady()
Called when the data is ready to set up UI.
- Listens
- data/ready
- Source
- UI.js, line 225
private #setUiScale(event)
Sets the UI scale.
| Name | Type | Description |
|---|---|---|
event |
InputEvent |
The input event which called this handler. |
private #onTogglePlay(event)
Handles toggle between play and pause when the user interacts with the UI. On touch devices, the first tap reveals the UI without toggling playback. The second tap (while UI is visible) will then toggle play/pause as expected.
| Name | Type | Description |
|---|---|---|
event |
PointerEvent |
The pointerdown event that triggered the handler. |
private #show(event)
Fires "ui/show" event, and removes the "hidden" class from the UI wrapper element.
| Name | Type | Description |
|---|---|---|
event |
Event |
The event which called this handler. |
private #hide(event)
Fires "ui/hide" event, and adds a "hidden" class to the UI wrapper element.
| Name | Type | Description |
|---|---|---|
event |
Event |
The event which called this handler. |
private #enableAutoHide()
Enables "autohide" funtionality. Might be called via the player API, for example to enable autohiding again when a popup is closed.
private #disableAutoHide()
Disables "autohide" funtionality. Might be called via the player API, for example to prevent autohiding when a popup is open.
- Listens
- popup/show
- Source
- UI.js, line 327
private #enable()
Enables (auto)hiding and clickToPlay.
- Fires
- ui/enabled
- Source
- UI.js, line 341
private #disable()
Disables (auto)hiding and clickToPlay.
- Fires
- ui/disabled
- Source
- UI.js, line 368
private #enableClickPlay()
Enables the "click to play" functionality. This method listens to canplay events inorder to restore a usable state again when the player recovered from a media error (for example by loading another file).
- Listens
- media/canplay
- Source
- UI.js, line 391
private #disableClickPlay()
Disables "click to play" funtionality.
- Listens
- media/error
- Source
- UI.js, line 407
private #onRefreshTimer()
private #onFocus()
Helper function called when the videoplayer has focus. Used mainly for determining if the playerr should process keyboard events.
private #onInput(event)
Reacts to pointerdown and keyboard events to determine the last input method, which is exposed on the players state.
| Name | Type | Description |
|---|---|---|
event |
PointerEvent | KeyboardEvent |
The pointer or keyboard event. |
private #resize(entriesopt)
The resize handler provides basic "responsive design" functionality. As the player might be a widget in a surrounding layout, the typical CSS media queries don't work here. Instead, the resize method checks if the width / height of the player reaches certain breakpoints, and adds appropriate classes accordingly, which in turn might be used to control layout / appearance in CSS.
| Name | Type | Attributes | Description |
|---|---|---|---|
entries |
Array<ResizeObserverEntry> | optional |
The entries if using ResizeObserver, otherwise |
getElement() → HTMLElement
Used by child components to retrieve a container element they can attach.
destroy()
This method removes all events, subscriptions and DOM nodes created by this component.
Events
ui/show
This event is fired when the UI is shown.
- Listeners
- Controller#show
- Scrubber#onUpdateStart
- Title#show
- Source
- UI.js, line 532
ui/hide
This event is fired when the UI is hidden.
- Listeners
- Controller#hide
- Scrubber#onUpdateStop
- Popup#hidePopup
- Title#hide
- Source
- UI.js, line 537
ui/enabled
ui/disabled
ui/resize
Fired when the player viewport resizes, and also once when viewport is inserted in the dom.
| Name | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
size |
Object |
New size of the player viewport.
|