Improve tray functionality (#225)

- Add playback buttons
- Move configs to redux state

src/__tests__/App.test.tsx

@@ -409,6 +409,10 @@ const configState: ConfigPage = {
       type: 'local',
     },
   },
+  window: {
+    minimizeToTray: false,
+    exitToTray: false,
+  },
 };
 
 const favoriteState: FavoritePage = {

src/components/settings/ConfigPanels/WindowConfig.tsx

@@ -1,14 +1,17 @@
-import React, { useState } from 'react';
+import React from 'react';
 import settings from 'electron-settings';
 import { useTranslation } from 'react-i18next';
 import { ConfigOptionDescription, ConfigPanel } from '../styled';
 import { StyledToggle } from '../../shared/styled';
 import ConfigOption from '../ConfigOption';
+import { setWindow } from '../../../redux/configSlice';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 
 const WindowConfig = ({ bordered }: any) => {
   const { t } = useTranslation();
-  const [minimizeToTray, setMinimizeToTray] = useState(Boolean(settings.getSync('minimizeToTray')));
+  const dispatch = useAppDispatch();
-  const [exitToTray, setExitToTray] = useState(Boolean(settings.getSync('exitToTray')));
+  const config = useAppSelector((state) => state.config);
+
   return (
     <ConfigPanel bordered={bordered} header={t('Window')}>
       <ConfigOptionDescription>
@@ -22,11 +25,11 @@ const WindowConfig = ({ bordered }: any) => {
         description={t('Minimizes to the system tray.')}
         option={
           <StyledToggle
-            defaultChecked={minimizeToTray}
+            defaultChecked={config.window.minimizeToTray}
-            checked={minimizeToTray}
+            checked={config.window.minimizeToTray}
             onChange={(e: boolean) => {
               settings.setSync('minimizeToTray', e);
-              setMinimizeToTray(e);
+              dispatch(setWindow({ minimizeToTray: e }));
             }}
           />
         }
@@ -37,11 +40,11 @@ const WindowConfig = ({ bordered }: any) => {
         description={t('Exits to the system tray.')}
         option={
           <StyledToggle
-            defaultChecked={exitToTray}
+            defaultChecked={config.window.exitToTray}
-            checked={exitToTray}
+            checked={config.window.exitToTray}
             onChange={(e: boolean) => {
               settings.setSync('exitToTray', e);
-              setExitToTray(e);
+              dispatch(setWindow({ exitToTray: e }));
             }}
           />
         }

src/main.dev.js

@@ -22,6 +22,7 @@ import { forwardToRenderer, triggerAlias, replayActionMain } from 'electron-redu
 import playerReducer from './redux/playerSlice';
 import playQueueReducer, { toggleShuffle, toggleRepeat, setVolume } from './redux/playQueueSlice';
 import multiSelectReducer from './redux/multiSelectSlice';
+import configReducer from './redux/configSlice';
 import MenuBuilder from './menu';
 import { isWindows, isWindows10, isMacOS, isLinux } from './shared/utils';
 import setDefaultSettings from './components/shared/setDefaultSettings';
@@ -38,6 +39,7 @@ export const store = configureStore({
     player: playerReducer,
     playQueue: playQueueReducer,
     multiSelect: multiSelectReducer,
+    config: configReducer,
   },
   middleware: [triggerAlias, forwardToRenderer],
 });
@@ -535,7 +537,7 @@ const createWindow = async () => {
   });
 
   mainWindow.on('minimize', (event) => {
-    if (settings.getSync('minimizeToTray')) {
+    if (store.getState().config.window.minimizeToTray) {
       event.preventDefault();
       mainWindow.hide();
     }
@@ -557,7 +559,7 @@ const createWindow = async () => {
   });
 
   mainWindow.on('close', (event) => {
-    if (!exitFromTray && settings.getSync('exitToTray')) {
+    if (!exitFromTray && store.getState().config.window.exitToTray) {
       event.preventDefault();
       mainWindow.hide();
     }
@@ -650,6 +652,33 @@ const createTray = () => {
 
   tray = isLinux() ? new Tray(getAssetPath('icon.png')) : new Tray(getAssetPath('icon.ico'));
   const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Play/Pause',
+      click: () => {
+        playPause();
+      },
+    },
+    {
+      label: 'Next Track',
+      click: () => {
+        nextTrack();
+      },
+    },
+    {
+      label: 'Previous Track',
+      click: () => {
+        previousTrack();
+      },
+    },
+    {
+      label: 'Stop',
+      click: () => {
+        stop();
+      },
+    },
+    {
+      type: 'separator',
+    },
     {
       label: 'Open main window',
       click: () => {
@@ -658,9 +687,6 @@ const createTray = () => {
         createWinThumbnailClip();
       },
     },
-    {
-      type: 'separator',
-    },
     {
       label: 'Quit Sonixd',
       click: () => {

src/redux/configSlice.ts

@@ -58,6 +58,10 @@ export interface ConfigPage {
       type: 'web' | 'local';
     };
   };
+  window: {
+    minimizeToTray: boolean;
+    exitToTray: boolean;
+  };
   serverType: Server;
 }
 
@@ -197,6 +201,10 @@ const initialState: ConfigPage = {
       type: parsedSettings.obs.type || 'local',
     },
   },
+  window: {
+    minimizeToTray: Boolean(parsedSettings.minimizeToTray),
+    exitToTray: Boolean(parsedSettings.exitToTray),
+  },
   serverType: parsedSettings.serverType,
 };
 
@@ -215,6 +223,10 @@ const configSlice = createSlice({
       };
     },
 
+    setWindow: (state, action: PayloadAction<any>) => {
+      state.window = { ...state.window, ...action.payload };
+    },
+
     setPageSort: (
       state,
       action: PayloadAction<{
@@ -341,5 +353,6 @@ export const {
   setDiscord,
   setOBS,
   setSidebar,
+  setWindow,
 } = configSlice.actions;
 export default configSlice.reducer;