Keyboard

ID: vKeyboard | Type: Plugin

View Source

This plugin manages keyboard shortcuts.

This plugin has a Registry containing all registered keyboard shortcuts.

const unsubscribe = player.getRegistry().subscribe(records => {
const shortcuts = records.vKeyboard;
});
// ...
unsubscribe();

Defaults

By default there are no shortcuts, but you can install an additional DefaultKeyboard plugin to get started with the Vime defaults.

  • togglePlayback: space/k to toggle playback.

  • adjustVolume: up arrow and down arrow to control the volume level.

  • seek: left arrow and right arrow to seek forward/backward.

  • toggleMute: m to toggle the muted state of the player.

  • toggleCaptions: c to toggle captions on/off.

  • togglePiP: p to toggle PiP on/off.

  • toggleFullscreen: f to toggle fullscreen on/off.

Setup

Basic
Manager
Basic
import { Player, Keyboard, DefaultKeyboard } from '@vime-js/complete';
// ...
const player = new Player({
target,
props: {
plugins: [Keyboard, DefaultKeyboard]
}
});
Manager
import { Player, Keyboard, DefaultKeyboard } from '@vime-js/complete';
// ...
player
.getPluginsManager()
.addPlugins([Keyboard, DefaultKeyboard])
.then(([keyboard]) => {
// ...
});

Usage

Create Shortcut

player.vKeyboard.addShortcut('togglePlayback', {
hint: 'space/k',
keys: [32, 75],
action: () => {
if (!player.canInteract) return;
player.paused = !player.paused;
}
});

Update Shortcut

player.vKeyboard.updateShortcut('togglePlayback', {
hint: 'space',
keys: [32]
});

Delete Shortcut

player.vKeyboard.removeShortcut('togglePlayback');

Access Shortcut via Event

player.vKeyboard.$on('register', registration => {
const { id, value: shortcut } = registration;
if (id === 'togglePlayback') {
// ...
}
});

Access Shortcut via Registry

player.vKeyboard.getRegistry().subscribe(shortcuts => {
const shortcut = shortcuts.togglePlayback;
if (shortcut) {
// ...
}
});

Relationships

ActionDisplay

If the ActionDisplay plugin is available then all key presses will emit an icon/value in the middle of the player to display the action taken.

Tooltips

If the Tooltips plugin is available, then the Keyboard plugin will look for any registered Tooltip with a matching id to a keyboard shortcut, if found it will set the hint prop to the keyboard shortcut hint. For example, if a title is "play", it will become "play (space / k)".

Props

autopilot

Type: boolean | Default: true

In autopilot mode the plugin will control certain properties automatically. Set this to false if you'd like to control them yourself. Properties below contain an 'Auto' descriptor if they are part of this system.

isEnabled

Type: boolean | Default: true | Auto: true

Whether the plugin is enabled or not.

Methods

getRegistry

Return Type: Registry

The plugin registry where KeyboardShortcut objects are registered.

getShortcuts

Return Type: KeyboardShortcut[]

All registered keyboard shortcuts.

getShortcut

Parameters: (id: string) | Return Type: KeyboardShortcut|undefined

The keyboard shortcut object for the given id.

addShortcut

Parameters: (id: string, shortcut: KeyboardShortcut)

Creates and regsiters a keyboard shortcut.

updateShortcut

Parameters: (id: string, shortcut: KeyboardShortcut)

Updates the keyboard shortcut associated with the given id.

removeShortcut

Parameters: (id: string)

Removes and deregisters the keyboard shortcut for the given id.

removeShortcuts

Parameters: (ids: string[])

Removes and deregisters multiple keyboard shortcuts.

Events

Registry

Emits Registry events.