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,
}
})