Skip to content

Commit d168ca6

Browse files
rtrittoyoriiis
rtritto
and
yoriiis
authored
Add Hotkeys Plugin (#165)
* Add Hotkeys Plugin * Add init and destroy methods * Add options * Fix bind of onKeydown * Improve conditions of hokeys if-else * Refactor options * Rename pluginParameter type * Add doc * Add elements * Typo * Improve conditions * Add Vlitejs * Doc * Doc * Update HTML5 example * Fix keydown for multiple check --------- Co-authored-by: Yoriiis <[email protected]>
1 parent a86b4c1 commit d168ca6

File tree

9 files changed

+214
-120
lines changed

9 files changed

+214
-120
lines changed

‎README.md‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ Sizes of the `vlitejs` bundle compared to the competition:
4646
- [**Cast**](./src/plugins/cast/README.md) - Supports for Google Cast API.
4747
- [**AirPlay**](./src/plugins/airplay/README.md) - Supports for Apple AirPlay API.
4848
- [**Monetization**](./src/plugins/ima/README.md) - Supports for Google IMA SDK.
49+
- [**Hotkeys**](./src/plugins/hotkeys/README.md) - Supports for hotkeys to add keyboard shortcuts.
4950
- **Playsinline** - Supports the `playsinline` attribute.
5051
- **SVG icons** - SVG are inlined into the library, no sprites to includes.
51-
- [**Shortcuts**](#shortcuts) - Supports keyboard shortcuts.
5252
- **Accessibility** - W3C and A11Y valid.
5353

5454
[![Image of vLitejs](https://yoriiis.github.io/cdn/static/vlitejs/demo-screenshot.jpg)](https://vlite.js.org)
@@ -201,9 +201,7 @@ The player controls can be customized with the following parameters:
201201
| `playPause` | `Boolean` | `true` | Display the play/pause button on the control bar |
202202
| `progressBar` | `Boolean` | `true` | Display the progress bar on the control bar |
203203
| `time` | `Boolean` | `true` | Display the time information on the control bar |
204-
| `seekTime` | `Number` | `5` | Set seek time seconds of the backward and forward shortcuts |
205204
| `volume` | `Boolean` | `true` | Display the volume button on the control bar |
206-
| `volumeStep` | `Number` | `0.1` | Set the volume step (between 0 and 1) of the increase and decrease shortcuts |
207205
| `fullscreen`&sup1; ⁴ | `Boolean` | `true` | Display the fullscreen button on the control bar |
208206
| `poster`&sup1; | `String\|null` | `null` | Customize the video poster url |
209207
| `bigPlay`&sup1; | `Boolean` | `true` | Display the big play button on the poster video |
@@ -334,19 +332,6 @@ The player exposes some custom CSS properties, locally scopped under the `.v-vli
334332

335333
---
336334

337-
## Shortcuts
338-
339-
The player accepts the following keyboard shortcuts.
340-
341-
| Key | Action |
342-
| :---------------: | ------------------------ |
343-
| <kbd>space</kbd> | Toggle playback |
344-
| <kbd>Esc</kbd> | Exit the fullscreen |
345-
| <kbd>&larr;</kbd> | Seek backward of `5s` |
346-
| <kbd>&rarr;</kbd> | Seek forward of `5s` |
347-
| <kbd>&uarr;</kbd> | Increase volume of `10%` |
348-
| <kbd>&darr;</kbd> | Decrease volume of `10%` |
349-
350335
## Contributors
351336

352337
Many thanks to [Victor Schirm](https://www.behance.net/victorshm) for the `vlitejs` logo.

‎config/package.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ const { author, license, name, version } = pkg
33

44
export const banner = `/*!\n * @license ${license}\n * @name ${name}\n * @version ${version}\n * @copyright ${new Date().getUTCFullYear()} ${author}\n */`
55
export const providers = ['youtube', 'vimeo', 'dailymotion']
6-
export const plugins = ['subtitle', 'pip', 'cast', 'airplay', 'ima', 'volume-bar', 'sticky']
6+
export const plugins = ['subtitle', 'pip', 'cast', 'airplay', 'ima', 'volume-bar', 'sticky', 'hotkeys']

‎examples/html5/config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import VlitejsCast from '../../dist/plugins/cast.js'
99
import VlitejsPip from '../../dist/plugins/pip.js'
1010
import VlitejsSubtitle from '../../dist/plugins/subtitle.js'
1111
import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
12+
import VlitejsHotkeys from '../../dist/plugins/hotkeys.js'
1213
import Vlitejs from '../../dist/vlite.js'
1314

1415
Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
@@ -24,6 +25,10 @@ Vlitejs.registerPlugin('cast', VlitejsCast, {
2425
})
2526
Vlitejs.registerPlugin('airplay', VlitejsAirplay)
2627
Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
28+
Vlitejs.registerPlugin('hotkeys', VlitejsHotkeys, {
29+
seekStep: 3,
30+
volumeStep: 0.2
31+
})
2732

2833
/* eslint-disable no-unused-vars */
2934
const vlite = new Vlitejs('#player', {
@@ -42,7 +47,7 @@ const vlite = new Vlitejs('#player', {
4247
muted: false,
4348
autoHide: true
4449
},
45-
plugins: ['subtitle', 'pip', 'cast', 'airplay', 'volume-bar'],
50+
plugins: ['subtitle', 'pip', 'cast', 'airplay', 'volume-bar', 'hotkeys'],
4651
onReady: (player) => {
4752
console.log(player)
4853

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"monetization",
2222
"ima-sdk",
2323
"sticky",
24-
"volume bar"
24+
"volume bar",
25+
"hotkeys"
2526
],
2627
"homepage": "https://vlite.js.org",
2728
"bugs": "https://github.com/vlitejs/vlite/issues",

‎src/core/vlite.ts‎

Lines changed: 0 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@ const DEFAULT_OPTIONS: interfaceDefaultOptions = {
2020
playPause: true,
2121
progressBar: true,
2222
time: true,
23-
seekTime: 5,
2423
volume: true,
25-
volumeStep: 0.1,
2624
loop: false
2725
},
2826
video: {
@@ -31,9 +29,7 @@ const DEFAULT_OPTIONS: interfaceDefaultOptions = {
3129
playPause: true,
3230
progressBar: true,
3331
time: true,
34-
seekTime: 5,
3532
volume: true,
36-
volumeStep: 0.1,
3733
fullscreen: true,
3834
poster: null,
3935
bigPlay: true,
@@ -134,7 +130,6 @@ class Vlitejs {
134130

135131
this.onClickOnPlayer = this.onClickOnPlayer.bind(this)
136132
this.onDoubleClickOnPlayer = this.onDoubleClickOnPlayer.bind(this)
137-
this.onKeydown = this.onKeydown.bind(this)
138133
this.onMousemove = this.onMousemove.bind(this)
139134
this.onChangeFullScreen = this.onChangeFullScreen.bind(this)
140135

@@ -207,7 +202,6 @@ class Vlitejs {
207202
this.autoHideGranted && this.container.addEventListener('mousemove', this.onMousemove)
208203
document.addEventListener(this.supportFullScreen.changeEvent, this.onChangeFullScreen)
209204
}
210-
this.container.addEventListener('keydown', this.onKeydown)
211205
}
212206

213207
/**
@@ -245,57 +239,6 @@ class Vlitejs {
245239
}
246240
}
247241

248-
/**
249-
* On keydown event on the media element
250-
* @param e Event listener datas
251-
*/
252-
onKeydown(e: KeyboardEvent) {
253-
const activeElement = document.activeElement
254-
const { keyCode } = e
255-
256-
// Stop and start the auto hide timer on selected key code
257-
if (
258-
[9, 32, 37, 39].includes(keyCode) &&
259-
this.autoHideGranted &&
260-
(activeElement === this.container || activeElement?.closest('.v-vlite'))
261-
) {
262-
this.stopAutoHideTimer()
263-
this.startAutoHideTimer()
264-
}
265-
266-
// Backward or forward video with arrow keys
267-
if (
268-
[37, 39].includes(keyCode) &&
269-
(activeElement === this.container || activeElement === this.player.elements.progressBar)
270-
) {
271-
// Prevent default behavior on input range
272-
e.preventDefault()
273-
274-
if (keyCode === 37) {
275-
this.fastForward('backward')
276-
} else if (keyCode === 39) {
277-
this.fastForward('forward')
278-
}
279-
}
280-
281-
// Increase or decrease volume with arrow keys
282-
if (
283-
[38, 40].includes(keyCode) &&
284-
(activeElement === this.container || activeElement === this.player.elements.volume)
285-
) {
286-
if (keyCode === 38) {
287-
this.increaseVolume()
288-
} else if (keyCode === 40) {
289-
this.decreaseVolume()
290-
}
291-
}
292-
293-
// Toggle the media playback with spacebar key
294-
if (keyCode === 32 && activeElement === this.container) {
295-
this.player.controlBar.togglePlayPause(e)
296-
}
297-
}
298-
299242
/**
300243
* On mousemove on the player
301244
*/
@@ -316,37 +259,6 @@ class Vlitejs {
316259
}
317260
}
318261

319-
/**
320-
* Trigger the video fast forward (front and rear)
321-
* @param direction Direction (backward|forward)
322-
*/
323-
fastForward(direction: string) {
324-
this.player.getCurrentTime().then((seconds: number) => {
325-
this.player.seekTo(
326-
direction === 'backward' ? seconds - this.options.seekTime : seconds + this.options.seekTime
327-
)
328-
})
329-
}
330-
331-
/**
332-
* Increase the player volume
333-
*/
334-
increaseVolume() {
335-
this.player.isMuted && this.player.unMute()
336-
this.player.getVolume().then((volume: number) => {
337-
this.player.setVolume(Math.min(Math.round((volume + this.options.volumeStep) * 10) / 10, 1))
338-
})
339-
}
340-
341-
/**
342-
* Decrease the player volume
343-
*/
344-
decreaseVolume() {
345-
this.player.getVolume().then((volume: number) => {
346-
this.player.setVolume(Math.max(Math.round((volume - this.options.volumeStep) * 10) / 10, 0))
347-
})
348-
}
349-
350262
/**
351263
* Stop the auto hide timer and show the video control bar
352264
*/
@@ -372,8 +284,6 @@ class Vlitejs {
372284
* Remove events listeners
373285
*/
374286
removeEvents() {
375-
this.container.removeEventListener('keydown', this.onKeydown)
376-
377287
if (this.type === 'video') {
378288
this.container.removeEventListener('click', this.onClickOnPlayer)
379289
this.container.removeEventListener('dblclick', this.onDoubleClickOnPlayer)

‎src/plugins/README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ The plugin's API allows you to extends the capabilities of `vLitejs` and add cus
66

77
Each plugin can be loaded on demand with the API.
88

9-
| Plugin name | Description |
10-
| ------------------------------------- | ------------------------------------------ |
11-
| [Subtitle](./subtitle/README.md) | Supports for multiple caption tracks (VTT) |
12-
| [Picture-in-Picture](./pip/README.md) | Supports for picture-in-picture mode |
13-
| [Volume bar](./volume-bar/README.md) | Supports for volume bar |
14-
| [Cast](./cast/README.md) | Supports for Google Cast API |
15-
| [AirPlay](./airplay/README.md) | Supports for Apple AirPlay API |
16-
| [Ima](./ima/README.md) | Supports for Google IMA SDK |
17-
| [Sticky](./sticky/README.md) | Supports for sticky mode |
9+
| Plugin name | Description |
10+
| ------------------------------------- | ---------------------------------------------- |
11+
| [Subtitle](./subtitle/README.md) | Supports for multiple caption tracks (VTT) |
12+
| [Picture-in-Picture](./pip/README.md) | Supports for picture-in-picture mode |
13+
| [Volume bar](./volume-bar/README.md) | Supports for volume bar |
14+
| [Cast](./cast/README.md) | Supports for Google Cast API |
15+
| [AirPlay](./airplay/README.md) | Supports for Apple AirPlay API |
16+
| [Ima](./ima/README.md) | Supports for Google IMA SDK |
17+
| [Sticky](./sticky/README.md) | Supports for sticky mode |
18+
| [Hotkeys](./hotkeys/README.md) | Supports for hotkeys to add keyboard shortcuts |
1819

1920
## Create a custom plugin
2021

‎src/plugins/hotkeys/README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Plugin: Hotkeys
2+
3+
Supports for hotkeys to add keyboard shortcuts.
4+
5+
The player accepts the following keyboard shortcuts.
6+
7+
| Key | Action |
8+
| :---------------: | ------------------------ |
9+
| <kbd>space</kbd> | Toggle playback |
10+
| <kbd>Esc</kbd> | Exit the fullscreen |
11+
| <kbd>&larr;</kbd> | Seek backward of `5s` |
12+
| <kbd>&rarr;</kbd> | Seek forward of `5s` |
13+
| <kbd>&uarr;</kbd> | Increase volume of `10%` |
14+
| <kbd>&darr;</kbd> | Decrease volume of `10%` |
15+
16+
## Overview
17+
18+
| <!-- --> | <!-- --> |
19+
| ---------------- | -------------------------------------------- |
20+
| Name | `hotkeys` |
21+
| Path | `vlitejs/plugins/hotkeys` |
22+
| Entry point | `vlitejs/plugins/hotkeys/hotkeys.js` |
23+
| Provider&sup2; | `'html5', 'youtube', 'vimeo', 'dailymotion'` |
24+
| Media type&sup3; | `'video', 'audio'` |
25+
26+
## Usage
27+
28+
### HTML
29+
30+
```html
31+
<video id="player" src="<path_to_video_mp4>"></video>
32+
```
33+
34+
### JavaScript
35+
36+
```js
37+
import 'vlitejs/vlite.css';
38+
import Vlitejs from 'vlitejs';
39+
import VlitejsHotkeys from 'vlitejs/plugins/hotkeys.js';
40+
41+
Vlitejs.registerPlugin('hotkeys', VlitejsHotkeys);
42+
43+
new Vlitejs('#player', {
44+
plugins: ['hotkeys']
45+
});
46+
```
47+
48+
## Configuration
49+
50+
The plugin allows customization with an optional object as the third parameter of the `registerPlugin` function.
51+
52+
| Event Type | Type | Default | Description |
53+
| ------------ | :--------: | :-----: | ---------------------------------------------------------------------------- |
54+
| `seekTime` | `Number` | `5` | Set seek time seconds of the backward and forward shortcuts |
55+
| `volumeStep` | `Number` | `0.1` | Set the volume step (between 0 and 1) of the increase and decrease shortcuts |
56+
57+
```js
58+
Vlitejs.registerPlugin('hotkeys', VlitejsHotkeys, {
59+
seekTime: 3,
60+
volumeStep: 0.2
61+
});
62+
```

0 commit comments

Comments
 (0)