enable mediaSession api (#1040)

* enable mediaSession api

src/i18n/locales/de.json

@@ -709,6 +709,8 @@
         "clearCacheSuccess": "Cache erfolgreich geleert",
         "contextMenu": "Kontextmenü-Einstellungen (Rechtsklick)",
         "customCssEnable_description": "ermöglicht das Schreiben benutzerdefinierten CSS.",
-        "doubleClickBehavior": "bei Doppelklick alle gesuchten Tracks zur Warteschlange hinzufügen"
+        "doubleClickBehavior": "bei Doppelklick alle gesuchten Tracks zur Warteschlange hinzufügen",
+        "mediaSession" : "aktiviere Medien-Sitzung API",
+        "mediaSession_description": "Aktiviert die Windows Media Session-Integration, die Mediensteuerungen und Metadaten im Systemlautstärke-Overlay und auf dem Sperrbildschirm anzeigt (nur Windows)"
     }
 }

src/i18n/locales/en.json

@@ -727,6 +727,8 @@
         "transcodeBitrate_description": "selects the bitrate to transcode. 0 means let the server pick",
         "transcodeFormat": "format to transcode",
         "transcodeFormat_description": "selects the format to transcode. leave empty to let the server decide",
+        "mediaSession": "enable media session",
+        "mediaSession_description": "Enables Windows Media Session integration, displaying media controls and metadata in the system volume overlay and lock screen (Windows only)",
         "translationApiProvider": "translation api provider",
         "translationApiProvider_description": "api provider for translation",
         "translationApiKey": "translation api key",

src/main/index.ts

@@ -548,7 +548,14 @@ async function createWindow(first = true): Promise<void> {
     }
 }
 
-app.commandLine.appendSwitch('disable-features', 'HardwareMediaKeyHandling,MediaSessionService');
+const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
+const shouldDisableMediaFeatures = process.platform !== 'win32' || !enableWindowsMediaSession;
+if (shouldDisableMediaFeatures) {
+    app.commandLine.appendSwitch(
+        'disable-features',
+        'HardwareMediaKeyHandling,MediaSessionService',
+    );
+}
 
 // https://github.com/electron/electron/issues/46538#issuecomment-2808806722
 app.commandLine.appendSwitch('gtk-version', '3');

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

@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next';
+
+import {
+    SettingOption,
+    SettingsSection,
+} from '/@/renderer/features/settings/components/settings-section';
+import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
+import { Switch } from '/@/shared/components/switch/switch';
+
+export const MediaSessionSettings = () => {
+    const { t } = useTranslation();
+    const { mediaSession } = usePlaybackSettings();
+    const { toggleMediaSession } = useSettingsStoreActions();
+
+    function handleMediaSessionChange() {
+        const current = mediaSession;
+        toggleMediaSession();
+        window.api.ipc.send('settings-set', { property: 'mediaSession', value: !current });
+    }
+
+    const mediaSessionOptions: SettingOption[] = [
+        {
+            control: (
+                <Switch
+                    aria-label="Toggle media Session"
+                    defaultChecked={mediaSession}
+                    onChange={handleMediaSessionChange}
+                />
+            ),
+            description: t('setting.mediaSession', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            note: t('common.restartRequired', { postProcess: 'sentenceCase' }),
+            title: t('setting.mediaSession', { postProcess: 'sentenceCase' }),
+        },
+    ];
+
+    return <SettingsSection divider options={mediaSessionOptions} />;
+};

src/renderer/features/settings/components/playback/playback-tab.tsx

@@ -3,6 +3,7 @@ import { lazy, Suspense, useMemo } from 'react';
 
 import { AudioSettings } from '/@/renderer/features/settings/components/playback/audio-settings';
 import { LyricSettings } from '/@/renderer/features/settings/components/playback/lyric-settings';
+import { MediaSessionSettings } from '/@/renderer/features/settings/components/playback/media-session-settings';
 import { ScrobbleSettings } from '/@/renderer/features/settings/components/playback/scrobble-settings';
 import { TranscodeSettings } from '/@/renderer/features/settings/components/playback/transcode-settings';
 import { useSettingsStore } from '/@/renderer/store';
@@ -31,6 +32,7 @@ export const PlaybackTab = () => {
             <AudioSettings hasFancyAudio={hasFancyAudio} />
             <Suspense fallback={<></>}>{hasFancyAudio && <MpvSettings />}</Suspense>
             <TranscodeSettings />
+            <MediaSessionSettings />
             <ScrobbleSettings />
             <LyricSettings />
         </Stack>

src/renderer/store/settings.store.ts

@@ -202,6 +202,7 @@ export interface SettingsSlice extends SettingsState {
         setTable: (type: TableType, data: DataTableProps) => void;
         setTranscodingConfig: (config: TranscodingConfig) => void;
         toggleContextMenuItem: (item: ContextMenuItemType) => void;
+        toggleMediaSession: () => void;
         toggleSidebarCollapseShare: () => void;
     };
 }
@@ -298,6 +299,7 @@ export interface SettingsState {
         audioDeviceId?: null | string;
         crossfadeDuration: number;
         crossfadeStyle: CrossfadeStyle;
+        mediaSession: boolean;
         mpvExtraParameters: string[];
         mpvProperties: MpvSettings;
         muted: boolean;
@@ -491,6 +493,7 @@ const initialState: SettingsState = {
         audioDeviceId: undefined,
         crossfadeDuration: 5,
         crossfadeStyle: CrossfadeStyle.EQUALPOWER,
+        mediaSession: false,
         mpvExtraParameters: [],
         mpvProperties: {
             audioExclusiveMode: 'no',
@@ -752,6 +755,11 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                                 !state.general.disabledContextMenu[item];
                         });
                     },
+                    toggleMediaSession: () => {
+                        set((state) => {
+                            state.playback.mediaSession = !state.playback.mediaSession;
+                        });
+                    },
                     toggleSidebarCollapseShare: () => {
                         set((state) => {
                             state.general.sidebarCollapseShared =