Fix arranging songs in PlayQueue

ui/src/actions/player.js

@@ -68,10 +68,12 @@ export const playTracks = (data, ids, selectedId) => {
   }
 }
 
-export const syncQueue = (id, data) => ({
+export const syncQueue = (audioInfo, audioLists) => ({
   type: PLAYER_SYNC_QUEUE,
-  id,
-  data,
+  data: {
+    audioInfo,
+    audioLists,
+  },
 })
 
 export const clearQueue = () => ({

ui/src/audioplayer/Player.js

@@ -82,8 +82,7 @@ const Player = () => {
   }, [playerState, defaultOptions])
 
   const onAudioListsChange = useCallback(
-    (currentPlayIndex, audioLists) =>
-      dispatch(syncQueue(currentPlayIndex, audioLists)),
+    (_, audioLists, audioInfo) => dispatch(syncQueue(audioInfo, audioLists)),
     [dispatch]
   )
 

ui/src/reducers/playerReducer.js

@@ -17,6 +17,7 @@ const initialState = {
   current: {},
   clear: false,
   volume: 1,
+  savedPlayIndex: 0,
 }
 
 const mapToAudioLists = (item) => {
@@ -58,15 +59,6 @@ const reducePlayTracks = (state, { data, id }) => {
   }
 }
 
-const reduceSyncQueue = (state, { data }) => {
-  const current = data.length > 0 ? state.current : {}
-  return {
-    ...state,
-    current,
-    queue: data,
-  }
-}
-
 const reduceSetTrack = (state, { data }) => {
   return {
     ...state,
@@ -103,13 +95,9 @@ const reducePlayNext = (state, { data }) => {
     })
   }
 
-  const playIndex = state.queue.findIndex((item) => item.uuid === current.uuid)
   return {
     ...state,
     queue: newQueue,
-    // TODO: This is a workaround for a bug in the player that resets the playIndex to 0 when the current playing
-    // song is not the first one. It is still not great, as it resets the current playing song
-    playIndex,
     clear: true,
   }
 }
@@ -121,21 +109,32 @@ const reduceSetVolume = (state, { data: { volume } }) => {
   }
 }
 
-const reduceCurrent = (state, { data }) => {
-  const current = data.ended
-    ? {}
-    : {
-        idx: data.idx,
-        trackId: data.trackId,
-        paused: data.paused,
-        uuid: data.uuid,
-        song: data.song,
-      }
-  const playIndex = state.queue.findIndex((item) => item.uuid === current.uuid)
+const reduceSyncQueue = (state, { data: { audioInfo, audioLists } }) => {
+  const current = audioLists.length > 0 ? audioInfo : {}
+  const savedPlayIndex = audioLists.findIndex(
+    (item) => item.uuid === current.uuid
+  )
+
   return {
     ...state,
     current,
-    playIndex: playIndex > -1 ? playIndex : undefined,
+    savedPlayIndex,
+    queue: audioLists,
+    clear: false,
+    playIndex: undefined,
+  }
+}
+
+const reduceCurrent = (state, { data }) => {
+  const current = data.ended ? {} : data
+  const savedPlayIndex = state.queue.findIndex(
+    (item) => item.uuid === current.uuid
+  )
+  return {
+    ...state,
+    current,
+    playIndex: undefined,
+    savedPlayIndex,
     volume: data.volume,
   }
 }
@@ -153,10 +152,10 @@ export const playerReducer = (previousState = initialState, payload) => {
       return reduceAddTracks(previousState, payload)
     case PLAYER_PLAY_NEXT:
       return reducePlayNext(previousState, payload)
-    case PLAYER_SYNC_QUEUE:
-      return reduceSyncQueue(previousState, payload)
     case PLAYER_SET_VOLUME:
       return reduceSetVolume(previousState, payload)
+    case PLAYER_SYNC_QUEUE:
+      return reduceSyncQueue(previousState, payload)
     case PLAYER_CURRENT:
       return reduceCurrent(previousState, payload)
     default:

ui/src/store/createAdminStore.js

@@ -37,6 +37,9 @@ const createAdminStore = ({
     compose
 
   const persistedState = loadState()
+  if (persistedState?.player?.savedPlayIndex) {
+    persistedState.player.playIndex = persistedState.player.savedPlayIndex
+  }
   const store = createStore(
     resettableAppReducer,
     persistedState,
@@ -48,7 +51,7 @@ const createAdminStore = ({
       const state = store.getState()
       saveState({
         theme: state.theme,
-        player: pick(state.player, ['queue', 'volume', 'playIndex']),
+        player: pick(state.player, ['queue', 'volume', 'savedPlayIndex']),
         albumView: state.albumView,
         settings: state.settings,
       })