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

---
 src/components/app/app.tsx     |  3 +++
 src/hooks/use-media-session.ts | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/hooks/use-media-session.ts

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index 713e24a..ac513ed 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -18,6 +18,7 @@ import { FADE_OUT } from '@/constants/events';
 
 import type { Sound } from '@/data/types';
 import { subscribe } from '@/lib/event';
+import { useMediaSession } from '@/hooks/use-media-session';
 
 export function App() {
   const categories = useMemo(() => sounds.categories, []);
@@ -85,6 +86,8 @@ export function App() {
     return [...favorites, ...categories];
   }, [favoriteSounds, categories]);
 
+  useMediaSession();
+
   return (
     <SnackbarProvider>
       <StoreConsumer>
diff --git a/src/hooks/use-media-session.ts b/src/hooks/use-media-session.ts
new file mode 100644
index 0000000..872b8bf
--- /dev/null
+++ b/src/hooks/use-media-session.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+import { useSoundStore } from '@/store';
+
+export function useMediaSession() {
+  const isPlaying = useSoundStore(state => state.isPlaying);
+
+  useEffect(() => {
+    if ('mediaSession' in navigator) {
+      if (isPlaying) {
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: 'Moodist - Ambient Sounds',
+        });
+      } else {
+        navigator.mediaSession.metadata = null;
+      }
+    }
+  }, [isPlaying]);
+}