fix(ui): save play mode for player (#3315)

* fix(ui): save play mode for player - 3019

* redux

* redux

ui/src/actions/player.js

@@ -6,6 +6,7 @@ export const PLAYER_CLEAR_QUEUE = 'PLAYER_CLEAR_QUEUE'
 export const PLAYER_PLAY_TRACKS = 'PLAYER_PLAY_TRACKS'
 export const PLAYER_CURRENT = 'PLAYER_CURRENT'
 export const PLAYER_SET_VOLUME = 'PLAYER_SET_VOLUME'
+export const PLAYER_SET_MODE = 'PLAYER_SET_MODE'
 
 export const setTrack = (data) => ({
   type: PLAYER_SET_TRACK,
@@ -89,3 +90,8 @@ export const setVolume = (volume) => ({
   type: PLAYER_SET_VOLUME,
   data: { volume },
 })
+
+export const setPlayMode = (mode) => ({
+  type: PLAYER_SET_MODE,
+  data: { mode },
+})

ui/src/audioplayer/Player.js

@@ -16,7 +16,13 @@ import useCurrentTheme from '../themes/useCurrentTheme'
 import config from '../config'
 import useStyle from './styles'
 import AudioTitle from './AudioTitle'
-import { clearQueue, currentPlaying, setVolume, syncQueue } from '../actions'
+import {
+  clearQueue,
+  currentPlaying,
+  setPlayMode,
+  setVolume,
+  syncQueue,
+} from '../actions'
 import PlayerToolbar from './PlayerToolbar'
 import { sendNotification } from '../utils'
 import subsonic from '../subsonic'
@@ -93,6 +99,7 @@ const Player = () => {
     () => ({
       theme: playerTheme,
       bounds: 'body',
+      playMode: playerState.mode,
       mode: 'full',
       loadAudioErrorPlayNext: false,
       autoPlayInitLoadPlayList: true,
@@ -121,7 +128,7 @@ const Player = () => {
       ),
       locale: locale(translate),
     }),
-    [gainInfo, isDesktop, playerTheme, translate],
+    [gainInfo, isDesktop, playerTheme, translate, playerState.mode],
   )
 
   const options = useMemo(() => {
@@ -294,6 +301,7 @@ const Player = () => {
         onAudioPlay={onAudioPlay}
         onAudioPlayTrackChange={onAudioPlayTrackChange}
         onAudioPause={onAudioPause}
+        onPlayModeChange={(mode) => dispatch(setPlayMode(mode))}
         onAudioEnded={onAudioEnded}
         onCoverClick={onCoverClick}
         onBeforeDestroy={onBeforeDestroy}

ui/src/reducers/playerReducer.js

@@ -9,6 +9,7 @@ import {
   PLAYER_SET_TRACK,
   PLAYER_SET_VOLUME,
   PLAYER_SYNC_QUEUE,
+  PLAYER_SET_MODE,
 } from '../actions'
 import config from '../config'
 
@@ -178,6 +179,13 @@ const reduceCurrent = (state, { data }) => {
   }
 }
 
+const reduceMode = (state, { data: { mode } }) => {
+  return {
+    ...state,
+    mode,
+  }
+}
+
 export const playerReducer = (previousState = initialState, payload) => {
   const { type } = payload
   switch (type) {
@@ -197,6 +205,8 @@ export const playerReducer = (previousState = initialState, payload) => {
       return reduceSyncQueue(previousState, payload)
     case PLAYER_CURRENT:
       return reduceCurrent(previousState, payload)
+    case PLAYER_SET_MODE:
+      return reduceMode(previousState, payload)
     default:
       return previousState
   }

ui/src/share/SharePlayer.js

@@ -39,7 +39,7 @@ const SharePlayer = () => {
       src: shareDownloadUrl(shareInfo?.id),
     })
   }
-  console.log(list)
+
   const options = {
     audioLists: list,
     mode: 'full',

ui/src/store/createAdminStore.js

@@ -58,7 +58,12 @@ const createAdminStore = ({
       const state = store.getState()
       saveState({
         theme: state.theme,
-        player: pick(state.player, ['queue', 'volume', 'savedPlayIndex']),
+        player: pick(state.player, [
+          'mode',
+          'queue',
+          'volume',
+          'savedPlayIndex',
+        ]),
         albumView: state.albumView,
         settings: state.settings,
       })