feat: add media session (wip)

src/components/app/app.tsx

@@ -86,20 +86,28 @@ export function App() {
     return [...favorites, ...categories];
   }, [favoriteSounds, categories]);
 
-  useMediaSession();
+  const audio = useMediaSession();
 
   return (
-    <SnackbarProvider>
-      <StoreConsumer>
-        <Container>
-          <div id="app" />
-          <Buttons />
-          <Categories categories={allCategories} />
-        </Container>
+    <>
+      <SnackbarProvider>
+        <StoreConsumer>
+          <Container>
+            <div id="app" />
+            <Buttons />
+            <Categories categories={allCategories} />
+          </Container>
 
-        <Toolbar />
-        <SharedModal />
-      </StoreConsumer>
-    </SnackbarProvider>
+          <Toolbar />
+          <SharedModal />
+        </StoreConsumer>
+      </SnackbarProvider>
+
+      <audio
+        aria-hidden={true}
+        ref={audio}
+        src="/sounds/2-seconds-of-silence.mp3"
+      />
+    </>
   );
 }

src/hooks/use-media-session.ts

@@ -1,31 +1,28 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useSoundStore } from '@/store';
 
 export function useMediaSession() {
-  const play = useSoundStore(state => state.play);
-  const pause = useSoundStore(state => state.pause);
+  const ref = useRef<HTMLAudioElement | null>(null);
+
   const isPlaying = useSoundStore(state => state.isPlaying);
 
-  useEffect(() => {
-    try {
-      navigator.mediaSession.setActionHandler('play', play);
-      navigator.mediaSession.setActionHandler('pause', pause);
-      navigator.mediaSession.setActionHandler('stop', pause);
-    } catch (error) {
-      console.log('Media session is no supported yet');
-    }
-  }, [play, pause]);
-
   useEffect(() => {
     if (isPlaying) {
-      navigator.mediaSession.metadata = new MediaMetadata({
-        title: 'Moodist',
-      });
+      ref.current?.play().then(() => {
+        console.log('hi');
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: 'Moodist',
+        });
 
-      navigator.mediaSession.playbackState = 'playing';
+        navigator.mediaSession.playbackState = 'playing';
+      });
     } else {
+      ref.current?.pause();
+
       navigator.mediaSession.playbackState = 'paused';
     }
   }, [isPlaying]);
+
+  return ref;
 }