fixes & add button to see if notification dot works

This commit is contained in:
KevinWh0 2024-06-17 17:44:00 +02:00 committed by dakkar
parent 16ecc2e406
commit 88eb1a0c53
7 changed files with 84 additions and 19 deletions

View file

@ -696,6 +696,9 @@ create: "Create"
notificationSetting: "Notification settings"
notificationSettingDesc: "Select the types of notification to display."
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."
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"

14
locales/index.d.ts vendored
View file

@ -2793,9 +2793,21 @@ export interface Locale extends ILocale {
*/
"notificationSettingDesc": string;
/**
*
*
*/
"enableFaviconNotificationDot": string;
/**
*
*/
"verifyNotificationDotWorkingButton": string;
/**
*
*/
"notificationDotNotWorking": string;
/**
*
*/
"notificationDotWorking": string;
/**
* 使
*/

View file

@ -694,7 +694,10 @@ channel: "チャンネル"
create: "作成"
notificationSetting: "通知設定"
notificationSettingDesc: "表示する通知の種別を選択してください。"
enableFaviconNotificationDot: "ファビコン通知ドットを有効にする"
enableFaviconNotificationDot: "未読の通知があるときにタブのアイコンを目立たせる"
verifyNotificationDotWorkingButton: "通知ドットがインスタンスで機能するかどうかを確認します。"
notificationDotNotWorking: "残念ながら、このインスタンスは現時点では通知ドット機能をサポートしていません。"
notificationDotWorking: "通知ドットは、このインスタンスで正しく機能しています。"
useGlobalSetting: "グローバル設定を使う"
useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
other: "その他"

View file

@ -21,6 +21,7 @@ import { initializeSw } from '@/scripts/initialize-sw.js';
import { deckStore } from '@/ui/deck/deck-store.js';
import { emojiPicker } from '@/scripts/emoji-picker.js';
import { mainRouter } from '@/router/main.js';
import { setFavIconDot } from '@/scripts/favicon-dot.js';
export async function mainBoot() {
const { isClientUpdated } = await common(() => createApp(
@ -261,6 +262,15 @@ export async function mainBoot() {
}
}
function attemptShowNotificationDot() {
if (!$i) return;
if (defaultStore.state.enableFaviconNotificationDot) {
setFavIconDot(true);
}
}
if ($i.hasUnreadNotification) attemptShowNotificationDot();
const main = markRaw(stream.useChannel('main', null, 'System'));
// 自分の情報が更新されたとき
@ -269,6 +279,8 @@ export async function mainBoot() {
});
main.on('readAllNotifications', () => {
setFavIconDot(false);
updateAccount({
hasUnreadNotification: false,
unreadNotificationsCount: 0,
@ -276,6 +288,8 @@ export async function mainBoot() {
});
main.on('unreadNotification', () => {
attemptShowNotificationDot();
const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1;
updateAccount({
hasUnreadNotification: true,

View file

@ -141,6 +141,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
<MkButton @click="testNotificationDot">{{ i18n.ts.verifyNotificationDotWorkingButton }}</MkButton>
<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>
@ -327,6 +329,7 @@ import { miLocalStorage } from '@/local-storage.js';
import { globalEvents } from '@/events.js';
import { claimAchievement } from '@/scripts/achievements.js';
import { deepMerge } from '@/scripts/merge.js';
import { worksOnInstance } from '@/scripts/favicon-dot';
const lang = ref(miLocalStorage.getItem('lang'));
const fontSize = ref(miLocalStorage.getItem('fontSize'));
@ -562,6 +565,16 @@ function testNotification(): void {
}, 300);
}
async function testNotificationDot() {
const success = await worksOnInstance();
if (success) {
os.toast(i18n.ts.notificationDotWorking);
} else {
os.toast(i18n.ts.notificationDotNotWorking);
}
}
function enableAllDataSaver() {
const g = { ...defaultStore.state.dataSaver };

View file

@ -6,12 +6,12 @@
import tinycolor from 'tinycolor2';
class FavIconDot {
canvas: HTMLCanvasElement;
src: string | null = null;
ctx: CanvasRenderingContext2D | null = null;
faviconImage: HTMLImageElement | null = null;
faviconEL: HTMLLinkElement | undefined;
hasLoaded: Promise<void> | undefined;
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');
@ -88,32 +88,58 @@ class FavIconDot {
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
await this.hasLoaded;
this.drawIcon();
if (isVisible) this.drawDot();
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;
export function setFavIconDot(visible: boolean) {
export async function setFavIconDot(visible: boolean) {
const setIconVisibility = async () => {
if (!icon) {
icon = new FavIconDot();
await icon.setup();
}
(icon as FavIconDot).setVisible(visible);
try {
(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.readyState === 'complete') {
setIconVisibility();
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();
}

View file

@ -47,9 +47,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, watch } from 'vue';
import { defineAsyncComponent, ref } 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';
@ -95,11 +94,6 @@ if ($i) {
const connection = useStream().useChannel('main', null, 'UI');
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));
//#region Listen message from SW