UI improvements (#11)

* Update how emojis are handled

* Use template icon to support light/dark theme for macOS

* Removed npm-emoji as it didn't support low battery

* Handle light/dark theme on Windows

package.json

@@ -25,6 +25,7 @@
     "@electron-forge/maker-zip": "^6.1.1",
     "@electron-forge/publisher-github": "^6.1.1",
     "@types/node-hid": "^1.3.1",
+    "@types/winreg": "^1.2.32",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "electron": "^26.1.0",
@@ -37,6 +38,7 @@
   },
   "dependencies": {
     "arctis-usb-finder": "^0.0.19",
-    "electron-squirrel-startup": "^1.0.0"
+    "electron-squirrel-startup": "^1.0.0",
+    "winreg": "^1.2.4"
   }
 }

src/headphone_view.ts

@@ -17,18 +17,20 @@ function exportView(mainTray: any, headphone: SimpleHeadphone) {
   mainTray.setToolTip(`${text}`);
   mainTray.setTitle(` ${percentage}%`);
 
-  if (headphone.isCharging) {
-    text += ' 🔋 ';
+  if (percentage === 100) {
+    text += ' \uD83D\uDD0B ';
+  } else if (headphone.isCharging) {
+    text += ' \uD83D\uDD0B ';
   }
 
   if (headphone.isDischarging) {
-    text += ' 🪫 ';
+    text += ' \uD83E\uDEAB ';
   }
 
   if (headphone.isMuted) {
-    text += ' 🔇 ';
+    text += ' \uD83D\uDD07 ';
   } else {
-    text += ' 🔊 ';
+    text += ' \uD83D\uDD0A ';
   }
 
   return new MenuItem({ label: text });

src/main.ts

@@ -1,11 +1,9 @@
 import { app, BrowserWindow } from 'electron';
 import createTray from './tray';
 
-import path = require('path');
-
 if (require('electron-squirrel-startup')) app.quit();
 
-let mainWindow: any;
+let mainWindow: BrowserWindow;
 
 const createWindow = () => {
   mainWindow = new BrowserWindow({
@@ -30,13 +28,9 @@ const createWindow = () => {
 // Don't show the app in the doc
 app.dock?.hide();
 
-function handleQuit() {
-  app.quit();
-}
-
 app.whenReady().then(() => {
   createWindow();
-  createTray(path);
+  createTray();
 });
 
 // Quit the app when the window is closed

src/tray.ts

@@ -1,13 +1,18 @@
+import path = require('path');
+
 import { Tray, Menu, MenuItem } from 'electron';
 import SimpleHeadphone from 'arctis-usb-finder/dist/interfaces/simple_headphone';
+import Host from 'arctis-usb-finder/dist/utils/host';
 
 import exportView from './headphone_view';
 import debugMenu from './menu_items/debug';
 import helpMenuItem from './menu_items/help';
 import quitMenuItem from './menu_items/quit';
 import HeadphoneManager from './headphone_manager';
+import HandleThemes from './windows/handle_themes';
+import iconPicker from './windows/icon_picker';
 
-let mainTray: any;
+let mainTray: Tray;
 const headphoneManager = new HeadphoneManager();
 
 const buildTrayMenu = (force: boolean = false, debug: boolean = false) => {
@@ -31,9 +36,24 @@ const buildTrayMenu = (force: boolean = false, debug: boolean = false) => {
   mainTray.setContextMenu(contextMenu);
 };
 
-const createTray = (path: any) => {
+const icon = (): string => {
   const assetsDirectory = path.join(__dirname, '../assets');
-  mainTray = new Tray(path.join(assetsDirectory, 'headphones.png'));
+
+  if (Host.isMac()) {
+    return path.join(assetsDirectory, 'headphonesTemplate.png');
+  } else {
+    return path.join(assetsDirectory, '[email protected]');
+  }
+};
+
+const createTray = async () => {
+  if (Host.isWin()) {
+    const handleThemes = new HandleThemes();
+    mainTray = new Tray(iconPicker(await handleThemes.isUsedSystemLightTheme()));
+    handleThemes.tray = mainTray;
+  } else {
+    mainTray = new Tray(icon());
+  }
 
   const contextMenu = Menu.buildFromTemplate([
     { label: 'No Headphones USB devices plugged in', type: 'normal' },

src/windows/handle_themes.ts

@@ -0,0 +1,31 @@
+import { Tray, nativeTheme } from 'electron';
+import Registry = require('winreg');
+import iconPicker from './icon_picker';
+
+export default class HandleThemes {
+  tray: Tray;
+
+  constructor() {
+    nativeTheme.on('updated', () => this.handleThemeChange());
+  }
+
+  async isUsedSystemLightTheme(): Promise<boolean> {
+    const reg = new Registry({
+      hive: Registry.HKCU,
+      key: '\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize',
+    });
+    return new Promise((resolve) =>
+      reg.get('SystemUsesLightTheme', (err: any, item: { value: string }) => {
+        if (!err) return resolve(item.value === '0x1');
+        resolve(false);
+      })
+    );
+  }
+
+  async handleThemeChange() {
+    const isLightTheme = await this.isUsedSystemLightTheme();
+    console.log('in updated', isLightTheme);
+
+    this.tray.setImage(iconPicker(isLightTheme));
+  }
+}

src/windows/icon_picker.ts

@@ -0,0 +1,14 @@
+import path = require('path');
+
+const iconPicker = (lightTheme: boolean) => {
+  const assetsDirectory = path.join(__dirname, '../../assets');
+
+  console.log('icon', lightTheme);
+  if (lightTheme) {
+    return path.join(assetsDirectory, 'icon.ico');
+  } else {
+    return path.join(assetsDirectory, 'icon_white.ico');
+  }
+};
+
+export default iconPicker;