decouple audio device setting property depending on player type (#1617)

src/renderer/features/player/audio-player/engine/mpv-player-engine.tsx

@@ -56,7 +56,7 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
     const hasPopulatedQueueRef = useRef<boolean>(false);
     const isMountedRef = useRef<boolean>(true);
 
-    const { audioDeviceId, transcode } = usePlaybackSettings();
+    const { mpvAudioDeviceId, transcode } = usePlaybackSettings();
     const mpvExtraParameters = useSettingsStore((store) => store.playback.mpvExtraParameters);
     const mpvProperties = useSettingsStore((store) => store.playback.mpvProperties);
     const [reloadTrigger, setReloadTrigger] = useState(0);
@@ -108,8 +108,8 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
 
             const extraParameters: string[] = [...mpvExtraParameters];
 
-            if (audioDeviceId) {
-                extraParameters.push(`--audio-device=${audioDeviceId}`);
+            if (mpvAudioDeviceId) {
+                extraParameters.push(`--audio-device=${mpvAudioDeviceId}`);
             }
 
             await mpvPlayer?.initialize({
@@ -154,7 +154,7 @@ export const MpvPlayerEngine = (props: MpvPlayerEngineProps) => {
         // update callbacks in usePlayerEvents.
         // reloadTrigger is included to allow manual reload via MPV_RELOAD event.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mpvExtraParameters, mpvProperties, audioDeviceId, reloadTrigger]);
+    }, [mpvExtraParameters, mpvProperties, mpvAudioDeviceId, reloadTrigger]);
 
     // Update volume
     useEffect(() => {

src/renderer/features/player/components/player-config.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useAudioDevices } from '/@/renderer/features/settings/components/playback/audio-settings';
 import { ListConfigTable } from '/@/renderer/features/shared/components/list-config-menu';
 import {
+    usePlaybackType,
     usePlayerActions,
     usePlayerProperties,
     usePlayerSongProperties,
@@ -233,23 +234,30 @@ const AudioPlayerTypeConfig = () => {
 
 const AudioDeviceConfig = () => {
     const status = usePlayerStatus();
+    const playbackType = usePlaybackType();
     const playbackSettings = usePlaybackSettings();
     const { setSettings } = useSettingsStoreActions();
 
-    const audioDevices = useAudioDevices();
+    const audioDevices = useAudioDevices(playbackType);
+    const audioDeviceId =
+        playbackType === PlayerType.LOCAL
+            ? playbackSettings.mpvAudioDeviceId
+            : playbackSettings.audioDeviceId;
 
     return (
         <Select
             clearable
             comboboxProps={{ withinPortal: false }}
             data={audioDevices}
-            defaultValue={playbackSettings.audioDeviceId}
+            defaultValue={audioDeviceId}
             disabled={status === PlayerStatus.PLAYING}
             onChange={(e) => {
                 setSettings({
                     playback: {
                         ...playbackSettings,
-                        audioDeviceId: e,
+                        ...(playbackType === PlayerType.LOCAL
+                            ? { mpvAudioDeviceId: e }
+                            : { audioDeviceId: e }),
                     },
                 });
             }}

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

@@ -36,9 +36,10 @@ const getMpvAudioDevices = async () => {
     }
 };
 
-export const useAudioDevices = () => {
-    const playbackType = usePlaybackType();
-    const [audioDevices, setAudioDevices] = useState<{ label: string; value: string }[]>([]);
+export type AudioDeviceOption = { label: string; value: string };
+
+export const useAudioDevices = (playbackType: PlayerType) => {
+    const [audioDevices, setAudioDevices] = useState<AudioDeviceOption[]>([]);
 
     useEffect(() => {
         const fetchAudioDevices = async () => {
@@ -92,8 +93,11 @@ export const AudioSettings = memo(() => {
     const settings = usePlaybackSettings();
     const { setSettings } = useSettingsStoreActions();
     const status = usePlayerStatus();
+    const playbackType = usePlaybackType();
 
-    const audioDevices = useAudioDevices();
+    const audioDevices = useAudioDevices(playbackType);
+    const audioDeviceId =
+        playbackType === PlayerType.LOCAL ? settings.mpvAudioDeviceId : settings.audioDeviceId;
 
     const audioOptions: SettingOption[] = [
         {
@@ -131,15 +135,23 @@ export const AudioSettings = memo(() => {
                 <Select
                     clearable
                     data={audioDevices}
-                    defaultValue={settings.audioDeviceId}
+                    defaultValue={audioDeviceId}
                     disabled={!isElectron()}
-                    onChange={(e) => setSettings({ playback: { audioDeviceId: e } })}
+                    onChange={(e) =>
+                        setSettings({
+                            playback:
+                                playbackType === PlayerType.LOCAL
+                                    ? { mpvAudioDeviceId: e }
+                                    : { audioDeviceId: e },
+                        })
+                    }
                 />
             ),
             description: t('setting.audioDevice', {
                 context: 'description',
                 postProcess: 'sentenceCase',
             }),
+            isHidden: !isElectron(),
             title: t('setting.audioDevice', { postProcess: 'sentenceCase' }),
         },
         {

src/renderer/store/settings.store.ts

@@ -554,6 +554,7 @@ const PlaybackSettingsSchema = z.object({
     audioFadeOnStatusChange: z.boolean(),
     filters: z.array(PlayerFilterSchema),
     mediaSession: z.boolean(),
+    mpvAudioDeviceId: z.string().nullable().optional(),
     mpvExtraParameters: z.array(z.string()),
     mpvProperties: MpvSettingsSchema,
     preservePitch: z.boolean(),
@@ -1538,6 +1539,7 @@ const initialState: SettingsState = {
         audioFadeOnStatusChange: true,
         filters: [],
         mediaSession: false,
+        mpvAudioDeviceId: undefined,
         mpvExtraParameters: [],
         mpvProperties: {
             audioExclusiveMode: 'no',