fix mediasession controls

src/main/features/core/player/media-keys.ts

@@ -1,6 +1,6 @@
 import { BrowserWindow, globalShortcut, systemPreferences } from 'electron';
 
-import { isMacOS, isWindows } from '../../../utils';
+import { isLinux, isMacOS } from '../../../utils';
 import { store } from '../settings';
 
 import { PlayerType } from '/@/shared/types/types';
@@ -25,10 +25,10 @@ export const enableMediaKeys = (window: BrowserWindow | null) => {
         }
     }
 
-    const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
+    const enableMediaSession = store.get('mediaSession', false) as boolean;
     const playbackType = store.get('playbackType', PlayerType.WEB) as PlayerType;
 
-    if (!enableWindowsMediaSession || !isWindows() || playbackType !== PlayerType.WEB) {
+    if (!enableMediaSession || isLinux() || playbackType !== PlayerType.WEB) {
         globalShortcut.register('MediaStop', () => {
             window?.webContents.send('renderer-player-stop');
         });

src/main/index.ts

@@ -477,10 +477,15 @@ async function createWindow(first = true): Promise<void> {
     }
 }
 
-const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
+// Only allow hardware media key handling if:
+// 1. The "Enable Media Session" setting is enabled
+// 2. The playback type is WEB (mpv not supported)
+// 3. The platform is not Linux (because we are using mpris instead)
+const enableMediaSession = store.get('mediaSession', false) as boolean;
 const playbackType = store.get('playbackType', PlayerType.WEB) as PlayerType;
 const shouldDisableMediaFeatures =
-    !isWindows() || !enableWindowsMediaSession || playbackType !== PlayerType.WEB;
+    isLinux() || !enableMediaSession || playbackType !== PlayerType.WEB;
+
 if (shouldDisableMediaFeatures) {
     app.commandLine.appendSwitch(
         'disable-features',

src/renderer/features/player/hooks/use-media-session.ts

@@ -3,17 +3,19 @@ import { useEffect, useMemo } from 'react';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { usePlaybackSettings, useSettingsStore, useTimestampStoreBase } from '/@/renderer/store';
-import { PlayerStatus } from '/@/shared/types/types';
+import { PlayerStatus, PlayerType } from '/@/shared/types/types';
+
+const mediaSession = navigator.mediaSession;
 
 export const useMediaSession = () => {
     const { mediaSession: mediaSessionEnabled } = usePlaybackSettings();
     const player = usePlayer();
-    const mediaSession = navigator.mediaSession;
     const skip = useSettingsStore((state) => state.general.skipButtons);
+    const playbackType = useSettingsStore((state) => state.playback.type);
 
     const isMediaSessionEnabled = useMemo(() => {
-        return mediaSessionEnabled && mediaSession;
+        return Boolean(mediaSessionEnabled && playbackType === PlayerType.WEB);
-    }, [mediaSessionEnabled, mediaSession]);
+    }, [mediaSessionEnabled, playbackType]);
 
     useEffect(() => {
         if (!isMediaSessionEnabled) {
@@ -21,6 +23,7 @@ export const useMediaSession = () => {
         }
 
         mediaSession.setActionHandler('nexttrack', () => {
+            console.log('mediaSession.nexttrack');
             player.mediaNext();
         });
 
@@ -73,13 +76,7 @@ export const useMediaSession = () => {
             mediaSession.setActionHandler('seekbackward', null);
             mediaSession.setActionHandler('seekforward', null);
         };
-    }, [
+    }, [player, skip?.skipBackwardSeconds, skip?.skipForwardSeconds, isMediaSessionEnabled]);
-        player,
-        skip?.skipBackwardSeconds,
-        skip?.skipForwardSeconds,
-        isMediaSessionEnabled,
-        mediaSession,
-    ]);
 
     usePlayerEvents(
         {

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() {
+    function handleMediaSessionChange(e: boolean) {
-        const current = mediaSession;
+        // If media session is enabled, disable global media hotkeys
-        toggleMediaSession();
+        if (e) {
-        ipc?.send('settings-set', { property: 'mediaSession', value: !current });
+            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}
+                    checked={mediaSession}
-                    disabled={!isWindows || !isDesktop || playbackType !== PlayerType.WEB}
+                    disabled={isLinux || !isDesktop || playbackType !== PlayerType.WEB}
-                    onChange={handleMediaSessionChange}
+                    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}
+                    checked={settings.globalMediaHotkeys}
-                    disabled={
+                    disabled={!isElectron()}
-                        !isElectron() ||
-                        (enableWindowsMediaSession && isWindows && playbackType === PlayerType.WEB)
-                    }
                     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({
+                            openRestartRequiredToast();
-                                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
                         }
 
                         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',
+        }),
+    });
+};