diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js
index 78e28eec0..ac01b62e2 100644
--- a/ui/src/album/AlbumDetails.js
+++ b/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 })}{' '}
ยท
+
{isLightboxOpen && (
diff --git a/ui/src/common/ContextMenus.js b/ui/src/common/ContextMenus.js
index 268b0c2cf..8a6e6374d 100644
--- a/ui/src/common/ContextMenus.js
+++ b/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 {
- useDataProvider,
- useNotify,
- useRefresh,
- useTranslate,
- useUpdate,
-} from 'react-admin'
+import { useDataProvider, useNotify, useTranslate } 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 (
{showStar && (
-
- {record.starred ? (
-
- ) : (
-
- )}
-
+
)}
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 (
+
+ {record.starred ? (
+
+ ) : (
+
+ )}
+
+ )
+}
+
+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
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index cc64690dc..6451f0431 100644
--- a/ui/src/common/index.js
+++ b/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,