Only show SongContextMenu on hover

ui/src/common/SongContextMenu.js

@@ -0,0 +1,142 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+import { useUpdate, useTranslate, useRefresh, useNotify } from 'react-admin'
+import { IconButton, Menu, MenuItem } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import StarIcon from '@material-ui/icons/Star'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import NestedMenuItem from 'material-ui-nested-menu-item'
+import { addTracks, setTrack } from '../audioplayer'
+import AddToPlaylistMenu from './AddToPlaylistMenu'
+import config from '../config'
+
+const useStyles = makeStyles({
+  noWrap: {
+    whiteSpace: 'nowrap',
+  },
+  menu: {
+    visibility: (props) => (props.visible ? 'visible' : 'hidden'),
+  },
+  star: {
+    visibility: (props) =>
+      props.visible || props.starred ? 'visible' : 'hidden',
+  },
+})
+
+const SongContextMenu = ({ record, onAddToPlaylist, visible }) => {
+  const classes = useStyles({ visible, starred: record.starred })
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const notify = useNotify()
+  const refresh = useRefresh()
+  const [anchorEl, setAnchorEl] = useState(null)
+  const options = {
+    playNow: {
+      label: translate('resources.song.actions.playNow'),
+      action: (record) => setTrack(record),
+    },
+    addToQueue: {
+      label: translate('resources.song.actions.addToQueue'),
+      action: (record) => addTracks({ [record.id]: record }),
+    },
+  }
+
+  const handleClick = (e) => {
+    setAnchorEl(e.currentTarget)
+    e.stopPropagation()
+  }
+
+  const handleClose = (e) => {
+    setAnchorEl(null)
+    e.stopPropagation()
+  }
+
+  const handleItemClick = (e) => {
+    e.preventDefault()
+    setAnchorEl(null)
+    const key = e.target.getAttribute('value')
+    dispatch(options[key].action(record))
+    e.stopPropagation()
+  }
+
+  const [updateRecord, { loading: updating }] = useUpdate(
+    'albumSong',
+    record.id,
+    record,
+    {
+      undoable: false,
+      onFailure: (error) => {
+        console.log(error)
+        notify('ra.page.error', 'warning')
+        refresh()
+      },
+    }
+  )
+
+  const toggleStar = (record) => {
+    record.starred = !record.starred
+    updateRecord()
+  }
+
+  const handleToggleStar = (e, record) => {
+    toggleStar(record)
+    e.stopPropagation()
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <span className={classes.noWrap}>
+      {config.enableStarred && !onAddToPlaylist && (
+        <IconButton
+          onClick={(e) => handleToggleStar(e, record)}
+          size={'small'}
+          disabled={updating}
+          className={classes.star}
+        >
+          {record.starred ? <StarIcon /> : <StarBorderIcon />}
+        </IconButton>
+      )}
+      <IconButton
+        onClick={handleClick}
+        size={'small'}
+        className={classes.menu}
+        disabled={updating}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <Menu
+        id={'menu' + record.id}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        {Object.keys(options).map((key) => (
+          <MenuItem value={key} key={key} onClick={handleItemClick}>
+            {options[key].label}
+          </MenuItem>
+        ))}
+        <NestedMenuItem
+          label={translate('resources.song.actions.addToPlaylist')}
+          parentMenuOpen={open}
+        >
+          <AddToPlaylistMenu
+            selectedIds={[record.mediaFileId || record.id]}
+            onClose={handleClose}
+            onItemAdded={onAddToPlaylist}
+          />
+        </NestedMenuItem>
+      </Menu>
+    </span>
+  )
+}
+
+SongContextMenu.propTypes = {
+  record: PropTypes.object,
+  onAddToPlaylist: PropTypes.func,
+  visible: PropTypes.bool,
+}
+
+export default SongContextMenu

ui/src/common/SongDatagridRow.js

@@ -1,17 +1,18 @@
-import React from 'react'
+import React, { useState, isValidElement, cloneElement } from 'react'
 import { DatagridRow, useTranslate } from 'react-admin'
-import { TableRow, TableCell, Typography } from '@material-ui/core'
+import { TableCell, TableRow, Typography } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import RangeField from './RangeField'
 
 const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
   const translate = useTranslate()
+  const [visible, setVisible] = useState(false)
   return (
     <>
       {multiDisc && (
         <TableRow>
           {record.trackNumber === 1 && (
-            <TableCell colSpan={children.length + 1}>
+            <TableCell colSpan={children.length + 2}>
               <Typography variant="h6">
                 {record.discSubtitle
                   ? translate('message.discSubtitle', {
@@ -26,8 +27,19 @@ const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
           )}
         </TableRow>
       )}
-      <DatagridRow record={record} {...rest}>
-        {children}
+      <DatagridRow
+        record={record}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        {...rest}
+      >
+        {React.Children.map(children, (child) =>
+          child &&
+          isValidElement(child) &&
+          child.type.name === 'SongContextMenu'
+            ? cloneElement(child, { visible, ...rest })
+            : child
+        )}
       </DatagridRow>
     </>
   )

ui/src/common/index.js

@@ -12,6 +12,7 @@ import DocLink from './DocLink'
 import List from './List'
 import SongDatagridRow from './SongDatagridRow'
 import AddToPlaylistMenu from './AddToPlaylistMenu'
+import SongContextMenu from './SongContextMenu'
 
 export {
   Title,
@@ -30,4 +31,5 @@ export {
   ArtistLinkField,
   artistLink,
   AddToPlaylistMenu,
+  SongContextMenu,
 }