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>

ui/src/album/AlbumDetails.js

@@ -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
+              <LoveButton
-                className={classes.starButton}
+                className={classes.loveButton}
                 record={record}
                 resource={'album'}
                 size={isDesktop ? 'default' : 'small'}
-                aria-label="star"
+                aria-label="love"
                 color="primary"
               />
             </Typography>

ui/src/album/AlbumList.js

@@ -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>

ui/src/album/AlbumListView.js

@@ -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>

ui/src/album/AlbumSongs.js

@@ -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}
                 />

ui/src/album/albumLists.js

@@ -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: {

ui/src/artist/ArtistList.js

@@ -8,8 +8,8 @@ import {
   TextField,
 } from 'react-admin'
 import { useMediaQuery, withWidth } from '@material-ui/core'
-import StarIcon from '@material-ui/icons/Star'
+import FavoriteIcon from '@material-ui/icons/Favorite'
-import StarBorderIcon from '@material-ui/icons/StarBorder'
+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}
           />

ui/src/audioplayer/PlayerToolbar.js

@@ -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}

ui/src/common/ContextMenus.js

@@ -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,
 }

ui/src/common/LoveButton.js

@@ -1,24 +1,20 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
-import StarIcon from '@material-ui/icons/Star'
+import FavoriteIcon from '@material-ui/icons/Favorite'
-import StarBorderIcon from '@material-ui/icons/StarBorder'
+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
+      props.visible === false ? 'hidden' : props.loved ? 'visible' : 'inherit',
-        ? 'hidden'
-        : props.starred
-        ? '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 classes = useStyles({ color, visible, loved: record.starred })
-  const [toggleStar, loading] = useToggleStar(resource, record)
+  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,

ui/src/common/SongContextMenu.js

@@ -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,
 }

ui/src/common/SongDatagrid.js

@@ -60,7 +60,7 @@ const DiscSubtitleRow = ({
         <AlbumContextMenu
           record={{ id: record.albumId }}
           discNumber={record.discNumber}
-          showStar={false}
+          showLove={false}
           className={classes.contextMenu}
           visible={contextAlwaysVisible}
         />

ui/src/common/index.js

@@ -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'

ui/src/common/useToggleLove.js

@@ -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]
 }

ui/src/hotkeys.js

@@ -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 }

ui/src/i18n/en.json

@@ -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"
     }
   }
 }

ui/src/song/SongList.js

@@ -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}
                 />