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.

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%"
         />
     );

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' }),