feat: persist the queue in the localStorage

ui/src/album/AlbumDetails.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
 import { useTranslate } from 'react-admin'
-import { subsonicUrl } from '../subsonic'
+import subsonic from '../subsonic'
 import { DurationField, formatRange } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
@@ -21,8 +21,8 @@ const AlbumDetails = ({ classes, record }) => {
   return (
     <Card className={classes.container}>
       <CardMedia
-        image={subsonicUrl('getCoverArt', record.coverArtId || 'not_found', {
-          size: 500
+        image={subsonic.url('getCoverArt', record.coverArtId || 'not_found', {
+          size: 300
         })}
         className={classes.albumCover}
       />

ui/src/album/AlbumGridView.js

@@ -12,12 +12,12 @@ import withWidth from '@material-ui/core/withWidth'
 import { Link } from 'react-router-dom'
 import { linkToRecord } from 'ra-core'
 import { Loading } from 'react-admin'
-import { subsonicUrl } from '../subsonic'
 import AllInclusiveIcon from '@material-ui/icons/AllInclusive'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import StarIcon from '@material-ui/icons/Star'
 import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
+import subsonic from '../subsonic'
 import {
   ALBUM_LIST_ALL,
   ALBUM_LIST_NEWEST,
@@ -104,7 +104,7 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
             to={linkToRecord(basePath, data[id].id, 'show')}
           >
             <img
-              src={subsonicUrl(
+              src={subsonic.url(
                 'getCoverArt',
                 data[id].coverArtId || 'not_found',
                 { size: 300 }

ui/src/audioplayer/Player.js

@@ -1,14 +1,10 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import {
-  fetchUtils,
-  useAuthState,
-  useDataProvider,
-  useTranslate
-} from 'react-admin'
+import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
-import { scrobble, syncQueue } from './queue'
+import subsonic from '../subsonic'
+import { scrobbled, syncQueue } from './queue'
 
 const Player = () => {
   const translate = useTranslate()
@@ -64,14 +60,14 @@ const Player = () => {
     }
     const item = queue.queue.find((item) => item.id === info.id)
     if (item && !item.scrobbled) {
-      dispatch(scrobble(info.id))
-      fetchUtils.fetchJson(info.scrobble(true))
+      dispatch(scrobbled(info.id))
+      subsonic.scrobble(info.id, true)
     }
   }
 
   const OnAudioPlay = (info) => {
     if (info.duration) {
-      fetchUtils.fetchJson(info.scrobble(false))
+      subsonic.scrobble(info.id, false)
       dataProvider.getOne('keepalive', { id: info.id })
     }
   }

ui/src/audioplayer/queue.js

@@ -1,5 +1,5 @@
 import 'react-jinke-music-player/assets/index.css'
-import { subsonicUrl } from '../subsonic'
+import subsonic from '../subsonic'
 
 const PLAYER_ADD_TRACK = 'PLAYER_ADD_TRACK'
 const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
@@ -11,9 +11,8 @@ const mapToAudioLists = (item) => ({
   id: item.id,
   name: item.title,
   singer: item.artist,
-  cover: subsonicUrl('getCoverArt', item.id, { size: 300 }),
-  musicSrc: subsonicUrl('stream', item.id, { ts: true }),
-  scrobble: (submit) => subsonicUrl('scrobble', item.id, { submission: submit })
+  cover: subsonic.url('getCoverArt', item.id, { size: 300 }),
+  musicSrc: subsonic.url('stream', item.id, { ts: true })
 })
 
 const addTrack = (data) => ({
@@ -37,7 +36,7 @@ const syncQueue = (data) => ({
   data
 })
 
-const scrobble = (id) => ({
+const scrobbled = (id) => ({
   type: PLAYER_SCROBBLE,
   data: id
 })
@@ -82,4 +81,4 @@ const playQueueReducer = (
   }
 }
 
-export { addTrack, setTrack, playAlbum, syncQueue, scrobble, playQueueReducer }
+export { addTrack, setTrack, playAlbum, syncQueue, scrobbled, playQueueReducer }

ui/src/store/createAdminStore.js

@@ -47,7 +47,7 @@ export default ({
       const state = store.getState()
       saveState({
         theme: state.theme,
-        // queue: state.queue, TODO: Need to make queue serializable (remove functions from it)
+        queue: state.queue,
         albumView: state.albumView
       })
     }),

ui/src/subsonic/index.js

@@ -1,4 +1,6 @@
-const subsonicUrl = (command, id, options) => {
+import { fetchUtils } from 'react-admin'
+
+const url = (command, id, options) => {
   const params = new URLSearchParams()
   params.append('u', localStorage.getItem('username'))
   params.append('t', localStorage.getItem('subsonic-token'))
@@ -19,4 +21,8 @@ const subsonicUrl = (command, id, options) => {
   return `rest/${command}?${params.toString()}`
 }
 
-export { subsonicUrl }
+const scrobble = (id, submit) => {
+  return fetchUtils.fetchJson(url('scrobble', id, { submission: submit }))
+}
+
+export default { url, scrobble }