diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js index 1f6610295..d699dcc33 100644 --- a/ui/src/album/AlbumGridView.js +++ b/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 }) => { } - actionIcon={ - - } + actionIcon={} /> ))} diff --git a/ui/src/album/GridButton.js b/ui/src/album/GridButton.js deleted file mode 100644 index 557b6ac1c..000000000 --- a/ui/src/album/GridButton.js +++ /dev/null @@ -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 ( - - - - ) - } - - if (error) { - return ( - - - - ) - } - - return ( - { - e.preventDefault() - e.stopPropagation() - dispatch(playAlbum(ids[0], data)) - }}> - - - ) -} -export default GridButton \ No newline at end of file diff --git a/ui/src/album/GridMenu.js b/ui/src/album/GridMenu.js new file mode 100644 index 000000000..4940562c3 --- /dev/null +++ b/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 ( + + + + ) + } + + if (error) { + return ( + + + + ) + } + + 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 ( +
+ + + + + {options.map((option) => ( + + {option[1]} + + ))} + +
+ ) +} +export default GridMenu