From 96b71ad0be31e8b24916be1fd527927734344088 Mon Sep 17 00:00:00 2001
From: Anbar Saleem <45743448+anbarsaleem@users.noreply.github.com>
Date: Tue, 14 Jul 2026 22:27:03 -0400
Subject: [PATCH] show system default audio device in device select when unset
 (#2216)

An unset audio device id means "follow the system default" (setSinkId is
skipped and mpv uses audio-device=auto), but the Audio device select in
the player settings popover and the playback settings page rendered
blank in that state. Make both selects controlled and fall back to the
enumerated default entry (browser 'default' / mpv 'auto') so the device
actually in use is always displayed. The stored setting stays unset, so
playback keeps following the OS default until a device is explicitly
chosen; clearing the select returns to the default entry instead of
going blank.
---
 .../features/player/components/player-config.tsx       |  7 +++++--
 .../settings/components/playback/audio-settings.tsx    | 10 +++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/renderer/features/player/components/player-config.tsx b/src/renderer/features/player/components/player-config.tsx
index 375c63801..e7f74c47e 100644
--- a/src/renderer/features/player/components/player-config.tsx
+++ b/src/renderer/features/player/components/player-config.tsx
@@ -2,7 +2,10 @@ import isElectron from 'is-electron';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useAudioDevices } from '/@/renderer/features/settings/components/playback/audio-settings';
+import {
+    getDefaultAudioDevice,
+    useAudioDevices,
+} from '/@/renderer/features/settings/components/playback/audio-settings';
 import { ListConfigTable } from '/@/renderer/features/shared/components/list-config-menu';
 import {
     usePlaybackType,
@@ -253,7 +256,6 @@ const AudioDeviceConfig = () => {
             clearable
             comboboxProps={{ withinPortal: false }}
             data={audioDevices}
-            defaultValue={audioDeviceId}
             disabled={status === PlayerStatus.PLAYING}
             onChange={(e) => {
                 setSettings({
@@ -265,6 +267,7 @@ const AudioDeviceConfig = () => {
                     },
                 });
             }}
+            value={audioDeviceId ?? getDefaultAudioDevice(audioDevices, playbackType)}
             width="100%"
         />
     );
diff --git a/src/renderer/features/settings/components/playback/audio-settings.tsx b/src/renderer/features/settings/components/playback/audio-settings.tsx
index a0099558a..3230a55a5 100644
--- a/src/renderer/features/settings/components/playback/audio-settings.tsx
+++ b/src/renderer/features/settings/components/playback/audio-settings.tsx
@@ -39,6 +39,14 @@ const getMpvAudioDevices = async () => {
 
 export type AudioDeviceOption = { label: string; value: string };
 
+export const getDefaultAudioDevice = (
+    devices: AudioDeviceOption[],
+    playbackType: PlayerType,
+): null | string => {
+    const defaultId = playbackType === PlayerType.LOCAL ? 'auto' : 'default';
+    return devices.find((d) => d.value === defaultId)?.value ?? devices[0]?.value ?? null;
+};
+
 export const useAudioDevices = (playbackType: PlayerType) => {
     const [audioDevices, setAudioDevices] = useState<AudioDeviceOption[]>([]);
 
@@ -137,7 +145,6 @@ export const AudioSettings = memo(() => {
                 <Select
                     clearable
                     data={audioDevices}
-                    defaultValue={audioDeviceId}
                     disabled={!isElectron()}
                     onChange={(e) =>
                         setSettings({
@@ -147,6 +154,7 @@ export const AudioSettings = memo(() => {
                                     : { audioDeviceId: e },
                         })
                     }
+                    value={audioDeviceId ?? getDefaultAudioDevice(audioDevices, playbackType)}
                 />
             ),
             description: t('setting.audioDevice', { context: 'description' }),