diff --git a/src/jukebox/components/misc.py b/src/jukebox/components/misc.py
index 28a983b0b..80efe6393 100644
--- a/src/jukebox/components/misc.py
+++ b/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)
diff --git a/src/webapp/public/locales/de/translation.json b/src/webapp/public/locales/de/translation.json
index d1a4391d6..7dbdcf695 100644
--- a/src/webapp/public/locales/de/translation.json
+++ b/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",
diff --git a/src/webapp/public/locales/en/translation.json b/src/webapp/public/locales/en/translation.json
index 74fd9a696..7ff66ecc4 100644
--- a/src/webapp/public/locales/en/translation.json
+++ b/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",
diff --git a/src/webapp/src/commands/index.js b/src/webapp/src/commands/index.js
index 2d9ce7323..f6f772875 100644
--- a/src/webapp/src/commands/index.js
+++ b/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',
diff --git a/src/webapp/src/components/Settings/general/index.js b/src/webapp/src/components/Settings/general/index.js
new file mode 100644
index 000000000..790043778
--- /dev/null
+++ b/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 (
+
+
+
+
+ .MuiGrid-root:not(:last-child)': spacer }}
+ >
+
+
+
+
+ );
+};
+
+export default SettingsGeneral;
diff --git a/src/webapp/src/components/Settings/general/show-covers.js b/src/webapp/src/components/Settings/general/show-covers.js
new file mode 100644
index 000000000..a3b31f4e0
--- /dev/null
+++ b/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 (
+
+
+
+ {t(`settings.general.show_covers.title`)}
+
+
+
+
+
+
+ );
+};
+
+export default ShowCovers;
diff --git a/src/webapp/src/components/Settings/index.js b/src/webapp/src/components/Settings/index.js
index 1bc599fc1..75ce7840f 100644
--- a/src/webapp/src/components/Settings/index.js
+++ b/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 = () => {
+
+
+