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,