From 7c4c59c3aaeaba11034878b077253835db49a2d3 Mon Sep 17 00:00:00 2001
From: Hanz Luo <lhz0516@gmail.com>
Date: Sat, 3 Apr 2021 23:42:06 -0700
Subject: [PATCH] add hasDefaultKeyBindings prop

https://github.com/lhz516/react-h5-audio-player/issues/108
---
 src/index.tsx | 58 +++++++++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index ee0a6d1..dd81f75 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -63,6 +63,7 @@ interface PlayerProps {
   muted?: boolean
   crossOrigin?: string
   mediaGroup?: string
+  hasDefaultKeyBindings?: boolean
   onAbort?: (e: Event) => void
   onCanPlay?: (e: Event) => void
   onCanPlayThrough?: (e: Event) => void
@@ -161,6 +162,7 @@ class H5AudioPlayer extends Component<PlayerProps> {
     customAdditionalControls: [RHAP_UI.LOOP],
     customVolumeControls: [RHAP_UI.VOLUME],
     layout: 'stacked',
+    hasDefaultKeyBindings: true,
   }
 
   audio = createRef<HTMLAudioElement>()
@@ -297,33 +299,35 @@ class H5AudioPlayer extends Component<PlayerProps> {
   }
 
   handleKeyDown = (e: React.KeyboardEvent): void => {
-    switch (e.keyCode) {
-      case 32: // Space
-        if (e.target === this.container.current || e.target === this.progressBar.current) {
-          e.preventDefault() // Prevent scrolling page by pressing Space key
-          this.togglePlay(e)
-        }
-        break
-      case 37: // Left arrow
-        this.handleClickRewind()
-        break
-      case 39: // Right arrow
-        this.handleClickForward()
-        break
-      case 38: // Up arrow
-        e.preventDefault() // Prevent scrolling page by pressing arrow key
-        this.setJumpVolume(this.props.volumeJumpStep)
-        break
-      case 40: // Down arrow
-        e.preventDefault() // Prevent scrolling page by pressing arrow key
-        this.setJumpVolume(-this.props.volumeJumpStep)
-        break
-      case 76: // L = Loop
-        this.handleClickLoopButton()
-        break
-      case 77: // M = Mute
-        this.handleClickVolumeButton()
-        break
+    if (this.props.hasDefaultKeyBindings) {
+      switch (e.key) {
+        case ' ':
+          if (e.target === this.container.current || e.target === this.progressBar.current) {
+            e.preventDefault() // Prevent scrolling page by pressing Space key
+            this.togglePlay(e)
+          }
+          break
+        case 'ArrowLeft':
+          this.handleClickRewind()
+          break
+        case 'ArrowRight':
+          this.handleClickForward()
+          break
+        case 'ArrowUp':
+          e.preventDefault() // Prevent scrolling page by pressing arrow key
+          this.setJumpVolume(this.props.volumeJumpStep)
+          break
+        case 'ArrowDown':
+          e.preventDefault() // Prevent scrolling page by pressing arrow key
+          this.setJumpVolume(-this.props.volumeJumpStep)
+          break
+        case 'l':
+          this.handleClickLoopButton()
+          break
+        case 'm':
+          this.handleClickVolumeButton()
+          break
+      }
     }
   }