feat: add speed shortcuts to the player page

packages/web/src/views/Player/index.vue

@@ -10,8 +10,17 @@ import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { assert } from '../../utils'
 import { LARServerService } from '../../services/LARServerService'
+import { onUnmounted } from 'vue'
+
+// 这里手动暴露一个 dplayer 未声明类型导出的属性
+declare module 'dplayer' {
+  export default interface DPlayer {
+    focus: boolean
+  }
+}
 
 const container = ref<HTMLDivElement>()
+const dPlayer = ref<DPlayer>()
 
 const route = useRoute()
 const id = typeof route.query.id === 'string' ? route.query.id : null
@@ -51,8 +60,45 @@ onMounted(async () => {
       send() {},
     },
   })
+  dPlayer.value = dp
   // TODO: 不知道为啥没效果，之后调查看看。
   dp.play()
   dp.fullScreen.request('web')
+
+  document.addEventListener('keydown', keyHandler)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', keyHandler)
 })
+
+// 部分逻辑参考自 https://github.com/DIYgod/DPlayer/blob/f00e304ca364656fa07a9c3624093e66b6db015e/src/js/hotkey.js
+function keyHandler(event: KeyboardEvent) {
+  const dp = dPlayer.value
+  if (dp == null || !dp.focus) return
+
+  const tag = document.activeElement?.tagName.toUpperCase()
+  const editable = document.activeElement?.getAttribute('contenteditable')
+  if (!(tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true')) return
+
+  console.log('event.keyCode', event.key, event.code, dp.video.playbackRate)
+  const speedList = [0.5, 0.75, 1, 1.25, 1.5, 2]
+  switch (event.key) {
+    case '[': {
+      let idx = speedList.indexOf(dp.video.playbackRate)
+      idx -= 1
+      if (idx <= 0) idx = 0
+      dp.video.playbackRate = speedList[idx]
+      break
+    }
+
+    case ']': {
+      let idx = speedList.indexOf(dp.video.playbackRate)
+      idx += 1
+      if (idx >= speedList.length) idx = speedList.length - 1
+      dp.video.playbackRate = speedList[idx]
+      break
+    }
+  }
+}
 </script>