Add better metadata

client/app.tsx

@@ -12,6 +12,8 @@ import { useEvent } from "./lib/use-event"
 import { useKeydown } from "./lib/use-keydown"
 import { useOffline } from "./lib/use-offline"
 
+import { useMetadata } from "./metadata"
+
 import type { ShowInfo } from "../app/show"
 import { Arrow } from "./arrow"
 import { Channel as ChannelCard } from "./channel"
@@ -73,6 +75,7 @@ export function NTS() {
 	const [position, setPosition] = useState(0)
 	const [looped, setLooped] = useState(0)
 	const isOffline = useOffline()
+	useMetadata(playing, show, live)
 
 	const setVolume = useCallback(
 		function (fn: (volume: number) => number) {
@@ -133,38 +136,6 @@ export function NTS() {
 		[playing],
 	)
 
-	useEffect(
-		function () {
-			if (!playing) {
-				document.title = "NTS"
-				navigator.mediaSession.metadata = null
-			}
-
-			if (playing === 1) {
-				if (live.data) {
-					document.title = `NTS 1 - ${live.data?.channel1.now.name}`
-				} else {
-					document.title = "NTS 1"
-				}
-			}
-			if (playing === 2) {
-				if (live.data) {
-					document.title = `NTS 2 - ${live.data?.channel2.now.name}`
-				} else {
-					document.title = "NTS 2"
-				}
-			}
-			if (playing === "show") {
-				if (show) {
-					document.title = `NTS - ${show.name}`
-				} else {
-					document.title = "NTS"
-				}
-			}
-		},
-		[playing, show, live],
-	)
-
 	const increaseVolume = useCallback(
 		function () {
 			setVolume((v: number): number => clamp(0, 1, v + 0.1))

client/metadata/index.tsx

@@ -0,0 +1,70 @@
+import { useEffect } from "react"
+
+import type { ShowInfo } from "~/app/show"
+import type { Info } from "~/client/lib/live"
+import type { PromiseState } from "~/client/lib/use-promise"
+import type { Stream } from "~/lib/stream"
+
+const artwork = [
+	{
+		type: "image/png",
+		src: "https://raw.githubusercontent.com/romeovs/nts-desktop/refs/heads/main/logos/logo.png",
+	},
+]
+
+export function useMetadata(
+	playing: Stream | "show" | null,
+	show: ShowInfo | null,
+	live: PromiseState<never, Info>,
+) {
+	useEffect(
+		function () {
+			if (!playing) {
+				document.title = "NTS"
+				navigator.mediaSession.metadata = null
+				return
+			}
+
+			if (playing === 1) {
+				if (live.data) {
+					const title = `NTS 1 - ${live.data?.channel1.now.name}`
+					document.title = title
+					navigator.mediaSession.metadata = new MediaMetadata({
+						title,
+						artwork,
+					})
+				} else {
+					document.title = "NTS 1"
+					navigator.mediaSession.metadata = null
+				}
+			}
+			if (playing === 2) {
+				if (live.data) {
+					const title = `NTS 2 - ${live.data?.channel2.now.name}`
+					document.title = title
+					navigator.mediaSession.metadata = new MediaMetadata({
+						title,
+						artwork,
+					})
+				} else {
+					document.title = "NTS 2"
+					navigator.mediaSession.metadata = null
+				}
+			}
+			if (playing === "show") {
+				if (show) {
+					const title = `NTS - ${show.name}`
+					document.title
+					navigator.mediaSession.metadata = new MediaMetadata({
+						title,
+						artwork,
+					})
+				} else {
+					document.title = "NTS"
+					navigator.mediaSession.metadata = null
+				}
+			}
+		},
+		[playing, show, live],
+	)
+}

index.html

@@ -26,6 +26,7 @@
 			img-src
 				'self'
 				https://media2.ntslive.co.uk
+				https://raw.githubusercontent.com
 			;
 		" />
 		<title>NTS</title>