diff --git a/ui/src/actions/player.js b/ui/src/actions/player.js index 798f32ae1..70fa88f50 100644 --- a/ui/src/actions/player.js +++ b/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 = () => ({ diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js index 0d716dac9..8a3efe3b2 100644 --- a/ui/src/audioplayer/Player.js +++ b/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] ) diff --git a/ui/src/reducers/playerReducer.js b/ui/src/reducers/playerReducer.js index 34db1c784..1c7fa6092 100644 --- a/ui/src/reducers/playerReducer.js +++ b/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: diff --git a/ui/src/store/createAdminStore.js b/ui/src/store/createAdminStore.js index 4a6c152fb..bf631ef34 100644 --- a/ui/src/store/createAdminStore.js +++ b/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, })