when "id" elements are present in audioList, sorting is messed up

[binary1230]

Version

tested on 4.22.1 and 4.21.1

Description

Steps

Given input like this:

 [ {
    "id": 0,
    "name": "Something",
    "musicSrc": "Something1.mp3"
  },  {
    "id": 1,
    "name": "Something else",
    "musicSrc": "whatever.mp3"
  }]

the key thing is: "id" is a field I'm passing in. it comes from another part of my app and I expected it to be ignored by react-music-player.

However, react-music-player gets confused about the first item in the playlist (with .id == 0) and reoders it at the end. I didn't realize that "id" was a field used internally. The conflict causes odd behavior like the audiolist sorting being messed up.

If I remove the "id" field, everything works as inteded. If I leave it, everything is off by one when using playIndex.

Reproduce Link

Steps to Reproduce

Expected Behavior

Current Behavior

System information

Comments

I'll try and post a better repro when I have time.

It has something to do with the internal code looking up the track id:

react-music-player/src/index.js

Line 837 in d76cb6b

const playIndex = audioLists.findIndex((audio) => audio.id === playId)

react-music-player/src/index.js

Line 1864 in d76cb6b

id: uuId(),

id: uuId(),

Possible solutions:

1. Filter out "id" from any audiolist data being passed in
2. Throw an error if "id" exists on audiolist data
3. Fix underlying code to not use the "id" field (maybe delete audio.id)

[lijinke666]

Thank your feeback, you're right, it really shouldn't be use id attr, i will optimize the feature later

[github-actions]

Hello @binary1230, This bug/feature has been fixed/done and will be released together with the next release.
你好 @binary1230，这个bug/feature 已经修复/完成, 会在下个版本一起发布。

[github-actions]

🎉 This issue has been resolved in version 4.23.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[binary1230]

thanks much! looks great