Merge branch 'MageLuingil-native-linux-updates'

app/lib/browser/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+(function () {
+  const path = require('path');
+  const { ipcRenderer, BrowserWindow } = require('electron');
+  const trayNotifications = require('./tray-notifications');
+  const nativeNotifications = require('./native-notifications');
+
+  const iconPath = path.join(__dirname, '../assets/icons/icon-96x96.png');
+
+  trayNotifications({
+    ipc: ipcRenderer,
+    iconPath
+  });
+
+  document.addEventListener(
+    'DOMContentLoaded',
+    nativeNotifications({
+      ipc: ipcRenderer,
+      iconPath
+    }));
+})();

app/lib/browser/native-notifications.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const { nativeImage } = require('electron');
+
+exports = module.exports = ({ ipc, iconPath }) => {
+  return () => {
+    const icon = nativeImage.createFromPath(iconPath);
+    if (typeof Notify !== 'undefined') {
+      Notify.prototype.show = function () {
+        const notification = new Notification(this.title, {
+          body: this.options.body,
+          icon: icon.toDataURL()
+        });
+        notification.onclick = () => {
+          ipc.send('nativeNotificationClick');
+        };
+      }
+    }
+  }
+};

app/lib/browser/tray-notifications.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const { nativeImage } = require('electron');
+
+/**
+ * Build an app icon with a notifications count overlay.
+ */
+function buildIcon({ count, icon }) {
+  return new Promise((resolve) => {
+    const canvas = document.createElement('canvas');
+    canvas.height = 140;
+    canvas.width = 140;
+    const image = new Image();
+    image.src = icon.toDataURL('image/png');
+    image.onload = () => {
+      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);
+        }
+      }
+      resolve(canvas.toDataURL());
+    };
+  });
+}
+
+exports = module.exports = ({ ipc, iconPath }) => {
+  let lastCount = 0;
+
+  ipc.on('page-title', () => {
+    if (typeof angular === 'undefined') {
+      return;
+    }
+
+    const count = angular.element(document.documentElement)
+      .controller()
+      .pageTitleNotificationCount;
+    if (lastCount !== count) {
+      buildIcon({ count, icon: nativeImage.createFromPath(iconPath) })
+        .then((icon) => {
+          ipc.send('notifications', {
+            count,
+            icon
+          });
+        });
+      lastCount = count;
+    }
+  });
+};

app/lib/index.js

@@ -1,78 +1,40 @@
 
 'use strict';
 
-const electron = require('electron');
 const path = require('path');
 const open = require('open');
-const nativeImage = require('electron').nativeImage;
+const {
+  app,
+  ipcMain,
+  BrowserWindow
+} = require('electron');
+const Menus = require('./menus.js');
+
+let menus;
 
-const Tray = electron.Tray;
-const Menu = electron.Menu;
-let shouldQuit = false;
-let tray;
 
-const app = electron.app;
 app.on('ready', () => {
-  const initialIcon = path.join(app.getAppPath(), 'lib/assets/icons/icon-96x96.png');
-  const window = new electron.BrowserWindow({
+  const iconPath = path.join(app.getAppPath(), 'lib/assets/icons/icon-96x96.png');
+  const window = new BrowserWindow({
     width: 800,
     height: 600,
-    initialIcon,
+    iconPath,
+    autoHideMenuBar: true,
 
     webPreferences: {
       partition: 'persist:teams',
-      preload: path.join(__dirname, 'notifications.js'),
+      preload: path.join(__dirname, 'browser', 'index.js'),
       nodeIntegration: false
     }
   });
+  menus = new Menus(iconPath);
+  menus.register(window);
 
-  tray = new Tray(initialIcon);
-  tray.setToolTip('Teams');
-  tray.on('click', () => {
-    if (window.isFocused()) {
-      window.hide();
-    } else {
-      window.show();
-      window.focus();
-    }
-  });
-
-  tray.setContextMenu(new Menu.buildFromTemplate(
-    [
-      {
-        label: 'Refresh',
-        click: () => {
-          window.show();
-          window.reload();
-        }
-      },
-      {
-        label: 'Quit',
-        click: () => {
-          shouldQuit = true;
-          app.quit();
-        }
-      }
-    ]
-  ));
-
-  window.on('close', (event) => {
-    if (!shouldQuit) {
-      event.preventDefault();
-      window.hide();
-    } else {
-      app.quit();
-    }
-  });
+  window.on('page-title-updated', (event, title) => window.webContents.send('page-title', title));
 
-  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}`)
-    }
+  ipcMain.on('nativeNotificationClick', (event) => {
+    window.show();
+    window.focus();
   });
 
   window.webContents.on('new-window', (event, url) => {
@@ -86,4 +48,8 @@ app.on('ready', () => {
 
   window.webContents.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36');
   window.loadURL('https://teams.microsoft.com/');
+
+  if (process.env.WEB_DEBUG) {
+    window.openDevTools();
+  }
 });

app/lib/menus.js

@@ -0,0 +1,103 @@
+'use strict';
+
+const {
+  app,
+  nativeImage,
+  ipcMain,
+  Tray,
+  Menu
+} = require('electron');
+
+let shouldQuit = false;
+
+class Menus {
+
+  constructor(iconPath) {
+    this.iconPath = iconPath;
+  }
+
+  static quit() {
+    shouldQuit = true;
+    app.quit();
+  }
+
+  static reload(window) {
+    window.show();
+    window.reload();
+  }
+
+  register(window) {
+    const appMenu = new Menu.buildFromTemplate(
+      [
+        {
+          label: 'Refresh',
+          accelerator: 'ctrl+R',
+          click: () => Menus.reload(window)
+        },
+        {
+          label: 'Quit',
+          accelerator: 'ctrl+Q',
+          click: () => Menus.quit()
+        }
+      ]
+    );
+
+    window.setMenu(new Menu.buildFromTemplate([
+      {
+        label: 'File',
+        submenu: appMenu
+      },
+      {
+        label: 'Help',
+        submenu: [
+          {
+            label: 'Online Documentation',
+            click: () => open('https://support.office.com/en-us/teams?omkt=en-001')
+          },
+          {
+            label: 'Github Project',
+            click: () => open('https://github.com/ivelkov/teams-for-linux')
+          },
+          { type: 'separator' },
+          {
+            label: 'Version ' + app.getVersion(),
+            enabled: false
+          }
+        ]
+      }
+    ]));
+
+    this.tray = new Tray(this.iconPath);
+    this.tray.setToolTip('Microsoft Teams');
+    this.tray.on('click', () => {
+      if (window.isFocused()) {
+        window.hide();
+      } else {
+        window.show();
+        window.focus();
+      }
+    });
+    this.tray.setContextMenu(appMenu);
+
+    window.on('close', (event) => {
+      if (!shouldQuit) {
+        event.preventDefault();
+        window.hide();
+      } else {
+        app.quit();
+      }
+    });
+
+    ipcMain.on('notifications', (event, { count, icon }) => {
+      try {
+        this.image = nativeImage.createFromDataURL(icon);
+        this.tray.setImage(this.image);
+        window.flashFrame(count > 0);
+      } catch (err) {
+        console.error(`Could not update tray icon: ${err.message}`, err)
+      }
+    });
+  }
+}
+
+exports = module.exports = Menus;

app/package.json

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