feat: Allow show_covers setting to be managed in Web App

src/jukebox/components/misc.py

@@ -117,3 +117,9 @@ def get_app_settings():
     return {
         'show_covers': show_covers
     }
+
+@plugin.register
+def set_app_settings(settings = {}):
+    """Set configuration settings for the web app."""
+    for key, value in settings.items():
+        cfg.setn('webapp', key, value=value)

src/webapp/public/locales/de/translation.json

@@ -219,6 +219,12 @@
       "why": "Warum?",
       "control-label": "Auto Hotspot"
     },
+    "general": {
+      "title": "Allgmeine Einstellungen",
+      "show_covers": {
+        "title": "Cover anzeigen"
+      }
+    },
     "timers": {
       "option-label-timeslot": "{{value}} min",
       "option-label-off": "Aus",

src/webapp/public/locales/en/translation.json

@@ -219,6 +219,12 @@
       "why": "Why?",
       "control-label": "Auto Hotspot"
     },
+    "general": {
+      "title": "General Settings",
+      "show_covers": {
+        "title": "Show Cover Art"
+      }
+    },
     "timers": {
       "option-label-timeslot": "{{value}} min",
       "option-label-off": "Off",

src/webapp/src/commands/index.js

@@ -257,6 +257,12 @@ const commands = {
     plugin: 'get_app_settings'
   },
 
+  setAppSettings: {
+    _package: 'misc',
+    plugin: 'set_app_settings',
+    argKeys: ['settings'],
+  },
+
   // Synchronisation
   'sync_rfidcards_all': {
     _package: 'sync_rfidcards',

src/webapp/src/components/Settings/general/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useTheme } from '@mui/material/styles';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  Grid,
+} from '@mui/material';
+import ShowCovers from './show-covers';
+
+const SettingsGeneral = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const spacer = { marginBottom: theme.spacing(2) }
+
+  return (
+    <Card>
+      <CardHeader
+        title={t('settings.general.title')}
+      />
+      <Divider />
+      <CardContent>
+        <Grid
+          container
+          direction="column"
+          sx={{ '& > .MuiGrid-root:not(:last-child)': spacer }}
+        >
+          <ShowCovers />
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SettingsGeneral;

src/webapp/src/components/Settings/general/show-covers.js

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Box,
+  Grid,
+  Switch,
+  Typography,
+} from '@mui/material';
+
+import AppSettingsContext from '../../../context/appsettings/context';
+import request from '../../../utils/request';
+
+const ShowCovers = () => {
+  const { t } = useTranslation();
+
+  const {
+    settings,
+    setSettings,
+  } = useContext(AppSettingsContext);
+
+  const {
+    show_covers,
+  } = settings;
+
+  const updateShowCoversSetting = async (show_covers) => {
+    await request('setAppSettings', { settings: { show_covers }});
+  }
+
+  const handleSwitch = (event) => {
+    setSettings({ show_covers: event.target.checked});
+    updateShowCoversSetting(event.target.checked);
+  }
+
+  return (
+    <Grid container direction="column" justifyContent="center">
+      <Grid container direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          {t(`settings.general.show_covers.title`)}
+        </Typography>
+        <Box sx={{
+          display: 'flex',
+          alignItems: 'center',
+          marginLeft: '0',
+        }}>
+          <Switch
+            checked={show_covers}
+            onChange={handleSwitch}
+          />
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ShowCovers;

src/webapp/src/components/Settings/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 
 import { Grid } from '@mui/material';
 
+import SettingsAudio from './audio/index';
 import SettingsAutoHotspot from './autohotspot';
+import SettingsGeneral from './general';
 import SettingsSecondSwipe from './secondswipe';
-import SettingsAudio from './audio/index';
 import SettingsStatus from './status/index';
 import SettingsTimers from './timers/index';
 import SystemControls from './systemcontrols';
@@ -28,6 +29,9 @@ const Settings = () => {
       <Grid item>
         <SettingsStatus />
       </Grid>
+      <Grid item>
+        <SettingsGeneral />
+      </Grid>
       <Grid item>
         <SettingsTimers />
       </Grid>