feat: add media session (wip)

src/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
 import { Howler } from 'howler';
@@ -85,7 +85,34 @@ export function App() {
     return [...favorites, ...categories];
   }, [favoriteSounds, categories]);
 
+  const audioElement = useRef<HTMLAudioElement | null>(null);
+  const isPlaying = useSoundStore(state => state.isPlaying);
+
+  useEffect(() => {
+    const dest = Howler.ctx.createMediaStreamDestination();
+
+    if (audioElement.current) {
+      audioElement.current.srcObject = dest.stream;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isPlaying) {
+      audioElement.current?.play().then(() => {
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: 'Moodist',
+        });
+
+        navigator.mediaSession.playbackState = 'playing';
+      });
+    } else {
+      audioElement.current?.pause();
+      navigator.mediaSession.playbackState = 'paused';
+    }
+  }, [isPlaying]);
+
   return (
+    <>
       <SnackbarProvider>
         <StoreConsumer>
           <Container>
@@ -98,5 +125,8 @@ export function App() {
           <SharedModal />
         </StoreConsumer>
       </SnackbarProvider>
+
+      <audio aria-hidden={true} muted ref={audioElement} src="" />
+    </>
   );
 }