fix: cannot reset play index when audioLists changed #286

README.md

@@ -193,7 +193,7 @@ ReactDOM.render(
 | getAudioInstance | `(instance: HTMLAudioElement) => void` | `-` | get origin audio element instance , you can use it do everything |
 | autoHiddenCover | `boolean` | `false` | Auto hide the cover photo if no cover photo is available |
 | onBeforeAudioDownload | `(audioInfo: ReactJkMusicPlayerAudioInfo) => Promise<TransformedDownloadAudioInfo>` | `-` | transform download audio info before |
-| clearPriorAudioLists | `boolean` | `false` | Replace a new playlist with the first loaded playlist, |
+| clearPriorAudioLists | `boolean` | `false` | Replace a new playlist with the first loaded playlist and reset playIndex to 0 |
 | autoPlayInitLoadPlayList | `boolean` | `false` | Play your new play list right after your new play list is loaded turn false. |
 | spaceBar | `boolean` | `false` | Play and pause audio through space bar （Desktop effective）. |
 | showDestroy | `boolean` | `false` | Destroy player button display |

__tests__/tests/player.test.js

@@ -1800,4 +1800,26 @@ describe('<ReactJkMusicPlayer/>', () => {
 
     platformGetter.mockRestore()
   })
+
+  it('should reset play index to default value when audio lists changed', async () => {
+    const audioLists = [{ musicSrc: 'y' }]
+    const onPlayIndexChange = jest.fn()
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        audioLists={[{ musicSrc: 'x' }]}
+        autoPlay={false}
+        defaultPlayIndex={1}
+        clearPriorAudioLists
+        onPlayIndexChange={onPlayIndexChange}
+      />,
+    )
+
+    wrapper.setProps({ audioLists })
+
+    await sleep(200)
+
+    expect(wrapper.state('playIndex')).toEqual(0)
+
+    wrapper.setProps({ audioLists })
+  })
 })

example/webpack.config.js

@@ -4,7 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
 
-const HOST = '0.0.0.0'
+const HOST = 'localhost'
 const PORT = 8081
 
 const getPublicPath = () => {

src/config/player.js

@@ -0,0 +1,3 @@
+export const DEFAULT_PLAY_INDEX = 0
+export const DEFAULT_VOLUME = 1
+export const DEFAULT_REMOVE_ID = -1

src/index.js

@@ -50,6 +50,11 @@ import PROP_TYPES from './config/propTypes'
 import { sliderBaseOptions } from './config/slider'
 import { THEME } from './config/theme'
 import { VOLUME_FADE } from './config/volumeFade'
+import {
+  DEFAULT_PLAY_INDEX,
+  DEFAULT_VOLUME,
+  DEFAULT_REMOVE_ID,
+} from './config/player'
 import LOCALE_CONFIG from './locale'
 import Lyric from './lyric'
 import {
@@ -105,7 +110,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     toggle: this.props.mode === MODE.FULL,
     playing: false,
     currentTime: 0,
-    soundValue: 100,
+    soundValue: DEFAULT_VOLUME * 100,
     moveX: 0,
     moveY: 0,
     loading: false,
@@ -118,11 +123,12 @@ export default class ReactJkMusicPlayer extends PureComponent {
     isInitAutoPlay: this.props.autoPlay,
     isInitRemember: false,
     loadedProgress: 0,
-    removeId: -1,
+    removeId: DEFAULT_REMOVE_ID,
     isNeedMobileHack: IS_MOBILE,
     audioLyricVisible: false,
     isAutoPlayWhenUserClicked: false,
-    playIndex: this.props.playIndex || this.props.defaultPlayIndex || 0,
+    playIndex:
+      this.props.playIndex || this.props.defaultPlayIndex || DEFAULT_PLAY_INDEX,
     canPlay: false,
     currentVolumeFade: VOLUME_FADE.NONE,
     currentVolumeFadeInterval: undefined,
@@ -702,7 +708,10 @@ export default class ReactJkMusicPlayer extends PureComponent {
     playIndex = this.state.playIndex,
     audioLists = this.state.audioLists,
   ) => {
-    return Math.max(0, Math.min(audioLists.length - 1, playIndex))
+    return Math.max(
+      DEFAULT_PLAY_INDEX,
+      Math.min(audioLists.length - 1, playIndex),
+    )
   }
 
   onCoverClick = (mode = MODE.FULL) => {
@@ -1150,6 +1159,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
           lyric: '',
           currentLyric: '',
           loadedProgress: 0,
+          playIndex: DEFAULT_PLAY_INDEX,
         },
         res,
       )
@@ -2005,7 +2015,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
       ? this.getLastPlayStatus()
       : {
           playMode: playMode || PLAY_MODE.order,
-          playIndex: playIndex || 0,
+          playIndex: playIndex || DEFAULT_PLAY_INDEX,
         }
 
     if (theme !== THEME.AUTO) {
@@ -2322,7 +2332,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
       playMode,
       clearPriorAudioLists,
     } = nextProps
-    if (!arrayEqual(audioLists)(this.props.audioLists)) {
+    const isEqualAudioLists = arrayEqual(audioLists)(this.props.audioLists)
+    if (!isEqualAudioLists) {
       if (clearPriorAudioLists) {
         this.changeAudioLists(nextProps)
       } else {
@@ -2332,7 +2343,11 @@ export default class ReactJkMusicPlayer extends PureComponent {
         this.initPlayer(audioLists, false)
       }
     }
-    this.updatePlayIndex(playIndex)
+    this.updatePlayIndex(
+      !isEqualAudioLists && clearPriorAudioLists
+        ? DEFAULT_PLAY_INDEX
+        : playIndex,
+    )
     this.updateTheme(theme)
     this.updateMode(mode)
     this.updatePlayMode(playMode)