Enable turn on/off Favorites/Loved feature. (#917)

* Added option to enable/disable favorites in Song

* Added option to enable/disable favorites in Artist

* Added option to enable/disable favorites in Albums and Favorites tab in sidebar

* Added option to enable/disable favorites in Player

* Set default value of enableFavourites as true

* Improved the functionality to enable/disable Favorites

* Add `EnableFavourites` config option

Co-authored-by: Deluan <deluan@navidrome.org>

conf/configuration.go

@@ -40,6 +40,7 @@ type configOptions struct {
 	CoverJpegQuality       int
 	UIWelcomeMessage       string
 	EnableGravatar         bool
+	EnableFavourites       bool
 	GATrackingID           string
 	AuthRequestLimit       int
 	AuthWindowLength       time.Duration
@@ -143,6 +144,7 @@ func init() {
 	viper.SetDefault("coverjpegquality", 75)
 	viper.SetDefault("uiwelcomemessage", "")
 	viper.SetDefault("enablegravatar", false)
+	viper.SetDefault("enablefavourites", true)
 	viper.SetDefault("gatrackingid", "")
 	viper.SetDefault("authrequestlimit", 5)
 	viper.SetDefault("authwindowlength", 20*time.Second)

server/app/serve_index.go

@@ -36,6 +36,7 @@ func serveIndex(ds model.DataStore, fs fs.FS) http.HandlerFunc {
 			"enableTranscodingConfig": conf.Server.EnableTranscodingConfig,
 			"gaTrackingId":            conf.Server.GATrackingID,
 			"enableDownloads":         conf.Server.EnableDownloads,
+			"enableFavourites":        conf.Server.EnableFavourites,
 			"devActivityPanel":        conf.Server.DevActivityPanel,
 			"devFastAccessCoverArt":   conf.Server.DevFastAccessCoverArt,
 		}

server/app/serve_index_test.go

@@ -114,6 +114,17 @@ var _ = Describe("serveIndex", func() {
 		Expect(config).To(HaveKeyWithValue("enableDownloads", true))
 	})
 
+	It("sets the enableLoved", func() {
+		conf.Server.EnableFavourites = true
+		r := httptest.NewRequest("GET", "/index.html", nil)
+		w := httptest.NewRecorder()
+
+		serveIndex(ds, fs)(w, r)
+
+		config := extractAppConfig(w.Body.String())
+		Expect(config).To(HaveKeyWithValue("enableFavourites", true))
+	})
+
 	It("sets the gaTrackingId", func() {
 		conf.Server.GATrackingID = "UA-12345"
 		r := httptest.NewRequest("GET", "/index.html", nil)

ui/src/album/AlbumDetails.js

@@ -20,6 +20,7 @@ import {
   SizeField,
   LoveButton,
 } from '../common'
+import config from '../config'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -160,14 +161,16 @@ const AlbumDetails = ({ record }) => {
           <CardContent className={classes.content}>
             <Typography variant="h5">
               {record.name}
-              <LoveButton
+              {config.enableFavourites && (
-                className={classes.loveButton}
+                <LoveButton
-                record={record}
+                  className={classes.loveButton}
-                resource={'album'}
+                  record={record}
-                size={isDesktop ? 'default' : 'small'}
+                  resource={'album'}
-                aria-label="love"
+                  size={isDesktop ? 'default' : 'small'}
-                color="primary"
+                  aria-label="love"
-              />
+                  color="primary"
+                />
+              )}
             </Typography>
             <Typography component="h6">
               <ArtistLinkField record={record} />

ui/src/album/AlbumList.js

@@ -19,6 +19,7 @@ import AlbumListView from './AlbumListView'
 import AlbumGridView from './AlbumGridView'
 import { AddToPlaylistDialog } from '../dialogs'
 import albumLists, { defaultAlbumList } from './albumLists'
+import config from '../config'
 
 const AlbumFilter = (props) => {
   const translate = useTranslate()
@@ -36,11 +37,13 @@ const AlbumFilter = (props) => {
       </ReferenceInput>
       <NullableBooleanInput source="compilation" />
       <NumberInput source="year" />
-      <QuickFilter
+      {config.enableFavourites && (
-        source="starred"
+        <QuickFilter
-        label={<FavoriteIcon fontSize={'small'} />}
+          source="starred"
-        defaultValue={true}
+          label={<FavoriteIcon fontSize={'small'} />}
-      />
+          defaultValue={true}
+        />
+      )}
     </Filter>
   )
 }

ui/src/album/AlbumListView.js

@@ -20,6 +20,7 @@ import {
   MultiLineTextField,
   AlbumContextMenu,
 } from '../common'
+import config from '../config'
 
 const useStyles = makeStyles({
   columnIcon: {
@@ -91,12 +92,15 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
         source={'starred'}
         sortBy={'starred ASC, starredAt ASC'}
         sortByOrder={'DESC'}
+        sortable={config.enableFavourites}
         className={classes.contextMenu}
         label={
-          <FavoriteBorderIcon
+          config.enableFavourites && (
-            fontSize={'small'}
+            <FavoriteBorderIcon
-            className={classes.columnIcon}
+              fontSize={'small'}
-          />
+              className={classes.columnIcon}
+            />
+          )
         }
       />
     </Datagrid>

ui/src/album/AlbumSongs.js

@@ -21,6 +21,7 @@ import {
   SongTitleField,
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
+import config from '../config'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -123,10 +124,12 @@ const AlbumSongs = (props) => {
               sortable={false}
               className={classes.contextMenu}
               label={
-                <FavoriteBorderIcon
+                config.enableFavourites && (
-                  fontSize={'small'}
+                  <FavoriteBorderIcon
-                  className={classes.columnIcon}
+                    fontSize={'small'}
-                />
+                    className={classes.columnIcon}
+                  />
+                )
               }
             />
           </SongDatagrid>

ui/src/album/albumLists.js

@@ -4,6 +4,7 @@ import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
 import RepeatIcon from '@material-ui/icons/Repeat'
 import AlbumIcon from '@material-ui/icons/Album'
 import FavoriteIcon from '@material-ui/icons/Favorite'
+import config from '../config'
 
 export default {
   all: {
@@ -11,10 +12,12 @@ export default {
     params: 'sort=name&order=ASC',
   },
   random: { icon: ShuffleIcon, params: 'sort=random' },
-  starred: {
+  ...(config.enableFavourites && {
-    icon: FavoriteIcon,
+    starred: {
-    params: 'sort=starred_at&order=DESC&filter={"starred":true}',
+      icon: FavoriteIcon,
-  },
+      params: 'sort=starred_at&order=DESC&filter={"starred":true}',
+    },
+  }),
   recentlyAdded: {
     icon: LibraryAddIcon,
     params: 'sort=recently_added&order=DESC',

ui/src/artist/ArtistList.js

@@ -19,6 +19,7 @@ import {
   ArtistSimpleList,
 } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
+import config from '../config'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -41,11 +42,13 @@ const useStyles = makeStyles({
 const ArtistFilter = (props) => (
   <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
-    <QuickFilter
+    {config.enableFavourites && (
-      source="starred"
+      <QuickFilter
-      label={<FavoriteIcon fontSize={'small'} />}
+        source="starred"
-      defaultValue={true}
+        label={<FavoriteIcon fontSize={'small'} />}
-    />
+        defaultValue={true}
+      />
+    )}
   </Filter>
 )
 
@@ -69,12 +72,15 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
         source={'starred'}
         sortBy={'starred ASC, starredAt ASC'}
         sortByOrder={'DESC'}
+        sortable={config.enableFavourites}
         className={classes.contextMenu}
         label={
-          <FavoriteBorderIcon
+          config.enableFavourites && (
-            fontSize={'small'}
+            <FavoriteBorderIcon
-            className={classes.contextHeader}
+              fontSize={'small'}
-          />
+              className={classes.contextHeader}
+            />
+          )
         }
       />
     </Datagrid>

ui/src/audioplayer/PlayerToolbar.js

@@ -7,8 +7,10 @@ import { keyMap } from '../hotkeys'
 import { ThemeProvider } from '@material-ui/styles'
 import { createMuiTheme } from '@material-ui/core/styles'
 import useCurrentTheme from '../themes/useCurrentTheme'
+import config from '../config'
 
-const Placeholder = () => <LoveButton disabled={true} resource={'song'} />
+const Placeholder = () =>
+  config.enableFavourites && <LoveButton disabled={true} resource={'song'} />
 
 const Toolbar = ({ id }) => {
   const location = useLocation()
@@ -24,11 +26,13 @@ const Toolbar = ({ id }) => {
   return (
     <ThemeProvider theme={createMuiTheme(theme)}>
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
-      <LoveButton
+      {config.enableFavourites && (
-        record={data}
+        <LoveButton
-        resource={resource}
+          record={data}
-        disabled={loading || toggling}
+          resource={resource}
-      />
+          disabled={loading || toggling}
+        />
+      )}
     </ThemeProvider>
   )
 }

ui/src/common/ContextMenus.js

@@ -133,7 +133,7 @@ const ContextMenu = ({
       <LoveButton
         record={record}
         resource={resource}
-        visible={showLove}
+        visible={config.enableFavourites && showLove}
         color={color}
       />
       <IconButton

ui/src/common/SongContextMenu.js

@@ -87,7 +87,11 @@ export const SongContextMenu = ({
 
   return (
     <span className={clsx(classes.noWrap, className)}>
-      <LoveButton record={record} resource={resource} visible={showLove} />
+      <LoveButton
+        record={record}
+        resource={resource}
+        visible={config.enableFavourites && showLove}
+      />
       <IconButton onClick={handleClick} size={'small'}>
         <MoreVertIcon fontSize={'small'} />
       </IconButton>

ui/src/config.js

@@ -12,6 +12,7 @@ const defaultConfig = {
   gaTrackingId: '',
   devActivityPanel: true,
   devFastAccessCoverArt: false,
+  enableFavourites: true,
 }
 
 let config

ui/src/hotkeys.js

@@ -1,3 +1,4 @@
+import config from './config'
 const keyMap = {
   SHOW_HELP: { name: 'show_help', sequence: 'shift+?', group: 'Global' },
   TOGGLE_MENU: { name: 'toggle_menu', sequence: 'm', group: 'Global' },
@@ -6,7 +7,9 @@ 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_LOVE: { name: 'toggle_love', sequence: 'l', group: 'Player' },
+  ...(config.enableFavourites && {
+    TOGGLE_LOVE: { name: 'toggle_love', sequence: 'l', group: 'Player' },
+  }),
 }
 
 export { keyMap }

ui/src/song/SongList.js

@@ -26,6 +26,7 @@ import { AlbumLinkField } from './AlbumLinkField'
 import { AddToPlaylistDialog } from '../dialogs'
 import { makeStyles } from '@material-ui/core/styles'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
+import config from '../config'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -48,11 +49,13 @@ const useStyles = makeStyles({
 const SongFilter = (props) => (
   <Filter {...props} variant={'outlined'}>
     <SearchInput source="title" alwaysOn />
-    <QuickFilter
+    {config.enableFavourites && (
-      source="starred"
+      <QuickFilter
-      label={<FavoriteIcon fontSize={'small'} />}
+        source="starred"
-      defaultValue={true}
+        label={<FavoriteIcon fontSize={'small'} />}
-    />
+        defaultValue={true}
+      />
+    )}
   </Filter>
 )
 
@@ -113,12 +116,15 @@ const SongList = (props) => {
               source={'starred'}
               sortBy={'starred ASC, starredAt ASC'}
               sortByOrder={'DESC'}
+              sortable={config.enableFavourites}
               className={classes.contextMenu}
               label={
-                <FavoriteBorderIcon
+                config.enableFavourites && (
-                  fontSize={'small'}
+                  <FavoriteBorderIcon
-                  className={classes.contextHeader}
+                    fontSize={'small'}
-                />
+                    className={classes.contextHeader}
+                  />
+                )
               }
             />
           </SongDatagrid>