Disable Media Keys with MediaSession on Windows (#1207)

In f07393c8 we enabled the MediaSession API, which from Chromium's side
brings its own native way of handling Global Media Keys. However, it
turns out having this enabled seemingly conflicts with Windows 11's SMTC
implementation when we also bind the Media Keys using Electron's Global
Hotkeys API (Windows 10 is apparently fine, but now EOL).

Globally passing `HardwareMediaKeyHandling` to `disable-features` was
considered, however using the MediaSession API requires
`HardwareMediaKeyHandling` to be enabled, so this is not an option.

Instead, with MediaSession enabled we need to let Chromium handle the
Media Keys, while without MediaSession we bind our own Global Hot Keys
for users that have them enabled in the settings.

Co-authored-by: Xudong Zhou <godzmichael@outlook.com>

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

@@ -1,6 +1,6 @@
 import { BrowserWindow, globalShortcut, systemPreferences } from 'electron';
 
-import { isMacOS } from '../../../utils';
+import { isMacOS, isWindows } from '../../../utils';
 import { store } from '../settings';
 
 export const enableMediaKeys = (window: BrowserWindow | null) => {
@@ -23,21 +23,24 @@ export const enableMediaKeys = (window: BrowserWindow | null) => {
         }
     }
 
-    globalShortcut.register('MediaStop', () => {
+    const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
-        window?.webContents.send('renderer-player-stop');
+    if (!(enableWindowsMediaSession && isWindows())) {
-    });
+        globalShortcut.register('MediaStop', () => {
+            window?.webContents.send('renderer-player-stop');
+        });
 
-    globalShortcut.register('MediaPlayPause', () => {
+        globalShortcut.register('MediaPlayPause', () => {
-        window?.webContents.send('renderer-player-play-pause');
+            window?.webContents.send('renderer-player-play-pause');
-    });
+        });
 
-    globalShortcut.register('MediaNextTrack', () => {
+        globalShortcut.register('MediaNextTrack', () => {
-        window?.webContents.send('renderer-player-next');
+            window?.webContents.send('renderer-player-next');
-    });
+        });
 
-    globalShortcut.register('MediaPreviousTrack', () => {
+        globalShortcut.register('MediaPreviousTrack', () => {
-        window?.webContents.send('renderer-player-previous');
+            window?.webContents.send('renderer-player-previous');
-    });
+        });
+    }
 };
 
 export const disableMediaKeys = () => {

src/main/index.ts

@@ -549,7 +549,7 @@ async function createWindow(first = true): Promise<void> {
 }
 
 const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
-const shouldDisableMediaFeatures = process.platform !== 'win32' || !enableWindowsMediaSession;
+const shouldDisableMediaFeatures = !isWindows() || !enableWindowsMediaSession;
 if (shouldDisableMediaFeatures) {
     app.commandLine.appendSwitch(
         'disable-features',

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

@@ -5,22 +5,24 @@ import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
-import { useHotkeySettings, useSettingsStoreActions } from '/@/renderer/store';
+import { useHotkeySettings, usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
 import { Switch } from '/@/shared/components/switch/switch';
 
 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 { setSettings } = useSettingsStoreActions();
+    const { mediaSession: enableWindowsMediaSession } = usePlaybackSettings();
 
     const options: SettingOption[] = [
         {
             control: (
                 <Switch
                     defaultChecked={settings.globalMediaHotkeys}
-                    disabled={!isElectron()}
+                    disabled={!isElectron() || (enableWindowsMediaSession && isWindows)}
                     onChange={(e) => {
                         setSettings({
                             hotkeys: {
@@ -42,7 +44,7 @@ export const WindowHotkeySettings = () => {
                 context: 'description',
                 postProcess: 'sentenceCase',
             }),
-            isHidden: !isElectron(),
+            isHidden: !isElectron() || (enableWindowsMediaSession && isWindows),
             title: t('setting.globalMediaHotkeys', { postProcess: 'sentenceCase' }),
         },
     ];