mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-08 04:54:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

merge: fix notification dot (!946)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/946

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Marie 2025-03-19 17:40:35 +00:00
commit 4c1ad27acc
1 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/frontend/src/scripts/favicon-dot.ts
View file

@ -28,6 +28,7 @@ class FavIconDot {
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');
this.faviconImage = document.createElement('img'); this.faviconImage = document.createElement('img');
this.faviconImage.crossOrigin = 'anonymous';
this.hasLoaded = new Promise((resolve, reject) => { this.hasLoaded = new Promise((resolve, reject) => {
(this.faviconImage as HTMLImageElement).addEventListener('load', () => { (this.faviconImage as HTMLImageElement).addEventListener('load', () => {
@ -76,7 +77,8 @@ class FavIconDot {
private drawDot() { private drawDot() {
if (!this.ctx || !this.faviconImage) return; if (!this.ctx || !this.faviconImage) return;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI); const radius = Math.min(this.faviconImage.width, this.faviconImage.height) * 0.2;
this.ctx.arc(this.faviconImage.width - radius, radius, radius, 0, 2 * Math.PI);
const computedStyle = getComputedStyle(document.documentElement); const computedStyle = getComputedStyle(document.documentElement);
this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--MI_THEME-navIndicator')).toHexString(); this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--MI_THEME-navIndicator')).toHexString();
this.ctx.strokeStyle = 'white'; this.ctx.strokeStyle = 'white';
@ -85,7 +87,17 @@ class FavIconDot {
} }
private setFavicon() { private setFavicon() {
if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png'); if (this.faviconEL) {
try {
URL.revokeObjectURL(this.faviconEL.href);
} catch {
// the href was probably not an object URL
}
this.canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
this.faviconEL.href = url;
});
}
} }
public async setVisible(isVisible: boolean) { public async setVisible(isVisible: boolean) {
@ -98,12 +110,11 @@ class FavIconDot {
public async worksOnInstance() { public async worksOnInstance() {
try { try {
// Wait for it to have loaded the icon await this.setVisible(true);
await this.hasLoaded; await new Promise((resolve) => setTimeout(resolve, 1000));
this.drawIcon(); await this.setVisible(false);
this.drawDot();
this.canvas.toDataURL('image/png');
} catch (error) { } catch (error) {
console.error('error setting notification dot', error);
return false; return false;
} }
return true; return true;
@ -122,7 +133,7 @@ export async function setFavIconDot(visible: boolean) {
try { try {
(icon as FavIconDot).setVisible(visible); (icon as FavIconDot).setVisible(visible);
} catch (error) { } catch (error) {
//Probably failed due to CORS and a dirty canvas console.error('error setting notification dot', error);
} }
}; };