merge: Feature/favicon notification dot (!474)

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

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Luna <her@mint.lgbt>
Approved-by: Marie <marie@kaifa.ch>
This commit is contained in:
dakkar 2024-05-31 19:03:32 +00:00
commit e818c56faa
8 changed files with 136 additions and 1 deletions

View file

@ -688,6 +688,7 @@ channel: "Channels"
create: "Create" 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"
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"

4
locales/index.d.ts vendored
View file

@ -2764,6 +2764,10 @@ export interface Locale extends ILocale {
* *
*/ */
"notificationSettingDesc": string; "notificationSettingDesc": string;
/**
*
*/
"enableFaviconNotificationDot": string;
/** /**
* 使 * 使
*/ */

View file

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

View file

@ -112,6 +112,8 @@ 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>
<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>
@ -345,6 +347,7 @@ const oneko = computed(defaultStore.makeGetterSetter('oneko'));
const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages')); const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia')); const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab')); const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
const enableFaviconNotificationDot = computed(defaultStore.makeGetterSetter('enableFaviconNotificationDot'));
const warnMissingAltText = computed(defaultStore.makeGetterSetter('warnMissingAltText')); const warnMissingAltText = computed(defaultStore.makeGetterSetter('warnMissingAltText'));
const nsfw = computed(defaultStore.makeGetterSetter('nsfw')); const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm')); const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));

View file

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

View file

@ -0,0 +1,114 @@
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;
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.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();
this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
const computedStyle = getComputedStyle(document.documentElement);
this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--navIndicator')).toHexString();
this.ctx.strokeStyle = 'white';
this.ctx.fill();
this.ctx.stroke();
}
private setFavicon() {
if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
}
async setVisible(isVisible: boolean) {
// Wait for it to have loaded the icon
await this.hasLoaded;
this.drawIcon();
if (isVisible) this.drawDot();
this.setFavicon();
}
}
let icon: FavIconDot | undefined = undefined;
export function setFavIconDot(visible: boolean) {
const setIconVisibility = async () => {
if (!icon) {
icon = new FavIconDot();
await icon.setup();
}
(icon as FavIconDot).setVisible(visible);
};
// If document is already loaded, set visibility immediately
if (document.readyState === 'complete') {
setIconVisibility();
} else {
// Otherwise, set visibility when window loads
window.addEventListener('load', setIconVisibility);
}
}

View file

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

View file

@ -47,8 +47,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'; import { defineAsyncComponent, ref, watch } 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';
@ -93,6 +94,12 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
if ($i) { 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