Refactor Artplayer class to add keydown event listener

packages/artplayer-vitepress/docs/advanced/event.md

@@ -794,6 +794,23 @@ art.on('muted', (state) => {
 });
 ```
 
+## `keydown`
+
+监听来自 `document` 的 `keydown` 事件
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('keydown', (event) => {
+    console.log(event.code);
+});
+```
+
 ## `video:canplay`
 
 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

packages/artplayer-vitepress/docs/en/advanced/event.md

@@ -785,6 +785,23 @@ art.on('muted', (state) => {
 });
 ```
 
+## `keydown`
+
+监听来自 `document` 的 `keydown` 事件
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('keydown', (event) => {
+    console.log(event.code);
+});
+```
+
 ## `video:canplay`
 
 The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

packages/artplayer-vitepress/docs/en/component/setting.md

@@ -21,13 +21,13 @@ var art = new Artplayer({
 ## Create - Selection List
 
 | Property   | Type                | Description   |
-| ---------- | ------------------- | ------------  |
-| `html`     | `String`, `Element` | Element's DOM |
-| `icon`     | `String`, `Element` | 元素的图标   |
-| `selector` | `Array`             | 元素列表     |
-| `onSelect` | `Function`          | 元素点击事件 |
-| `width`    | `Number`            | 列表宽度     |
-| `tooltip`  | `String`            | 提示文本     |
+| ---------- | ------------------- | ------------- |
+| `html`     | `String`, `Element` | Item DOM      |
+| `icon`     | `String`, `Element` | Item Icon     |
+| `selector` | `Array`             | Item selector |
+| `onSelect` | `Function`          | Click event   |
+| `width`    | `Number`            | List Width    |
+| `tooltip`  | `String`            | Tooltip text  |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -139,13 +139,13 @@ var art = new Artplayer({
 ```
 ## Create - Toggle Button
 
-| Property   | Type                | Description       |
-| ---------- | ------------------- | ----------------- |
-| `html`     | `String`, `Element` | Element's DOM element |
-| `icon`     | `String`, `Element` | Element's icon    |
+| Property   | Type                | Description            |
+| ---------- | ------------------- | ---------------------- |
+| `html`     | `String`, `Element` | Element's DOM element  |
+| `icon`     | `String`, `Element` | Element's icon         |
 | `switch`   | `Boolean`           | Button's default state |
-| `onSwitch` | `Function`          | Button toggle event |
-| `tooltip`  | `String`            | Tooltip text      |
+| `onSwitch` | `Function`          | Button toggle event    |
+| `tooltip`  | `String`            | Tooltip text           |
 
 <div className="run-code">▶ Run Code</div>
 
@@ -173,14 +173,14 @@ var art = new Artplayer({
 ```
 ## Create - Range Slider
 
-| Attribute  | Type                | Description                 |
-| ---------- | ------------------- | --------------------------- |
-| `html`     | `String`, `Element` | The element's DOM element   |
-| `icon`     | `String`, `Element` | The element's icon          |
-| `range`    | `Array`             | Default state array         |
+| Attribute  | Type                | Description                     |
+| ---------- | ------------------- | ------------------------------- |
+| `html`     | `String`, `Element` | The element's DOM element       |
+| `icon`     | `String`, `Element` | The element's icon              |
+| `range`    | `Array`             | Default state array             |
 | `onRange`  | `Function`          | Event triggered upon completion |
-| `onChange` | `Function`          | Event triggered on change   |
-| `tooltip`  | `String`            | Tooltip text                |
+| `onChange` | `Function`          | Event triggered on change       |
+| `tooltip`  | `String`            | Tooltip text                    |
 
 ```js
 const range = [5, 1, 10, 1];
@@ -204,7 +204,7 @@ var art = new Artplayer({
             range: [5, 1, 10, 1],
             onChange: function (item, $dom, event) {
                 console.info(item, $dom, event);
-                return item.range + 'x';
+                return item.range[0] + 'x';
             },
         },
     ],

packages/artplayer/src/hotkey.js

@@ -13,33 +13,33 @@ export default class Hotkey {
     init() {
         const { proxy, constructor } = this.art;
 
-        this.add(27, () => {
+        this.add('Escape', () => {
             if (this.art.fullscreenWeb) {
                 this.art.fullscreenWeb = false;
             }
         });
 
-        this.add(32, () => {
+        this.add('Space', () => {
             this.art.toggle();
         });
 
-        this.add(37, () => {
+        this.add('ArrowLeft', () => {
             this.art.backward = constructor.SEEK_STEP;
         });
 
-        this.add(38, () => {
+        this.add('ArrowUp', () => {
             this.art.volume += constructor.VOLUME_STEP;
         });
 
-        this.add(39, () => {
+        this.add('ArrowRight', () => {
             this.art.forward = constructor.SEEK_STEP;
         });
 
-        this.add(40, () => {
+        this.add('ArrowDown', () => {
             this.art.volume -= constructor.VOLUME_STEP;
         });
 
-        proxy(window, 'keydown', (event) => {
+        proxy(document, 'keydown', (event) => {
             if (this.art.isFocus) {
                 const tag = document.activeElement.tagName.toUpperCase();
                 const editable = document.activeElement.getAttribute('contenteditable');
@@ -53,7 +53,7 @@ export default class Hotkey {
                     !event.metaKey &&
                     !event.shiftKey
                 ) {
-                    const events = this.keys[event.keyCode];
+                    const events = this.keys[event.code];
                     if (events) {
                         event.preventDefault();
                         for (let index = 0; index < events.length; index++) {
@@ -63,6 +63,7 @@ export default class Hotkey {
                     }
                 }
             }
+            this.art.emit('keydown', event);
         });
     }
 

packages/artplayer/types/artplayer.d.ts

@@ -165,8 +165,8 @@ declare class Artplayer extends Player {
 
     readonly hotkey: {
         keys: Record<string, ((event: Event) => any)[]>;
-        add(key: number, callback: (this: Artplayer, event: Event) => any): Artplayer['hotkey'];
-        remove(key: number, callback: Function): Artplayer['hotkey'];
+        add(key: string, callback: (this: Artplayer, event: Event) => any): Artplayer['hotkey'];
+        remove(key: string, callback: Function): Artplayer['hotkey'];
     };
 
     readonly mask: Component;

packages/artplayer/types/events.d.ts

@@ -68,4 +68,5 @@ export type Events = {
     restart: [url: string];
     muted: [state: boolean];
     setBar: [type: Bar, percentage: number, event?: Event];
+    keydown: [event: KeyboardEvent];
 };