Add star button to album detail view

ui/src/album/AlbumDetails.js

@@ -4,7 +4,7 @@ import { useTranslate } from 'react-admin'
 import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
 import subsonic from '../subsonic'
-import { DurationField, formatRange } from '../common'
+import { DurationField, formatRange, StarButton } from '../common'
 import { ArtistLinkField } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
@@ -50,6 +50,7 @@ const AlbumDetails = ({ classes, record }) => {
           {translate('resources.song.name', { smart_count: record.songCount })}{' '}
           · <DurationField record={record} source={'duration'} />
         </Typography>
+        <StarButton record={record} resource={'album'} size={'large'} />
       </CardContent>
 
       {isLightboxOpen && (

ui/src/common/ContextMenus.js

@@ -5,19 +5,12 @@ 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 StarIcon from '@material-ui/icons/Star'
-import StarBorderIcon from '@material-ui/icons/StarBorder'
 import { makeStyles } from '@material-ui/core/styles'
-import {
+import { useDataProvider, useNotify, useTranslate } from 'react-admin'
-  useDataProvider,
-  useNotify,
-  useRefresh,
-  useTranslate,
-  useUpdate,
-} from 'react-admin'
 import { addTracks, playTracks, shuffleTracks } from '../audioplayer'
 import { openAddToPlaylist } from '../dialogs/dialogState'
 import subsonic from '../subsonic'
+import StarButton from './StarButton'
 
 const useStyles = makeStyles({
   noWrap: {
@@ -27,11 +20,6 @@ const useStyles = makeStyles({
     color: (props) => props.color,
     visibility: (props) => (props.visible ? 'visible' : 'hidden'),
   },
-  star: {
-    color: (props) => props.color,
-    visibility: (props) =>
-      props.visible || props.starred ? 'visible' : 'hidden',
-  },
 })
 
 const ContextMenu = ({
@@ -47,7 +35,6 @@ const ContextMenu = ({
   const dispatch = useDispatch()
   const translate = useTranslate()
   const notify = useNotify()
-  const refresh = useRefresh()
   const [anchorEl, setAnchorEl] = useState(null)
 
   const options = {
@@ -119,46 +106,17 @@ const ContextMenu = ({
     e.stopPropagation()
   }
 
-  const [toggleStarred, { loading: updating }] = useUpdate(
-    resource,
-    record.id,
-    {
-      ...record,
-      starred: !record.starred,
-    },
-    {
-      undoable: false,
-      onFailure: (error) => {
-        console.log(error)
-        notify('ra.page.error', 'warning')
-        refresh()
-      },
-    }
-  )
-
-  const handleToggleStar = (e) => {
-    e.preventDefault()
-    toggleStarred()
-    e.stopPropagation()
-  }
-
   const open = Boolean(anchorEl)
 
   return (
     <span className={classes.noWrap}>
       {showStar && (
-        <IconButton
+        <StarButton
-          onClick={handleToggleStar}
+          record={record}
-          size={'small'}
+          resource={resource}
-          disabled={updating}
+          visible={visible}
-          className={classes.star}
+          color={color}
-        >
+        />
-          {record.starred ? (
-            <StarIcon fontSize={'small'} />
-          ) : (
-            <StarBorderIcon fontSize={'small'} />
-          )}
-        </IconButton>
       )}
       <IconButton
         aria-label="more"

ui/src/common/StarButton.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useNotify, useRefresh, useUpdate } from 'react-admin'
+import StarIcon from '@material-ui/icons/Star'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import IconButton from '@material-ui/core/IconButton'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  star: {
+    color: (props) => props.color,
+    visibility: (props) =>
+      props.visible || props.starred ? 'visible' : 'hidden',
+  },
+})
+
+const StarButton = ({ resource, record, color, visible, size }) => {
+  const classes = useStyles({ color, visible, starred: record.starred })
+  const notify = useNotify()
+  const refresh = useRefresh()
+
+  const [toggleStarred, { loading }] = useUpdate(
+    resource,
+    record.id,
+    {
+      ...record,
+      starred: !record.starred,
+    },
+    {
+      undoable: false,
+      onFailure: (error) => {
+        console.log(error)
+        notify('ra.page.error', 'warning')
+        refresh()
+      },
+    }
+  )
+
+  const handleToggleStar = (e) => {
+    e.preventDefault()
+    toggleStarred()
+    e.stopPropagation()
+  }
+
+  return (
+    <IconButton
+      onClick={handleToggleStar}
+      size={'small'}
+      disabled={loading}
+      className={classes.star}
+    >
+      {record.starred ? (
+        <StarIcon fontSize={size} />
+      ) : (
+        <StarBorderIcon fontSize={size} />
+      )}
+    </IconButton>
+  )
+}
+
+StarButton.propTypes = {
+  resource: PropTypes.string.isRequired,
+  record: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.string,
+}
+
+StarButton.defaultProps = {
+  visible: true,
+  showStar: true,
+  addLabel: true,
+  size: 'small',
+}
+
+export default StarButton

ui/src/common/index.js

@@ -17,6 +17,7 @@ import QuickFilter from './QuickFilter'
 import useAlbumsPerPage from './useAlbumsPerPage'
 import ShuffleAllButton from './ShuffleAllButton'
 import { AlbumContextMenu, ArtistContextMenu } from './ContextMenus'
+import StarButton from './StarButton'
 
 export {
   Title,
@@ -37,6 +38,7 @@ export {
   ArtistLinkField,
   AlbumContextMenu,
   ArtistContextMenu,
+  StarButton,
   useGetHandleArtistClick,
   SongContextMenu,
   QuickFilter,