Removed Media Controls menu item

src/components/media-controls/media-controls.tsx

@@ -1,9 +1,16 @@
-import { useMediaSessionStore } from '@/stores/media-session';
-
 import { MediaSessionTrack } from './media-session-track';
+import { useEffect, useState } from 'react';
+import { useSSR } from '@/hooks/use-ssr';
 
 export function MediaControls() {
-  const mediaControlsEnabled = useMediaSessionStore(state => state.enabled);
+  const [mediaControlsEnabled, setMediaControlsEnabled] = useState(false);
+  const { isBrowser } = useSSR();
+
+  useEffect(() => {
+    if (!isBrowser) return;
+
+    setMediaControlsEnabled('mediaSession' in navigator);
+  }, [isBrowser]);
 
   if (!mediaControlsEnabled) {
     return null;

src/components/menu/menu.tsx

@@ -29,17 +29,10 @@ import { useSoundStore } from '@/stores/sound';
 import styles from './menu.module.css';
 import { useCloseListener } from '@/hooks/use-close-listener';
 import { closeModals } from '@/lib/modal';
-import { MediaControls } from './items/media-controls';
-import { useMediaSessionStore } from '@/stores/media-session';
 
 export function Menu() {
   const [isOpen, setIsOpen] = useState(false);
 
-  const mediaControlsEnabled = useMediaSessionStore(state => state.enabled);
-  const toggleMediaControls = useMediaSessionStore(state => state.toggle);
-  const isMediaSessionSupported = useMediaSessionStore(
-    state => state.isSupported,
-  );
   const noSelected = useSoundStore(state => state.noSelected());
 
   const initial = useMemo(
@@ -115,12 +108,6 @@ export function Menu() {
                   >
                     <PresetsItem open={() => open('presets')} />
                     <ShareItem open={() => open('shareLink')} />
-                    {isMediaSessionSupported ? (
-                      <MediaControls
-                        active={mediaControlsEnabled}
-                        onClick={toggleMediaControls}
-                      />
-                    ) : null}
                     <ShuffleItem />
                     <SleepTimerItem open={() => open('sleepTimer')} />
 

src/components/store-consumer/store-consumer.tsx

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 import { useSoundStore } from '@/stores/sound';
 import { useNoteStore } from '@/stores/note';
 import { usePresetStore } from '@/stores/preset';
-import { useMediaSessionStore } from '@/stores/media-session';
 
 interface StoreConsumerProps {
   children: React.ReactNode;
@@ -14,7 +13,6 @@ export function StoreConsumer({ children }: StoreConsumerProps) {
     useSoundStore.persist.rehydrate();
     useNoteStore.persist.rehydrate();
     usePresetStore.persist.rehydrate();
-    useMediaSessionStore.persist.rehydrate();
   }, []);
 
   return <>{children}</>;