fix mediasession controls

src/renderer/features/settings/components/hotkeys/media-session-settings.tsx

@@ -5,23 +5,48 @@ import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
-import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
+import { openRestartRequiredToast } from '/@/renderer/features/settings/restart-toast';
+import {
+    useHotkeySettings,
+    usePlaybackSettings,
+    useSettingsStoreActions,
+} from '/@/renderer/store/settings.store';
 import { Switch } from '/@/shared/components/switch/switch';
 import { PlayerType } from '/@/shared/types/types';
 
-const isWindows = isElectron() ? window.api.utils.isWindows() : null;
+const isLinux = isElectron() ? window.api.utils.isLinux() : false;
 const isDesktop = isElectron();
-const ipc = isElectron() ? window.api.ipc : null;
+const localSettings = isElectron() ? window.api.localSettings : null;
 
 export const MediaSessionSettings = () => {
     const { t } = useTranslation();
     const { mediaSession, type: playbackType } = usePlaybackSettings();
-    const { toggleMediaSession } = useSettingsStoreActions();
+    const playbackSettings = usePlaybackSettings();
+    const hotkeySettings = useHotkeySettings();
+    const { setSettings } = useSettingsStoreActions();
 
-    function handleMediaSessionChange() {
-        const current = mediaSession;
-        toggleMediaSession();
-        ipc?.send('settings-set', { property: 'mediaSession', value: !current });
+    function handleMediaSessionChange(e: boolean) {
+        // If media session is enabled, disable global media hotkeys
+        if (e) {
+            localSettings!.set('global_media_hotkeys', false);
+            setSettings({
+                hotkeys: {
+                    ...hotkeySettings,
+                    globalMediaHotkeys: false,
+                },
+            });
+        }
+
+        localSettings!.set('mediaSession', e);
+        setSettings({
+            playback: {
+                ...playbackSettings,
+                mediaSession: e,
+            },
+        });
+
+        // Restart is always required because the media session is a startup setting
+        openRestartRequiredToast();
     }
 
     const mediaSessionOptions: SettingOption[] = [
@@ -29,16 +54,16 @@ export const MediaSessionSettings = () => {
             control: (
                 <Switch
                     aria-label="Toggle media Session"
-                    defaultChecked={mediaSession}
-                    disabled={!isWindows || !isDesktop || playbackType !== PlayerType.WEB}
-                    onChange={handleMediaSessionChange}
+                    checked={mediaSession}
+                    disabled={isLinux || !isDesktop || playbackType !== PlayerType.WEB}
+                    onChange={(e) => handleMediaSessionChange(e.currentTarget.checked)}
                 />
             ),
             description: t('setting.mediaSession', {
                 context: 'description',
                 postProcess: 'sentenceCase',
             }),
-            isHidden: !isWindows || !isDesktop,
+            isHidden: isLinux || !isDesktop,
             note: t('common.restartRequired', { postProcess: 'sentenceCase' }),
             title: t('setting.mediaSession', { postProcess: 'sentenceCase' }),
         },

src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx

@@ -5,42 +5,52 @@ import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
+import { openRestartRequiredToast } from '/@/renderer/features/settings/restart-toast';
 import { useHotkeySettings, usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
 import { Switch } from '/@/shared/components/switch/switch';
-import { PlayerType } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
-const isWindows = isElectron() ? window.api.utils.isWindows() : false;
 
 export const WindowHotkeySettings = () => {
     const { t } = useTranslation();
     const settings = useHotkeySettings();
+    const playbackSettings = usePlaybackSettings();
     const { setSettings } = useSettingsStoreActions();
-    const { mediaSession: enableWindowsMediaSession, type: playbackType } = usePlaybackSettings();
+    const { mediaSession } = usePlaybackSettings();
 
     const options: SettingOption[] = [
         {
             control: (
                 <Switch
-                    defaultChecked={settings.globalMediaHotkeys}
-                    disabled={
-                        !isElectron() ||
-                        (enableWindowsMediaSession && isWindows && playbackType === PlayerType.WEB)
-                    }
+                    checked={settings.globalMediaHotkeys}
+                    disabled={!isElectron()}
                     onChange={(e) => {
+                        localSettings!.set('global_media_hotkeys', e.currentTarget.checked);
                         setSettings({
                             hotkeys: {
                                 ...settings,
                                 globalMediaHotkeys: e.currentTarget.checked,
                             },
                         });
-                        localSettings!.set('global_media_hotkeys', e.currentTarget.checked);
 
                         if (e.currentTarget.checked) {
                             localSettings!.enableMediaKeys();
                         } else {
                             localSettings!.disableMediaKeys();
                         }
+
+                        // Restart is required if media session was previously enabled
+                        // Though the global hotkey should override the media session, it's better to restart to be safe
+                        if (e.currentTarget.checked && mediaSession) {
+                            localSettings!.set('mediaSession', false);
+                            setSettings({
+                                playback: {
+                                    ...playbackSettings,
+                                    mediaSession: false,
+                                },
+                            });
+                            openRestartRequiredToast();
+                        }
                     }}
                 />
             ),

src/renderer/features/settings/components/window/window-settings.tsx

@@ -5,10 +5,10 @@ import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
+import { openRestartRequiredToast } from '/@/renderer/features/settings/restart-toast';
 import { useSettingsStoreActions, useWindowSettings } from '/@/renderer/store';
 import { Select } from '/@/shared/components/select/select';
 import { Switch } from '/@/shared/components/switch/switch';
-import { toast } from '/@/shared/components/toast/toast';
 import { Platform } from '/@/shared/types/types';
 
 const WINDOW_BAR_OPTIONS = [
@@ -44,26 +44,7 @@ export const WindowSettings = () => {
                         const requireRestart = isSwitchingToFrame || isSwitchingToNoFrame;
 
                         if (requireRestart) {
-                            toast.info({
-                                autoClose: false,
-                                id: 'restart-toast',
-                                message: t('common.forceRestartRequired', {
-                                    postProcess: 'sentenceCase',
-                                }),
-                                onClose: () => {
-                                    window.api.ipc!.send('app-restart');
-                                },
-                                title: t('common.restartRequired', {
-                                    postProcess: 'sentenceCase',
-                                }),
-                            });
-                        } else {
-                            toast.update({
-                                autoClose: 0,
-                                id: 'restart-toast',
-                                message: '',
-                                onClose: () => {},
-                            }); // clean old toasts
+                            openRestartRequiredToast();
                         }
 
                         localSettings?.set('window_window_bar_style', e as Platform);

src/renderer/features/settings/restart-toast.ts

@@ -0,0 +1,22 @@
+import { t } from 'i18next';
+import isElectron from 'is-electron';
+
+import { toast } from '/@/shared/components/toast/toast';
+
+const ipc = isElectron() ? window.api.ipc : null;
+
+export const openRestartRequiredToast = () => {
+    return toast.info({
+        autoClose: false,
+        id: 'restart-toast',
+        message: t('common.forceRestartRequired', {
+            postProcess: 'sentenceCase',
+        }),
+        onClose: () => {
+            ipc?.send('app-restart');
+        },
+        title: t('common.restartRequired', {
+            postProcess: 'sentenceCase',
+        }),
+    });
+};