Fix song context menu "on hover" visibility

ui/src/common/SongContextMenu.js

@@ -5,6 +5,7 @@ import { useTranslate } 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 clsx from 'clsx'
 import { playNext, addTracks, setTrack, openAddToPlaylist } from '../actions'
 import subsonic from '../subsonic'
 import { StarButton } from './StarButton'
@@ -15,9 +16,6 @@ const useStyles = makeStyles({
   noWrap: {
     whiteSpace: 'nowrap',
   },
-  menu: {
-    visibility: (props) => (props.visible ? 'visible' : 'hidden'),
-  },
 })
 
 export const SongContextMenu = ({
@@ -25,9 +23,9 @@ export const SongContextMenu = ({
   record,
   showStar,
   onAddToPlaylist,
-  visible,
+  className,
 }) => {
-  const classes = useStyles({ visible })
+  const classes = useStyles()
   const dispatch = useDispatch()
   const translate = useTranslate()
   const [anchorEl, setAnchorEl] = useState(null)
@@ -88,11 +86,9 @@ export const SongContextMenu = ({
   const open = Boolean(anchorEl)
 
   return (
-    <span className={classes.noWrap}>
-      {showStar && (
-        <StarButton record={record} resource={resource} visible={visible} />
-      )}
-      <IconButton onClick={handleClick} size={'small'} className={classes.menu}>
+    <span className={clsx(classes.noWrap, className)}>
+      <StarButton record={record} resource={resource} visible={showStar} />
+      <IconButton onClick={handleClick} size={'small'}>
         <MoreVertIcon fontSize={'small'} />
       </IconButton>
       <Menu
@@ -118,7 +114,6 @@ SongContextMenu.propTypes = {
   resource: PropTypes.string.isRequired,
   record: PropTypes.object.isRequired,
   onAddToPlaylist: PropTypes.func,
-  visible: PropTypes.bool,
   showStar: PropTypes.bool,
 }
 
@@ -126,7 +121,6 @@ SongContextMenu.defaultProps = {
   onAddToPlaylist: () => {},
   record: {},
   resource: 'song',
-  visible: true,
   showStar: true,
   addLabel: true,
 }

ui/src/common/SongDatagrid.js

@@ -1,23 +1,15 @@
-import React, {
-  useState,
-  isValidElement,
-  cloneElement,
-  useMemo,
-  useCallback,
-} from 'react'
+import React, { isValidElement, useMemo, useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 import { Datagrid, DatagridBody, DatagridRow } from 'react-admin'
 import { TableCell, TableRow, Typography } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 import AlbumIcon from '@material-ui/icons/Album'
+import clsx from 'clsx'
 import { playTracks } from '../actions'
 import { AlbumContextMenu } from '../common'
 
 const useStyles = makeStyles({
-  row: {
-    cursor: 'pointer',
-  },
   subtitle: {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -28,6 +20,17 @@ const useStyles = makeStyles({
     verticalAlign: 'text-top',
     marginRight: '4px',
   },
+  row: {
+    cursor: 'pointer',
+    '&:hover': {
+      '& $contextMenu': {
+        visibility: 'visible',
+      },
+    },
+  },
+  contextMenu: {
+    visibility: 'hidden',
+  },
 })
 
 const DiscSubtitleRow = ({
@@ -37,7 +40,6 @@ const DiscSubtitleRow = ({
   contextAlwaysVisible,
 }) => {
   const classes = useStyles()
-  const [visible, setVisible] = useState(false)
   const handlePlayDisc = (discNumber) => () => {
     onClick(discNumber)
   }
@@ -45,8 +47,6 @@ const DiscSubtitleRow = ({
     <TableRow
       hover
       onClick={handlePlayDisc(record.discNumber)}
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
       className={classes.row}
     >
       <TableCell colSpan={colSpan}>
@@ -61,7 +61,8 @@ const DiscSubtitleRow = ({
           record={{ id: record.albumId }}
           discNumber={record.discNumber}
           showStar={false}
-          visible={contextAlwaysVisible || visible}
+          className={classes.contextMenu}
+          visible={contextAlwaysVisible}
         />
       </TableCell>
     </TableRow>
@@ -74,9 +75,10 @@ export const SongDatagridRow = ({
   firstTracks,
   contextAlwaysVisible,
   onClickDiscSubtitle,
+  className,
   ...rest
 }) => {
-  const [visible, setVisible] = useState(false)
+  const classes = useStyles()
   const fields = React.Children.toArray(children).filter((c) =>
     isValidElement(c)
   )
@@ -93,17 +95,10 @@ export const SongDatagridRow = ({
       )}
       <DatagridRow
         record={record}
-        onMouseMove={() => setVisible(true)}
-        onMouseLeave={() => setVisible(false)}
         {...rest}
+        className={clsx(className, classes.row)}
       >
-        {fields.map((child, index) =>
-          index < childCount - 1
-            ? child
-            : cloneElement(child, {
-                visible: contextAlwaysVisible || visible,
-              })
-        )}
+        {fields}
       </DatagridRow>
     </>
   )
@@ -124,6 +119,7 @@ SongDatagridRow.defaultProps = {
 export const SongDatagrid = ({
   contextAlwaysVisible,
   showDiscSubtitles,
+  classes,
   ...rest
 }) => {
   const dispatch = useDispatch()
@@ -161,22 +157,25 @@ export const SongDatagrid = ({
     return set
   }, [ids, data, showDiscSubtitles])
 
-  const SongDatagridBody = (props) => (
-    <DatagridBody
-      {...props}
-      row={
-        <SongDatagridRow
-          firstTracks={firstTracks}
-          contextAlwaysVisible={contextAlwaysVisible}
-          onClickDiscSubtitle={playDisc}
-        />
-      }
-    />
-  )
-  return <Datagrid {...rest} body={<SongDatagridBody />} />
+  const SongDatagridBody = (props) => {
+    return (
+      <DatagridBody
+        {...props}
+        row={
+          <SongDatagridRow
+            firstTracks={firstTracks}
+            contextAlwaysVisible={contextAlwaysVisible}
+            onClickDiscSubtitle={playDisc}
+          />
+        }
+      />
+    )
+  }
+  return <Datagrid {...rest} body={<SongDatagridBody />} classes={classes} />
 }
 
 SongDatagrid.propTypes = {
   contextAlwaysVisible: PropTypes.bool,
   showDiscSubtitles: PropTypes.bool,
+  classes: PropTypes.object,
 }

ui/src/common/StarButton.js

@@ -10,7 +10,12 @@ import subsonic from '../subsonic'
 const useStyles = makeStyles({
   star: {
     color: (props) => props.color,
-    visibility: (props) => (props.starred ? 'visible' : 'inherit'),
+    visibility: (props) =>
+      props.starred
+        ? 'visible'
+        : props.visible === false
+        ? 'hidden'
+        : 'inherit',
   },
 })