From: Enrique H. Oliva Date: Sun, 1 Aug 2021 14:49:37 +0000 (-0500) Subject: poc: tray icon render X-Git-Tag: v2.0.1~7^2~2 X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=13777f9eedc5f743b4c9921ca02dc64f9915941e;p=mime-chat poc: tray icon render --- diff --git a/package.json b/package.json index 3cc50ff..e65cad6 100644 --- a/package.json +++ b/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", diff --git a/src/config.ts b/src/config.ts index 855b1b2..ceab21f 100644 --- a/src/config.ts +++ b/src/config.ts @@ -13,5 +13,6 @@ 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'), + appPath: app.getPath('appData') } diff --git a/src/images/icon.png b/src/images/iconTemplate.png similarity index 100% rename from src/images/icon.png rename to src/images/iconTemplate.png diff --git a/src/images/icon@2x.png b/src/images/iconTemplate@2x.png similarity index 100% rename from src/images/icon@2x.png rename to src/images/iconTemplate@2x.png diff --git a/src/images/testTemplate.png b/src/images/testTemplate.png new file mode 100644 index 0000000..7f89df3 Binary files /dev/null and b/src/images/testTemplate.png differ diff --git a/src/main.ts b/src/main.ts index 2cb205c..588b416 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,41 +12,15 @@ 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 */ initIpcMain(); + initTray(); + /* launch browser window */ await createWindow(); diff --git a/src/render/preload.ts b/src/render/preload.ts index 054f672..3cfbff5 100644 --- a/src/render/preload.ts +++ b/src/render/preload.ts @@ -1,6 +1,7 @@ // All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. -import { ipcRenderer } from "electron"; +import { ipcRenderer, Tray, nativeImage } from "electron"; +const path = require('path') declare global { interface Window { @@ -12,6 +13,20 @@ window.ipcRenderer = ipcRenderer; process.once("loaded", () => { + const read = path.join(__dirname, 'icon_16x16.png') + console.log(read) + + const imgRead = nativeImage.createFromPath(read) + + let tray = undefined; + + + // Automatic generation of menu + tray = new Tray(imgRead) + + tray.destroy() + tray = new Tray(imgRead) + window.addEventListener("message", event => { // do something with custom event diff --git a/src/session.ts b/src/session.ts index f379f88..a1937b4 100644 --- a/src/session.ts +++ b/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( diff --git a/src/store.ts b/src/store.ts index eab4cc7..227ac82 100644 --- a/src/store.ts +++ b/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"); +} diff --git a/src/tray.ts b/src/tray.ts new file mode 100644 index 0000000..ac34bbd --- /dev/null +++ b/src/tray.ts @@ -0,0 +1,76 @@ + +import { Tray } from 'electron'; +const nativeImage = require('electron').nativeImage +import {NativeImage} from 'electron' +import path from 'path'; +import { backgroundMitt } from "@/composables/useEmitter"; +import { getIconState, setIconState } from "@/store"; +import { CONNECTION_STATUS } from '@/session'; +const fs = require('fs'); +import { config } from '@/config'; + +let tray: Tray | null = null + +const TRAY_STATUS = { + playback: 'playback', + recording: 'recording', + ...CONNECTION_STATUS +} + +const defaultIconPath = path.relative('src/main.ts', 'src/images/testTemplate.png'); + +console.log(path.join(__dirname, 'iconTemplate.png')) + +const imageBuffer = fs.readFileSync('test.png'); +const icon = nativeImage.createFromBuffer(imageBuffer); + +backgroundMitt.on('update-icon-status', (payload: string) => { + updateTray(payload); +}); + +const initIcon = (path: string): NativeImage => { + const icon = nativeImage.createFromPath(path); + icon.resize({ width: 16, height: 16 }); + icon.setTemplateImage(true); + return icon; +}; + +const icons = { + default: initIcon(defaultIconPath), +}; + +const updateTray = (status: string) => { + // read icon state + const current = getIconState(); + if (current !== status) { + setIconState(status); + if (tray) { + switch(status) { + case(TRAY_STATUS.recording): + break; + case(TRAY_STATUS.playback): + break; + case(TRAY_STATUS.nominal): + break; + case(TRAY_STATUS.lost): + break; + default: + tray.setImage(icons.default); + } + } + } +} + +console.log('app path', config.configPath) +export const initTray = () => { + try { + // check config path for icons + // if no icons + // fetch + // load from userData path + tray = new Tray(icon); + } catch(e) { + console.log('Error initilizing tray', e); + } +} + diff --git a/test.png b/test.png new file mode 100755 index 0000000..f3b74a2 Binary files /dev/null and b/test.png differ diff --git a/yarn.lock b/yarn.lock index 55fa251..5e2ea71 100644 --- a/yarn.lock +++ b/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"