feat: add shortcut keys for playback rate

ljl11 · Jan 27, 2022 · 8c319dc · 8c319dc
1 parent d76c811
commit 8c319dc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/packages/griffith/src/components/Controller.tsx b/packages/griffith/src/components/Controller.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, {useContext, useEffect, useRef, useState} from 'react'
 import {css} from 'aphrodite/no-important'
 import clamp from 'lodash/clamp'
 import * as displayIcons from './icons/display/index'
@@ -17,6 +17,7 @@ import PageFullScreenButtonItem from './items/PageFullScreenButtonItem'
 import useHandler from '../hooks/useHandler'
 import useBoolean from '../hooks/useBoolean'
 import {useActionToastDispatch} from './ActionToast'
+import VideoSourceContext from '../contexts/VideoSourceContext'
 
 type ControllerProps = {
   standalone?: boolean
@@ -105,11 +106,26 @@ function Controller(props: ControllerProps) {
     onSeek,
     onVolumeChange,
   } = props
+  const {playbackRates, currentPlaybackRate, setCurrentPlaybackRate} =
+    useContext(VideoSourceContext)
   const actionToastDispatch = useActionToastDispatch()
   const [isVolumeHovered, isVolumeHoveredSwitch] = useBoolean()
   const [slideTime, setSlideTime] = useState<number>()
   const prevVolumeRef = useRef(1)
 
+  const rotatePlaybackRate = (dir: 'next' | 'prev') => {
+    const index = playbackRates?.findIndex(
+      (x) => x.value === currentPlaybackRate.value
+    )
+    if (index >= 0) {
+      const next = playbackRates[index + (dir === 'next' ? 1 : -1)]
+      if (next) {
+        actionToastDispatch({icon: displayIcons.play, label: next.text})
+        setCurrentPlaybackRate(next)
+      }
+    }
+  }
+
   const handleDragMove = useHandler((slideTime: number) => {
     setSlideTime(clamp(slideTime, 0, duration))
   })
@@ -219,6 +235,14 @@ function Controller(props: ControllerProps) {
         handleVolumeChange(volume - 0.05, true)
         break
 
+      case '<':
+        rotatePlaybackRate('prev')
+        break
+
+      case '>':
+        rotatePlaybackRate('next')
+        break
+
       default:
         handled = false
         break

diff --git a/packages/griffith/src/components/Player.styles.ts b/packages/griffith/src/components/Player.styles.ts
@@ -96,6 +96,7 @@ export default StyleSheet.create({
   },
 
   actionLabel: {
+    marginTop: '.5em',
     padding: '.3em .5em',
     textAlign: 'center',
     color: '#fff',

diff --git a/packages/griffith/src/contexts/VideoSourceContext.ts b/packages/griffith/src/contexts/VideoSourceContext.ts
@@ -7,11 +7,11 @@ export type VideoSourceContextValue = {
   sources: PlaySource[]
   // 视频质量
   qualities: Quality[]
-  setCurrentQuality(x: Quality): void
+  setCurrentQuality: (x: Quality) => void
   currentQuality: Quality
   // 播放速度
   playbackRates: PlaybackRate[]
-  setCurrentPlaybackRate(x: PlaybackRate): void
+  setCurrentPlaybackRate: (x: PlaybackRate) => void
   currentPlaybackRate: PlaybackRate
 }