Add artist context menu

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: {

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 (

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) => (
   <Filter {...props}>
@@ -15,22 +23,67 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const ArtistList = ({ width, ...props }) => {
-  const handleArtistLink = useGetHandleArtistClick(width)
+const ArtistDatagridRow = ({ children, ...rest }) => {
+  const [visible, setVisible] = useState(false)
+  const childCount = React.Children.count(children)
   return (
-    <List
-      {...props}
-      sort={{ field: 'name', order: 'ASC' }}
-      exporter={false}
-      bulkActionButtons={false}
-      filters={<ArtistFilter />}
+    <DatagridRow
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      {...rest}
     >
-      <Datagrid rowClick={handleArtistLink}>
-        <TextField source="name" />
-        <NumberField source="albumCount" sortByOrder={'DESC'} />
-        <NumberField source="songCount" sortByOrder={'DESC'} />
-      </Datagrid>
-    </List>
+      {React.Children.map(
+        children,
+        (child, index) =>
+          child &&
+          isValidElement(child) &&
+          (index < childCount - 1
+            ? child
+            : cloneElement(child, {
+                visible,
+              }))
+      )}
+    </DatagridRow>
+  )
+}
+
+const ArtistDatagridBody = (props) => (
+  <DatagridBody {...props} row={<ArtistDatagridRow />} />
+)
+const ArtistDatagrid = (props) => (
+  <Datagrid {...props} body={<ArtistDatagridBody />} />
+)
+
+const ArtistList = ({ width, ...rest }) => {
+  const handleArtistLink = useGetHandleArtistClick(width)
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  return (
+    <>
+      <List
+        {...rest}
+        sort={{ field: 'name', order: 'ASC' }}
+        exporter={false}
+        bulkActionButtons={false}
+        filters={<ArtistFilter />}
+      >
+        {isXsmall ? (
+          <SimpleList
+            primaryText={(r) => r.name}
+            linkType={'show'}
+            rightIcon={(r) => <ArtistContextMenu record={r} />}
+            {...rest}
+          />
+        ) : (
+          <ArtistDatagrid rowClick={handleArtistLink}>
+            <TextField source="name" />
+            <NumberField source="albumCount" sortByOrder={'DESC'} />
+            <NumberField source="songCount" sortByOrder={'DESC'} />
+            <ArtistContextMenu />
+          </ArtistDatagrid>
+        )}
+      </List>
+      <AddToPlaylistDialog />
+    </>
   )
 }
 

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) => (
+  <ContextMenu
+    {...props}
+    songQueryParams={{
+      pagination: { page: 1, perPage: -1 },
+      sort: { field: 'discNumber, trackNumber', order: 'ASC' },
+      filter: { album_id: props.record.id, disc_number: props.discNumber },
+    }}
+  />
+)
+
 AlbumContextMenu.propTypes = {
   record: PropTypes.object,
   discNumber: PropTypes.number,
@@ -152,4 +159,24 @@ AlbumContextMenu.defaultProps = {
   addLabel: true,
 }
 
-export default AlbumContextMenu
+export const ArtistContextMenu = (props) => (
+  <ContextMenu
+    {...props}
+    songQueryParams={{
+      pagination: { page: 1, perPage: 200 },
+      sort: { field: 'album, discNumber, trackNumber', order: 'ASC' },
+      filter: { album_artist_id: props.record.id },
+    }}
+  />
+)
+
+ArtistContextMenu.propTypes = {
+  record: PropTypes.object,
+  visible: PropTypes.bool,
+  color: PropTypes.string,
+}
+
+ArtistContextMenu.defaultProps = {
+  visible: true,
+  addLabel: true,
+}

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: {

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,