Add context menu to individual discs in a set

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

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 (

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 AlbumContextMenu = ({ record, discNumber, color, visible }) => {
-  const classes = useStyles({ color })
+  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(
+        let { data, ids } = extractSongsData(response, discNumber)
-          (acc, cur) => ({ ...acc, [cur.id]: cur }),
+        dispatch(options[key].action(data, ids))
-          {}
-        )
-        dispatch(options[key].action(adata))
       })
       .catch(() => {
         notify('ra.page.error', 'warning')
@@ -80,12 +100,15 @@ const AlbumContextMenu = ({ record, color }) => {
   const open = Boolean(anchorEl)
 
   return (
-    <div>
+    <span className={classes.noWrap}>
+      <IconButton size={'small'} className={classes.star}>
+        <StarIcon fontSize={'small'} />
+      </IconButton>
       <IconButton
         aria-label="more"
         aria-controls="context-menu"
         aria-haspopup="true"
-        className={classes.icon}
+        className={classes.menu}
         onClick={handleClick}
         size={'small'}
       >
@@ -104,7 +127,20 @@ const AlbumContextMenu = ({ record, color }) => {
           </MenuItem>
         ))}
       </Menu>
-    </div>
+    </span>
   )
 }
+
+AlbumContextMenu.propTypes = {
+  record: PropTypes.object,
+  discNumber: PropTypes.number,
+  visible: PropTypes.bool,
+  color: PropTypes.string,
+}
+
+AlbumContextMenu.defaultProps = {
+  visible: true,
+  addLabel: true,
+}
+
 export default AlbumContextMenu

ui/src/common/SongDatagrid.js

@@ -6,6 +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'
 
 const useStyles = makeStyles({
   row: {
@@ -23,6 +24,38 @@ const useStyles = makeStyles({
   },
 })
 
+const DiscSubtitleRow = ({ record, onClickDiscSubtitle, length }) => {
+  const classes = useStyles()
+  const [visible, setVisible] = useState(false)
+  const handlePlayDisc = (discNumber) => () => {
+    onClickDiscSubtitle(discNumber)
+  }
+  return (
+    <TableRow
+      hover
+      onClick={handlePlayDisc(record.discNumber)}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      className={classes.row}
+    >
+      <TableCell colSpan={length}>
+        <Typography variant="h6" className={classes.subtitle}>
+          <AlbumIcon className={classes.discIcon} fontSize={'small'} />
+          {record.discNumber}
+          {record.discSubtitle && `: ${record.discSubtitle}`}
+        </Typography>
+      </TableCell>
+      <TableCell>
+        <AlbumContextMenu
+          record={{ id: record.albumId }}
+          discNumber={record.discNumber}
+          visible={visible}
+        />
+      </TableCell>
+    </TableRow>
+  )
+}
+
 export const SongDatagridRow = ({
   record,
   children,
@@ -32,28 +65,16 @@ export const SongDatagridRow = ({
   onClickDiscSubtitle,
   ...rest
 }) => {
-  const classes = useStyles()
   const [visible, setVisible] = useState(false)
   const childCount = React.Children.count(children)
-  const handlePlayDisc = (discNumber) => () => {
-    onClickDiscSubtitle(discNumber)
-  }
   return (
     <>
       {multiDisc && record.trackNumber === 1 && (
-        <TableRow
+        <DiscSubtitleRow
-          hover
+          record={record}
-          onClick={handlePlayDisc(record.discNumber)}
+          onClickDiscSubtitle={onClickDiscSubtitle}
-          className={classes.row}
+          length={childCount}
-        >
+        />
-          <TableCell colSpan={childCount + 1}>
-            <Typography variant="h6" className={classes.subtitle}>
-              <AlbumIcon className={classes.discIcon} fontSize={'small'} />
-              {record.discNumber}
-              {record.discSubtitle && `: ${record.discSubtitle}`}
-            </Typography>
-          </TableCell>
-        </TableRow>
       )}
       <DatagridRow
         record={record}