diff --git a/ui/src/common/ShuffleAllButton.js b/ui/src/common/ShuffleAllButton.js
new file mode 100644
index 000000000..114c0ab88
--- /dev/null
+++ b/ui/src/common/ShuffleAllButton.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Button, useDataProvider, useNotify, useTranslate } from 'react-admin'
+import { useDispatch } from 'react-redux'
+import ShuffleIcon from '@material-ui/icons/Shuffle'
+import { playTracks } from '../audioplayer'
+import PropTypes from 'prop-types'
+
+const ShuffleAllButton = ({ filters }) => {
+  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: filters,
+      })
+      .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>
+  )
+}
+
+ShuffleAllButton.propTypes = {
+  filters: PropTypes.object,
+}
+ShuffleAllButton.defaultProps = {
+  filters: {},
+}
+
+export default ShuffleAllButton
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index 44dddb039..cc64690dc 100644
--- a/ui/src/common/index.js
+++ b/ui/src/common/index.js
@@ -15,6 +15,7 @@ import SongContextMenu from './SongContextMenu'
 import SongTitleField from './SongTitleField'
 import QuickFilter from './QuickFilter'
 import useAlbumsPerPage from './useAlbumsPerPage'
+import ShuffleAllButton from './ShuffleAllButton'
 import { AlbumContextMenu, ArtistContextMenu } from './ContextMenus'
 
 export {
@@ -40,4 +41,5 @@ export {
   SongContextMenu,
   QuickFilter,
   useAlbumsPerPage,
+  ShuffleAllButton,
 }
diff --git a/ui/src/song/SongListActions.js b/ui/src/song/SongListActions.js
index 4a25ed2d8..9352dcc4d 100644
--- a/ui/src/song/SongListActions.js
+++ b/ui/src/song/SongListActions.js
@@ -1,50 +1,6 @@
 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>
-  )
-}
+import { sanitizeListRestProps, TopToolbar } from 'react-admin'
+import { ShuffleAllButton } from '../common'
 
 export const SongListActions = ({
   currentSort,
@@ -74,7 +30,7 @@ export const SongListActions = ({
           filterValues,
           context: 'button',
         })}
-      <ShuffleAllButton />
+      <ShuffleAllButton filters={filterValues} />
     </TopToolbar>
   )
 }