From a7b9cec7168b4dec798d489aaa843207628e8c11 Mon Sep 17 00:00:00 2001
From: JeffreyCA <jeffreyca16@gmail.com>
Date: Mon, 11 Jan 2021 13:19:42 -0500
Subject: [PATCH 1/2] feat: implement non-linear volume slider

---
 __tests__/tests/player.test.js | 42 ++++++++++++++++++++++++++++++++++
 src/index.js                   | 30 +++++++++++++++---------
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/__tests__/tests/player.test.js b/__tests__/tests/player.test.js
index 4e876338..0fc7637f 100644
--- a/__tests__/tests/player.test.js
+++ b/__tests__/tests/player.test.js
@@ -1689,4 +1689,46 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(audio.volume).toStrictEqual(0.5)
     expect(fn).toHaveBeenCalledTimes(1)
   })
+
+  it('should set audio volume non-linearly', async () => {
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        audioLists={[
+          { musicSrc: 'x', cover: '' },
+          { musicSrc: 'xx', cover: '' },
+        ]}
+        mode="full"
+      />,
+    )
+    expect(wrapper.state('currentAudioVolume')).toStrictEqual(1)
+    expect(wrapper.instance().audio.volume).toStrictEqual(1)
+
+    wrapper.instance().setAudioVolume(0.5)
+
+    expect(wrapper.state('currentAudioVolume')).toStrictEqual(0.5)
+    expect(wrapper.instance().audio.volume).toStrictEqual(0.25)
+  })
+
+  it('should set volume slider value non-linearly and invoke onAudioVolumeChange', async () => {
+    const fn = jest.fn()
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        audioLists={[
+          { musicSrc: 'x', cover: '' },
+          { musicSrc: 'xx', cover: '' },
+        ]}
+        mode="full"
+        onAudioVolumeChange={fn}
+      />,
+    )
+    expect(wrapper.state('soundValue')).toStrictEqual(1)
+    expect(wrapper.instance().audio.volume).toStrictEqual(1)
+
+    wrapper.instance().audio.volume = 0.25
+    wrapper.instance().onAudioVolumeChange()
+
+    expect(fn).toHaveBeenCalledWith(0.25)
+    expect(wrapper.instance().audio.volume).toStrictEqual(0.25)
+    expect(wrapper.state('soundValue')).toStrictEqual(0.5)
+  })
 })
diff --git a/src/index.js b/src/index.js
index 73476ad8..8fb8095e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1042,17 +1042,17 @@ export default class ReactJkMusicPlayer extends PureComponent {
     this.setAudioVolume(currentAudioVolume || 0.1)
   }
 
-  setAudioVolume = (value) => {
-    this.audio.volume = value
+  setAudioVolume = (volumeBarValue) => {
+    this.audio.volume = this.getListeningVolume(volumeBarValue)
     this.setState({
-      currentAudioVolume: value,
-      soundValue: value,
+      currentAudioVolume: volumeBarValue,
+      soundValue: volumeBarValue,
     })
 
     // Update fade-in interval to transition to new volume
     if (this.state.currentVolumeFade === VOLUME_FADE.IN) {
       this.state.updateIntervalEndVolume &&
-        this.state.updateIntervalEndVolume(value)
+        this.state.updateIntervalEndVolume(volumeBarValue)
     }
   }
 
@@ -1069,6 +1069,14 @@ export default class ReactJkMusicPlayer extends PureComponent {
     }
   }
 
+  getListeningVolume = (volumeBarValue) => {
+    return volumeBarValue ** 2
+  }
+
+  getVolumeBarValue = (listeningVolume) => {
+    return Math.sqrt(listeningVolume)
+  }
+
   onAudioReload = () => {
     if (this.props.audioLists.length) {
       this.handlePlay(PLAY_MODE.singleLoop)
@@ -1248,7 +1256,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
               updateIntervalEndVolume: undefined,
             })
             // It's possible that the volume level in the UI has changed since beginning of fade
-            this.audio.volume = this.state.soundValue
+            this.audio.volume = this.getListeningVolume(this.state.soundValue)
           },
         )
 
@@ -1259,7 +1267,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
       } else {
         this.setState({ currentVolumeFade: VOLUME_FADE.IN })
         const startVolume = isCurrentlyFading ? this.audio.volume : 0
-        const endVolume = this.state.soundValue
+        const endVolume = this.getListeningVolume(this.state.soundValue)
         // Always fade in from 0 to current volume
         const {
           fadeInterval: fadeInInterval,
@@ -1269,7 +1277,6 @@ export default class ReactJkMusicPlayer extends PureComponent {
           startVolume,
           endVolume,
           {
-            // If starting track from beginning, start immediately without fade-in
             duration: fadeIn,
           },
           () => {
@@ -1278,7 +1285,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
               currentVolumeFadeInterval: undefined,
               updateIntervalEndVolume: undefined,
             })
-            this.audio.volume = this.state.soundValue
+            this.audio.volume = this.getListeningVolume(this.state.soundValue)
           },
         )
 
@@ -1533,11 +1540,12 @@ export default class ReactJkMusicPlayer extends PureComponent {
     if (currentVolumeFade !== VOLUME_FADE.NONE) {
       return
     }
+    const volumeBarValue = this.getVolumeBarValue(volume)
     this.setState({
-      soundValue: volume,
+      soundValue: volumeBarValue,
     })
     if (this.props.onAudioVolumeChange) {
-      const formattedVolume = parseFloat(volume.toFixed(2))
+      const formattedVolume = parseFloat(volume.toFixed(4))
       this.props.onAudioVolumeChange(formattedVolume)
     }
   }

From 5e8eccdf15eb89c086a051eb32903e9bccfba97b Mon Sep 17 00:00:00 2001
From: JeffreyCA <jeffreyca16@gmail.com>
Date: Mon, 11 Jan 2021 14:28:56 -0500
Subject: [PATCH 2/2] fix: play button delay in mobile player

---
 src/components/PlayerMobile.js | 3 ++-
 src/index.js                   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/PlayerMobile.js b/src/components/PlayerMobile.js
index b81a56b9..fe0a3289 100644
--- a/src/components/PlayerMobile.js
+++ b/src/components/PlayerMobile.js
@@ -30,6 +30,7 @@ const PlayerMobile = ({
   locale,
   toggleMode,
   renderAudioTitle,
+  actionButtonIcon,
 }) => (
   <div className={cls(prefix, { 'default-bg': !glassBg, 'glass-bg': glassBg })}>
     <PlayModeTip
@@ -90,7 +91,7 @@ const PlayerMobile = ({
           title={playing ? locale.clickToPauseText : locale.clickToPlayText}
           onClick={onPlay}
         >
-          {playing ? icon.pause : icon.play}
+          {actionButtonIcon}
         </span>
       )}
       <span
diff --git a/src/index.js b/src/index.js
index 8fb8095e..f75d0217 100644
--- a/src/index.js
+++ b/src/index.js
@@ -512,6 +512,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
             locale={locale}
             toggleMode={toggleMode}
             renderAudioTitle={this.renderAudioTitle}
+            actionButtonIcon={actionButtonIcon}
           />
         )}