From e42177b187bd0a56914d0c59d0db2113fd694867 Mon Sep 17 00:00:00 2001 From: "jinke.li" <1359518268@qq.com> Date: Wed, 27 Jan 2021 21:23:17 +0800 Subject: [PATCH] fix: cannot reset play index when audioLists changed #286 --- README.md | 2 +- __tests__/tests/player.test.js | 22 ++++++++++++++++++++++ example/webpack.config.js | 2 +- src/config/player.js | 3 +++ src/index.js | 29 ++++++++++++++++++++++------- 5 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 src/config/player.js diff --git a/README.md b/README.md index 75a61cc0..2a9230c3 100644 --- a/README.md +++ b/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` | `-` | 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 | diff --git a/__tests__/tests/player.test.js b/__tests__/tests/player.test.js index d90fb88c..3d07e715 100644 --- a/__tests__/tests/player.test.js +++ b/__tests__/tests/player.test.js @@ -1800,4 +1800,26 @@ describe('', () => { 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( + , + ) + + wrapper.setProps({ audioLists }) + + await sleep(200) + + expect(wrapper.state('playIndex')).toEqual(0) + + wrapper.setProps({ audioLists }) + }) }) diff --git a/example/webpack.config.js b/example/webpack.config.js index c59133eb..f12e16b6 100644 --- a/example/webpack.config.js +++ b/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 = () => { diff --git a/src/config/player.js b/src/config/player.js new file mode 100644 index 00000000..12ec495a --- /dev/null +++ b/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 diff --git a/src/index.js b/src/index.js index ca38316d..af5c4bdd 100644 --- a/src/index.js +++ b/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)