From 06fb15cb08a554643de850cfcbeafadd1b86dd20 Mon Sep 17 00:00:00 2001 From: "jinke.li" <1359518268@qq.com> Date: Tue, 16 Mar 2021 22:57:03 +0800 Subject: [PATCH] fix: remove id field, use private player key close #328 --- __tests__/tests/instance.test.js | 6 ++-- __tests__/tests/player.test.js | 28 ++++++++++++---- index.d.ts | 1 + src/components/AudioListsPanel.js | 12 ++++--- src/config/player.js | 1 + src/index.js | 54 ++++++++++++++++++------------- 6 files changed, 66 insertions(+), 36 deletions(-) diff --git a/__tests__/tests/instance.test.js b/__tests__/tests/instance.test.js index b7c53937..1fa39a3a 100644 --- a/__tests__/tests/instance.test.js +++ b/__tests__/tests/instance.test.js @@ -219,8 +219,10 @@ describe('AudioInstance test', () => { 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) + expect(prePlayId).not.toEqual(wrapper.state().audioLists[0].__PLAYER_KEY__) + expect(wrapper.state().playId).toEqual( + wrapper.state().audioLists[0].__PLAYER_KEY__, + ) wrapper.find('.audio-lists-btn').simulate('click') expect( wrapper diff --git a/__tests__/tests/player.test.js b/__tests__/tests/player.test.js index 436d6173..90bd1525 100644 --- a/__tests__/tests/player.test.js +++ b/__tests__/tests/player.test.js @@ -562,7 +562,11 @@ describe('', () => { ], }) - expect(wrapper.state().audioLists.map(({ id, ...attr }) => attr)).toEqual([ + expect( + wrapper + .state() + .audioLists.map(({ musicSrc, name }) => ({ musicSrc, name })), + ).toEqual([ { musicSrc: 'x', name: '1' }, { musicSrc: 'xx', name: '11' }, { musicSrc: 'xxx', name: '111' }, @@ -587,7 +591,11 @@ describe('', () => { await sleep(300) - expect(wrapper.state().audioLists.map(({ id, ...attr }) => attr)).toEqual([ + expect( + wrapper + .state() + .audioLists.map(({ musicSrc, name }) => ({ musicSrc, name })), + ).toEqual([ { musicSrc: 'xx', name: '11' }, { musicSrc: 'xxx', name: '111' }, ]) @@ -1445,8 +1453,12 @@ describe('', () => { await sleep(300) expect(onAudioAbort).not.toHaveBeenCalled() expect(onAudioListsChange).toHaveBeenCalledTimes(1) - expect(wrapper.state().audioLists[0].id).toEqual(prevAudioLists[0].id) - expect(wrapper.state().audioLists[1].id).not.toEqual(prevAudioLists[1].id) + expect(wrapper.state().audioLists[0].__PLAYER_KEY__).toEqual( + prevAudioLists[0].__PLAYER_KEY__, + ) + expect(wrapper.state().audioLists[1].__PLAYER_KEY__).not.toEqual( + prevAudioLists[1].__PLAYER_KEY__, + ) wrapper.setProps({ audioLists: [ @@ -1457,8 +1469,12 @@ describe('', () => { await sleep(300) expect(onAudioListsChange).toHaveBeenCalledTimes(2) - expect(wrapper.state().audioLists[0].id).not.toEqual(prevAudioLists[0].id) - expect(wrapper.state().audioLists[1].id).not.toEqual(prevAudioLists[1].id) + expect(wrapper.state().audioLists[0].__PLAYER_KEY__).not.toEqual( + prevAudioLists[0].__PLAYER_KEY__, + ) + expect(wrapper.state().audioLists[1].__PLAYER_KEY__).not.toEqual( + prevAudioLists[1].__PLAYER_KEY__, + ) }) it('should not play if audio is loading', () => { diff --git a/index.d.ts b/index.d.ts index da770d2a..cd37e6e2 100644 --- a/index.d.ts +++ b/index.d.ts @@ -17,6 +17,7 @@ export interface ReactJkMusicPlayerAudioInfo { lyric: string currentLyric: string playIndex: number + __PLAYER_KEY__: string [key: string]: any } diff --git a/src/components/AudioListsPanel.js b/src/components/AudioListsPanel.js index 1a0e8d93..bda5cc90 100644 --- a/src/components/AudioListsPanel.js +++ b/src/components/AudioListsPanel.js @@ -1,5 +1,6 @@ import cls from 'classnames' import React, { memo } from 'react' +import { PLAYER_KEY } from '../config/player' import SORTABLE_CONFIG from '../config/sortable' const AudioListsPanel = ({ @@ -62,10 +63,11 @@ const AudioListsPanel = ({
    {audioLists.map((audio) => { const { name, singer } = audio - const isCurrentPlaying = playId === audio.id + const audioId = audio[PLAYER_KEY] + const isCurrentPlaying = playId === audioId return (
  • onPlay(audio.id)} + onClick={() => onPlay(audioId)} > @@ -102,7 +104,7 @@ const AudioListsPanel = ({ {icon.close} diff --git a/src/config/player.js b/src/config/player.js index 12ec495a..a362b77c 100644 --- a/src/config/player.js +++ b/src/config/player.js @@ -1,3 +1,4 @@ export const DEFAULT_PLAY_INDEX = 0 export const DEFAULT_VOLUME = 1 export const DEFAULT_REMOVE_ID = -1 +export const PLAYER_KEY = '__PLAYER_KEY__' diff --git a/src/index.js b/src/index.js index ae23a761..150fb1e8 100644 --- a/src/index.js +++ b/src/index.js @@ -58,6 +58,7 @@ import { DEFAULT_PLAY_INDEX, DEFAULT_VOLUME, DEFAULT_REMOVE_ID, + PLAYER_KEY, } from './config/player' import SORTABLE_CONFIG from './config/sortable' import LOCALE_CONFIG from './locale' @@ -212,7 +213,8 @@ export default class ReactJkMusicPlayer extends PureComponent { if (!audioLists.length || !this.audio) { return 0 } - const { duration } = audioLists.find((audio) => audio.id === playId) || {} + const { duration } = + audioLists.find((audio) => audio[PLAYER_KEY] === playId) || {} return Math.max(Number(duration) || this.audio.duration || 0, 0) } @@ -834,7 +836,9 @@ export default class ReactJkMusicPlayer extends PureComponent { if (loading && playId === currentPlayId) { return } - const playIndex = audioLists.findIndex((audio) => audio.id === playId) + const playIndex = audioLists.findIndex( + (audio) => audio[PLAYER_KEY] === playId, + ) const { name, cover, musicSrc, singer, lyric = '' } = audioLists[playIndex] || {} @@ -925,7 +929,7 @@ export default class ReactJkMusicPlayer extends PureComponent { return } const newAudioLists = [...audioLists].filter( - (audio) => audio.id !== audioId, + (audio) => audio[PLAYER_KEY] !== audioId, ) // 触发删除动画,等动画结束 删除列表 this.setState({ removeId: audioId }) @@ -1156,7 +1160,7 @@ export default class ReactJkMusicPlayer extends PureComponent { getCurrentPlayIndex = () => { return this.state.audioLists.findIndex( - (audio) => audio.id === this.state.playId, + (audio) => audio[PLAYER_KEY] === this.state.playId, ) } @@ -1438,7 +1442,7 @@ export default class ReactJkMusicPlayer extends PureComponent { if (loadAudioErrorPlayNext && audioLists.length) { const isLastAudio = (playMode === PLAY_MODE.order || playMode === PLAY_MODE.orderLoop) && - playId === audioLists[audioLists.length - 1].id + playId === audioLists[audioLists.length - 1][PLAYER_KEY] if (!isLastAudio) { this.handlePlay(currentPlayMode, true) } @@ -1473,8 +1477,8 @@ export default class ReactJkMusicPlayer extends PureComponent { } this.audioListsPlay( isNext - ? audioLists[currentPlayIndex + 1].id - : audioLists[currentPlayIndex - 1].id, + ? audioLists[currentPlayIndex + 1][PLAYER_KEY] + : audioLists[currentPlayIndex - 1][PLAYER_KEY], ) break @@ -1482,14 +1486,16 @@ export default class ReactJkMusicPlayer extends PureComponent { case PLAY_MODE.orderLoop: if (isNext) { if (currentPlayIndex === audioListsLen - 1) { - return this.audioListsPlay(audioLists[0].id) + return this.audioListsPlay(audioLists[0][PLAYER_KEY]) } - this.audioListsPlay(audioLists[currentPlayIndex + 1].id) + this.audioListsPlay(audioLists[currentPlayIndex + 1][PLAYER_KEY]) } else { if (currentPlayIndex === 0) { - return this.audioListsPlay(audioLists[audioListsLen - 1].id) + return this.audioListsPlay( + audioLists[audioListsLen - 1][PLAYER_KEY], + ) } - this.audioListsPlay(audioLists[currentPlayIndex - 1].id) + this.audioListsPlay(audioLists[currentPlayIndex - 1][PLAYER_KEY]) } break @@ -1506,7 +1512,7 @@ export default class ReactJkMusicPlayer extends PureComponent { if (randomIndex === this.getCurrentPlayIndex()) { randomIndex = this.getPlayIndex(randomIndex + 1) } - const randomPlayId = (audioLists[randomIndex] || {}).id + const randomPlayId = (audioLists[randomIndex] || {})[PLAYER_KEY] this.audioListsPlay(randomPlayId, true) } break @@ -1743,7 +1749,8 @@ export default class ReactJkMusicPlayer extends PureComponent { playId && nextProps.audioLists.some( (newAudioInfo) => - newAudioInfo.id === playId || newAudioInfo.musicSrc === musicSrc, + newAudioInfo[PLAYER_KEY] === playId || + newAudioInfo.musicSrc === musicSrc, ) ) } @@ -1832,7 +1839,8 @@ export default class ReactJkMusicPlayer extends PureComponent { getPlayId = (audioLists = this.state.audioLists) => { const playIndex = this.getPlayIndex(undefined, audioLists) const playId = - this.state.playId || (audioLists[playIndex] && audioLists[playIndex].id) + this.state.playId || + (audioLists[playIndex] && audioLists[playIndex][PLAYER_KEY]) return playId } @@ -1840,7 +1848,7 @@ export default class ReactJkMusicPlayer extends PureComponent { const playId = this.getPlayId(audioLists) const { name = '', cover = '', singer = '', musicSrc = '', lyric = '' } = - audioLists.find(({ id }) => id === playId) || {} + audioLists.find((audio) => audio[PLAYER_KEY] === playId) || {} return { name, @@ -1854,14 +1862,14 @@ export default class ReactJkMusicPlayer extends PureComponent { } getPlayInfo = (audioLists = []) => { - const newAudioLists = audioLists.filter((audio) => !audio.id) - const lastAudioLists = audioLists.filter((audio) => audio.id) + const newAudioLists = audioLists.filter((audio) => !audio[PLAYER_KEY]) + const lastAudioLists = audioLists.filter((audio) => audio[PLAYER_KEY]) const mergedAudioLists = [ ...lastAudioLists, ...newAudioLists.map((info) => { return { ...info, - id: uuId(), + [PLAYER_KEY]: uuId(), } }), ] @@ -1881,7 +1889,7 @@ export default class ReactJkMusicPlayer extends PureComponent { {} return { ...info, - id: prevAudioBeforeUpdate.id || uuId(), + [PLAYER_KEY]: prevAudioBeforeUpdate[PLAYER_KEY] || uuId(), } }) @@ -1971,7 +1979,7 @@ export default class ReactJkMusicPlayer extends PureComponent { getDefaultPlayId = (audioLists = this.props.audioLists) => { const playIndex = this.getPlayIndex() - return audioLists[playIndex] && audioLists[playIndex].id + return audioLists[playIndex] && audioLists[playIndex][PLAYER_KEY] } initLyricParser = () => { @@ -2118,8 +2126,8 @@ export default class ReactJkMusicPlayer extends PureComponent { const currentPlayAudio = this.state.audioLists[ this.getPlayIndex(playIndex) ] - if (currentPlayAudio && currentPlayAudio.id) { - this.audioListsPlay(currentPlayAudio.id, true) + if (currentPlayAudio && currentPlayAudio[PLAYER_KEY]) { + this.audioListsPlay(currentPlayAudio[PLAYER_KEY], true) } }) } @@ -2138,7 +2146,7 @@ export default class ReactJkMusicPlayer extends PureComponent { const newAudioLists = [...this.state.audioLists] const addedAudioLists = audioLists.map((audioInfo) => { return { - id: uuId(), + [PLAYER_KEY]: uuId(), ...audioInfo, } })