fix: add media session

src/components/app/app.tsx

@@ -24,6 +24,9 @@ export function App() {
   const categories = useMemo(() => sounds.categories, []);
 
   const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+  const play = useSoundStore(state => state.play);
+  const pause = useSoundStore(state => state.pause);
+  const isPlaying = useSoundStore(state => state.isPlaying);
 
   const favoriteSounds = useMemo(() => {
     const favoriteSounds = categories
@@ -60,10 +63,33 @@ export function App() {
       const { ctx } = Howler;
       const dest = ctx.createMediaStreamDestination();
       audio.current.srcObject = dest.stream;
-      audio.current.play();
     }
   }, []);
 
+  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',
+      });
+
+      audio.current?.play();
+      navigator.mediaSession.playbackState = 'playing';
+    } else {
+      audio.current?.pause();
+      navigator.mediaSession.playbackState = 'paused';
+    }
+  }, [isPlaying]);
+
   const allCategories = useMemo(() => {
     const favorites = [];