feat: add media session (wip)

src/components/app/app.tsx

@@ -86,9 +86,10 @@ export function App() {
     return [...favorites, ...categories];
   }, [favoriteSounds, categories]);
 
-  useMediaSession();
+  const audio = useMediaSession();
 
   return (
+    <>
       <SnackbarProvider>
         <StoreConsumer>
           <Container>
@@ -101,5 +102,12 @@ export function App() {
           <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 ref = useRef<HTMLAudioElement | null>(null);
-  const pause = useSoundStore(state => state.pause);
+
   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) {
+      ref.current?.play().then(() => {
+        console.log('hi');
         navigator.mediaSession.metadata = new MediaMetadata({
           title: 'Moodist',
         });
 
         navigator.mediaSession.playbackState = 'playing';
+      });
     } else {
+      ref.current?.pause();
+
       navigator.mediaSession.playbackState = 'paused';
     }
   }, [isPlaying]);
+
+  return ref;
 }