Add system tray support

main/main.js

@@ -1,19 +1,22 @@
 const electron = require('electron');
 const app = electron.app;
 const Menu = electron.Menu;
+const Tray = electron.Tray;
 const menuTemplate = require('./menutemplate');
 const BrowserWindow = electron.BrowserWindow;
 const path = require('path');
 const url = require('url');
 const instagram = require('./instagram');
 const autoUpdater = require('./autoupdater');
+const utils = require('./utils');
 
-// fixes electron's timeout inconsistency
-// not doing this on windows because the fix doesn't work for windows.
 if (process.platform != 'win32') {
+  // fixes electron's timeout inconsistency
+  // not doing this on windows because the fix doesn't work for windows.
   require('./timeout-shim').fix();
 }
 
+
 const RATE_LIMIT_DELAY = 60000;
 let pollingInterval = 10000;
 
@@ -45,7 +48,19 @@ function createWindow () {
     }))
   })
 
-  mainWindow.on('closed', () => mainWindow = null)
+  mainWindow.on('close', function (event) {
+    if (!app.isQuiting) {
+      event.preventDefault();
+      mainWindow.hide();
+    } else {
+      mainWidnow = null;
+    }
+  })
+
+  mainWindow.on('minimize', function (event) {
+    event.preventDefault();
+    mainWindow.hide();
+  })
 }
 
 function createCheckpointWindow() {
@@ -71,14 +86,43 @@ function getChatList () {
   }
   instagram.getChatList(session).then((chats) => {
     mainWindow.webContents.send('chatList', chats)
-    
+
     if (chatListTimeoutObj) {
       clearTimeout(chatListTimeoutObj)
     }
     chatListTimeoutObj = setTimeout(getChatList, pollingInterval);
   }).catch(() => setTimeout(getChatList, RATE_LIMIT_DELAY))
 }
 
+function createTray() {
+  let tray = new Tray(utils.getTrayImagePath());
+
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Toggle Show', click: function(menuItem, BrowserWindow, event) {
+      if (mainWindow.isVisible()) {
+        mainWindow.hide();
+      } else {
+        mainWindow.show();
+      }
+    } },
+    { label: 'Light Icon', type : 'checkbox', checked : utils.isTrayIconLight(), click: function(item) {
+      if (item.checked) {
+        utils.setTrayImageLight();
+      } else {
+        utils.setTrayImageDark();
+      }
+      tray.setImage(utils.getTrayImagePath());
+    } },
+    { label: 'Quit', click: function() {
+      app.isQuiting = true;
+      tray.destroy();
+      app.quit();
+    } }
+  ]);
+
+  tray.setContextMenu(contextMenu);
+}
+
 let chatTimeoutObj;
 let messagesThread;
 function getChat (evt, id) {
@@ -118,11 +162,12 @@ app.setAppUserModelId('com.ifedapoolarewaju.desktop.igdm')
 
 app.on('ready', () => {
   createWindow();
+  createTray();
   // only set the menu template when in production mode/
   // this also leaves the dev console enabled when in dev mode.
   if (!process.defaultApp) {
     const menu = Menu.buildFromTemplate(menuTemplate);
-    Menu.setApplicationMenu(menu); 
+    Menu.setApplicationMenu(menu);
   }
   autoUpdater.init();
 })

main/utils.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const Client = require('instagram-private-api').V1;
 const app = require('electron').app;
 const path = require('path');
+const config = require('electron-json-config');
 
 const buildAndGetStoragePath = () => {
   const storagePath = path.join(app.getPath('userData'), 'session-cookie')
@@ -65,7 +66,35 @@ const getDevice = (username) => {
   return device;
 }
 
+//on windows it is recommended to use ICO icons to get best visual effects
+let trayImage = 'icon.ico';
+if (process.platform != 'win32') {
+  trayImage = 'background.png';
+}
+
+const isTrayIconLight = () => {
+  return config.get('trayImageTheme') == 'light';
+}
+
+const setTrayImageLight = () => {
+  config.set('trayImageTheme', 'light');
+}
+
+const setTrayImageDark = () => {
+  config.set('trayImageTheme', 'dark');
+}
+
+const getTrayImagePath = () => {
+  let trayImageTheme = config.get('trayImageTheme');
+  if (trayImageTheme == 'light') {
+    return path.join(__dirname, '/../browser/img/' + 'l_' + trayImage);
+  }
+  return path.join(__dirname, '/../browser/img/' + trayImage);
+}
+
 module.exports = {
   canUseFileStorage, guessUsername,
-  getCookieStorage, clearCookieFiles, getDevice
+  getCookieStorage, clearCookieFiles, getDevice,
+  setTrayImageLight, setTrayImageDark, getTrayImagePath,
+  isTrayIconLight
 }

package.json

@@ -4,9 +4,8 @@
   "description": "Desktop application for Instagram DMs",
   "main": "main/main.js",
   "scripts": {
-    "start": "gulp build && electron .",
-    "pack": "gulp build && build --dir",
-    "dist": "gulp build && build -mwl --x64"
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder"
   },
   "repository": {
     "type": "git",
@@ -29,7 +28,8 @@
     "fb": "^2.0.0",
     "instagram-private-api": "github:ifedapoolarewaju/instagram-private-api#a66fd1c1a15297877a66ac10f41de70432bd11f4",
     "node-notifier": "^5.1.2",
-    "nojs": "^0.1.1"
+    "nojs": "^0.1.1",
+    "electron-json-config": "^1.5.3"
   },
   "devDependencies": {
     "electron": "2.0.12",
@@ -39,7 +39,8 @@
     "gulp": "^4.0.0",
     "gulp-htmlmin": "^4.0.0",
     "gulp-pug": "^3.3.0",
-    "jstransformer-markdown-it": "^2.0.0"
+    "jstransformer-markdown-it": "^2.0.0",
+    "electron-json-config": "^1.5.3"
   },
   "build": {
     "publish": [
@@ -51,28 +52,9 @@
     ],
     "appId": "com.ifedapoolarewaju.desktop.igdm",
     "copyright": "ifedapo Olarewaju 2018",
-    "mac": {
-      "target": [
-        "dmg",
-        "zip"
-      ],
-      "publish": "github",
-      "category": "public.app-category.social-networking"
-    },
-    "win": {
-      "target": [
-        "nsis",
-        "portable"
-      ],
-      "publish": "github",
-      "publisherName": "ifedapoolarewaju"
-    },
     "linux": {
       "target": [
-        "snap",
-        "AppImage",
-        "zip",
-        "deb"
+        "AppImage"
       ],
       "publish": "github",
       "maintainer": "Ifedapo Olarewaju <[email protected]>"