diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js index 35ebc4bf7..95c78dcfe 100644 --- a/ui/src/album/AlbumGridView.js +++ b/ui/src/album/AlbumGridView.js @@ -12,7 +12,7 @@ import { linkToRecord, Loading } from 'react-admin' import { withContentRect } from 'react-measure' import subsonic from '../subsonic' import { ArtistLinkField, RangeField } from '../common' -import AlbumContextMenu from '../common/AlbumContextMenu.js' +import { AlbumContextMenu } from '../common' const useStyles = makeStyles((theme) => ({ root: { diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js index 9862aa217..22fcb0555 100644 --- a/ui/src/album/AlbumListView.js +++ b/ui/src/album/AlbumListView.js @@ -17,7 +17,7 @@ import { SimpleList, } from '../common' import { useMediaQuery } from '@material-ui/core' -import AlbumContextMenu from '../common/AlbumContextMenu' +import { AlbumContextMenu } from '../common' const AlbumDetails = (props) => { return ( diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js index 1b5ee4afb..9329a371c 100644 --- a/ui/src/artist/ArtistList.js +++ b/ui/src/artist/ArtistList.js @@ -1,13 +1,21 @@ -import React from 'react' +import React, { cloneElement, isValidElement, useState } from 'react' import { Datagrid, + DatagridBody, + DatagridRow, Filter, NumberField, SearchInput, TextField, } from 'react-admin' -import { List, useGetHandleArtistClick } from '../common' -import { withWidth } from '@material-ui/core' +import { useMediaQuery, withWidth } from '@material-ui/core' +import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' +import { + ArtistContextMenu, + List, + SimpleList, + useGetHandleArtistClick, +} from '../common' const ArtistFilter = (props) => ( @@ -15,22 +23,67 @@ const ArtistFilter = (props) => ( ) -const ArtistList = ({ width, ...props }) => { - const handleArtistLink = useGetHandleArtistClick(width) +const ArtistDatagridRow = ({ children, ...rest }) => { + const [visible, setVisible] = useState(false) + const childCount = React.Children.count(children) return ( - } + setVisible(true)} + onMouseLeave={() => setVisible(false)} + {...rest} > - - - - - - + {React.Children.map( + children, + (child, index) => + child && + isValidElement(child) && + (index < childCount - 1 + ? child + : cloneElement(child, { + visible, + })) + )} + + ) +} + +const ArtistDatagridBody = (props) => ( + } /> +) +const ArtistDatagrid = (props) => ( + } /> +) + +const ArtistList = ({ width, ...rest }) => { + const handleArtistLink = useGetHandleArtistClick(width) + const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) + return ( + <> + } + > + {isXsmall ? ( + r.name} + linkType={'show'} + rightIcon={(r) => } + {...rest} + /> + ) : ( + + + + + + + )} + + + ) } diff --git a/ui/src/common/AlbumContextMenu.js b/ui/src/common/ContextMenus.js similarity index 81% rename from ui/src/common/AlbumContextMenu.js rename to ui/src/common/ContextMenus.js index 2646c19f5..e082c9b31 100644 --- a/ui/src/common/AlbumContextMenu.js +++ b/ui/src/common/ContextMenus.js @@ -25,7 +25,7 @@ const useStyles = makeStyles({ }, }) -const AlbumContextMenu = ({ record, discNumber, color, visible }) => { +const ContextMenu = ({ record, color, visible, songQueryParams }) => { const classes = useStyles({ color, visible }) const dataProvider = useDataProvider() const dispatch = useDispatch() @@ -87,11 +87,7 @@ const AlbumContextMenu = ({ record, discNumber, color, visible }) => { const key = e.target.getAttribute('value') if (options[key].needData) { dataProvider - .getList('albumSong', { - pagination: { page: 1, perPage: -1 }, - sort: { field: 'discNumber, trackNumber', order: 'ASC' }, - filter: { album_id: record.id, disc_number: discNumber }, - }) + .getList('albumSong', songQueryParams) .then((response) => { let { data, ids } = extractSongsData(response) options[key].action(data, ids) @@ -140,6 +136,17 @@ const AlbumContextMenu = ({ record, discNumber, color, visible }) => { ) } +export const AlbumContextMenu = (props) => ( + +) + AlbumContextMenu.propTypes = { record: PropTypes.object, discNumber: PropTypes.number, @@ -152,4 +159,24 @@ AlbumContextMenu.defaultProps = { addLabel: true, } -export default AlbumContextMenu +export const ArtistContextMenu = (props) => ( + +) + +ArtistContextMenu.propTypes = { + record: PropTypes.object, + visible: PropTypes.bool, + color: PropTypes.string, +} + +ArtistContextMenu.defaultProps = { + visible: true, + addLabel: true, +} diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js index 3206f63eb..7b9614683 100644 --- a/ui/src/common/SongDatagrid.js +++ b/ui/src/common/SongDatagrid.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types' import { makeStyles } from '@material-ui/core/styles' import AlbumIcon from '@material-ui/icons/Album' import { playTracks } from '../audioplayer' -import AlbumContextMenu from './AlbumContextMenu' +import { AlbumContextMenu } from '../common' const useStyles = makeStyles({ row: { diff --git a/ui/src/common/index.js b/ui/src/common/index.js index 0ccf8336e..44dddb039 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 { AlbumContextMenu, ArtistContextMenu } from './ContextMenus' export { Title, @@ -33,6 +34,8 @@ export { DocLink, formatRange, ArtistLinkField, + AlbumContextMenu, + ArtistContextMenu, useGetHandleArtistClick, SongContextMenu, QuickFilter,