diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js index b6fa35c80..04ac4bf79 100644 --- a/ui/src/album/AlbumGridView.js +++ b/ui/src/album/AlbumGridView.js @@ -7,7 +7,7 @@ import { linkToRecord, Loading } from 'react-admin' import { withContentRect } from 'react-measure' import subsonic from '../subsonic' import { ArtistLinkField } from '../common' -import AlbumContextMenu from './AlbumContextMenu.js' +import AlbumContextMenu from '../common/AlbumContextMenu.js' const useStyles = makeStyles((theme) => ({ root: { diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js index 1816ec3cc..b62fc43dd 100644 --- a/ui/src/album/AlbumListView.js +++ b/ui/src/album/AlbumListView.js @@ -15,7 +15,7 @@ import { SimpleList, } from '../common' import { useMediaQuery } from '@material-ui/core' -import AlbumContextMenu from './AlbumContextMenu' +import AlbumContextMenu from '../common/AlbumContextMenu' const AlbumDetails = (props) => { return ( diff --git a/ui/src/album/AlbumContextMenu.js b/ui/src/common/AlbumContextMenu.js similarity index 67% rename from ui/src/album/AlbumContextMenu.js rename to ui/src/common/AlbumContextMenu.js index 117f7f19b..796b842e9 100644 --- a/ui/src/album/AlbumContextMenu.js +++ b/ui/src/common/AlbumContextMenu.js @@ -8,15 +8,24 @@ import { makeStyles } from '@material-ui/core/styles' import { useDataProvider, useNotify, useTranslate } from 'react-admin' import { addTracks, playTracks, shuffleTracks } from '../audioplayer' import { openAddToPlaylist } from '../dialogs/dialogState' +import StarIcon from '@material-ui/icons/Star' +import PropTypes from 'prop-types' const useStyles = makeStyles({ - icon: { + noWrap: { + whiteSpace: 'nowrap', + }, + menu: { color: (props) => props.color, + visibility: (props) => (props.visible ? 'visible' : 'hidden'), + }, + star: { + visibility: 'hidden', // TODO: Invisible for now }, }) -const AlbumContextMenu = ({ record, color }) => { - const classes = useStyles({ color }) +const AlbumContextMenu = ({ record, discNumber, color, visible }) => { + const classes = useStyles({ color, visible }) const dataProvider = useDataProvider() const dispatch = useDispatch() const translate = useTranslate() @@ -54,6 +63,20 @@ const AlbumContextMenu = ({ record, color }) => { e.stopPropagation() } + let extractSongsData = function (response, discNumber) { + const data = response.data.reduce( + (acc, cur) => ({ ...acc, [cur.id]: cur }), + {} + ) + let ids = null + if (discNumber) { + ids = response.data + .filter((r) => r.discNumber === discNumber) + .map((r) => r.id) + } + return { data, ids } + } + const handleItemClick = (e) => { setAnchorEl(null) const key = e.target.getAttribute('value') @@ -64,11 +87,8 @@ const AlbumContextMenu = ({ record, color }) => { filter: { album_id: record.id }, }) .then((response) => { - const adata = response.data.reduce( - (acc, cur) => ({ ...acc, [cur.id]: cur }), - {} - ) - dispatch(options[key].action(adata)) + let { data, ids } = extractSongsData(response, discNumber) + dispatch(options[key].action(data, ids)) }) .catch(() => { notify('ra.page.error', 'warning') @@ -80,12 +100,15 @@ const AlbumContextMenu = ({ record, color }) => { const open = Boolean(anchorEl) return ( -