Add config for system notifications

src/__tests__/App.test.tsx

@@ -133,6 +133,9 @@ const configState: ConfigPage = {
     filters: [],
   },
   sort: {},
+  player: {
+    systemNotifications: false,
+  },
   serverType: Server.Subsonic,
   lookAndFeel: {
     font: 'Poppins',

src/components/settings/ConfigPanels/PlayerConfig.tsx

@@ -20,7 +20,7 @@ import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import i18n from '../../../i18n/i18n';
 import { setPlaybackSetting } from '../../../redux/playQueueSlice';
 import ListViewTable from '../../viewtypes/ListViewTable';
-import { appendPlaybackFilter, setAudioDeviceId } from '../../../redux/configSlice';
+import { appendPlaybackFilter, setAudioDeviceId, setPlayer } from '../../../redux/configSlice';
 import { notifyToast } from '../../shared/toast';
 import ConfigOption from '../ConfigOption';
 import { Server } from '../../../types';
@@ -279,6 +279,21 @@ const PlayerConfig = ({ bordered }: any) => {
         />
       )}
 
+      <ConfigOption
+        name={t('System Notifications')}
+        description={<>{t('Show a system notification whenever the song changes.')}</>}
+        option={
+          <StyledToggle
+            defaultChecked={config.player.systemNotifications}
+            checked={config.player.systemNotifications}
+            onChange={(e: boolean) => {
+              settings.setSync('systemNotifications', e);
+              dispatch(setPlayer({ systemNotifications: e }));
+            }}
+          />
+        }
+      />
+
       <ConfigOption
         name={t('Scrobble')}
         description={t(

src/components/shared/setDefaultSettings.ts

@@ -111,6 +111,10 @@ const setDefaultSettings = (force: boolean) => {
     settings.setSync('scrobble', false);
   }
 
+  if (force || !settings.hasSync('systemNotifications')) {
+    settings.setSync('systemNotifications', false);
+  }
+
   if (force || !settings.hasSync('musicFolder.id')) {
     settings.setSync('musicFolder.id', null);
   }

src/redux/configSlice.ts

@@ -28,6 +28,9 @@ export interface ConfigPage {
     genreListPage?: SortColumn;
     playlistListPage?: SortColumn;
   };
+  player: {
+    systemNotifications: boolean;
+  };
   lookAndFeel: {
     font: string;
     listView: {
@@ -106,6 +109,9 @@ const initialState: ConfigPage = {
     filters: parsedSettings.playbackFilters,
     audioDeviceId: parsedSettings.audioDeviceId || undefined,
   },
+  player: {
+    systemNotifications: parsedSettings.systemNotifications,
+  },
   sort: {
     albumListPage: undefined,
     albumPage: undefined,
@@ -223,6 +229,13 @@ const configSlice = createSlice({
       };
     },
 
+    setPlayer: (state, action: PayloadAction<any>) => {
+      state.player = {
+        ...state.player,
+        ...action.payload,
+      };
+    },
+
     setWindow: (state, action: PayloadAction<any>) => {
       state.window = { ...state.window, ...action.payload };
     },
@@ -354,5 +367,6 @@ export const {
   setOBS,
   setSidebar,
   setWindow,
+  setPlayer,
 } = configSlice.actions;
 export default configSlice.reducer;

src/shared/mockSettings.ts

@@ -22,6 +22,7 @@ export const mockSettings = {
   pollingInterval: 20,
   fadeDuration: 9,
   fadeType: 'equalPower',
+  systemNotifications: false,
   scrobble: false,
   transcode: false,
   sidebar: {