michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Fix favicon badge

Browse source
This commit is contained in:
Ajay Bura 2022-09-04 11:42:54 +05:30
parent 6d5184cc8f
commit a08e1a8d69
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/state/Notifications.js
View file

@ -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);

20
src/util/common.js
View file

@ -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;
}
}