| 1 | import { useEffect } from "react"; |
| 2 | import { useLocation, useNavigate } from "react-router"; |
| 3 | |
| 4 | import type { SoundSettings } from "@g1t/contracts/sounds"; |
| 5 | |
| 6 | import { applyAttention, refreshPush, reportInbox, setNavigator, setViewing, startFeed, useLiveBadges } from "../../lib/notify-client"; |
| 7 | import { setSoundViewer } from "../../lib/sound-events"; |
| 8 | import { applySoundSettings, startSounds } from "../../lib/sounds"; |
| 9 | import { Toaster } from "./toaster"; |
| 10 | |
| 11 | /** |
| 12 | * Live notifications for the signed-in person, on every page: the feed |
| 13 | * socket (lib/notify-client.ts), the toasts, the count in the tab's title |
| 14 | * and on the app icon. Mounted once, in root.tsx. |
| 15 | * |
| 16 | * `workspace` is the one the page is in, whose counts the feed reads on |
| 17 | * connect; `inbox` the inbox count the page's data last read, handed to |
| 18 | * the feed so every tab shows it. `sounds` are the person's sound settings |
| 19 | * as the root loader read them with the page, so the first event already |
| 20 | * respects them, and `me` who they are, so their own messages never sound |
| 21 | * (lib/sounds.ts, lib/sound-events.ts). |
| 22 | */ |
| 23 | export function LiveNotifications({ |
| 24 | workspace, |
| 25 | inbox, |
| 26 | sounds, |
| 27 | me, |
| 28 | }: { |
| 29 | workspace: string | null; |
| 30 | inbox: number | null; |
| 31 | sounds: SoundSettings | null; |
| 32 | me: { id: string; username: string } | null; |
| 33 | }) { |
| 34 | const navigate = useNavigate(); |
| 35 | const { pathname, search } = useLocation(); |
| 36 | const badges = useLiveBadges(workspace); |
| 37 | |
| 38 | // Sounds: the settings with the page, and audio allowed from the first click or key. |
| 39 | useEffect(() => applySoundSettings(sounds), [sounds]); |
| 40 | useEffect(() => setSoundViewer(me), [me?.id, me?.username]); // eslint-disable-line react-hooks/exhaustive-deps |
| 41 | useEffect(() => startSounds(), []); |
| 42 | |
| 43 | useEffect(() => { |
| 44 | setNavigator((href) => navigate(href)); |
| 45 | return () => setNavigator(null); |
| 46 | }, [navigate]); |
| 47 | |
| 48 | useEffect(() => startFeed(workspace), [workspace]); |
| 49 | |
| 50 | useEffect(() => setViewing({ path: pathname + search }), [pathname, search]); |
| 51 | |
| 52 | // The inbox as the page just read it (after marking items, say). |
| 53 | useEffect(() => { |
| 54 | if (inbox != null) reportInbox(inbox); |
| 55 | }, [inbox]); |
| 56 | |
| 57 | // "(3) Chat · g1t": kept on whatever title each page sets. |
| 58 | useEffect(() => { |
| 59 | applyAttention(badges); |
| 60 | const head = document.querySelector("head"); |
| 61 | if (!head) return; |
| 62 | const observer = new MutationObserver(() => applyAttention(badges)); |
| 63 | observer.observe(head, { subtree: true, childList: true, characterData: true }); |
| 64 | return () => observer.disconnect(); |
| 65 | }, [badges?.chat, badges?.mentions, badges?.inbox]); // eslint-disable-line react-hooks/exhaustive-deps |
| 66 | |
| 67 | // Pushes keep arriving for someone who turned them on; a click on one |
| 68 | // with g1t open moves the tab there. |
| 69 | useEffect(() => { |
| 70 | const idle = window.setTimeout(() => void refreshPush().catch(() => {}), 3_000); |
| 71 | const onMessage = (event: MessageEvent) => { |
| 72 | if (event.data?.type === "g1t:navigate" && typeof event.data.href === "string" && event.data.href.startsWith("/")) navigate(event.data.href); |
| 73 | }; |
| 74 | navigator.serviceWorker?.addEventListener("message", onMessage); |
| 75 | return () => { |
| 76 | window.clearTimeout(idle); |
| 77 | navigator.serviceWorker?.removeEventListener("message", onMessage); |
| 78 | }; |
| 79 | }, [navigate]); |
| 80 | |
| 81 | return <Toaster />; |
| 82 | } |