merge upstream

2025-03-25 16:14:53 -04:00
parent aebc6b4112 8d6573fbec
commit d8908ef2d8
1065 changed files with 32953 additions and 20092 deletions
@@ -0,0 +1,156 @@
+/*
+ * SPDX-FileCopyrightText: leah and other Sharkey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import tinycolor from 'tinycolor2';
+
+class FavIconDot {
+	private readonly canvas: HTMLCanvasElement;
+	private src: string | null = null;
+	private ctx: CanvasRenderingContext2D | null = null;
+	private faviconImage: HTMLImageElement | null = null;
+	private faviconEL: HTMLLinkElement | undefined;
+	private hasLoaded: Promise<void> | undefined;
+
+	constructor() {
+		this.canvas = document.createElement('canvas');
+	}
+
+	/**
+	 * Must be called before calling any other functions
+	 */
+	public async setup() {
+		const element: HTMLLinkElement = await this.getOrMakeFaviconElement();
+
+		this.faviconEL = element;
+		this.src = this.faviconEL.getAttribute('href');
+		this.ctx = this.canvas.getContext('2d');
+
+		this.faviconImage = document.createElement('img');
+		this.faviconImage.crossOrigin = 'anonymous';
+
+		this.hasLoaded = new Promise((resolve, reject) => {
+			(this.faviconImage as HTMLImageElement).addEventListener('load', () => {
+				this.canvas.width = (this.faviconImage as HTMLImageElement).width;
+				this.canvas.height = (this.faviconImage as HTMLImageElement).height;
+				resolve();
+			});
+			(this.faviconImage as HTMLImageElement).addEventListener('error', () => {
+				reject('Failed to create favicon img element');
+			});
+		});
+
+		this.faviconImage.src = this.faviconEL.href;
+	}
+
+	private async getOrMakeFaviconElement(): Promise<HTMLLinkElement> {
+		return new Promise((resolve, reject) => {
+			const favicon = (document.querySelector('link[rel=icon]') ?? this.createFaviconElem()) as HTMLLinkElement;
+			favicon.addEventListener('load', () => {
+				resolve(favicon);
+			});
+
+			favicon.onerror = () => {
+				reject('Failed to load favicon');
+			};
+			resolve(favicon);
+		});
+	}
+
+	private createFaviconElem() {
+		const newLink = document.createElement('link');
+		newLink.setAttribute('rel', 'icon');
+		newLink.setAttribute('href', '/favicon.ico');
+		newLink.setAttribute('type', 'image/x-icon');
+
+		document.head.appendChild(newLink);
+		return newLink;
+	}
+
+	private drawIcon() {
+		if (!this.ctx || !this.faviconImage) return;
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height);
+	}
+
+	private drawDot() {
+		if (!this.ctx || !this.faviconImage) return;
+		this.ctx.beginPath();
+		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);
+		this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--MI_THEME-navIndicator')).toHexString();
+		this.ctx.strokeStyle = 'white';
+		this.ctx.fill();
+		this.ctx.stroke();
+	}
+
+	private setFavicon() {
+		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) {
+		// Wait for it to have loaded the icon
+		await this.hasLoaded;
+		this.drawIcon();
+		if (isVisible) this.drawDot();
+		this.setFavicon();
+	}
+
+	public async worksOnInstance() {
+		try {
+			await this.setVisible(true);
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+			await this.setVisible(false);
+		} catch (error) {
+			console.error('error setting notification dot', error);
+			return false;
+		}
+		return true;
+	}
+}
+
+let icon: FavIconDot | undefined = undefined;
+
+export async function setFavIconDot(visible: boolean) {
+	const setIconVisibility = async () => {
+		if (!icon) {
+			icon = new FavIconDot();
+			await icon.setup();
+		}
+
+		try {
+			(icon as FavIconDot).setVisible(visible);
+		} catch (error) {
+			console.error('error setting notification dot', error);
+		}
+	};
+
+	// If document is already loaded, set visibility immediately
+	if (document.readyState === 'complete') {
+		await setIconVisibility();
+	} else {
+		// Otherwise, set visibility when window loads
+		window.addEventListener('load', setIconVisibility);
+	}
+}
+
+export async function worksOnInstance() {
+	if (!icon) {
+		icon = new FavIconDot();
+		await icon.setup();
+	}
+
+	return await icon.worksOnInstance();
+}