Add context menu to individual discs in a set

ui/src/common/AlbumContextMenu.js

@@ -0,0 +1,146 @@
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import IconButton from '@material-ui/core/IconButton'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+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({
+  noWrap: {
+    whiteSpace: 'nowrap',
+  },
+  menu: {
+    color: (props) => props.color,
+    visibility: (props) => (props.visible ? 'visible' : 'hidden'),
+  },
+  star: {
+    visibility: 'hidden', // TODO: Invisible for now
+  },
+})
+
+const AlbumContextMenu = ({ record, discNumber, color, visible }) => {
+  const classes = useStyles({ color, visible })
+  const dataProvider = useDataProvider()
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const notify = useNotify()
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const options = {
+    play: {
+      label: translate('resources.album.actions.playAll'),
+      action: playTracks,
+    },
+    addToQueue: {
+      label: translate('resources.album.actions.addToQueue'),
+      action: addTracks,
+    },
+    shuffle: {
+      label: translate('resources.album.actions.shuffle'),
+      action: shuffleTracks,
+    },
+    addToPlaylist: {
+      label: translate('resources.song.actions.addToPlaylist'),
+      action: () => openAddToPlaylist({ albumId: record.id }),
+    },
+  }
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    e.stopPropagation()
+  }
+
+  const handleOnClose = (e) => {
+    e.preventDefault()
+    setAnchorEl(null)
+    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')
+    dataProvider
+      .getList('albumSong', {
+        pagination: { page: 1, perPage: -1 },
+        sort: { field: 'trackNumber', order: 'ASC' },
+        filter: { album_id: record.id },
+      })
+      .then((response) => {
+        let { data, ids } = extractSongsData(response, discNumber)
+        dispatch(options[key].action(data, ids))
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+
+    e.stopPropagation()
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <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.menu}
+        onClick={handleClick}
+        size={'small'}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <Menu
+        id="context-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleOnClose}
+      >
+        {Object.keys(options).map((key) => (
+          <MenuItem value={key} key={key} onClick={handleItemClick}>
+            {options[key].label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </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
-          hover
-          onClick={handlePlayDisc(record.discNumber)}
-          className={classes.row}
-        >
-          <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>
+        <DiscSubtitleRow
+          record={record}
+          onClickDiscSubtitle={onClickDiscSubtitle}
+          length={childCount}
+        />
       )}
       <DatagridRow
         record={record}