Merge branch 'default_tray_icon' into 'dev'

Default tray icon

See merge request crimata/electron-app!11

package.json

@@ -55,7 +55,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-0",
     "@wasm-tool/wasm-pack-plugin": "^1.3.1",
-    "electron": "^8.3.3",
+    "electron": "11.4.10",
     "electron-devtools-installer": "^3.1.0",
     "electron-log": "^4.3.4",
     "eslint": "^6.7.2",

src/config.ts

@@ -13,5 +13,5 @@ export const config = {
     PLATFORM_URL: `${PLATFORM_IP}:${PLATFORM_PORT}`,
     BUSINESS_URL: `${BUSINESS_IP}:${BUSINESS_PORT}`,
     BUSINESS_PREFIX: '/api',
-    configPath: app.getPath('userData')
+    configPath: app.getPath('userData'),
 }

src/main.ts

@@ -12,45 +12,20 @@
 import initIpcMain from "@/ipc/index";
 import  { accountAuth } from "./account";
 import createWindow from "./window";
+import { initTray } from './tray';
 
-import { Menu, Tray } from 'electron';
-const nativeImage = require('electron').nativeImage
-import path, {resolve} from 'path';
-
-let tray = null
 export default async function main() {
 
-    // TODO: fix image paths
-    // currently looking in dist-electron directory
-    // should be looking in source
-    console.log(resolve(__dirname, './images', 'icon.png'))
-    console.log(path.join(__dirname, './images/icon.png'))
-    try {
-        const image = nativeImage.createFromPath(resolve(__dirname, 'images', 'icon_16x16.png'));
-        const urlImage = nativeImage.createFromDataURL('https://github.com/vladimiry-playground/electron-quick-start-tray-issue/blob/master/icon.png');
-            console.log(image)
-            console.log(urlImage)
-        tray = new Tray(resolve(__dirname, 'images', 'icon_16x16.png'))
-    } catch(e) {
-        console.log(e)
-    }
-    // const contextMenu = Menu.buildFromTemplate([
-    //   { label: 'Item1', type: 'radio' },
-    //   { label: 'Item2', type: 'radio' },
-    //   { label: 'Item3', type: 'radio', checked: true },
-    //   { label: 'Item4', type: 'radio' }
-    // ])
-    // tray.setToolTip('This is my application.')
-    // tray.setContextMenu(contextMenu)
-
-
-    /* initiate controls for frontend to use when needed */
+    /* initiate render process event listeners & handlers */
     initIpcMain();
 
+    /* initiate tray icon in default state */
+    initTray();
+
     /* launch browser window */
     await createWindow();
 
     /* try to authenticate with token */
-    await accountAuth();
+    accountAuth();
 
 }

src/session.ts

@@ -7,6 +7,13 @@ import { backgroundMitt, ipcEmit } from "@/composables/useEmitter";
 import { Notification } from 'electron';
 import { getWindowFocus, getWindowOpen } from './store';
 
+export const CONNECTION_STATUS = {
+    connected: 'Connected',
+    nominal: 'Nominal',
+    reconnecting: 'Reconnecting',
+    lost: 'Connection Lost',
+};
+
 function showNotification (options: {
     title: string;
     subtitle?: string;
@@ -29,7 +36,7 @@ const onMessageCallback = (payload: string) => {
 
     if (payload === "CLOSE_AUTH_FAIL") {
         backgroundMitt.emit("close-auth-fail");
-        return
+        return;
     }
 
     const message = JSON.parse(payload) as ClientProtocol;
@@ -58,15 +65,18 @@ const onMessageCallback = (payload: string) => {
 
 }
 
+
 const connectionStatusCallback = (status: string) => {
+    // update icon
+    // backgroundMitt.emit("update-icon-status", status);
     ipcEmit('set-connection-status', status);
 }
 
 const statusOptions = {
-   openMessage: "Connected",
-   pongMessage: "Nominal",
-   closeMessage: "Reconnecting",
-   pingErrorMessage: "Connection Lost",
+   openMessage: CONNECTION_STATUS.connected,
+   pongMessage: CONNECTION_STATUS.nominal,
+   closeMessage: CONNECTION_STATUS.reconnecting,
+   pingErrorMessage: CONNECTION_STATUS.lost,
 }
 
 const { connect, send, close } = useWebsockets(

src/store.ts

@@ -45,3 +45,14 @@ export const getWindowFocus = (): boolean | undefined => {
     return store.get("window.isFocused");
 }
 
+
+/*
+ * Icon state management
+* */
+export const setIconState = (state: string): void => {
+    store.set("iconStatus", state);
+}
+
+export const getIconState = (): string | undefined => {
+    return store.get("iconStatus");
+}

src/tray.ts

@@ -0,0 +1,90 @@
+
+"use strict";
+
+import fs from 'fs'
+import path from 'path'
+import { Tray } from 'electron';
+const nativeImage = require('electron').nativeImage
+import {NativeImage} from 'electron'
+import { backgroundMitt } from "@/composables/useEmitter";
+import { getIconState, setIconState } from "@/store";
+import { CONNECTION_STATUS } from '@/session';
+
+declare const __static: string;
+
+interface Icons {
+    [name: string]: NativeImage;
+}
+
+let tray: Tray | null = null;
+const TRAY_ICON_DIR = 'trayIcon';
+
+const ICON_NAMES = {
+    default: 'icon.png',
+    // TODO: need icons for different states
+    // TODO: need higher density icons @3x, @4x, @5x
+    // TODO: need to test with 20x20 & 24x24 icon sizes
+    recording: 'recording.png',
+    playback: 'playback.png',
+    connected: 'connected.png',
+    nominal: 'nominal.png',
+    reconnecting: 'reconnecting.png',
+    lost: 'lost.png',
+}
+
+const TRAY_STATUS = {
+    playback: 'playback',
+    recording: 'recording',
+    ...CONNECTION_STATUS
+};
+
+
+const ICONS: Icons = {
+    default: iconFactory(ICON_NAMES.default),
+    [TRAY_STATUS.recording]: iconFactory(ICON_NAMES.recording),
+    [TRAY_STATUS.playback]: iconFactory(ICON_NAMES.playback),
+    [TRAY_STATUS.connected]: iconFactory(ICON_NAMES.connected),
+    [TRAY_STATUS.nominal]: iconFactory(ICON_NAMES.nominal),
+    [TRAY_STATUS.reconnecting]: iconFactory(ICON_NAMES.reconnecting),
+    [TRAY_STATUS.lost]: iconFactory(ICON_NAMES.lost),
+};
+
+backgroundMitt.on('update-icon-status', (payload: string) => {
+    updateTray(payload);
+});
+
+const changeIcon = (icon: NativeImage): void => tray ? tray.setImage(icon): undefined;
+
+function iconFactory(iconName: string): NativeImage {
+    if (iconName !== 'icon.png') {
+        console.log('ERROR: Missing Icons: ', iconName);
+    }
+    // TODO: remove hard code, need icons for different states
+    const iconBuffer = fs.readFileSync(path.join(__static, TRAY_ICON_DIR,  'icon.png'));
+    const icon = nativeImage.createFromBuffer(iconBuffer);
+    return icon;
+}
+
+function updateTray(status: string): void {
+    // read icon state
+    const current = getIconState();
+    if (current !== status) {
+       setIconState(status);
+       if (status in ICONS) {
+           changeIcon(ICONS[status]);
+       } else {
+           changeIcon(ICONS.default);
+       }
+    }
+}
+
+export function initTray(): void {
+    if (!tray) {
+        try {
+            tray = new Tray(ICONS.default);
+        } catch(e) {
+            console.log('Error initilizing tray', e);
+        }
+    }
+}
+

yarn.lock

@@ -1482,9 +1482,9 @@
   integrity sha512-6QlRuqsQ/Ox/aJEQWBEJG7A9+u7oSYl3mem/K8IzxXG/kAGbV1YPD9Bg9Zw3vyxC/YP+zONKwy8hGkSt1jxFMw==
 
 "@types/node@^12.0.12":
-  version "12.19.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.3.tgz#a6e252973214079155f749e8bef99cc80af182fa"
-  integrity sha512-8Jduo8wvvwDzEVJCOvS/G6sgilOLvvhn1eMmK3TW8/T217O7u1jdrK6ImKLv80tVryaPSVeKu6sjDEiFjd4/eg==
+  version "12.20.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.17.tgz#ffd44c2801fc527a6fe6e86bc9b900261df1c87e"
+  integrity sha512-so8EHl4S6MmatPS0f9sE1ND94/ocbcEshW5OpyYthRqeRpiYyW2uXYTo/84kmfdfeNrDycARkvuiXl6nO40NGg==
 
 "@types/node@^12.12.47":
   version "12.19.15"
@@ -5077,10 +5077,10 @@ electron-updater@^4.3.8:
     lodash.isequal "^4.5.0"
     semver "^7.3.4"
 
-electron@^8.3.3:
-  version "8.5.5"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-8.5.5.tgz#17b12bd70139c0099f750fc5de0d480bf03acb96"
-  integrity sha512-e355H+tRDial0m+X2v+l+0SnaATAPw4sNjv9qmdk/6MJz/glteVJwVJEnxTjPfEELIJSChrBWDBVpjdDvoBF4Q==
+electron@11.4.10:
+  version "11.4.10"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-11.4.10.tgz#7bcbca82810b82c2f2765824c5e11e3061272ea4"
+  integrity sha512-aQTRgRdHwCW68gxz9qvGCfOUvR4NBbdecLB/mEWX8fMncDFvPMmm+dq2D6zSWWVEKywmsj3+wMMVn3UV2Cl2CQ==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"