feat: Tray icon voice detection, customization and notification badge

src/main/appBadge.ts

@@ -6,8 +6,11 @@
 
 import { app, NativeImage, nativeImage } from "electron";
 import { join } from "path";
+import { IpcEvents } from "shared/IpcEvents";
 import { BADGE_DIR } from "shared/paths";
 
+import { mainWin } from "./mainWindow";
+
 const imgCache = new Map<number, NativeImage>();
 function loadBadge(index: number) {
     const cached = imgCache.get(index);
@@ -19,13 +22,17 @@ function loadBadge(index: number) {
     return img;
 }
 
-let lastIndex: null | number = -1;
+let lastBadgeIndex: null | number = -1;
+export var lastBadgeCount: number = -1;
 
 export function setBadgeCount(count: number) {
+    lastBadgeCount = count;
     switch (process.platform) {
         case "linux":
-            if (count === -1) count = 0;
-            app.setBadgeCount(count);
+            // commented out lines are temp to be replaced by #686
+            // if (count === -1) count = 0;
+            // app.setBadgeCount(count);
+
             break;
         case "darwin":
             if (count === 0) {
@@ -36,15 +43,17 @@ export function setBadgeCount(count: number) {
             break;
         case "win32":
             const [index, description] = getBadgeIndexAndDescription(count);
-            if (lastIndex === index) break;
+            if (lastBadgeIndex === index) break;
 
-            lastIndex = index;
+            lastBadgeIndex = index;
 
             // circular import shenanigans
             const { mainWin } = require("./mainWindow") as typeof import("./mainWindow");
             mainWin.setOverlayIcon(index === null ? null : loadBadge(index), description);
             break;
     }
+
+    mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
 }
 
 function getBadgeIndexAndDescription(count: number): [number | null, string] {

src/main/firstLaunch.ts

@@ -13,7 +13,7 @@ import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
 import { autoStart } from "./autoStart";
 import { DATA_DIR } from "./constants";
-import { createWindows } from "./mainWindow";
+import { createWindows, getAccentColor } from "./mainWindow";
 import { Settings, State } from "./settings";
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
 
@@ -48,6 +48,8 @@ export function createFirstLaunchTour() {
         Settings.store.minimizeToTray = data.minimizeToTray;
         Settings.store.discordBranch = data.discordBranch;
         Settings.store.arRPC = data.richPresence;
+        Settings.store.tray = true;
+        Settings.store.trayColor = getAccentColor()?.slice(1);
 
         if (data.autoStart) autoStart.enable();
 

src/main/ipc.ts

@@ -18,8 +18,17 @@ import { IpcEvents } from "../shared/IpcEvents";
 import { setBadgeCount } from "./appBadge";
 import { autoStart } from "./autoStart";
 import { VENCORD_FILES_DIR, VENCORD_QUICKCSS_FILE, VENCORD_THEMES_DIR } from "./constants";
-import { mainWin } from "./mainWindow";
+import { getAccentColor, mainWin } from "./mainWindow";
 import { Settings } from "./settings";
+import {
+    createTrayIcon,
+    generateTrayIcons,
+    getIconWithBadge,
+    getTrayIconFile,
+    getTrayIconFileSync,
+    pickTrayIcon,
+    setTrayIcon
+} from "./tray";
 import { handle, handleSync } from "./utils/ipcWrappers";
 import { PopoutWindows } from "./utils/popout";
 import { isDeckGameMode, showGamePage } from "./utils/steamOS";
@@ -149,3 +158,14 @@ watch(
         mainWin?.webContents.postMessage("VencordThemeUpdate", void 0);
     })
 );
+
+handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI));
+handle(IpcEvents.GET_TRAY_ICON, (_, iconPath) => getTrayIconFile(iconPath));
+handleSync(IpcEvents.GET_TRAY_ICON_SYNC, (_, iconPath) => getTrayIconFileSync(iconPath));
+handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => getAccentColor());
+handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL, isCustomIcon, isSvg) =>
+    createTrayIcon(iconName, dataURL, isCustomIcon, isSvg)
+);
+handle(IpcEvents.GENERATE_TRAY_ICONS, () => generateTrayIcons());
+handle(IpcEvents.SELECT_TRAY_ICON, async (_, iconName) => pickTrayIcon(iconName));
+handle(IpcEvents.GET_ICON_WITH_BADGE, async (_, dataURL) => getIconWithBadge(dataURL));

src/main/mainWindow.ts

@@ -4,6 +4,7 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
+import { execFileSync } from "child_process";
 import {
     app,
     BrowserWindow,
@@ -14,16 +15,17 @@ import {
     nativeTheme,
     screen,
     session,
+    systemPreferences,
     Tray
 } from "electron";
 import { rm } from "fs/promises";
 import { join } from "path";
 import { IpcEvents } from "shared/IpcEvents";
+import { ICON_PATH } from "shared/paths";
 import { isTruthy } from "shared/utils/guards";
 import { once } from "shared/utils/once";
 import type { SettingsStore } from "shared/utils/SettingsStore";
 
-import { ICON_PATH } from "../shared/paths";
 import { createAboutWindow } from "./about";
 import { initArRPC } from "./arrpc";
 import {
@@ -38,12 +40,13 @@ import {
 } from "./constants";
 import { Settings, State, VencordSettings } from "./settings";
 import { createSplashWindow } from "./splash";
+import { setTrayIcon } from "./tray";
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
 import { applyDeckKeyboardFix, askToApplySteamLayout, isDeckGameMode } from "./utils/steamOS";
 import { downloadVencordFiles, ensureVencordFiles } from "./utils/vencordLoader";
 
 let isQuitting = false;
-let tray: Tray;
+export let tray: Tray;
 
 applyDeckKeyboardFix();
 
@@ -124,6 +127,7 @@ function initTray(win: BrowserWindow) {
     ]);
 
     tray = new Tray(ICON_PATH);
+    setTrayIcon("icon");
     tray.setToolTip("Vesktop");
     tray.setContextMenu(trayMenu);
     tray.on("click", onTrayClick);
@@ -501,3 +505,38 @@ export async function createWindows() {
 
     initArRPC();
 }
+
+export function getAccentColor() {
+    if (process.platform === "linux") {
+        var accentColor = execFileSync("gdbus", [
+            "call",
+            "--session",
+            "--dest",
+            "org.freedesktop.portal.Desktop",
+            "--object-path",
+            "/org/freedesktop/portal/desktop",
+            "--method",
+            "org.freedesktop.portal.Settings.Read",
+            "org.freedesktop.appearance",
+            "accent-color"
+        ]);
+        const rgbMatch = accentColor.toString().match(/\((\d+\.\d+),\s*(\d+\.\d+),\s*(\d+\.\d+)\)/);
+
+        if (rgbMatch) {
+            const r = parseFloat(rgbMatch[1]);
+            const g = parseFloat(rgbMatch[2]);
+            const b = parseFloat(rgbMatch[3]);
+
+            const r255 = Math.round(r * 255);
+            const g255 = Math.round(g * 255);
+            const b255 = Math.round(b * 255);
+
+            const toHex = (value: number) => value.toString(16).padStart(2, "0");
+            const hexColor = `#${toHex(r255)}${toHex(g255)}${toHex(b255)}`;
+            return hexColor;
+        }
+        return "";
+    } else {
+        return `#${systemPreferences.getAccentColor?.() || ""}`;
+    }
+}

src/main/tray.ts

@@ -0,0 +1,187 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { dialog, NativeImage, nativeImage } from "electron";
+import { mkdirSync, readFileSync, writeFileSync } from "fs";
+import { readFile } from "fs/promises";
+import { join } from "path";
+import { IpcEvents } from "shared/IpcEvents";
+import { BADGE_DIR, ICONS_DIR, STATIC_DIR } from "shared/paths";
+
+import { lastBadgeCount } from "./appBadge";
+import { mainWin, tray } from "./mainWindow";
+import { Settings } from "./settings";
+
+export const statusToSettingsKey = {
+    speaking: "traySpeakingOverride",
+    muted: "trayMutedOverride",
+    deafened: "trayDeafenedOverride",
+    idle: "trayIdleOverride",
+    icon: "trayMainOverride"
+};
+
+export const isCustomIcon = (status: string) => {
+    const settingKey = statusToSettingsKey[status as keyof typeof statusToSettingsKey];
+    return Settings.store[settingKey];
+};
+
+export async function setTrayIcon(iconName: string) {
+    if (!tray || tray.isDestroyed()) return;
+    const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]);
+    if (!Icons.has(iconName)) return;
+
+    // if need to set main icon then check whether there is need of notif badge
+    if (iconName === "icon" && lastBadgeCount > 0) {
+        var trayImage: NativeImage;
+        if (isCustomIcon("icon")) {
+            trayImage = nativeImage.createFromPath(join(ICONS_DIR, "icon_custom.png"));
+        } else {
+            trayImage = nativeImage.createFromPath(join(ICONS_DIR, "icon.png"));
+        }
+
+        if (trayImage.isEmpty()) {
+            const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey];
+            Settings.store[iconKey] = false;
+            generateTrayIcons("icon");
+            return;
+        }
+
+        const badgeSvg = readFileSync(join(BADGE_DIR, `badge.svg`), "utf8");
+        // and send IPC call to renderer to add badge to icon
+        mainWin.webContents.send(IpcEvents.ADD_BADGE_TO_ICON, trayImage.toDataURL(), badgeSvg);
+        return;
+    }
+
+    try {
+        var trayImage: NativeImage;
+        if (isCustomIcon(iconName)) {
+            trayImage = nativeImage.createFromPath(join(ICONS_DIR, iconName + "_custom.png"));
+            if (trayImage.isEmpty()) {
+                const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey];
+                Settings.store[iconKey] = false;
+                generateTrayIcons(iconName);
+                return;
+            }
+        } else trayImage = nativeImage.createFromPath(join(ICONS_DIR, iconName + ".png"));
+        if (trayImage.isEmpty()) {
+            generateTrayIcons(iconName);
+            return;
+        }
+        if (process.platform === "darwin") {
+            trayImage = trayImage.resize({ width: 16, height: 16 });
+        }
+        tray.setImage(trayImage);
+    } catch (error) {
+        console.log("Error: ", error, "Regenerating tray icon.");
+        generateTrayIcons(iconName);
+    }
+    return;
+}
+
+export async function setTrayIconWithBadge(iconDataURL: string) {
+    var trayImage = nativeImage.createFromDataURL(iconDataURL);
+    if (process.platform === "darwin") {
+        trayImage = trayImage.resize({ width: 16, height: 16 });
+    }
+    tray.setImage(trayImage);
+}
+
+export async function getTrayIconFile(iconName: string) {
+    const Icons = new Set(["speaking", "muted", "deafened", "idle"]);
+    if (!Icons.has(iconName)) {
+        iconName = "icon";
+        return readFile(join(STATIC_DIR, "icon.png"));
+    }
+    return readFile(join(STATIC_DIR, iconName + ".svg"), "utf8");
+}
+
+export function getTrayIconFileSync(iconName: string) {
+    // returns dataURL of image from TrayIcons folder
+    const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]);
+
+    if (Icons.has(iconName)) {
+        var img: NativeImage;
+        if (isCustomIcon(iconName)) {
+            img = nativeImage.createFromPath(join(ICONS_DIR, iconName + "_custom.png"));
+        } else img = nativeImage.createFromPath(join(ICONS_DIR, iconName + ".png"));
+        img = img.resize({ width: 128, height: 128 });
+        if (img.isEmpty()) {
+            console.log("Can't open icon file for", iconName, ". Regenerating.");
+            generateTrayIcons(iconName);
+            img = nativeImage.createFromPath(join(ICONS_DIR, iconName + ".png"));
+            const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey];
+            Settings.store[iconKey] = false;
+        }
+        return img.toDataURL();
+    }
+}
+
+export async function createTrayIcon(
+    iconName: string,
+    iconDataURL: string,
+    isCustomIcon: boolean = false,
+    isSvg: boolean = false
+) {
+    // creates .png at config/TrayIcons/iconName.png from given iconDataURL
+    // primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call
+    iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, "");
+    if (isCustomIcon) {
+        const img = nativeImage.createFromDataURL(iconDataURL).resize({ width: 128, height: 128 });
+        if (isSvg) writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), iconDataURL, "base64");
+        else writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toPNG());
+    } else {
+        writeFileSync(join(ICONS_DIR, iconName + ".png"), iconDataURL, "base64");
+    }
+    mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
+}
+
+export async function generateTrayIcons(iconName: string = "") {
+    // this function generates tray icons as .png's in Vesktop cache for future use
+    mkdirSync(ICONS_DIR, { recursive: true });
+    const Icons = ["speaking", "muted", "deafened", "idle"];
+
+    const createMainIcon = () => {
+        const img = nativeImage.createFromPath(join(STATIC_DIR, "icon.png")).resize({ width: 128, height: 128 });
+        writeFileSync(join(ICONS_DIR, "icon.png"), img.toPNG());
+        mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
+    };
+
+    if (iconName) {
+        if (Icons.includes(iconName)) mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, iconName);
+        else if (iconName === "icon") createMainIcon();
+        return;
+    }
+    for (const icon of Icons) {
+        mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, icon);
+    }
+    createMainIcon();
+}
+
+export async function pickTrayIcon(iconName: string) {
+    const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]);
+    if (!Icons.has(iconName)) return;
+
+    const res = await dialog.showOpenDialog(mainWin!, {
+        properties: ["openFile"],
+        filters: [{ name: "Image", extensions: ["png", "jpg", "svg"] }]
+    });
+    if (!res.filePaths.length) return "cancelled";
+    const dir = res.filePaths[0];
+    // add .svg !!
+    if (dir.split(".").pop() === "svg") {
+        mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, iconName, readFileSync(dir, "utf-8"));
+        return "svg";
+    }
+    const image = nativeImage.createFromPath(dir);
+    if (image.isEmpty()) return "invalid";
+    const img = nativeImage.createFromPath(dir).resize({ width: 128, height: 128 });
+    writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toPNG());
+    return dir;
+}
+
+export async function getIconWithBadge(dataURL: string) {
+    tray.setImage(nativeImage.createFromDataURL(dataURL));
+}