Upgrade to React Player 4.15.1

ui/src/audioplayer/Player.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
@@ -17,6 +17,7 @@ const useStyle = makeStyles((theme) => ({
 }))
 
 const Player = () => {
+  const [playIndex, setPlayIndex] = useState(0)
   const classes = useStyle()
   const translate = useTranslate()
   const currentTheme = useSelector((state) => state.theme)
@@ -28,7 +29,7 @@ const Player = () => {
       to={`/album/${audioInfo.albumId}/show`}
       className={classes.audioTitle}
     >
-      {`${audioInfo.name} - ${audioInfo.singer}`}
+      {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
     </Link>
   )
 
@@ -36,7 +37,8 @@ const Player = () => {
     theme: playerTheme,
     bounds: 'body',
     mode: 'full',
-    autoPlay: false,
+    autoPlay: true,
+    playIndex,
     preload: true,
     autoPlayInitLoadPlayList: true,
     loadAudioErrorPlayNext: false,
@@ -83,7 +85,6 @@ const Player = () => {
   const addQueueToOptions = (queue) => {
     return {
       ...defaultOptions,
-      autoPlay: false,
       clearPriorAudioLists: queue.clear,
       audioLists: queue.queue.map((item) => item),
     }
@@ -141,6 +142,9 @@ const Player = () => {
         onAudioPlay={OnAudioPlay}
         onAudioPause={onAudioPause}
         onAudioEnded={onAudioEnded}
+        onPlayIndexChange={(playIndex) => {
+          setPlayIndex(playIndex)
+        }}
       />
     )
   }