Fix tray icon not showing/hiding the Ferdi window (#2234)

* Implement toggle behavior also in tray menu on right mouse click

1 files changed, 57 insertions, 41 deletions

diff --git a/src/lib/Tray.js b/src/lib/Tray.js
index eb6732c30..b36f4de7e 100644
--- a/src/lib/Tray.js
+++ b/src/lib/Tray.js
@@ -6,6 +6,7 @@ import {
   systemPreferences,
   Tray,
   ipcMain,
+  BrowserWindow,
 } from 'electron';
 import { join } from 'path';
 import macosVersion from 'macos-version';
@@ -28,30 +29,22 @@ export default class TrayIcon {
 
   visible = false;
 
-  trayMenuTemplate = [
+  isAppMuted = false;
+  
+  mainWindow = null;
+
+  trayMenuTemplate = (tray) => [
     {
-      label: 'Show Ferdi',
+      label: (tray.mainWindow.isVisible() && tray.mainWindow.isFocused()) ? 'Hide Ferdi' : 'Show Ferdi',
       click() {
-        if (!app.mainWindow) {
-          return;
-        }
-        if (app.mainWindow.isMinimized()) {
-          app.mainWindow.restore();
-        } else if (app.mainWindow.isVisible()) {
-          app.mainWindow.hide();
-        } else {
-          app.mainWindow.show();
-          app.mainWindow.focus();
-        }
+        tray._toggleWindow();
       },
     },
     {
-      label: 'Disable Notifications & Audio',
+      label: tray.isAppMuted ? 'Enable Notifications && Audio' : 'Disable Notifications && Audio',
       click() {
-        if (!app.mainWindow) {
-          return;
-        }
-        app.mainWindow.webContents.send('muteApp');
+        if (!tray.mainWindow) return;
+        tray.mainWindow.webContents.send('muteApp');
       },
     },
     {
@@ -66,24 +59,44 @@ export default class TrayIcon {
     ipcMain.on('initialAppSettings', (event, appSettings) => {
       this._updateTrayMenu(appSettings);
     });
-
     ipcMain.on('updateAppSettings', (event, appSettings) => {
       this._updateTrayMenu(appSettings);
     });
+
+    this.mainWindow = BrowserWindow.getAllWindows()[0];
+
+    // listen to window events to be able to set correct string 
+    // to tray menu ('Hide Ferdi' / 'Show Ferdi')
+    this.mainWindow.on('hide', () => {
+      this._updateTrayMenu(null);
+    });
+    this.mainWindow.on('restore', () => {
+      this._updateTrayMenu(null);
+    });
+    this.mainWindow.on('minimize', () => {
+      this._updateTrayMenu(null);
+    });
+    this.mainWindow.on('show', () => {
+      this._updateTrayMenu(null);
+    });
+    this.mainWindow.on('focus', () => {
+      this._updateTrayMenu(null);
+    });
+    this.mainWindow.on('blur', () => {
+      this._updateTrayMenu(null);
+    });
   }
 
   _updateTrayMenu(appSettings) {
     if (!this.trayIcon) return;
 
-    if (appSettings.type === 'app') {
-      const { isAppMuted } = appSettings.data;
-      this.trayMenuTemplate[1].label = isAppMuted
-        ? 'Enable Notifications && Audio'
-        : 'Disable Notifications && Audio';
-      this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate);
-      if (isLinux) {
-        this.trayIcon.setContextMenu(this.trayMenu);
-      }
+    if (appSettings && appSettings.type === 'app') {
+      this.isAppMuted = appSettings.data.isAppMuted; // save current state after a change
+    }
+
+    this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
+    if (isLinux) {
+      this.trayIcon.setContextMenu(this.trayMenu);
     }
   }
 
@@ -96,26 +109,15 @@ export default class TrayIcon {
     if (this.trayIcon) return;
 
     this.trayIcon = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
-
     this.trayIcon.setToolTip('Ferdi');
 
-    this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate);
+    this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
     if (isLinux) {
       this.trayIcon.setContextMenu(this.trayMenu);
     }
 
     this.trayIcon.on('click', () => {
-      if (!app.mainWindow) {
-        return;
-      }
-      if (app.mainWindow.isMinimized()) {
-        app.mainWindow.restore();
-      } else if (app.mainWindow.isVisible()) {
-        app.mainWindow.hide();
-      } else {
-        app.mainWindow.show();
-        app.mainWindow.focus();
-      }
+      this._toggleWindow();
     });
 
     if (isMac || isWindows) {
@@ -134,6 +136,20 @@ export default class TrayIcon {
     }
   }
 
+  _toggleWindow() {
+    const mainWindow = BrowserWindow.getAllWindows()[0];
+    if (!mainWindow) return;
+
+    if (mainWindow.isMinimized()) {
+      mainWindow.restore();
+    } else if (mainWindow.isVisible() && mainWindow.isFocused()) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+      mainWindow.focus();
+    }
+  }
+
   hide() {
     this.visible = false;
     this._hide();