merge: Misskey fixes & add button to see if notification dot works (!553)
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/553 Approved-by: dakkar <dakkar@thenautilus.net> Approved-by: Marie <marie@kaifa.ch> Approved-by: Amelia Yukii <amelia.yukii@shourai.de>
This commit is contained in:
		
						commit
						717696c472
					
				
					 7 changed files with 102 additions and 20 deletions
				
			
		| 
						 | 
					@ -696,6 +696,10 @@ create: "Create"
 | 
				
			||||||
notificationSetting: "Notification settings"
 | 
					notificationSetting: "Notification settings"
 | 
				
			||||||
notificationSettingDesc: "Select the types of notification to display."
 | 
					notificationSettingDesc: "Select the types of notification to display."
 | 
				
			||||||
enableFaviconNotificationDot: "Enable favicon notification dot"
 | 
					enableFaviconNotificationDot: "Enable favicon notification dot"
 | 
				
			||||||
 | 
					verifyNotificationDotWorkingButton: "Check if the notification dot works on your instance"
 | 
				
			||||||
 | 
					notificationDotNotWorking: "Unfortunately, this instance does not support the notification dot feature at this time."
 | 
				
			||||||
 | 
					notificationDotWorking: "The notification dot is functioning properly on this instance."
 | 
				
			||||||
 | 
					notificationDotNotWorkingAdvice: "If the notification dot doesn't work, ask an admin to check our documentation {link}"
 | 
				
			||||||
useGlobalSetting: "Use global settings"
 | 
					useGlobalSetting: "Use global settings"
 | 
				
			||||||
useGlobalSettingDesc: "If turned on, your account's notification settings will be used. If turned off, individual configurations can be made."
 | 
					useGlobalSettingDesc: "If turned on, your account's notification settings will be used. If turned off, individual configurations can be made."
 | 
				
			||||||
other: "Other"
 | 
					other: "Other"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
							
								
								
									
										18
									
								
								locales/index.d.ts
									
										
									
									
										vendored
									
									
								
							
							
						
						
									
										18
									
								
								locales/index.d.ts
									
										
									
									
										vendored
									
									
								
							| 
						 | 
					@ -2793,9 +2793,25 @@ export interface Locale extends ILocale {
 | 
				
			||||||
     */
 | 
					     */
 | 
				
			||||||
    "notificationSettingDesc": string;
 | 
					    "notificationSettingDesc": string;
 | 
				
			||||||
    /**
 | 
					    /**
 | 
				
			||||||
     * ファビコン通知ドットを有効にする
 | 
					     * 未読の通知があるときにタブのアイコンを目立たせる
 | 
				
			||||||
     */
 | 
					     */
 | 
				
			||||||
    "enableFaviconNotificationDot": string;
 | 
					    "enableFaviconNotificationDot": string;
 | 
				
			||||||
 | 
					    /**
 | 
				
			||||||
 | 
					     * 通知ドットがインスタンスで機能するかどうかを確認します。
 | 
				
			||||||
 | 
					     */
 | 
				
			||||||
 | 
					    "verifyNotificationDotWorkingButton": string;
 | 
				
			||||||
 | 
					    /**
 | 
				
			||||||
 | 
					     * 残念ながら、このインスタンスは現時点では通知ドット機能をサポートしていません。
 | 
				
			||||||
 | 
					     */
 | 
				
			||||||
 | 
					    "notificationDotNotWorking": string;
 | 
				
			||||||
 | 
					    /**
 | 
				
			||||||
 | 
					     * 通知ドットは、このインスタンスで正しく機能しています。
 | 
				
			||||||
 | 
					     */
 | 
				
			||||||
 | 
					    "notificationDotWorking": string;
 | 
				
			||||||
 | 
					    /**
 | 
				
			||||||
 | 
					     * 通知ドットが機能しない場合は、管理者にドキュメントを確認するように依頼してください {link}
 | 
				
			||||||
 | 
					     */
 | 
				
			||||||
 | 
					    "notificationDotNotWorkingAdvice": ParameterizedString<"link">;
 | 
				
			||||||
    /**
 | 
					    /**
 | 
				
			||||||
     * グローバル設定を使う
 | 
					     * グローバル設定を使う
 | 
				
			||||||
     */
 | 
					     */
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -694,7 +694,11 @@ channel: "チャンネル"
 | 
				
			||||||
create: "作成"
 | 
					create: "作成"
 | 
				
			||||||
notificationSetting: "通知設定"
 | 
					notificationSetting: "通知設定"
 | 
				
			||||||
notificationSettingDesc: "表示する通知の種別を選択してください。"
 | 
					notificationSettingDesc: "表示する通知の種別を選択してください。"
 | 
				
			||||||
enableFaviconNotificationDot: "ファビコン通知ドットを有効にする"
 | 
					enableFaviconNotificationDot: "未読の通知があるときにタブのアイコンを目立たせる"
 | 
				
			||||||
 | 
					verifyNotificationDotWorkingButton: "通知ドットがインスタンスで機能するかどうかを確認します。"
 | 
				
			||||||
 | 
					notificationDotNotWorking: "残念ながら、このインスタンスは現時点では通知ドット機能をサポートしていません。"
 | 
				
			||||||
 | 
					notificationDotWorking: "通知ドットは、このインスタンスで正しく機能しています。"
 | 
				
			||||||
 | 
					notificationDotNotWorkingAdvice: "通知ドットが機能しない場合は、管理者にドキュメントを確認するように依頼してください {link}"
 | 
				
			||||||
useGlobalSetting: "グローバル設定を使う"
 | 
					useGlobalSetting: "グローバル設定を使う"
 | 
				
			||||||
useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
 | 
					useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
 | 
				
			||||||
other: "その他"
 | 
					other: "その他"
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -21,6 +21,7 @@ import { initializeSw } from '@/scripts/initialize-sw.js';
 | 
				
			||||||
import { deckStore } from '@/ui/deck/deck-store.js';
 | 
					import { deckStore } from '@/ui/deck/deck-store.js';
 | 
				
			||||||
import { emojiPicker } from '@/scripts/emoji-picker.js';
 | 
					import { emojiPicker } from '@/scripts/emoji-picker.js';
 | 
				
			||||||
import { mainRouter } from '@/router/main.js';
 | 
					import { mainRouter } from '@/router/main.js';
 | 
				
			||||||
 | 
					import { setFavIconDot } from '@/scripts/favicon-dot.js';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export async function mainBoot() {
 | 
					export async function mainBoot() {
 | 
				
			||||||
	const { isClientUpdated } = await common(() => createApp(
 | 
						const { isClientUpdated } = await common(() => createApp(
 | 
				
			||||||
| 
						 | 
					@ -261,6 +262,14 @@ export async function mainBoot() {
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							function attemptShowNotificationDot() {
 | 
				
			||||||
 | 
								if (defaultStore.state.enableFaviconNotificationDot) {
 | 
				
			||||||
 | 
									setFavIconDot(true);
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							if ($i.hasUnreadNotification) attemptShowNotificationDot();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		const main = markRaw(stream.useChannel('main', null, 'System'));
 | 
							const main = markRaw(stream.useChannel('main', null, 'System'));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		// 自分の情報が更新されたとき
 | 
							// 自分の情報が更新されたとき
 | 
				
			||||||
| 
						 | 
					@ -269,6 +278,8 @@ export async function mainBoot() {
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		main.on('readAllNotifications', () => {
 | 
							main.on('readAllNotifications', () => {
 | 
				
			||||||
 | 
								setFavIconDot(false);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			updateAccount({
 | 
								updateAccount({
 | 
				
			||||||
				hasUnreadNotification: false,
 | 
									hasUnreadNotification: false,
 | 
				
			||||||
				unreadNotificationsCount: 0,
 | 
									unreadNotificationsCount: 0,
 | 
				
			||||||
| 
						 | 
					@ -276,6 +287,8 @@ export async function mainBoot() {
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		main.on('unreadNotification', () => {
 | 
							main.on('unreadNotification', () => {
 | 
				
			||||||
 | 
								attemptShowNotificationDot();
 | 
				
			||||||
 | 
								
 | 
				
			||||||
			const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1;
 | 
								const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1;
 | 
				
			||||||
			updateAccount({
 | 
								updateAccount({
 | 
				
			||||||
				hasUnreadNotification: true,
 | 
									hasUnreadNotification: true,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -139,8 +139,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
				
			||||||
		<div class="_gaps_m">
 | 
							<div class="_gaps_m">
 | 
				
			||||||
			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
 | 
								<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
 | 
								<MkSwitch v-model="enableFaviconNotificationDot">
 | 
				
			||||||
 | 
									{{ i18n.ts.enableFaviconNotificationDot }}
 | 
				
			||||||
 | 
									<template #caption>
 | 
				
			||||||
 | 
										<I18n :src="i18n.ts.notificationDotNotWorkingAdvice" tag="span">
 | 
				
			||||||
 | 
											<template #link>
 | 
				
			||||||
 | 
												<MkLink url="https://docs.joinsharkey.org/docs/install/faqs/#ive-enabled-the-notification-dot-but-it-doesnt-show">{{ i18n.ts._mfm.link }}</MkLink>
 | 
				
			||||||
 | 
											</template>
 | 
				
			||||||
 | 
										</I18n>
 | 
				
			||||||
 | 
									</template>
 | 
				
			||||||
 | 
								</MkSwitch>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								<!-- {{ i18n.ts.notificationDotNotWorkingAdvice }} -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								<!-- notificationDotNotWorkingAdvice -->
 | 
				
			||||||
 | 
								<MkButton @click="testNotificationDot">{{ i18n.ts.verifyNotificationDotWorkingButton }}</MkButton>
 | 
				
			||||||
 | 
								<!-- <p class="caption">Testing Testing</p> -->
 | 
				
			||||||
			<MkRadios v-model="notificationPosition">
 | 
								<MkRadios v-model="notificationPosition">
 | 
				
			||||||
				<template #label>{{ i18n.ts.position }}</template>
 | 
									<template #label>{{ i18n.ts.position }}</template>
 | 
				
			||||||
				<option value="leftTop"><i class="ph-arrow-up-left ph-bold ph-lg"></i> {{ i18n.ts.leftTop }}</option>
 | 
									<option value="leftTop"><i class="ph-arrow-up-left ph-bold ph-lg"></i> {{ i18n.ts.leftTop }}</option>
 | 
				
			||||||
| 
						 | 
					@ -327,6 +341,7 @@ import { miLocalStorage } from '@/local-storage.js';
 | 
				
			||||||
import { globalEvents } from '@/events.js';
 | 
					import { globalEvents } from '@/events.js';
 | 
				
			||||||
import { claimAchievement } from '@/scripts/achievements.js';
 | 
					import { claimAchievement } from '@/scripts/achievements.js';
 | 
				
			||||||
import { deepMerge } from '@/scripts/merge.js';
 | 
					import { deepMerge } from '@/scripts/merge.js';
 | 
				
			||||||
 | 
					import { worksOnInstance } from '@/scripts/favicon-dot.js';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const lang = ref(miLocalStorage.getItem('lang'));
 | 
					const lang = ref(miLocalStorage.getItem('lang'));
 | 
				
			||||||
const fontSize = ref(miLocalStorage.getItem('fontSize'));
 | 
					const fontSize = ref(miLocalStorage.getItem('fontSize'));
 | 
				
			||||||
| 
						 | 
					@ -562,6 +577,16 @@ function testNotification(): void {
 | 
				
			||||||
	}, 300);
 | 
						}, 300);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function testNotificationDot() {
 | 
				
			||||||
 | 
						const success = await worksOnInstance();
 | 
				
			||||||
 | 
						
 | 
				
			||||||
 | 
						if (success) {
 | 
				
			||||||
 | 
							os.toast(i18n.ts.notificationDotWorking);
 | 
				
			||||||
 | 
						} else {
 | 
				
			||||||
 | 
							os.toast(i18n.ts.notificationDotNotWorking);
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function enableAllDataSaver() {
 | 
					function enableAllDataSaver() {
 | 
				
			||||||
	const g = { ...defaultStore.state.dataSaver };
 | 
						const g = { ...defaultStore.state.dataSaver };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -6,12 +6,12 @@
 | 
				
			||||||
import tinycolor from 'tinycolor2';
 | 
					import tinycolor from 'tinycolor2';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
class FavIconDot {
 | 
					class FavIconDot {
 | 
				
			||||||
	canvas: HTMLCanvasElement;
 | 
						private readonly canvas: HTMLCanvasElement;
 | 
				
			||||||
	src: string | null = null;
 | 
						private src: string | null = null;
 | 
				
			||||||
	ctx: CanvasRenderingContext2D | null = null;
 | 
						private ctx: CanvasRenderingContext2D | null = null;
 | 
				
			||||||
	faviconImage: HTMLImageElement | null = null;
 | 
						private faviconImage: HTMLImageElement | null = null;
 | 
				
			||||||
	faviconEL: HTMLLinkElement | undefined;
 | 
						private faviconEL: HTMLLinkElement | undefined;
 | 
				
			||||||
	hasLoaded: Promise<void> | undefined;
 | 
						private hasLoaded: Promise<void> | undefined;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	constructor() {
 | 
						constructor() {
 | 
				
			||||||
		this.canvas = document.createElement('canvas');
 | 
							this.canvas = document.createElement('canvas');
 | 
				
			||||||
| 
						 | 
					@ -88,32 +88,58 @@ class FavIconDot {
 | 
				
			||||||
		if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
 | 
							if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	async setVisible(isVisible: boolean) {
 | 
						public async setVisible(isVisible: boolean) {
 | 
				
			||||||
		// Wait for it to have loaded the icon
 | 
							// Wait for it to have loaded the icon
 | 
				
			||||||
		await this.hasLoaded;
 | 
							await this.hasLoaded;
 | 
				
			||||||
		this.drawIcon();
 | 
							this.drawIcon();
 | 
				
			||||||
		if (isVisible) this.drawDot();
 | 
							if (isVisible) this.drawDot();
 | 
				
			||||||
		this.setFavicon();
 | 
							this.setFavicon();
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						public async worksOnInstance() {
 | 
				
			||||||
 | 
							try {
 | 
				
			||||||
 | 
								// Wait for it to have loaded the icon
 | 
				
			||||||
 | 
								await this.hasLoaded;
 | 
				
			||||||
 | 
								this.drawIcon();
 | 
				
			||||||
 | 
								this.drawDot();
 | 
				
			||||||
 | 
								this.canvas.toDataURL('image/png');
 | 
				
			||||||
 | 
							} catch (error) {
 | 
				
			||||||
 | 
								return false;			
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
							return true;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
let icon: FavIconDot | undefined = undefined;
 | 
					let icon: FavIconDot | undefined = undefined;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function setFavIconDot(visible: boolean) {
 | 
					export async function setFavIconDot(visible: boolean) {
 | 
				
			||||||
	const setIconVisibility = async () => {
 | 
						const setIconVisibility = async () => {
 | 
				
			||||||
		if (!icon) {
 | 
							if (!icon) {
 | 
				
			||||||
			icon = new FavIconDot();
 | 
								icon = new FavIconDot();
 | 
				
			||||||
			await icon.setup();
 | 
								await icon.setup();
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							try {
 | 
				
			||||||
			(icon as FavIconDot).setVisible(visible);
 | 
								(icon as FavIconDot).setVisible(visible);
 | 
				
			||||||
 | 
							} catch (error) {
 | 
				
			||||||
 | 
								//Probably failed due to CORS and a dirty canvas
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
	};
 | 
						};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	// If document is already loaded, set visibility immediately
 | 
						// If document is already loaded, set visibility immediately
 | 
				
			||||||
	if (document.readyState === 'complete') {
 | 
						if (document.readyState === 'complete') {
 | 
				
			||||||
		setIconVisibility();
 | 
							await setIconVisibility();
 | 
				
			||||||
	} else {
 | 
						} else {
 | 
				
			||||||
		// Otherwise, set visibility when window loads
 | 
							// Otherwise, set visibility when window loads
 | 
				
			||||||
		window.addEventListener('load', setIconVisibility);
 | 
							window.addEventListener('load', setIconVisibility);
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export async function worksOnInstance() {
 | 
				
			||||||
 | 
						if (!icon) {
 | 
				
			||||||
 | 
							icon = new FavIconDot();
 | 
				
			||||||
 | 
							await icon.setup();
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
						
 | 
				
			||||||
 | 
						return await icon.worksOnInstance();
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -47,9 +47,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script lang="ts" setup>
 | 
					<script lang="ts" setup>
 | 
				
			||||||
import { defineAsyncComponent, ref, watch } from 'vue';
 | 
					import { defineAsyncComponent, ref } from 'vue';
 | 
				
			||||||
import * as Misskey from 'misskey-js';
 | 
					import * as Misskey from 'misskey-js';
 | 
				
			||||||
import { setFavIconDot } from '../../scripts/favicon-dot';
 | 
					 | 
				
			||||||
import { swInject } from './sw-inject.js';
 | 
					import { swInject } from './sw-inject.js';
 | 
				
			||||||
import XNotification from './notification.vue';
 | 
					import XNotification from './notification.vue';
 | 
				
			||||||
import { popups } from '@/os.js';
 | 
					import { popups } from '@/os.js';
 | 
				
			||||||
| 
						 | 
					@ -95,11 +94,6 @@ if ($i) {
 | 
				
			||||||
	const connection = useStream().useChannel('main', null, 'UI');
 | 
						const connection = useStream().useChannel('main', null, 'UI');
 | 
				
			||||||
	connection.on('notification', onNotification);
 | 
						connection.on('notification', onNotification);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	// For the favicon notification dot
 | 
					 | 
				
			||||||
	watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
 | 
					 | 
				
			||||||
	
 | 
					 | 
				
			||||||
	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 | 
						globalEvents.on('clientNotification', notification => onNotification(notification, true));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	//#region Listen message from SW
 | 
						//#region Listen message from SW
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue