ref: add media metadata & misc improvements

components/Footer.jsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="editor text-[11px] leading-[15px] text-white/60 sm:text-gray-400 w-[300px] sm:w-auto sm:max-w-[250px] px-[10px]">
+    <div className="editor text-[11px] leading-[15px] text-white sm:text-black w-[300px] sm:w-auto sm:max-w-[250px] px-[10px]">
       Simple web app for background music from the 
       <a href="https://boxradio.net/" rel="noopener noreferrer" target="_blank">
         Box Radio

hooks/use-stream-audio.js

@@ -12,36 +12,58 @@ function useStreamAudio() {
   const { playing, canplay } = useSnapshot(state)
   const audio = useRef()
 
+  const play = useCallback(async () => {
+    if (!canplay) return
+    await audio.current.play()
+  }, [canplay])
+
+  const pause = useCallback(() => {
+    if (!canplay) return
+    audio.current.pause()
+  }, [canplay])
+
   useEffect(() => {
     audio.current = new Audio(STREAM_URL)
-  }, [])
 
-  useEffect(() => {
-    const onCanPlay = () => {
-      state.canplay = true
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: 'Lo-Fi, Chillhop, ChillJazz, Sleep Music, Work Music etc.',
+        artist: 'LoFi Radio',
+        artwork: [
+          { src: '/mediasession/96.png', sizes: '96x96', type: 'image/png' },
+          { src: '/mediasession/128.png', sizes: '128x128', type: 'image/png' },
+          { src: '/mediasession/192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/mediasession/256.png', sizes: '256x256', type: 'image/png' },
+          { src: '/mediasession/384.png', sizes: '384x384', type: 'image/png' },
+          { src: '/mediasession/512.png', sizes: '512x512', type: 'image/png' }
+        ]
+      })
     }
+  }, [])
 
-    audio.current.addEventListener('loadedmetadata', onCanPlay)
+  useEffect(() => {
+    const onPause = () => (state.playing = false)
+    audio.current.addEventListener('pause', onPause)
 
-    return () => {
-      audio.current.pause()
-      audio.current.removeEventListener('loadedmetadata', onCanPlay)
-    }
+    return () => audio.current.removeEventListener('pause', onPause)
   }, [])
 
-  const play = useCallback(() => {
-    if (!canplay) return
+  useEffect(() => {
+    const onPlay = () => (state.playing = true)
+    audio.current.addEventListener('play', onPlay)
 
-    audio.current.play()
-    state.playing = true
-  }, [canplay])
+    return () => audio.current.removeEventListener('play', onPlay)
+  }, [])
 
-  const pause = useCallback(() => {
-    if (!canplay) return
+  useEffect(() => {
+    const onCanplay = () => (state.canplay = true)
+    audio.current.addEventListener('loadedmetadata', onCanplay)
 
-    audio.current.pause()
-    state.playing = false
-  }, [canplay])
+    return () => {
+      audio.current.pause()
+      audio.current.removeEventListener('loadedmetadata', onCanplay)
+    }
+  }, [])
 
   return {
     canplay,

styles/globals.css

@@ -15,10 +15,7 @@
 
 @layer components {
   .editor a {
-    @apply text-white/80 sm:text-gray-600 hover:text-white sm:hover:text-gray-900 transition-colors;
-  }
-  .editor svg {
-    @apply inline-block -mt-[2.5px];
+    @apply text-white/50 sm:text-black/50 hover:text-white sm:hover:text-black transition-colors;
   }
   [data-plofier] {
     animation: Rotation 24s linear infinite;