Refactored the current ⭐️/Star feature to ❤️/Love/Favourite feature. (#908)
* Added setRating feature to AlbumListView * Refactored the iconography from ⭐ to ❤️ * Refactored the current component from StarButton to LoveButton * Refactored all translations from Starred to Loved, and all props from showStar to showLove * Refactored useToggleStar hook to useToggleLove * rebased repository from master and removed stray commmits * Refactored handler name from TOGGLE_STAR to TOGGLE_LOVE in PlayerToolbar.js * Change "starred" translation to "Favorite" Co-authored-by: Deluan <deluan@navidrome.org>
This commit is contained in:
parent
db208600e4
commit
ac37bf3631
|
@ -18,7 +18,7 @@ import {
|
|||
DurationField,
|
||||
formatRange,
|
||||
SizeField,
|
||||
StarButton,
|
||||
LoveButton,
|
||||
} from '../common'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
|
@ -66,7 +66,7 @@ const useStyles = makeStyles((theme) => ({
|
|||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
starButton: {
|
||||
loveButton: {
|
||||
top: theme.spacing(-0.2),
|
||||
left: theme.spacing(0.5),
|
||||
},
|
||||
|
@ -160,12 +160,12 @@ const AlbumDetails = ({ record }) => {
|
|||
<CardContent className={classes.content}>
|
||||
<Typography variant="h5">
|
||||
{record.name}
|
||||
<StarButton
|
||||
className={classes.starButton}
|
||||
<LoveButton
|
||||
className={classes.loveButton}
|
||||
record={record}
|
||||
resource={'album'}
|
||||
size={isDesktop ? 'default' : 'small'}
|
||||
aria-label="star"
|
||||
aria-label="love"
|
||||
color="primary"
|
||||
/>
|
||||
</Typography>
|
||||
|
|
|
@ -11,7 +11,7 @@ import {
|
|||
Pagination,
|
||||
useTranslate,
|
||||
} from 'react-admin'
|
||||
import StarIcon from '@material-ui/icons/Star'
|
||||
import FavoriteIcon from '@material-ui/icons/Favorite'
|
||||
import { withWidth } from '@material-ui/core'
|
||||
import { List, QuickFilter, Title, useAlbumsPerPage } from '../common'
|
||||
import AlbumListActions from './AlbumListActions'
|
||||
|
@ -38,7 +38,7 @@ const AlbumFilter = (props) => {
|
|||
<NumberInput source="year" />
|
||||
<QuickFilter
|
||||
source="starred"
|
||||
label={<StarIcon fontSize={'small'} />}
|
||||
label={<FavoriteIcon fontSize={'small'} />}
|
||||
defaultValue={true}
|
||||
/>
|
||||
</Filter>
|
||||
|
|
|
@ -9,7 +9,7 @@ import {
|
|||
TextField,
|
||||
} from 'react-admin'
|
||||
import { useMediaQuery } from '@material-ui/core'
|
||||
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
ArtistLinkField,
|
||||
|
@ -93,7 +93,10 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
|
|||
sortByOrder={'DESC'}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
|
||||
<FavoriteBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.columnIcon}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Datagrid>
|
||||
|
|
|
@ -10,7 +10,7 @@ import clsx from 'clsx'
|
|||
import { useDispatch } from 'react-redux'
|
||||
import { Card, useMediaQuery } from '@material-ui/core'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
import { playTracks } from '../actions'
|
||||
import {
|
||||
DurationField,
|
||||
|
@ -123,7 +123,7 @@ const AlbumSongs = (props) => {
|
|||
sortable={false}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
<FavoriteBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.columnIcon}
|
||||
/>
|
||||
|
|
|
@ -3,7 +3,7 @@ import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
|
|||
import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
|
||||
import RepeatIcon from '@material-ui/icons/Repeat'
|
||||
import AlbumIcon from '@material-ui/icons/Album'
|
||||
import StarIcon from '@material-ui/icons/Star'
|
||||
import FavoriteIcon from '@material-ui/icons/Favorite'
|
||||
|
||||
export default {
|
||||
all: {
|
||||
|
@ -12,7 +12,7 @@ export default {
|
|||
},
|
||||
random: { icon: ShuffleIcon, params: 'sort=random' },
|
||||
starred: {
|
||||
icon: StarIcon,
|
||||
icon: FavoriteIcon,
|
||||
params: 'sort=starred_at&order=DESC&filter={"starred":true}',
|
||||
},
|
||||
recentlyAdded: {
|
||||
|
|
|
@ -8,8 +8,8 @@ import {
|
|||
TextField,
|
||||
} from 'react-admin'
|
||||
import { useMediaQuery, withWidth } from '@material-ui/core'
|
||||
import StarIcon from '@material-ui/icons/Star'
|
||||
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
||||
import FavoriteIcon from '@material-ui/icons/Favorite'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
import { AddToPlaylistDialog } from '../dialogs'
|
||||
import {
|
||||
ArtistContextMenu,
|
||||
|
@ -43,7 +43,7 @@ const ArtistFilter = (props) => (
|
|||
<SearchInput source="name" alwaysOn />
|
||||
<QuickFilter
|
||||
source="starred"
|
||||
label={<StarIcon fontSize={'small'} />}
|
||||
label={<FavoriteIcon fontSize={'small'} />}
|
||||
defaultValue={true}
|
||||
/>
|
||||
</Filter>
|
||||
|
@ -78,7 +78,7 @@ const ArtistListView = ({
|
|||
sortByOrder={'DESC'}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
<FavoriteBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.contextHeader}
|
||||
/>
|
||||
|
|
|
@ -2,25 +2,25 @@ import React, { useCallback } from 'react'
|
|||
import { useLocation } from 'react-router-dom'
|
||||
import { useGetOne } from 'react-admin'
|
||||
import { GlobalHotKeys } from 'react-hotkeys'
|
||||
import { StarButton, useToggleStar } from '../common'
|
||||
import { LoveButton, useToggleLove } from '../common'
|
||||
import { keyMap } from '../hotkeys'
|
||||
|
||||
const Placeholder = () => <StarButton disabled={true} resource={'song'} />
|
||||
const Placeholder = () => <LoveButton disabled={true} resource={'song'} />
|
||||
|
||||
const Toolbar = ({ id }) => {
|
||||
const location = useLocation()
|
||||
const resource = location.pathname.startsWith('/song') ? 'song' : 'albumSong'
|
||||
const { data, loading } = useGetOne(resource, id)
|
||||
const [toggleStar, toggling] = useToggleStar(resource, data)
|
||||
const [toggleLove, toggling] = useToggleLove(resource, data)
|
||||
|
||||
const handlers = {
|
||||
TOGGLE_STAR: useCallback(() => toggleStar(), [toggleStar]),
|
||||
TOGGLE_LOVE: useCallback(() => toggleLove(), [toggleLove]),
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
|
||||
<StarButton
|
||||
<LoveButton
|
||||
record={data}
|
||||
resource={resource}
|
||||
disabled={loading || toggling}
|
||||
|
|
|
@ -16,7 +16,7 @@ import {
|
|||
openAddToPlaylist,
|
||||
} from '../actions'
|
||||
import subsonic from '../subsonic'
|
||||
import { StarButton } from './StarButton'
|
||||
import { LoveButton } from './LoveButton'
|
||||
import config from '../config'
|
||||
import { formatBytes } from '../utils'
|
||||
|
||||
|
@ -31,7 +31,7 @@ const useStyles = makeStyles({
|
|||
|
||||
const ContextMenu = ({
|
||||
resource,
|
||||
showStar,
|
||||
showLove,
|
||||
record,
|
||||
color,
|
||||
className,
|
||||
|
@ -130,10 +130,10 @@ const ContextMenu = ({
|
|||
|
||||
return (
|
||||
<span className={clsx(classes.noWrap, className)}>
|
||||
<StarButton
|
||||
<LoveButton
|
||||
record={record}
|
||||
resource={resource}
|
||||
visible={showStar}
|
||||
visible={showLove}
|
||||
color={color}
|
||||
/>
|
||||
<IconButton
|
||||
|
@ -183,11 +183,11 @@ AlbumContextMenu.propTypes = {
|
|||
record: PropTypes.object,
|
||||
discNumber: PropTypes.number,
|
||||
color: PropTypes.string,
|
||||
showStar: PropTypes.bool,
|
||||
showLove: PropTypes.bool,
|
||||
}
|
||||
|
||||
AlbumContextMenu.defaultProps = {
|
||||
showStar: true,
|
||||
showLove: true,
|
||||
addLabel: true,
|
||||
}
|
||||
|
||||
|
@ -207,10 +207,10 @@ export const ArtistContextMenu = (props) =>
|
|||
ArtistContextMenu.propTypes = {
|
||||
record: PropTypes.object,
|
||||
color: PropTypes.string,
|
||||
showStar: PropTypes.bool,
|
||||
showLove: PropTypes.bool,
|
||||
}
|
||||
|
||||
ArtistContextMenu.defaultProps = {
|
||||
showStar: true,
|
||||
showLove: true,
|
||||
addLabel: true,
|
||||
}
|
||||
|
|
|
@ -1,24 +1,20 @@
|
|||
import React, { useCallback } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import StarIcon from '@material-ui/icons/Star'
|
||||
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
||||
import FavoriteIcon from '@material-ui/icons/Favorite'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { useToggleStar } from './useToggleStar'
|
||||
import { useToggleLove } from './useToggleLove'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
star: {
|
||||
love: {
|
||||
color: (props) => props.color,
|
||||
visibility: (props) =>
|
||||
props.visible === false
|
||||
? 'hidden'
|
||||
: props.starred
|
||||
? 'visible'
|
||||
: 'inherit',
|
||||
props.visible === false ? 'hidden' : props.loved ? 'visible' : 'inherit',
|
||||
},
|
||||
})
|
||||
|
||||
export const StarButton = ({
|
||||
export const LoveButton = ({
|
||||
resource,
|
||||
record,
|
||||
color,
|
||||
|
@ -29,36 +25,36 @@ export const StarButton = ({
|
|||
disabled,
|
||||
...rest
|
||||
}) => {
|
||||
const classes = useStyles({ color, visible, starred: record.starred })
|
||||
const [toggleStar, loading] = useToggleStar(resource, record)
|
||||
const classes = useStyles({ color, visible, loved: record.starred })
|
||||
const [toggleLove, loading] = useToggleLove(resource, record)
|
||||
|
||||
const handleToggleStar = useCallback(
|
||||
const handleToggleLove = useCallback(
|
||||
(e) => {
|
||||
e.preventDefault()
|
||||
toggleStar()
|
||||
toggleLove()
|
||||
e.stopPropagation()
|
||||
},
|
||||
[toggleStar]
|
||||
[toggleLove]
|
||||
)
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={handleToggleStar}
|
||||
onClick={handleToggleLove}
|
||||
size={'small'}
|
||||
disabled={disabled || loading}
|
||||
className={classes.star}
|
||||
className={classes.love}
|
||||
{...rest}
|
||||
>
|
||||
{record.starred ? (
|
||||
<StarIcon fontSize={size} />
|
||||
<FavoriteIcon fontSize={size} />
|
||||
) : (
|
||||
<StarBorderIcon fontSize={size} />
|
||||
<FavoriteBorderIcon fontSize={size} />
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
StarButton.propTypes = {
|
||||
LoveButton.propTypes = {
|
||||
resource: PropTypes.string.isRequired,
|
||||
record: PropTypes.object.isRequired,
|
||||
visible: PropTypes.bool,
|
||||
|
@ -68,7 +64,7 @@ StarButton.propTypes = {
|
|||
disabled: PropTypes.bool,
|
||||
}
|
||||
|
||||
StarButton.defaultProps = {
|
||||
LoveButton.defaultProps = {
|
||||
addLabel: true,
|
||||
record: {},
|
||||
visible: true,
|
|
@ -8,7 +8,7 @@ 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'
|
||||
import { LoveButton } from './LoveButton'
|
||||
import config from '../config'
|
||||
import { formatBytes } from '../utils'
|
||||
|
||||
|
@ -21,7 +21,7 @@ const useStyles = makeStyles({
|
|||
export const SongContextMenu = ({
|
||||
resource,
|
||||
record,
|
||||
showStar,
|
||||
showLove,
|
||||
onAddToPlaylist,
|
||||
className,
|
||||
}) => {
|
||||
|
@ -87,7 +87,7 @@ export const SongContextMenu = ({
|
|||
|
||||
return (
|
||||
<span className={clsx(classes.noWrap, className)}>
|
||||
<StarButton record={record} resource={resource} visible={showStar} />
|
||||
<LoveButton record={record} resource={resource} visible={showLove} />
|
||||
<IconButton onClick={handleClick} size={'small'}>
|
||||
<MoreVertIcon fontSize={'small'} />
|
||||
</IconButton>
|
||||
|
@ -114,13 +114,13 @@ SongContextMenu.propTypes = {
|
|||
resource: PropTypes.string.isRequired,
|
||||
record: PropTypes.object.isRequired,
|
||||
onAddToPlaylist: PropTypes.func,
|
||||
showStar: PropTypes.bool,
|
||||
showLove: PropTypes.bool,
|
||||
}
|
||||
|
||||
SongContextMenu.defaultProps = {
|
||||
onAddToPlaylist: () => {},
|
||||
record: {},
|
||||
resource: 'song',
|
||||
showStar: true,
|
||||
showLove: true,
|
||||
addLabel: true,
|
||||
}
|
||||
|
|
|
@ -60,7 +60,7 @@ const DiscSubtitleRow = ({
|
|||
<AlbumContextMenu
|
||||
record={{ id: record.albumId }}
|
||||
discNumber={record.discNumber}
|
||||
showStar={false}
|
||||
showLove={false}
|
||||
className={classes.contextMenu}
|
||||
visible={contextAlwaysVisible}
|
||||
/>
|
||||
|
|
|
@ -18,12 +18,12 @@ export * from './SongContextMenu'
|
|||
export * from './SongDatagrid'
|
||||
export * from './SongDetails'
|
||||
export * from './SongTitleField'
|
||||
export * from './StarButton'
|
||||
export * from './LoveButton'
|
||||
export * from './Title'
|
||||
export * from './SongBulkActions'
|
||||
export * from './useAlbumsPerPage'
|
||||
export * from './useInterval'
|
||||
export * from './useToggleStar'
|
||||
export * from './useToggleLove'
|
||||
export * from './useTraceUpdate'
|
||||
export * from './Writable'
|
||||
export * from './SongSimpleList'
|
||||
|
|
|
@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
|
|||
import { useDataProvider, useNotify } from 'react-admin'
|
||||
import subsonic from '../subsonic'
|
||||
|
||||
export const useToggleStar = (resource, record = {}) => {
|
||||
export const useToggleLove = (resource, record = {}) => {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const notify = useNotify()
|
||||
|
||||
|
@ -24,14 +24,14 @@ export const useToggleStar = (resource, record = {}) => {
|
|||
})
|
||||
}, [dataProvider, record.id, resource])
|
||||
|
||||
const toggleStar = () => {
|
||||
const toggleLove = () => {
|
||||
const toggle = record.starred ? subsonic.unstar : subsonic.star
|
||||
|
||||
setLoading(true)
|
||||
toggle(record.id)
|
||||
.then(refreshRecord)
|
||||
.catch((e) => {
|
||||
console.log('Error toggling star: ', e)
|
||||
console.log('Error toggling love: ', e)
|
||||
notify('ra.page.error', 'warning')
|
||||
if (mountedRef.current) {
|
||||
setLoading(false)
|
||||
|
@ -39,5 +39,5 @@ export const useToggleStar = (resource, record = {}) => {
|
|||
})
|
||||
}
|
||||
|
||||
return [toggleStar, loading]
|
||||
return [toggleLove, loading]
|
||||
}
|
|
@ -6,7 +6,7 @@ const keyMap = {
|
|||
NEXT_SONG: { name: 'next_song', sequence: 'right', group: 'Player' },
|
||||
VOL_UP: { name: 'vol_up', sequence: '=', group: 'Player' },
|
||||
VOL_DOWN: { name: 'vol_down', sequence: '-', group: 'Player' },
|
||||
TOGGLE_STAR: { name: 'toggle_star', sequence: 's', group: 'Player' },
|
||||
TOGGLE_LOVE: { name: 'toggle_love', sequence: 'l', group: 'Player' },
|
||||
}
|
||||
|
||||
export { keyMap }
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
"updatedAt": "Updated at",
|
||||
"bitRate": "Bit rate",
|
||||
"discSubtitle": "Disc Subtitle",
|
||||
"starred": "Starred",
|
||||
"starred": "Favourite",
|
||||
"comment": "Comment"
|
||||
},
|
||||
"actions": {
|
||||
|
@ -60,7 +60,7 @@
|
|||
"recentlyAdded": "Recently Added",
|
||||
"recentlyPlayed": "Recently Played",
|
||||
"mostPlayed": "Most Played",
|
||||
"starred": "Starred"
|
||||
"starred": "Favourites"
|
||||
}
|
||||
},
|
||||
"artist": {
|
||||
|
@ -340,7 +340,7 @@
|
|||
"next_song": "Next Song",
|
||||
"vol_up": "Volume Up",
|
||||
"vol_down": "Volume Down",
|
||||
"toggle_star": "Toggle Current Song's Star"
|
||||
"toggle_love": "Add this track to favourites"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@ import {
|
|||
TextField,
|
||||
} from 'react-admin'
|
||||
import { useMediaQuery } from '@material-ui/core'
|
||||
import StarIcon from '@material-ui/icons/Star'
|
||||
import FavoriteIcon from '@material-ui/icons/Favorite'
|
||||
import {
|
||||
DurationField,
|
||||
List,
|
||||
|
@ -25,7 +25,7 @@ import { SongListActions } from './SongListActions'
|
|||
import { AlbumLinkField } from './AlbumLinkField'
|
||||
import { AddToPlaylistDialog } from '../dialogs'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
contextHeader: {
|
||||
|
@ -50,7 +50,7 @@ const SongFilter = (props) => (
|
|||
<SearchInput source="title" alwaysOn />
|
||||
<QuickFilter
|
||||
source="starred"
|
||||
label={<StarIcon fontSize={'small'} />}
|
||||
label={<FavoriteIcon fontSize={'small'} />}
|
||||
defaultValue={true}
|
||||
/>
|
||||
</Filter>
|
||||
|
@ -115,7 +115,7 @@ const SongList = (props) => {
|
|||
sortByOrder={'DESC'}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
<StarBorderIcon
|
||||
<FavoriteBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.contextHeader}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue