Add current playing track id to the Redux store

ui/src/audioplayer/Player.js

@@ -4,7 +4,7 @@ import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
 import subsonic from '../subsonic'
-import { scrobbled, syncQueue } from './queue'
+import { scrobble, syncQueue } from './queue'
 import themes from '../themes'
 
 const Player = () => {
@@ -76,7 +76,7 @@ const Player = () => {
   const { authenticated } = useAuthState()
 
   const OnAudioListsChange = (currentPlayIndex, audioLists) => {
-    dispatch(syncQueue(audioLists))
+    dispatch(syncQueue(currentPlayIndex, audioLists))
   }
 
   const OnAudioProgress = (info) => {
@@ -86,13 +86,14 @@ const Player = () => {
     }
     const item = queue.queue.find((item) => item.trackId === info.trackId)
     if (item && !item.scrobbled) {
-      dispatch(scrobbled(info.trackId))
+      dispatch(scrobble(info.trackId, true))
       subsonic.scrobble(info.trackId, true)
     }
   }
 
   const OnAudioPlay = (info) => {
     if (info.duration) {
+      dispatch(scrobble(info.trackId, false))
       subsonic.scrobble(info.trackId, false)
       dataProvider.getOne('keepalive', { id: info.trackId })
     }

ui/src/audioplayer/queue.js

@@ -28,18 +28,20 @@ const setTrack = (data) => ({
 
 const playAlbum = (id, data) => ({
   type: PLAYER_PLAY_ALBUM,
-  data,
   id,
-})
-
-const syncQueue = (data) => ({
-  type: PLAYER_SYNC_QUEUE,
   data,
 })
 
-const scrobbled = (id) => ({
+const syncQueue = (id, data) => ({
+  type: PLAYER_SYNC_QUEUE,
+  id,
+  data,
+})
+
+const scrobble = (id, submit) => ({
   type: PLAYER_SCROBBLE,
-  data: id,
+  id,
+  submit,
 })
 
 const playQueueReducer = (
@@ -59,17 +61,31 @@ const playQueueReducer = (
         queue: [mapToAudioLists(data)],
         clear: true,
         playing: true,
+        current: data.id,
       }
     case PLAYER_SYNC_QUEUE:
-      return { ...previousState, queue: data, clear: false }
+      const currentTrack = data.find((item) => item.id === data.id) || {}
+      return {
+        ...previousState,
+        queue: data,
+        clear: false,
+        current: currentTrack.id,
+      }
     case PLAYER_SCROBBLE:
       const newQueue = previousState.queue.map((item) => {
         return {
           ...item,
-          scrobbled: item.scrobbled || item.trackId === data,
+          scrobbled:
+            item.scrobbled || (item.trackId === payload.id && payload.submit),
         }
       })
-      return { ...previousState, queue: newQueue, clear: false, playing: true }
+      return {
+        ...previousState,
+        queue: newQueue,
+        clear: false,
+        playing: true,
+        current: payload.id,
+      }
     case PLAYER_PLAY_ALBUM:
       queue = []
       let match = false
@@ -81,10 +97,16 @@ const playQueueReducer = (
           queue.push(mapToAudioLists(data[id]))
         }
       })
-      return { ...previousState, queue, clear: true, playing: true }
+      return {
+        ...previousState,
+        queue,
+        clear: true,
+        playing: true,
+        current: payload.id,
+      }
     default:
       return previousState
   }
 }
 
-export { addTrack, setTrack, playAlbum, syncQueue, scrobbled, playQueueReducer }
+export { addTrack, setTrack, playAlbum, syncQueue, scrobble, playQueueReducer }

ui/src/subsonic/index.js

@@ -23,8 +23,7 @@ const url = (command, id, options) => {
   return baseUrl(url)
 }
 
-const scrobble = (id, submit) => {
+const scrobble = (id, submit) =>
-  return fetchUtils.fetchJson(url('scrobble', id, { submission: submit }))
+  fetchUtils.fetchJson(url('scrobble', id, { submission: submit }))
-}
 
 export default { url, scrobble }