From f311ec114e3a8ca61954819334e43195d0980219 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 11 May 2024 16:26:25 +0430
Subject: [PATCH] feat: add media session (wip)

---
 src/components/app/app.tsx     |  2 ++
 src/hooks/use-media-session.ts | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index 9ec94c2..29fa3b7 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -105,6 +105,8 @@ export function App() {
 
       <audio
         aria-hidden={true}
+        loop
+        muted
         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
index 7680f58..08ebb11 100644
--- a/src/hooks/use-media-session.ts
+++ b/src/hooks/use-media-session.ts
@@ -8,8 +8,8 @@ export function useMediaSession() {
   const isPlaying = useSoundStore(state => state.isPlaying);
 
   useEffect(() => {
-    if (isPlaying) {
-      ref.current?.play().then(() => {
+    if (ref.current) {
+      ref.current.addEventListener('play', () => {
         console.log('hi');
         navigator.mediaSession.metadata = new MediaMetadata({
           title: 'Moodist',
@@ -17,10 +17,18 @@ export function useMediaSession() {
 
         navigator.mediaSession.playbackState = 'playing';
       });
+
+      ref.current.addEventListener('pause', () => {
+        navigator.mediaSession.playbackState = 'paused';
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isPlaying) {
+      ref.current?.play();
     } else {
       ref.current?.pause();
-
-      navigator.mediaSession.playbackState = 'paused';
     }
   }, [isPlaying]);