From a0c63c8cc4b8035b5498abf438e4be2a01346ebf Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Sat, 16 Mar 2024 00:27:26 +0100
Subject: [PATCH] added notification dot and it seems to work well
---
packages/frontend/src/ui/_common_/common.vue | 71 +++++++++++++++++++-
1 file changed, 70 insertions(+), 1 deletion(-)
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 4fe53ae6a3..85d7b201ce 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { swInject } from './sw-inject.js';
import XNotification from './notification.vue';
@@ -70,6 +70,70 @@ const dev = _DEV_;
const notifications = ref<Misskey.entities.Notification[]>([]);
+class NotificationFavIconDot {
+ canvas : HTMLCanvasElement;
+ src : string | null = null;
+ ctx : CanvasRenderingContext2D | null = null;
+ favconImage : HTMLImageElement | null = null;
+
+ constructor() {
+ this.canvas = document.createElement('canvas');
+
+ if (this.faviconEL == null) return;
+
+ this.src = this.faviconEL.getAttribute('href');
+ this.ctx = this.canvas.getContext('2d');
+
+ this.favconImage = document.createElement('img');
+ this.favconImage.src = this.faviconEL.href;
+
+ this.favconImage.onload = () => {
+ if (!this.favconImage) return;
+
+ this.canvas.width = this.favconImage.width;
+ this.canvas.height = this.favconImage.height;
+ };
+ }
+
+ faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+
+ _createFaviconElem() {
+ const newLink = document.createElement('link');
+ newLink.rel = 'icon';
+ newLink.href = '/favicon.ico';
+ document.head.appendChild(newLink);
+ return newLink;
+ }
+
+ _drawIcon() {
+ if (!this.ctx || !this.favconImage) return;
+ this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
+ }
+
+ _drawDot() {
+ if (!this.ctx || !this.favconImage) return;
+ this.ctx.beginPath();
+ this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
+ this.ctx.fillStyle = 'red';
+ this.ctx.strokeStyle = this.ctx.fillStyle;
+ this.ctx.fill();
+ this.ctx.stroke();
+ }
+
+ _drawFavicon() {
+ this.faviconEL.href = this.canvas.toDataURL('image/png');
+ }
+
+ setVisible(isVisible : boolean) {
+ this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this._drawIcon();
+ if (isVisible) this._drawDot();
+ this._drawFavicon();
+ }
+}
+
+const notificationDot = new NotificationFavIconDot();
+
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
if (document.visibilityState === 'visible') {
if (!isClient && notification.type !== 'test') {
@@ -93,6 +157,11 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
if ($i) {
const connection = useStream().useChannel('main', null, 'UI');
connection.on('notification', onNotification);
+
+ watch(() => $i?.hasUnreadNotification, (hasAny) => {
+ notificationDot.setVisible(hasAny ?? false);
+ });
+
globalEvents.on('clientNotification', notification => onNotification(notification, true));
//#region Listen message from SW