From a08e1a8d696f1b79e3294ddc6b3674e6c058bc7f Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 4 Sep 2022 11:42:54 +0530
Subject: [PATCH] Fix favicon badge

---
 src/client/state/Notifications.js |  4 ++--
 src/util/common.js                | 20 +++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/client/state/Notifications.js b/src/client/state/Notifications.js
index 3a78d44e..c5d9a502 100644
--- a/src/client/state/Notifications.js
+++ b/src/client/state/Notifications.js
@@ -51,8 +51,8 @@ class Notifications extends EventEmitter {
   }
 
   async _initNoti() {
-    this.LOGO_HIGHLIGH = await getBadgedFavicon(LogoSVG, cssVar('--bg-positive')) ?? LogoSVG;
-    this.LOGO_UNREAD = await getBadgedFavicon(LogoSVG, cssVar('--bg-badge')) ?? LogoSVG;
+    this.LOGO_HIGHLIGH = await getBadgedFavicon(LogoSVG, cssVar('--bg-positive'));
+    this.LOGO_UNREAD = await getBadgedFavicon(LogoSVG, cssVar('--bg-badge'));
 
     const addNoti = (roomId) => {
       const room = this.matrixClient.getRoom(roomId);
diff --git a/src/util/common.js b/src/util/common.js
index c5cdd05a..0e198dd9 100644
--- a/src/util/common.js
+++ b/src/util/common.js
@@ -126,8 +126,10 @@ export function setFavicon(url) {
 export async function getBadgedFavicon(favUrl, color) {
   try {
     const canvas = document.createElement('canvas');
-    canvas.width = 48;
-    canvas.height = 48;
+    const size = 48;
+    const badgeSize = 8;
+    canvas.width = size;
+    canvas.height = size;
 
     const ctx = canvas.getContext('2d');
 
@@ -140,18 +142,26 @@ export async function getBadgedFavicon(favUrl, color) {
     img.src = favUrl;
     await imgPromise;
 
-    ctx.drawImage(img, 0, 0, 48, 48);
+    ctx.drawImage(img, 0, 0, size, size);
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.fillStyle = '#ffffff';
+    ctx.arc(size - badgeSize, size - badgeSize, badgeSize + 4, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fill();
+    ctx.globalCompositeOperation = 'source-over';
 
     ctx.beginPath();
     ctx.fillStyle = color;
-    ctx.arc(40, 8, 8, 0, 2 * Math.PI);
+    ctx.arc(size - badgeSize, size - badgeSize, badgeSize, 0, 2 * Math.PI);
     ctx.closePath();
     ctx.fill();
 
     return canvas.toDataURL();
   } catch (e) {
     console.error(e);
-    return undefined;
+    return favUrl;
   }
 }