Adding notifications in the form of tray icon overlay

README.md

@@ -5,12 +5,12 @@ It uses the Web App and wrapps it as a standalone application using Electron.
 
 ## Install
 
-You can download the tar.gz, rpm or deb from the [releases page](https://github.com/ivelkov/teams-for-linux/releases).
+You can download the tarball, rpm, deb or pacman from the [releases page](https://github.com/ivelkov/teams-for-linux/releases).
 
 ## Run from source
 
 ```bash
-$ npm install
+$ (cd app;npm install)
 $ npm start
 ```
 

app/lib/index.js

@@ -4,6 +4,7 @@
 const electron = require('electron');
 const path = require('path');
 const open = require('open');
+const nativeImage = require('electron').nativeImage;
 
 const Tray = electron.Tray;
 const Menu = electron.Menu;
@@ -12,19 +13,20 @@ let tray;
 
 const app = electron.app;
 app.on('ready', () => {
-  const icon = path.join(app.getAppPath(), 'lib/assets/icons/icon-96x96.png');
+  const initialIcon = path.join(app.getAppPath(), 'lib/assets/icons/icon-96x96.png');
   const window = new electron.BrowserWindow({
     width: 800,
     height: 600,
-    icon,
+    initialIcon,
 
     webPreferences: {
       partition: 'persist:teams',
+      preload: path.join(__dirname, 'notifications.js'),
       nodeIntegration: false
     }
   });
 
-  tray = new Tray(icon);
+  tray = new Tray(initialIcon);
   tray.setToolTip('Teams');
   tray.on('click', () => {
     if (window.isFocused()) {
@@ -34,6 +36,7 @@ app.on('ready', () => {
       window.focus();
     }
   });
+
   tray.setContextMenu(new Menu.buildFromTemplate(
     [
       {
@@ -53,7 +56,7 @@ app.on('ready', () => {
     ]
   ));
 
-  window.on('close',  (event) => {
+  window.on('close', (event) => {
     if (!shouldQuit) {
       event.preventDefault();
       window.hide();
@@ -62,11 +65,21 @@ app.on('ready', () => {
     }
   });
 
+  electron.ipcMain.on('notifications', (event, {count, icon}) => {
+    try {
+      const image = nativeImage.createFromDataURL(icon);
+      tray.setImage(image);
+      window.flashFrame(count > 0);
+    } catch (err) {
+      console.error(`Could not update tray icon: ${err.message}`)
+    }
+  });
+
   window.webContents.on('new-window', (event, url) => {
     event.preventDefault();
-    open(url, (err, stdout, stderr) => {
+    open(url, (err) => {
       if (err) {
-        console.error(`exec error: ${err}`);
+        console.error(`exec error: ${err.message}`);
       }
     });
   });

app/lib/notifications.js

@@ -0,0 +1,63 @@
+(function () {
+  const electron = require('electron');
+  const remote = electron.remote;
+  const NativeImage = electron.nativeImage;
+
+  function setOverlay(count) {
+    const canvas = document.createElement('canvas');
+    canvas.height = 140;
+    canvas.width = 140;
+    const image = new Image();
+    image.crossOrigin = 'anonymous';
+    image.onload = function () {
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(image, 0, 0, 140, 140);
+      if (count > 0) {
+        ctx.fillStyle = 'red';
+        ctx.beginPath();
+        ctx.ellipse(105, 35, 35, 35, 35, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'white';
+
+        ctx.font = 'bold 70px "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif';
+        if (count > 9) {
+          ctx.fillText('9+', 105, 60);
+        } else {
+          ctx.fillText(count.toString(), 105, 60);
+        }
+      }
+
+      const badgeDataURL = canvas.toDataURL();
+      const img = NativeImage.createFromDataURL(badgeDataURL);
+      electron.ipcRenderer.send('notifications', {
+        count: count,
+        icon: badgeDataURL
+      });
+    };
+    image.src = document.querySelector("link[rel*='icon']").href;
+  }
+
+
+  function poll(lastCount) {
+    if (typeof angular !== 'undefined') {
+      try {
+        let notifications = angular.element(document.documentElement).controller().pageTitleNotificationCount;
+        if (notifications !== lastCount) {
+          setOverlay(notifications);
+        }
+        setTimeout(poll, 1000, notifications);
+      } catch (err) {
+        setTimeout(poll, 1000, lastCount);
+      }
+    } else {
+      setTimeout(poll, 1000, 0);
+    }
+  }
+
+
+  document.addEventListener('DOMContentLoaded', function () {
+    poll(0);
+  });
+
+})();

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "teams-for-linux",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Microsoft Teams for Linux",
   "main": "lib/index.js",
   "author": "Ivelin Velkov <[email protected]>",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teams-for-linux",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Unfocial client for Microsoft Teams for Linux",
   "homepage": "https://github.com/ivelkov/teams-for-linux",
   "keywords": [
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "electron": "^1.4.15",
-    "electron-builder": "^11.7.0"
+    "electron-builder": "^13.11.1"
   },
   "build": {
     "appId": "teams-for-linux",