feat: add media session (wip)

remvze · May 11, 2024 · df1b05f · df1b05f
1 parent ea0dfff
commit df1b05f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 30 deletions.
diff --git a/public/sounds/2-seconds-of-silence.mp3 b/public/sounds/2-seconds-of-silence.mp3
diff --git a/src/components/app/app.tsx b/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>
-
-        <Toolbar />
-        <SharedModal />
-      </StoreConsumer>
-    </SnackbarProvider>
+    <>
+      <SnackbarProvider>
+        <StoreConsumer>
+          <Container>
+            <div id="app" />
+            <Buttons />
+            <Categories categories={allCategories} />
+          </Container>
+
+          <Toolbar />
+          <SharedModal />
+        </StoreConsumer>
+      </SnackbarProvider>
+
+      <audio
+        aria-hidden={true}
+        ref={audio}
+        src="/sounds/2-seconds-of-silence.mp3"
+      />
+    </>
   );
 }
diff --git a/src/hooks/use-media-session.ts b/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 isPlaying = useSoundStore(state => state.isPlaying);
+  const ref = useRef<HTMLAudioElement | null>(null);
 
-  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]);
+  const isPlaying = useSoundStore(state => state.isPlaying);
 
   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;
 }