merge: Feature/favicon notification dot (!474)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/474

.gitlab-ci.yml

@@ -55,6 +55,8 @@ getImageTag:
   only:
     - stable
     - develop
+    - tags
+
 buildDocker:
   stage: deploy
   needs:
@@ -78,6 +80,8 @@ buildDocker:
   only:
     - stable
     - develop
+    - tags
+
 mergeManifests:
   stage: deploy
   needs:
@@ -103,3 +107,4 @@ mergeManifests:
   only:
     - stable
     - develop
+    - tags

locales/en-US.yml

@@ -688,6 +688,7 @@ channel: "Channels"
 create: "Create"
 notificationSetting: "Notification settings"
 notificationSettingDesc: "Select the types of notification to display."
+enableFaviconNotificationDot: "Enable favicon notification dot"
 useGlobalSetting: "Use global settings"
 useGlobalSettingDesc: "If turned on, your account's notification settings will be used. If turned off, individual configurations can be made."
 other: "Other"

locales/index.d.ts

@@ -2764,6 +2764,10 @@ export interface Locale extends ILocale {
      * 表示する通知の種別を選択してください。
      */
     "notificationSettingDesc": string;
+    /**
+     * ファビコン通知ドットを有効にする
+     */
+    "enableFaviconNotificationDot": string;
     /**
      * グローバル設定を使う
      */

locales/ja-JP.yml

@@ -687,6 +687,7 @@ channel: "チャンネル"
 create: "作成"
 notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種別を選択してください。"
+enableFaviconNotificationDot: "ファビコン通知ドットを有効にする"
 useGlobalSetting: "グローバル設定を使う"
 useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
 other: "その他"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sharkey",
-	"version": "2024.3.1",
+	"version": "2024.3.2-devel",
 	"codename": "shonk",
 	"repository": {
 		"type": "git",

packages/backend/package.json

@@ -172,7 +172,7 @@
 		"stringz": "2.1.0",
 		"systeminformation": "5.22.0",
 		"tinycolor2": "1.6.0",
-		"tmp": "0.2.2",
+		"tmp": "0.2.3",
 		"tsc-alias": "1.8.8",
 		"tsconfig-paths": "4.2.0",
 		"typeorm": "0.3.20",

packages/backend/src/server/FileServerService.ts

@@ -192,6 +192,7 @@ export class FileServerService {
 						reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
 						reply.header('Accept-Ranges', 'bytes');
 						reply.header('Content-Length', chunksize);
+						reply.code(206);
 					} else {
 						image = {
 							data: fs.createReadStream(file.path),
@@ -261,7 +262,6 @@ export class FileServerService {
 					const parts = range.replace(/bytes=/, '').split('-');
 					const start = parseInt(parts[0], 10);
 					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
-					console.log(end);
 					if (end > file.file.size) {
 						end = file.file.size - 1;
 					}
@@ -431,6 +431,7 @@ export class FileServerService {
 					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
 					reply.header('Accept-Ranges', 'bytes');
 					reply.header('Content-Length', chunksize);
+					reply.code(206);
 				} else {
 					image = {
 						data: fs.createReadStream(file.path),
@@ -527,6 +528,9 @@ export class FileServerService {
 		if (!file.storedInternal) {
 			if (!(file.isLink && file.uri)) return '204';
 			const result = await this.downloadAndDetectTypeFromUrl(file.uri);
+			if (!file.size) {
+				file.size = (await fs.promises.stat(result.path)).size;
+			}
 			return {
 				...result,
 				url: file.uri,

packages/backend/src/server/web/views/note.pug

@@ -5,8 +5,8 @@ block vars
 	- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
 	- const url = `${config.url}/notes/${note.id}`;
 	- const isRenote = note.renote && note.text == null && note.fileIds.length == 0 && note.poll == null;
-	- const images = (note.files || []).filter(file => file.type.startsWith('image/') && !file.isSensitive)
+	- const images = note.cw ? [] : (note.files || []).filter(file => file.type.startsWith('image/') && !file.isSensitive)
-	- const videos = (note.files || []).filter(file => file.type.startsWith('video/') && !file.isSensitive)
+	- const videos = note.cw ? [] : (note.files || []).filter(file => file.type.startsWith('video/') && !file.isSensitive)
 
 block title
 	= `${title} | ${instanceName}`

packages/frontend/src/pages/settings/general.vue

@@ -112,6 +112,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_m">
 			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
 
+			<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
+
 			<MkRadios v-model="notificationPosition">
 				<template #label>{{ i18n.ts.position }}</template>
 				<option value="leftTop"><i class="ph-arrow-up-left ph-bold ph-lg"></i> {{ i18n.ts.leftTop }}</option>
@@ -337,6 +339,7 @@ const oneko = computed(defaultStore.makeGetterSetter('oneko'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
+const enableFaviconNotificationDot = computed(defaultStore.makeGetterSetter('enableFaviconNotificationDot'));
 const warnMissingAltText = computed(defaultStore.makeGetterSetter('warnMissingAltText'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
 const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));

packages/frontend/src/pages/settings/preferences-backups.vue

@@ -72,6 +72,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'advancedMfm',
 	'loadRawImages',
 	'warnMissingAltText',
+	'enableFaviconNotificationDot',
 	'imageNewTab',
 	'dataSaver',
 	'disableShowingAnimatedImages',

packages/frontend/src/scripts/favicon-dot.ts

@@ -0,0 +1,75 @@
+class FavIconDot {
+	canvas : HTMLCanvasElement;
+	src : string | null = null;
+	ctx : CanvasRenderingContext2D | null = null;
+	favconImage : HTMLImageElement | null = null;
+	faviconEL : HTMLLinkElement;
+	hasLoaded : Promise<void>;
+
+	constructor() {
+		this.canvas = document.createElement('canvas');
+		this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
+
+		this.src = this.faviconEL.getAttribute('href');
+		this.ctx = this.canvas.getContext('2d');
+		
+		this.favconImage = document.createElement('img');
+		this.hasLoaded = new Promise((resolve, _reject) => {
+			if (this.favconImage != null) {
+				this.favconImage.onload = () => {
+					this.canvas.width = (this.favconImage as HTMLImageElement).width;
+					this.canvas.height = (this.favconImage as HTMLImageElement).height;
+					// resolve();
+					setTimeout(() => resolve(), 200);
+				};
+			}
+		});
+		this.favconImage.src = this.faviconEL.href;
+	}
+
+	private _createFaviconElem() {
+		const newLink = document.createElement('link');
+		newLink.rel = 'icon';
+		newLink.href = '/favicon.ico';
+		document.head.appendChild(newLink);
+		return newLink;
+	}
+
+	private _drawIcon() {
+		if (!this.ctx || !this.favconImage) return;
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
+	}
+
+	private _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 = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
+		this.ctx.strokeStyle = 'white';
+		this.ctx.fill();
+		this.ctx.stroke();
+	}
+
+	private _setFavicon() {
+		this.faviconEL.href = this.canvas.toDataURL('image/png');
+	}
+
+	async setVisible(isVisible : boolean) {
+		//Wait for it to have loaded the icon
+		await this.hasLoaded;
+		console.log(this.hasLoaded);
+		this._drawIcon();
+		if (isVisible) this._drawDot();
+		this._setFavicon();
+	}
+}
+
+let icon: FavIconDot = new FavIconDot();
+
+export function setFavIconDot(visible: boolean) {
+	if (!icon) {
+		icon = new FavIconDot();
+	}
+	icon.setVisible(visible);
+}

packages/frontend/src/store.ts

@@ -268,6 +268,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableFaviconNotificationDot: {
+		where: 'device',
+		default: true,
+	},
 	imageNewTab: {
 		where: 'device',
 		default: false,

packages/frontend/src/ui/_common_/common.vue

@@ -47,8 +47,9 @@ 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 { setFavIconDot } from '../../scripts/favicon-dot';
 import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
 import { popups } from '@/os.js';
@@ -93,6 +94,12 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
+
+	//For the favicon notification dot
+	watch(() => $i?.hasUnreadNotification, (hasAny) => setFavIconDot((defaultStore.state.enableFaviconNotificationDot ? hasAny : false) ?? false));
+
+	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
+	
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 
 	//#region Listen message from SW

pnpm-lock.yaml

@@ -392,8 +392,8 @@ importers:
         specifier: 1.6.0
         version: 1.6.0
       tmp:
-        specifier: 0.2.2
+        specifier: 0.2.3
-        version: 0.2.2
+        version: 0.2.3
       tsc-alias:
         specifier: 1.8.8
         version: 1.8.8
@@ -18813,6 +18813,12 @@ packages:
     engines: {node: '>=14'}
     dependencies:
       rimraf: 5.0.5
+    dev: true
+
+  /tmp@0.2.3:
+    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
+    engines: {node: '>=14.14'}
+    dev: false
 
   /tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}