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,