fix: remove id field, use private player key close #328

__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

__tests__/tests/player.test.js

@@ -562,7 +562,11 @@ describe('<ReactJkMusicPlayer/>', () => {
       ],
     })
 
-    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('<ReactJkMusicPlayer/>', () => {
 
     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('<ReactJkMusicPlayer/>', () => {
     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('<ReactJkMusicPlayer/>', () => {
 
     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', () => {

index.d.ts

@@ -17,6 +17,7 @@ export interface ReactJkMusicPlayerAudioInfo {
   lyric: string
   currentLyric: string
   playIndex: number
+  __PLAYER_KEY__: string
   [key: string]: any
 }
 

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 = ({
         <ul className={SORTABLE_CONFIG.selector}>
           {audioLists.map((audio) => {
             const { name, singer } = audio
-            const isCurrentPlaying = playId === audio.id
+            const audioId = audio[PLAYER_KEY]
+            const isCurrentPlaying = playId === audioId
             return (
               <li
-                key={audio.id}
+                key={audioId}
                 title={
                   !playing
                     ? locale.clickToPlayText
@@ -77,9 +79,9 @@ const AudioListsPanel = ({
                   'audio-item',
                   { playing: isCurrentPlaying },
                   { pause: !playing },
-                  { remove: removeId === audio.id },
+                  { remove: removeId === audioId },
                 )}
-                onClick={() => onPlay(audio.id)}
+                onClick={() => onPlay(audioId)}
               >
                 <span className="group player-status">
                   <span className="player-icons">
@@ -102,7 +104,7 @@ const AudioListsPanel = ({
                   <span
                     className="group player-delete"
                     title={locale.clickToDeleteText(name)}
-                    onClick={onDelete(audio.id)}
+                    onClick={onDelete(audioId)}
                   >
                     {icon.close}
                   </span>

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__'

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,23 +1477,25 @@ 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
 
       // 列表循环
       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,15 +1839,16 @@ 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
   }
 
   _getPlayInfo = (audioLists = []) => {
     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,
       }
     })