Add tray icon from favicons.

app/renderer/js/tray.js

@@ -3,105 +3,111 @@ const path = require('path');
 
 const electron = require('electron');
 
-const {ipcRenderer, remote} = electron;
+const { ipcRenderer, remote } = electron;
 
-const {Tray, Menu, nativeImage, BrowserWindow} = remote;
+const { Tray, Menu, BrowserWindow } = remote;
 
-const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
+const APP_ICON = path.join(__dirname, '../../resources/', 'f');
 
 const ConfigUtil = require(__dirname + '/utils/config-util.js');
 
-const iconPath = () => {
+const iconPath = unreadCount => {
 	if (process.platform === 'linux') {
 		return APP_ICON + 'linux.png';
 	}
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
+	if (!unreadCount) {
+		return path.join(__dirname, '../../resources/tray', 'trayosx@2x.png');
+	}
+	if (unreadCount > 99) {
+		return APP_ICON + (process.platform === 'win32' ? 'win.ico' : `/favicon-infinite.png`);
+	}
+	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : `/favicon-${unreadCount}.png`);
 };
 
 let unread = 0;
 
-const trayIconSize = () => {
-	switch (process.platform) {
-		case 'darwin':
-			return 20;
-		case 'win32':
-			return 100;
-		case 'linux':
-			return 100;
-		default: return 80;
-	}
-};
+// const trayIconSize = () => {
+// 	switch (process.platform) {
+// 		case 'darwin':
+// 			return 20;
+// 		case 'win32':
+// 			return 100;
+// 		case 'linux':
+// 			return 100;
+// 		default: return 80;
+// 	}
+// };
 
 //  Default config for Icon we might make it OS specific if needed like the size
-const config = {
-	pixelRatio: window.devicePixelRatio,
-	unreadCount: 0,
-	showUnreadCount: true,
-	unreadColor: '#000000',
-	readColor: '#000000',
-	unreadBackgroundColor: '#B9FEEA',
-	readBackgroundColor: '#B9FEEA',
-	size: trayIconSize(),
-	thick: process.platform === 'win32'
-};
+// const config = {
+// 	pixelRatio: window.devicePixelRatio,
+// 	unreadCount: 0,
+// 	showUnreadCount: true,
+// 	unreadColor: '#000000',
+// 	readColor: '#000000',
+// 	unreadBackgroundColor: '#B9FEEA',
+// 	readBackgroundColor: '#B9FEEA',
+// 	size: trayIconSize(),
+// 	thick: process.platform === 'win32'
+// };
 
-const renderCanvas = function (arg) {
-	config.unreadCount = arg;
+// const renderCanvas = function (arg) {
+// 	config.unreadCount = arg;
 
-	return new Promise(resolve => {
-		const SIZE = config.size * config.pixelRatio;
-		const PADDING = SIZE * 0.05;
-		const CENTER = SIZE / 2;
-		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
-		const color = config.unreadCount ? config.unreadColor : config.readColor;
-		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
+// 	return new Promise(resolve => {
+// 		const SIZE = config.size * config.pixelRatio;
+// 		const PADDING = SIZE * 0.05;
+// 		const CENTER = SIZE / 2;
+// 		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
+// 		const color = config.unreadCount ? config.unreadColor : config.readColor;
+// 		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
 
-		const canvas = document.createElement('canvas');
-		canvas.width = SIZE;
-		canvas.height = SIZE;
-		const ctx = canvas.getContext('2d');
+// 		const canvas = document.createElement('canvas');
+// 		canvas.width = SIZE;
+// 		canvas.height = SIZE;
+// 		const ctx = canvas.getContext('2d');
 
-		// Circle
-		// If (!config.thick || config.thick && HAS_COUNT) {
-		ctx.beginPath();
-		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
-		ctx.fillStyle = backgroundColor;
-		ctx.fill();
-		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
-		ctx.strokeStyle = backgroundColor;
-		ctx.stroke();
-		// Count or Icon
-		if (HAS_COUNT) {
-			ctx.fillStyle = color;
-			ctx.textAlign = 'center';
-			if (config.unreadCount > 99) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
-				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
-			} else if (config.unreadCount < 10) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
-			} else {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
-			}
+// 		// Circle
+// 		// If (!config.thick || config.thick && HAS_COUNT) {
+// 		ctx.beginPath();
+// 		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
+// 		ctx.fillStyle = backgroundColor;
+// 		ctx.fill();
+// 		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
+// 		ctx.strokeStyle = backgroundColor;
+// 		ctx.stroke();
+// 		// Count or Icon
+// 		if (HAS_COUNT) {
+// 			ctx.fillStyle = color;
+// 			ctx.textAlign = 'center';
+// 			if (config.unreadCount > 99) {
+// 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
+// 				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
+// 			} else if (config.unreadCount < 10) {
+// 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+// 				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
+// 			} else {
+// 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+// 				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
+// 			}
 
-			resolve(canvas);
-		}
-	});
-};
-/**
- * Renders the tray icon as a native image
- * @param arg: Unread count
- * @return the native image
- */
-const renderNativeImage = function (arg) {
-	return Promise.resolve()
-		.then(() => renderCanvas(arg))
-		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
-		});
-};
+// 			resolve(canvas);
+// 		}
+// 	});
+// };
+// /**
+//  * Renders the tray icon as a native image
+//  * @param arg: Unread count
+//  * @return the native image
+//  */
+// const renderNativeImage = function (arg) {
+// 	return Promise.resolve()
+// 		.then(() => iconPath(arg))
+// 	// .then(canvas => {
+// 	// 	const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
+// 	// 	return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
+// 	// });
+// };
 
 function sendAction(action) {
 	const win = BrowserWindow.getAllWindows()[0];
@@ -181,17 +187,17 @@ ipcRenderer.on('tray', (event, arg) => {
 		return;
 	}
 	// We don't want to create tray from unread messages on macOS since it already has dock badges.
-	if (process.platform === 'linux' || process.platform === 'win32') {
+	if (process.platform === 'darwin' || process.platform === 'win32') {
 		if (arg === 0) {
 			unread = arg;
 			window.tray.setImage(iconPath());
 			window.tray.setToolTip('No unread messages');
 		} else {
 			unread = arg;
-			renderNativeImage(arg).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(arg + ' unread messages');
-			});
+			// renderNativeImage(arg).then(image => {
+			window.tray.setImage(iconPath(arg));
+			window.tray.setToolTip(arg + ' unread messages');
+			// });
 		}
 	}
 });
@@ -208,11 +214,11 @@ function toggleTray() {
 	} else {
 		state = true;
 		createTray();
-		if (process.platform === 'linux' || process.platform === 'win32') {
-			renderNativeImage(unread).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
-			});
+		if (process.platform === 'darwin' || process.platform === 'win32') {
+			// renderNativeImage(unread).then(image => {
+			window.tray.setImage(iconPath());
+			window.tray.setToolTip(unread + ' unread messages');
+			// });
 		}
 		ConfigUtil.setConfigItem('trayIcon', true);
 	}