replaced GridButton with GridMenu

ui/src/album/AlbumGridView.js

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import { linkToRecord, Loading } from 'react-admin'
 import subsonic from '../subsonic'
 import { ArtistLinkField } from './ArtistLinkField'
-import GridButton from './GridButton.js'
+import GridMenu from './GridMenu.js'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
     height: '100%',
   },
   tileBar: {
-    textAlign: 'center',
+    textAlign: 'left',
     background:
       'linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
   },
@@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    textAlign: 'center',
+    textAlign: 'left',
     fontSize: '1em',
   },
   artistLink: {
@@ -81,9 +81,7 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
                   </ArtistLinkField>
                 </div>
               }
-			  actionIcon={
-				<GridButton id={id}/>
-			  }
+              actionIcon={<GridMenu id={id} />}
             />
           </GridListTile>
         ))}

ui/src/album/GridButton.js

@@ -1,43 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { playAlbum } from '../audioplayer'
-import { useGetList} from 'react-admin'
-import IconButton from '@material-ui/core/IconButton'
-import PlayIcon from '@material-ui/icons/PlayCircleFilled'
-
-const GridButton = (props) => {
-const dispatch = useDispatch()
-const { ids, data, loading, error } = useGetList(
-	'albumSong', 
-	{  }, 
-	{ field: 'trackNumber', order: 'ASC' }, 
-	{ album_id: props.id},
-	)
-
-	if (loading) {
-	    return (
-	      <IconButton>
-	        <PlayIcon/>
-	      </IconButton>
-	    )
-	}
-
-	if (error) {
-	    return (
-	      <IconButton>
-	        <PlayIcon/>
-	      </IconButton>
-	    )
-	}
-
-    return (
-      <IconButton onClick={(e) => {
-		  e.preventDefault()
-		  e.stopPropagation()
-		  dispatch(playAlbum(ids[0], data))
-	  }}>
-        <PlayIcon/>
-      </IconButton>
-    )
-}
-export default GridButton

ui/src/album/GridMenu.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import IconButton from '@material-ui/core/IconButton'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import { useDispatch } from 'react-redux'
+import { playAlbum, shuffleAlbum } from '../audioplayer'
+import { useGetList } from 'react-admin'
+
+const GridMenu = (props) => {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+  const dispatch = useDispatch()
+  const { ids, data, loading, error } = useGetList(
+    'albumSong',
+    {},
+    { field: 'trackNumber', order: 'ASC' },
+    { album_id: props.id }
+  )
+
+  if (loading) {
+    return (
+      <IconButton>
+        <MoreVertIcon />
+      </IconButton>
+    )
+  }
+
+  if (error) {
+    return (
+      <IconButton>
+        <MoreVertIcon />
+      </IconButton>
+    )
+  }
+
+  const options = [
+    [1, 'Play'],
+    [2, 'Shuffle'],
+  ]
+
+  const open = Boolean(anchorEl)
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+  }
+
+  const handleClose = (e) => {
+    e.preventDefault()
+    setAnchorEl(null)
+  }
+
+  const handleItemClick = (e) => {
+    e.preventDefault()
+    setAnchorEl(null)
+    const value = e.target.getAttribute('value')
+    if (value === '1') {
+      dispatch(playAlbum(ids[0], data))
+    }
+    if (value === '2') {
+      dispatch(shuffleAlbum(data))
+    }
+  }
+
+  return (
+    <div>
+      <IconButton
+        aria-label="more"
+        aria-controls="long-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <Menu
+        id="long-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+      >
+        {options.map((option) => (
+          <MenuItem value={option[0]} key={option[0]} onClick={handleItemClick}>
+            {option[1]}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}
+export default GridMenu