fix: do not fade on iOS devices

lijinke666 · Jan 14, 2021 · 767df65 · 767df65
1 parent 29c7a8d
commit 767df65
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 2 deletions.
diff --git a/__tests__/tests/player.test.js b/__tests__/tests/player.test.js
@@ -1749,4 +1749,55 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(onAudioPlay).not.toHaveBeenCalled()
     expect(onAudioSeeked).toHaveBeenCalledTimes(1)
   })
+
+  it('should never fade on iOS', async () => {
+    const platformGetter = jest.spyOn(window.navigator, 'platform', 'get')
+    platformGetter.mockReturnValue('iPhone')
+
+    const audio = {
+      volume: 0,
+    }
+    const fn = jest.fn()
+    const { fadeInterval, updateIntervalEndVolume } = adjustVolume(
+      audio,
+      audio.volume,
+      1,
+      { duration: 200 },
+      fn,
+    )
+
+    expect(fadeInterval).toBeUndefined()
+    expect(updateIntervalEndVolume).toBeUndefined()
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(audio.volume).toStrictEqual(1)
+
+    platformGetter.mockRestore()
+  })
+
+  it('should respect fade on non-iOS', async () => {
+    const platformGetter = jest.spyOn(window.navigator, 'platform', 'get')
+    platformGetter.mockReturnValue('MacIntel')
+
+    const audio = {
+      volume: 0,
+    }
+    const fn = jest.fn()
+    const { fadeInterval, updateIntervalEndVolume } = adjustVolume(
+      audio,
+      audio.volume,
+      1,
+      { duration: 200 },
+      fn,
+    )
+
+    expect(fadeInterval).not.toBeUndefined()
+    expect(updateIntervalEndVolume).not.toBeUndefined()
+
+    await sleep(500)
+
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(audio.volume).toStrictEqual(1)
+
+    platformGetter.mockRestore()
+  })
 })
diff --git a/src/index.js b/src/index.js
@@ -1292,7 +1292,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
             isAutoPlayWhenUserClicked: true,
           },
           () => {
-            if (fadeIn) {
+            if (fadeInInterval) {
               this.audio.volume = startVolume
             }
             this.loadAndPlayAudio()

diff --git a/src/utils.js b/src/utils.js
@@ -47,6 +47,22 @@ export const isSafari = () => {
   )
 }
 
+// https://stackoverflow.com/a/9039885/2789451
+export function isIOS() {
+  return (
+    [
+      'iPad Simulator',
+      'iPhone Simulator',
+      'iPod Simulator',
+      'iPad',
+      'iPhone',
+      'iPod',
+    ].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+  )
+}
+
 // https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out
 export function swing(p) {
   return 0.5 - Math.cos(p * Math.PI) / 2
@@ -60,7 +76,8 @@ export function adjustVolume(
   callback,
 ) {
   let delta = endVolume - startVolume
-  if (!delta || !duration || !easing || !interval) {
+
+  if (!delta || !duration || !easing || !interval || isIOS()) {
     element.volume = endVolume
     callback()
     return { fadeInterval: undefined, updateIntervalEndVolume: undefined }