播放器绑定快捷键 (#10)

- F 全屏 - D 弹幕开关 - M 音量开关 - [空格] 播放/暂停 - ArrowRight 快进 5 秒 - ArrowLeft 快退 5 秒
MotooriKashin · Aug 2, 2024 · 3d5f0d0 · 3d5f0d0
1 parent 2fea563
commit 3d5f0d0
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/src/main/bilibili/player/index.ts b/src/main/bilibili/player/index.ts
@@ -56,11 +56,13 @@ export class BilibiliPlayer extends Player {
     /** 每当元素添加到文档中时调用。 */
     connectedCallback() {
         this.insertAdjacentElement('beforebegin', this.#part);
+        super.connectedCallback();
     }
 
     /** 每当元素从文档中移除时调用。 */
     disconnectedCallback() {
         this.#part.remove();
+        super.disconnectedCallback();
     }
 
     /** 每当元素被移动到新文档中时调用。 */

diff --git a/src/player/area/wrap/video/index.ts b/src/player/area/wrap/video/index.ts
@@ -167,6 +167,10 @@ class Video extends HTMLVideoElement {
     seek(t: number) {
         this.currentTime = t;
     }
+
+    toggle() {
+        this.paused ? this.play() : this.pause();
+    }
 }
 
 /** 

diff --git a/src/player/index.ts b/src/player/index.ts
@@ -28,10 +28,14 @@ export class Player extends HTMLElement {
     // attributeChangedCallback(name: IobservedAttributes, oldValue: string, newValue: string) {}
 
     /** 每当元素添加到文档中时调用。 */
-    // connectedCallback(){}
+    connectedCallback() {
+        self.addEventListener('keydown', this.onKeyDown);
+    }
 
     /** 每当元素从文档中移除时调用。 */
-    // disconnectedCallback() {}
+    disconnectedCallback() {
+        self.removeEventListener('keydown', this.onKeyDown);
+    }
 
     /** 每当元素被移动到新文档中时调用。 */
     // adoptedCallback() {}
@@ -163,6 +167,7 @@ export class Player extends HTMLElement {
             } catch { }
         });
 
+
         ev.trigger(PLAYER_EVENT.INITED, void 0);
     }
 
@@ -347,6 +352,54 @@ export class Player extends HTMLElement {
 
     }
 
+    protected onKeyDown = ({ key, code, shiftKey, ctrlKey, altKey, metaKey, isComposing }: KeyboardEvent) => {
+        try {
+            const { activeElement } = document;
+            if (
+                activeElement?.hasAttribute('contenteditable')
+                || activeElement instanceof HTMLInputElement
+                || activeElement instanceof HTMLTextAreaElement
+            ) { } else {
+                switch (key) {
+                    // 不能区分小键盘，但能识别 Shift 后的值
+                    case 'F': case 'f': {
+                        // 全屏
+                        shiftKey || ctrlKey || altKey || metaKey || ev.trigger(PLAYER_EVENT.PLAYER_MODE, PLAYER_STATE.mode ^= PLAYER_MODE.FULL);
+                        break;
+                    }
+                    case 'd': case 'D': {
+                        // 弹幕开关
+                        shiftKey || ctrlKey || altKey || metaKey || (options.danmaku.visible = !options.danmaku.visible);
+                        break;
+                    }
+                    case 'm': case 'M': {
+                        // 音量开关
+                        shiftKey || ctrlKey || altKey || metaKey || (video.muted = !video.muted);
+                        break;
+                    }
+                    case ' ': {
+                        // 播放/暂停
+                        shiftKey || ctrlKey || altKey || metaKey || (PLAYER_STATE.mode & PLAYER_MODE.FULL && video.toggle());
+                        break;
+                    }
+                    case 'ArrowRight': {
+                        // 快进 5 秒
+                        shiftKey || ctrlKey || altKey || metaKey || (video.currentTime += 5);
+                        break;
+                    }
+                    case 'ArrowLeft': {
+                        // 快退 5 秒
+                        shiftKey || ctrlKey || altKey || metaKey || (video.currentTime -= 5);
+                        break;
+                    }
+                }
+                // switch (code) {
+                //     // 能区分小键盘，但不识别 Shift 后的值
+                // }
+            }
+        } catch { }
+    }
+
     /** 销毁当前播放器 */
     protected playerDistroy() {
         this.flvPlayer?.destroy();