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() { async _initNoti() {
this.LOGO_HIGHLIGH = await getBadgedFavicon(LogoSVG, cssVar('--bg-positive')) ?? LogoSVG; this.LOGO_HIGHLIGH = await getBadgedFavicon(LogoSVG, cssVar('--bg-positive'));
this.LOGO_UNREAD = await getBadgedFavicon(LogoSVG, cssVar('--bg-badge')) ?? LogoSVG; this.LOGO_UNREAD = await getBadgedFavicon(LogoSVG, cssVar('--bg-badge'));
const addNoti = (roomId) => { const addNoti = (roomId) => {
const room = this.matrixClient.getRoom(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) { export async function getBadgedFavicon(favUrl, color) {
try { try {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = 48; const size = 48;
canvas.height = 48; const badgeSize = 8;
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -140,18 +142,26 @@ export async function getBadgedFavicon(favUrl, color) {
img.src = favUrl; img.src = favUrl;
await imgPromise; 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.beginPath();
ctx.fillStyle = color; 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.closePath();
ctx.fill(); ctx.fill();
return canvas.toDataURL(); return canvas.toDataURL();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return undefined; return favUrl;
} }
} }