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/items/media-controls.tsx

@@ -1,20 +0,0 @@
-import { IoMdPlayCircle } from 'react-icons/io/index';
-
-import { Item } from '../item';
-
-export function MediaControls({
-  active,
-  onClick,
-}: {
-  active: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <Item
-      active={active}
-      icon={<IoMdPlayCircle />}
-      label="Media Controls"
-      onClick={onClick}
-    />
-  );
-}

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}</>;

src/stores/media-session/index.ts

@@ -1,33 +0,0 @@
-import { create } from 'zustand';
-import { createJSONStorage, persist } from 'zustand/middleware';
-import merge from 'deepmerge';
-
-import {
-  createActions,
-  type MediaControlsActions,
-} from './media-session.actions';
-import { createState, type MediaControlsState } from './media-session.state';
-
-export const useMediaSessionStore = create<
-  MediaControlsState & MediaControlsActions
->()(
-  persist(
-    (...a) => ({
-      ...createState(...a),
-      ...createActions(...a),
-    }),
-    {
-      merge: (persisted, current) =>
-        merge(
-          current,
-          // @ts-ignore
-          persisted,
-        ),
-      name: 'moodist-media-session',
-      partialize: state => ({ enabled: state.enabled }),
-      skipHydration: true,
-      storage: createJSONStorage(() => localStorage),
-      version: 0,
-    },
-  ),
-);

src/stores/media-session/media-session.actions.ts

@@ -1,29 +0,0 @@
-import type { StateCreator } from 'zustand';
-import type { MediaControlsState } from './media-session.state';
-
-export interface MediaControlsActions {
-  disable: () => void;
-  enable: () => void;
-  toggle: () => void;
-}
-
-export const createActions: StateCreator<
-  MediaControlsActions & MediaControlsState,
-  [],
-  [],
-  MediaControlsActions
-> = (set, get) => {
-  return {
-    disable() {
-      set({ enabled: false });
-    },
-
-    enable() {
-      set({ enabled: true });
-    },
-
-    toggle() {
-      set({ enabled: !get().enabled });
-    },
-  };
-};

src/stores/media-session/media-session.state.ts

@@ -1,18 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { MediaControlsActions } from './media-session.actions';
-
-export interface MediaControlsState {
-  enabled: boolean;
-  isSupported: boolean;
-}
-
-export const createState: StateCreator<
-  MediaControlsState & MediaControlsActions,
-  [],
-  [],
-  MediaControlsState
-> = () => ({
-  enabled: false,
-  isSupported: 'mediaSession' in navigator,
-});