Skip to content

Module: src/controller/Keyboard

The Keyboard component enables keyboard shortcuts for common media controls such as play/pause, seek, and volume adjustments. It also displays a contextual overlay when configured to do so. This component improves accessibility and enhances usability for keyboard-centric interactions.

Version
1.1.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
math
Source
Keyboard.js, line 15

Constructor

new Keyboard(player, parent, optionsopt)

Creates an instance of the Keyboard component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.
parent UI

Reference to the parent instance.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
keyPlay string | number optional 'Space'

Key to toggle play/pause. Can be either a string 'key' value (recommended) or the numerical 'key' value.
keySeekBack string | number optional 'ArrowLeft'

Key to seek backward. Can be either a string 'key' value (recommended) or the numerical 'key' value.
keySeekForward string | number optional 'ArrowRight'

Key to seek forward. Can be either a string 'key' value (recommended) or the numerical 'key' value.
keyVolumeUp string | number optional 'ArrowUp'

Key to increase volume. Can be either a string 'key' value (recommended) or the numerical 'key' value.
keyVolumeDown string | number optional 'ArrowDown'

Key to decrease volume. Can be either a string 'key' value (recommended) or the numerical 'key' value.
seekStep number optional 10

Number of seconds to seek.
volumeStep number optional 10

Volume adjustment step in percent.
overlay boolean optional true

Whether to show a visual overlay when pressing a matching key.
overlayDelay number optional 1

Delay (in seconds) before hiding the overlay after a key is released.
Type
Object
Source
Keyboard.js, line 30

Reference to the main player instance.

Type
Player
Source
Keyboard.js, line 46

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.

Type
symbol
Source
Keyboard.js, line 53

Holds tokens of subscriptions to player events, for later unsubscribe.

Type
Array<number>
Source
Keyboard.js, line 59

Reference to the player's root element.

Type
HTMLElement
Source
Keyboard.js, line 65

DomSmith Instance representing the keyboard overlay.

Type
DomSmith
Source
Keyboard.js, line 71

Timeout ID used for hiding the overlay after a short delay.

Type
number
Source
Keyboard.js, line 77

Methods

private #onKeyDown(event)

Handles the keydown event, mapping keys to player actions (play, pause, seek, volume).

Parameters:
Name Type Description
event KeyboardEvent

The native keydown event.
Source
Keyboard.js, line 140

private #onKeyUp()

Handles the keyup event, used primarily to trigger hiding the overlay.

Source
Keyboard.js, line 204

private #showOverlay(action)

Displays the overlay (play, volume, etc.) and updates its visuals depending on the action.

Parameters:
Name Type Description
action string

The key action name (e.g., 'keyPlay', 'keyVolumeUp').
Source
Keyboard.js, line 214

private #hideOverlay()

Hides the overlay after the configured delay.

Source
Keyboard.js, line 242

private #enable()

Enables the keyboard listeners.

Listens
media/canplay
Source
Keyboard.js, line 253

private #disable()

Disables the keyboard listeners.

Listens
media/error
data/nomedia
Source
Keyboard.js, line 266

destroy()

This method removes all events, subscriptions and DOM nodes created by this component.

Source
Keyboard.js, line 276