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

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

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

Reference to the player's root element.

Type
HTMLElement
Source
Keyboard.js, line 58

DomSmith Instance representing the keyboard overlay.

Type
DomSmith
Source
Keyboard.js, line 64

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

Type
number
Source
Keyboard.js, line 70

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 133

private #onKeyUp()

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

Source
Keyboard.js, line 189

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 199

private #hideOverlay()

Hides the overlay after the configured delay.

Source
Keyboard.js, line 227

private #enable()

Enables the keyboard listeners.

Listens
media/canplay
Source
Keyboard.js, line 238

private #disable()

Disables the keyboard listeners.

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

destroy()

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

Source
Keyboard.js, line 261