fix: append audio should not auto play if autoPlay is false and autop…

…layInitLoadPlayList is false

__tests__/tests/instance.test.js

@@ -1,6 +1,8 @@
 import { mount } from 'enzyme'
 import React from 'react'
 import ReactJkMusicPlayer from '../../src'
+import { AnimatePlayIcon } from '../../src/components/Icon'
+import { sleep } from '../utils'
 
 const getApp = (props) => {
   let _instance
@@ -207,4 +209,36 @@ describe('AudioInstance test', () => {
     instance.appendAudio(0, [audioInfo])
     expect(onAudioLoad).toHaveBeenCalled()
   })
+
+  it('should init append audio info', async () => {
+    const onAudioPlay = jest.fn()
+    const { wrapper, instance } = getApp({
+      mode: 'full',
+      autoplayInitLoadPlayList: false,
+      onAudioPlay,
+    })
+    const audioInfo = {
+      name: 'name',
+      singer: 'singer',
+      musicSrc: 'c',
+    }
+    const prePlayId = wrapper.state().playId
+    instance.appendAudio(0, [audioInfo])
+    await sleep(1000)
+    wrapper.update()
+    expect(onAudioPlay).not.toHaveBeenCalled()
+    expect(wrapper.state().loading).toBeFalsy()
+    expect(wrapper.state().musicSrc).toEqual(audioInfo.musicSrc)
+    expect(wrapper.state().singer).toEqual(audioInfo.singer)
+    expect(wrapper.state().name).toEqual(audioInfo.name)
+    expect(prePlayId).not.toEqual(wrapper.state().audioLists[0].id)
+    expect(wrapper.state().playId).toEqual(wrapper.state().audioLists[0].id)
+    wrapper.find('.audio-lists-btn').simulate('click')
+    expect(
+      wrapper
+        .find('.audio-lists-panel-content .audio-item')
+        .first()
+        .find(AnimatePlayIcon),
+    ).toHaveLength(1)
+  })
 })

example/example.js

@@ -649,7 +649,13 @@ class Demo extends React.PureComponent {
         <button
           type="button"
           onClick={() => {
-            this.audio.appendAudio(0, audioList2)
+            this.audio.appendAudio(0, [
+              {
+                name: 'test',
+                musicSrc:
+                  'http://podcasts.protocol-radio.com/podcast/protocol-radio-331.m4a',
+              },
+            ])
           }}
         >
           append audio

package.json

@@ -89,7 +89,7 @@
     "rc-switch": "^3.2.1",
     "react-drag-listview": "^0.1.7",
     "react-draggable": "^4.4.3",
-    "react-icons": "^3.11"
+    "react-icons": "^3.11.0"
   },
   "bundlesize": [
     {
@@ -98,22 +98,22 @@
     }
   ],
   "devDependencies": {
-    "@babel/cli": "7.10.5",
-    "@babel/core": "7.11.4",
+    "@babel/cli": "7.11.6",
+    "@babel/core": "7.11.6",
     "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "7.11.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
     "@babel/plugin-transform-object-assign": "7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "7.11.0",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "7.11.2",
     "@commitlint/config-conventional": "^9.1.2",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@types/jest": "^26.0.10",
-    "@types/react": "^16.9.48",
+    "@types/jest": "^26.0.13",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "autoprefixer": "^9.8.6",
     "babel-core": "^7.0.0-bridge.0",
@@ -131,10 +131,10 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.3",
+    "enzyme-adapter-react-16": "^1.15.4",
     "enzyme-to-json": "^3.5.0",
     "esbuild-webpack-plugin": "^1.0.5",
-    "eslint": "^7.7.0",
+    "eslint": "^7.8.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -143,22 +143,22 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.1.0",
     "html-loader": "^1.3.0",
-    "html-webpack-plugin": "^4.3.0",
-    "husky": "^4.2.5",
+    "html-webpack-plugin": "^4.4.1",
+    "husky": "^4.3.0",
     "jest": "^26.4.2",
     "jest-environment-jsdom": "^26.3.0",
     "jsdom": "^16.4.0",
     "less": "^3.12.2",
-    "less-loader": "^7.0.0",
-    "lint-staged": "^10.2.13",
+    "less-loader": "^7.0.1",
+    "lint-staged": "^10.3.0",
     "mini-css-extract-plugin": "^0.11.0",
     "open-browser-webpack-plugin": "0.0.5",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss": "^7.0.32",
-    "postcss-cli": "^7.1.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-cli": "^7.1.2",
+    "postcss-loader": "^4.0.0",
     "power-assert": "^1.6.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.1",

src/index.js

@@ -1170,12 +1170,15 @@ export default class ReactJkMusicPlayer extends PureComponent {
     }
   }
 
-  // 加载音频
   loadAndPlayAudio = () => {
     const { remember } = this.props
-    const { isInitRemember } = this.state
+    const { isInitRemember, musicSrc } = this.state
     const { networkState } = this.audio
 
+    if (!musicSrc) {
+      return
+    }
+
     this.setState({ loading: true })
 
     if (networkState !== NETWORK_STATE.NETWORK_NO_SOURCE) {
@@ -1216,19 +1219,20 @@ export default class ReactJkMusicPlayer extends PureComponent {
 
     this.lyric && this.lyric.stop()
 
-    // 如果当前音乐加载出错 尝试播放下一首
-    if (loadAudioErrorPlayNext && audioLists.length) {
-      const isLastAudio =
-        (playMode === PLAY_MODE.order || playMode === PLAY_MODE.orderLoop) &&
-        playId === audioLists[audioLists.length - 1].id
-      if (!isLastAudio) {
-        this.handlePlay(currentPlayMode, true)
-      }
-    }
-
     // 如果删除歌曲或其他原因导致列表为空时
     // 这时候会触发 https://developer.mozilla.org/en-US/docs/Web/API/MediaError
+    // appendAudio 时也会触发一次 error 需要判断 musicSrc 存在的情况才执行 handlePlay
     if (musicSrc) {
+      // 如果当前音乐加载出错 尝试播放下一首
+      if (loadAudioErrorPlayNext && audioLists.length) {
+        const isLastAudio =
+          (playMode === PLAY_MODE.order || playMode === PLAY_MODE.orderLoop) &&
+          playId === audioLists[audioLists.length - 1].id
+        if (!isLastAudio) {
+          this.handlePlay(currentPlayMode, true)
+        }
+      }
+
       this.props.onAudioError &&
         this.props.onAudioError(
           this.audio.error || (error && error.reason) || null,
@@ -1856,17 +1860,23 @@ export default class ReactJkMusicPlayer extends PureComponent {
     }
   }
 
+  resetPlayId = (cb) => {
+    this.setState({ playId: this.initPlayId }, cb)
+  }
+
   changeAudioLists = (nextProps) => {
     if (!this.checkCurrentPlayingAudioIsInUpdatedAudioLists(nextProps)) {
       this.resetAudioStatus()
     }
-    this.loadNewAudioLists(nextProps)
-    this.props.onAudioListsChange &&
-      this.props.onAudioListsChange(
-        this.state.playId,
-        nextProps.audioLists,
-        this.getBaseAudioInfo(),
-      )
+    this.resetPlayId(() => {
+      this.loadNewAudioLists(nextProps)
+      this.props.onAudioListsChange &&
+        this.props.onAudioListsChange(
+          this.state.playId,
+          nextProps.audioLists,
+          this.getBaseAudioInfo(),
+        )
+    })
   }
 
   updatePlayIndex = (playIndex) => {