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/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 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,

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