Move the shuffleAlbum logic into an action

ui/src/album/AlbumActions.js

@@ -8,7 +8,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { playAlbum } from '../audioplayer'
+import { playAlbum, shuffleAlbum } from '../audioplayer'
 
 export const AlbumActions = ({
   className,
@@ -28,17 +28,6 @@ export const AlbumActions = ({
     return acc
   }, {})
 
-  const shuffle = (data) => {
-    const ids = Object.keys(data)
-    for (let i = ids.length - 1; i > 0; i--) {
-      let j = Math.floor(Math.random() * (i + 1))
-      ;[ids[i], ids[j]] = [ids[j], ids[i]]
-    }
-    const shuffled = {}
-    ids.forEach((id) => (shuffled[id] = data[id]))
-    return shuffled
-  }
-
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       <Button
@@ -51,9 +40,7 @@ export const AlbumActions = ({
       </Button>
       <Button
         onClick={() => {
-          const shuffled = shuffle(filteredData)
+          dispatch(shuffleAlbum(filteredData))
-          const firstId = Object.keys(shuffled)[0]
-          dispatch(playAlbum(firstId, shuffled))
         }}
         label={translate('resources.album.actions.shuffle')}
       >

ui/src/audioplayer/index.js

@@ -1,4 +1,10 @@
 import Player from './Player'
-import { addTrack, setTrack, playQueueReducer, playAlbum } from './queue'
+import {
+  addTrack,
+  setTrack,
+  playQueueReducer,
+  playAlbum,
+  shuffleAlbum,
+} from './queue'
 
-export { Player, addTrack, setTrack, playAlbum, playQueueReducer }
+export { Player, addTrack, setTrack, playAlbum, playQueueReducer, shuffleAlbum }

ui/src/audioplayer/queue.js

@@ -26,6 +26,27 @@ const setTrack = (data) => ({
   data,
 })
 
+const shuffle = (data) => {
+  const ids = Object.keys(data)
+  for (let i = ids.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1))
+    ;[ids[i], ids[j]] = [ids[j], ids[i]]
+  }
+  const shuffled = {}
+  ids.forEach((id) => (shuffled[id] = data[id]))
+  return shuffled
+}
+
+const shuffleAlbum = (data) => {
+  const shuffled = shuffle(data)
+  const firstId = Object.keys(shuffled)[0]
+  return {
+    type: PLAYER_PLAY_ALBUM,
+    id: firstId,
+    data: shuffled,
+  }
+}
+
 const playAlbum = (id, data) => ({
   type: PLAYER_PLAY_ALBUM,
   id,
@@ -109,4 +130,12 @@ const playQueueReducer = (
   }
 }
 
-export { addTrack, setTrack, playAlbum, syncQueue, scrobble, playQueueReducer }
+export {
+  addTrack,
+  setTrack,
+  playAlbum,
+  syncQueue,
+  scrobble,
+  shuffleAlbum,
+  playQueueReducer,
+}