feat: Allow to enable/disable Cover Art in Web App & load from filesystem

resources/default-settings/jukebox.default.yaml

@@ -153,3 +153,7 @@ sync_rfidcards:
   config_file: ../../shared/settings/sync_rfidcards.yaml
 webapp:
   coverart_cache_path: ../../src/webapp/build/cover-cache
+  # Load cover arts in Webapp. Change to false in case you have performance issue
+  # when handling a lot of music
+  # Defaults to true
+  show_covers: true

src/jukebox/components/misc.py

@@ -8,8 +8,10 @@
 import jukebox.plugs as plugin
 import jukebox.utils
 from jukebox.daemon import get_jukebox_daemon
+import jukebox.cfghandler
 
 logger = logging.getLogger('jb.misc')
+cfg = jukebox.cfghandler.get_handler('jukebox')
 
 
 @plugin.register
@@ -105,3 +107,13 @@ def empty_rpc_call(msg: str = ''):
     """
     if msg:
         logger.warning(msg)
+
+
+@plugin.register
+def get_app_settings():
+    """Return settings for web app stored in jukebox.yaml"""
+    show_covers = cfg.setndefault('webapp', 'show_covers', value=True)
+
+    return {
+        'show_covers': show_covers
+    }

src/webapp/src/App.js

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 
 import Grid from '@mui/material/Grid';
 
+import AppSettingsProvider from './context/appsettings';
 import PubSubProvider from './context/pubsub';
 import PlayerProvider from './context/player';
 import Router from './router';
@@ -10,15 +11,17 @@ function App() {
   return (
     <PubSubProvider>
       <PlayerProvider>
-        <Grid
-          alignItems="center"
-          container
-          direction="row"
-          id="routes"
-          justifyContent="center"
-        >
-          <Router />
-        </Grid>
+        <AppSettingsProvider>
+          <Grid
+            alignItems="center"
+            container
+            direction="row"
+            id="routes"
+            justifyContent="center"
+          >
+            <Router />
+          </Grid>
+        </AppSettingsProvider>
       </PlayerProvider>
     </PubSubProvider>
   );

src/webapp/src/commands/index.js

@@ -120,6 +120,7 @@ const commands = {
     _package: 'volume',
     plugin: 'ctrl',
     method: 'set_volume',
+    argKeys: ['volume'],
   },
   getVolume: {
     _package: 'volume',
@@ -250,6 +251,12 @@ const commands = {
     argKeys: ['option'],
   },
 
+  // Misc
+  getAppSettings: {
+    _package: 'misc',
+    plugin: 'get_app_settings'
+  },
+
   // Synchronisation
   'sync_rfidcards_all': {
     _package: 'sync_rfidcards',

src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import {
   Link,
   useLocation,
@@ -15,13 +15,22 @@ import {
 
 import noCover from '../../../../../assets/noCover.jpg';
 
+import AppSettingsContext from '../../../../../context/appsettings/context';
 import request from '../../../../../utils/request';
 
 const AlbumListItem = ({ albumartist, album, isButton = true }) => {
   const { t } = useTranslation();
   const { search: urlSearch } = useLocation();
   const [coverImage, setCoverImage] = useState(noCover);
 
+  const {
+    settings,
+  } = useContext(AppSettingsContext);
+
+  const {
+    show_covers,
+  } = settings;
+
   useEffect(() => {
     const getCoverArt = async () => {
       const { result } = await request('getAlbumCoverArt', {
@@ -35,7 +44,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
       };
     }
 
-    if (albumartist && album) {
+    if (albumartist && album && show_covers) {
       getCoverArt();
     }
   }, [albumartist, album]);
@@ -61,9 +70,11 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
       key={album}
     >
       <ListItemButton>
-        <ListItemAvatar>
-          <Avatar variant="rounded" alt="Cover" src={coverImage} />
-        </ListItemAvatar>
+        {show_covers &&
+          <ListItemAvatar>
+            <Avatar variant="rounded" alt="Cover" src={coverImage} />
+          </ListItemAvatar>
+        }
         <ListItemText
           primary={album || t('library.albums.unknown-album')}
           secondary={albumartist || null}

src/webapp/src/components/Player/index.js

@@ -8,6 +8,7 @@ import Display from './display';
 import SeekBar from './seekbar';
 import Volume from './volume';
 
+import AppSettingsContext from '../../context/appsettings/context';
 import PlayerContext from '../../context/player/context';
 import request from '../../utils/request';
 
@@ -18,6 +19,12 @@ const Player = () => {
   const [coverImage, setCoverImage] = useState(undefined);
   const [backgroundImage, setBackgroundImage] = useState('none');
 
+  const {
+    settings,
+  } = useContext(AppSettingsContext);
+
+  const { show_covers } = settings;
+
   useEffect(() => {
     const getCoverArt = async () => {
       const { result } = await request('getSingleCoverArt', { song_url: file });
@@ -30,7 +37,7 @@ const Player = () => {
       };
     }
 
-    if (file) {
+    if (file && show_covers) {
       getCoverArt();
     }
   }, [file]);

src/webapp/src/context/appsettings/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const AppSettingsContext = createContext({
+  showCovers: true,
+});
+
+export default AppSettingsContext;

src/webapp/src/context/appsettings/index.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+
+import AppSettingsContext from './context';
+import request from '../../utils/request';
+
+const AppSettingsProvider = ({ children }) => {
+  const [settings, setSettings] = useState({});
+
+  useEffect(() => {
+    const loadAppSettings = async () => {
+      const { result, error } = await request('getAppSettings');
+      if(result) setSettings(result);
+      if(error) {
+        console.error('Error loading AppSettings');
+      }
+    }
+
+    loadAppSettings();
+  }, []);
+
+  const context = {
+    setSettings,
+    settings,
+  };
+
+  return(
+    <AppSettingsContext.Provider value={context}>
+      { children }
+    </AppSettingsContext.Provider>
+  )
+};
+
+export default AppSettingsProvider;