db4e552594cb | atagen | 2026-10-26 04:43 UTC | 1 | import { get, writable } from 'svelte/store'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 2 | import { mediaUrl } from './api'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 3 | import { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 4 | arrivalIn, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 5 | type Arrival, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 6 | badgeTotal, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 7 | isRoomWatched, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 8 | notifyingCount, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 9 | planNotification, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 10 | roomTag, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 11 | sourceFromSummary, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 12 | sourceFromTimeline, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 13 | type NotificationPlan |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 14 | } from './notification-model'; |
20fe182f3204 | atagen | 2026-10-26 05:50 UTC | 15 | import { effectiveRooms } from './mute'; |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 16 | import { PUSH_CHANGED_MESSAGE } from './push-model'; |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 17 | import { disablePush, enablePush, pushActive, syncPush } from './push'; |
20fe182f3204 | atagen | 2026-10-26 05:50 UTC | 18 | import { selectedRoomId, sessionUser, timelines } from './store'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 19 | import type { RoomSummary } from './types'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 20 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 21 | const SETTLE_MS = 300; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 22 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 23 | export const OPEN_ROOM_MESSAGE = 'malice-open-room'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 24 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 25 | export type NotificationPermissionState = NotificationPermission | 'unsupported'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 26 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 27 | const supported = typeof Notification !== 'undefined'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 28 | const preferenceKey = (account: string) => `malice.notifications.${account}`; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 29 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 30 | export const notificationsEnabled = writable(false); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 31 | export const notificationPermission = writable<NotificationPermissionState>(supported ? Notification.permission : 'unsupported'); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 32 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 33 | function readPreference(account: string | null | undefined): boolean { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 34 | if (!account) return false; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 35 | try { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 36 | return localStorage.getItem(preferenceKey(account)) === '1'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 37 | } catch { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 38 | return false; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 39 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 40 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 41 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 42 | function writePreference(account: string, enabled: boolean): void { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 43 | try { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 44 | localStorage.setItem(preferenceKey(account), enabled ? '1' : '0'); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 45 | } catch {} |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 46 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 47 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 48 | /** Must run inside a user gesture, since browsers refuse the permission prompt otherwise. */ |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 49 | export async function enableNotifications(): Promise<void> { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 50 | const account = get(sessionUser); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 51 | if (!supported || !account) return; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 52 | const result = Notification.permission === 'default' ? await Notification.requestPermission() : Notification.permission; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 53 | notificationPermission.set(result); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 54 | const on = result === 'granted'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 55 | writePreference(account, on); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 56 | notificationsEnabled.set(on); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 57 | if (on) await enablePush(account); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 58 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 59 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 60 | export function disableNotifications(): void { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 61 | const account = get(sessionUser); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 62 | if (account) { |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 63 | writePreference(account, false); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 64 | void disablePush(account); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 65 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 66 | notificationsEnabled.set(false); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 67 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 68 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 69 | function active(): boolean { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 70 | return supported && get(notificationsEnabled) && Notification.permission === 'granted'; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 71 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 72 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 73 | async function registration(): Promise<ServiceWorkerRegistration | null> { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 74 | if (!('serviceWorker' in navigator) || !navigator.serviceWorker.controller) return null; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 75 | try { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 76 | return await navigator.serviceWorker.ready; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 77 | } catch { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 78 | return null; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 79 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 80 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 81 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 82 | async function show(plan: NotificationPlan, openRoom: (roomId: string) => void): Promise<void> { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 83 | const icon = mediaUrl(plan.iconMxc, 128) ?? undefined; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 84 | const options: NotificationOptions & { renotify?: boolean } = { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 85 | body: plan.body, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 86 | tag: plan.tag, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 87 | icon, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 88 | renotify: plan.renotify, |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 89 | data: { roomId: plan.roomId } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 90 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 91 | const reg = await registration(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 92 | if (reg) { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 93 | await reg.showNotification(plan.title, options); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 94 | return; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 95 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 96 | const note = new Notification(plan.title, options); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 97 | note.onclick = () => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 98 | window.focus(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 99 | openRoom(plan.roomId); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 100 | note.close(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 101 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 102 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 103 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 104 | async function closeRoom(roomId: string): Promise<void> { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 105 | const reg = await registration(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 106 | if (!reg) return; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 107 | for (const note of await reg.getNotifications({ tag: roomTag(roomId) })) note.close(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 108 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 109 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 110 | function setBadge(total: number): void { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 111 | const nav = navigator as Navigator & { setAppBadge?: (n: number) => Promise<void>; clearAppBadge?: () => Promise<void> }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 112 | if (total > 0) void nav.setAppBadge?.(total).catch(() => undefined); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 113 | else void nav.clearAppBadge?.().catch(() => undefined); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 114 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 115 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 116 | /** Watches room summaries for notifying unread increases, shows and clears notifications, and keeps the app badge current. */ |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 117 | export function startNotifications(openRoom: (roomId: string) => void): () => void { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 118 | let previous = new Map<string, RoomSummary>(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 119 | let notified = new Set<string>(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 120 | let badge = -1; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 121 | |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 122 | const unsubscribeSession = sessionUser.subscribe((account) => { |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 123 | const enabled = readPreference(account); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 124 | notificationsEnabled.set(enabled); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 125 | if (account) void syncPush(account, enabled); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 126 | }); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 127 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 128 | void registration().then(async (reg) => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 129 | for (const note of (await reg?.getNotifications()) ?? []) { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 130 | const roomId = (note.data as { roomId?: unknown } | null)?.roomId; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 131 | if (typeof roomId === 'string') notified.add(roomId); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 132 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 133 | }); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 134 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 135 | const watched = (roomId: string) => |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 136 | isRoomWatched(roomId, get(selectedRoomId), document.visibilityState === 'visible', document.hasFocus()); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 137 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 138 | const clearRead = (list: RoomSummary[]) => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 139 | for (const room of list) { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 140 | if (notified.has(room.room_id) && (notifyingCount(room) === 0 || watched(room.room_id))) { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 141 | notified.delete(room.room_id); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 142 | void closeRoom(room.room_id); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 143 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 144 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 145 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 146 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 147 | const waiting = new Map<string, Arrival & { timer: ReturnType<typeof setTimeout> }>(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 148 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 149 | const queue = (roomId: string, mention: boolean) => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 150 | clearTimeout(waiting.get(roomId)?.timer); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 151 | const timer = setTimeout(() => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 152 | waiting.delete(roomId); |
20fe182f3204 | atagen | 2026-10-26 05:50 UTC | 153 | const room = get(effectiveRooms).find((r) => r.room_id === roomId); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 154 | if (!room || !active() || watched(roomId) || notifyingCount(room) === 0) return; |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 155 | if (get(pushActive)) return; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 156 | const source = sourceFromTimeline(get(timelines)[roomId]) ?? sourceFromSummary(room); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 157 | notified.add(roomId); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 158 | void show(planNotification(room, source, { mention }), openRoom); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 159 | }, SETTLE_MS); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 160 | waiting.set(roomId, { mention, timer }); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 161 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 162 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 163 | const onRooms = (list: RoomSummary[]) => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 164 | const next = new Map(list.map((room) => [room.room_id, room])); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 165 | const prior = previous; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 166 | previous = next; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 167 | if (!active()) { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 168 | if (badge !== 0) setBadge((badge = 0)); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 169 | return; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 170 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 171 | const total = badgeTotal(list); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 172 | if (total !== badge) setBadge((badge = total)); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 173 | const now = Date.now(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 174 | for (const room of list) { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 175 | const arrival = arrivalIn(prior.get(room.room_id), room, now); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 176 | if (!arrival || watched(room.room_id)) continue; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 177 | queue(room.room_id, arrival.mention || (waiting.get(room.room_id)?.mention ?? false)); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 178 | } |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 179 | clearRead(list); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 180 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 181 | |
20fe182f3204 | atagen | 2026-10-26 05:50 UTC | 182 | const unsubscribeRooms = effectiveRooms.subscribe(onRooms); |
20fe182f3204 | atagen | 2026-10-26 05:50 UTC | 183 | const unsubscribeEnabled = notificationsEnabled.subscribe(() => onRooms(get(effectiveRooms))); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 184 | const onAttention = () => { |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 185 | notificationPermission.set(supported ? Notification.permission : 'unsupported'); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 186 | if (supported && Notification.permission !== 'granted') pushActive.set(false); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 187 | clearRead(get(effectiveRooms)); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 188 | const open = get(selectedRoomId); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 189 | if (open && get(pushActive) && watched(open)) void closeRoom(open); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 190 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 191 | const onMessage = (ev: MessageEvent) => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 192 | const data = ev.data as { type?: unknown; roomId?: unknown } | null; |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 193 | const account = get(sessionUser); |
235ce394f90d | atagen | 2026-10-26 06:54 UTC | 194 | if (data?.type === PUSH_CHANGED_MESSAGE && account) void syncPush(account, get(notificationsEnabled)); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 195 | if (data?.type === OPEN_ROOM_MESSAGE && typeof data.roomId === 'string') openRoom(data.roomId); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 196 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 197 | window.addEventListener('focus', onAttention); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 198 | document.addEventListener('visibilitychange', onAttention); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 199 | const unsubscribeSelected = selectedRoomId.subscribe(onAttention); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 200 | if ('serviceWorker' in navigator) navigator.serviceWorker.addEventListener('message', onMessage); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 201 | |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 202 | return () => { |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 203 | unsubscribeSession(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 204 | unsubscribeRooms(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 205 | unsubscribeEnabled(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 206 | unsubscribeSelected(); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 207 | for (const { timer } of waiting.values()) clearTimeout(timer); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 208 | window.removeEventListener('focus', onAttention); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 209 | document.removeEventListener('visibilitychange', onAttention); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 210 | if ('serviceWorker' in navigator) navigator.serviceWorker.removeEventListener('message', onMessage); |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 211 | }; |
db4e552594cb | atagen | 2026-10-26 04:43 UTC | 212 | } |