Add "Shuffle All" option to Song List. Closes #256

resources/i18n/pt.json

@@ -23,7 +23,8 @@
             "actions": {
                 "addToQueue": "Adicionar à fila",
                 "playNow": "Tocar agora",
-                "addToPlaylist": "Adicionar à playlist"
+                "addToPlaylist": "Adicionar à playlist",
+                "shuffleAll": "Aleatório"
             }
         },
         "album": {

ui/src/i18n/en.json

@@ -24,7 +24,8 @@
             "actions": {
                 "addToQueue": "Play Later",
                 "addToPlaylist": "Add to Playlist",
-                "playNow": "Play Now"
+                "playNow": "Play Now",
+                "shuffleAll": "Shuffle All"
             }
         },
         "album": {

ui/src/song/SongList.js

@@ -23,6 +23,7 @@ import {
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
 import { SongBulkActions } from './SongBulkActions'
+import { SongListActions } from './SongListActions'
 import { AlbumLinkField } from './AlbumLinkField'
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 
@@ -62,6 +63,7 @@ const SongList = (props) => {
         sort={{ field: 'title', order: 'ASC' }}
         exporter={false}
         bulkActionButtons={<SongBulkActions />}
+        actions={<SongListActions />}
         filters={<SongFilter />}
         perPage={isXsmall ? 50 : 15}
       >

ui/src/song/SongListActions.js

@@ -0,0 +1,85 @@
+import React, { cloneElement } from 'react'
+import { useDispatch } from 'react-redux'
+import {
+  Button,
+  sanitizeListRestProps,
+  TopToolbar,
+  useDataProvider,
+  useTranslate,
+  useNotify,
+} from 'react-admin'
+import ShuffleIcon from '@material-ui/icons/Shuffle'
+import { playTracks } from '../audioplayer'
+
+const ShuffleAllButton = () => {
+  const translate = useTranslate()
+  const dataProvider = useDataProvider()
+  const dispatch = useDispatch()
+  const notify = useNotify()
+
+  const handleOnClick = () => {
+    dataProvider
+      .getList('song', {
+        pagination: { page: 1, perPage: 200 },
+        sort: { field: 'random', order: 'ASC' },
+        filter: {},
+      })
+      .then((res) => {
+        const data = {}
+        res.data.forEach((song) => {
+          data[song.id] = song
+        })
+        dispatch(playTracks(data))
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+  }
+
+  return (
+    <Button
+      onClick={handleOnClick}
+      label={translate('resources.song.actions.shuffleAll')}
+    >
+      <ShuffleIcon />
+    </Button>
+  )
+}
+
+export const SongListActions = ({
+  currentSort,
+  className,
+  resource,
+  filters,
+  displayedFilters,
+  filterValues,
+  permanentFilter,
+  exporter,
+  basePath,
+  selectedIds,
+  onUnselectItems,
+  showFilter,
+  maxResults,
+  total,
+  ids,
+  ...rest
+}) => {
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      {filters &&
+        cloneElement(filters, {
+          resource,
+          showFilter,
+          displayedFilters,
+          filterValues,
+          context: 'button',
+        })}
+      <ShuffleAllButton />
+    </TopToolbar>
+  )
+}
+
+SongListActions.defaultProps = {
+  selectedIds: [],
+  onUnselectItems: () => null,
+}