🚸(frontend) auto-select single audio output device for smoother UX

When browsers don't return 'default' audio output device ID and only
one device is available, automatically select the single option to
improve user experience.

Prevents unnecessary user interaction when there's only one choice
available, making the device selection flow smoother and more intuitive
for users with single audio output setups.

This is necessary only for audio output because we don't create
a preview track, compare to video or mic.

src/frontend/src/features/rooms/components/join/SelectDevice.tsx

@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useMediaDeviceSelect } from '@livekit/components-react'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { Select } from '@/primitives/Select'
 import { useSnapshot } from 'valtio'
 import { permissionsStore } from '@/stores/permissions'
@@ -45,6 +45,22 @@ const SelectDevicePermissions = ({
       label: d.label,
     }))
 
+  /**
+   * FALLBACK AUDIO OUTPUT DEVICE SELECTION
+   * Auto-selects the only available audio output device when currently on 'default'
+   */
+  useEffect(() => {
+    if (
+      kind !== 'audiooutput' ||
+      items.length !== 1 ||
+      items[0].value === 'default' ||
+      activeDeviceId !== 'default'
+    )
+      return
+    onSubmit?.(items[0].value)
+    setActiveMediaDevice(items[0].value)
+  }, [items, onSubmit, kind, setActiveMediaDevice, activeDeviceId])
+
   return (
     <Select
       aria-label={t(`${kind}.choose`)}
@@ -52,7 +68,11 @@ const SelectDevicePermissions = ({
       isDisabled={items.length === 0}
       items={items}
       iconComponent={config?.icon}
-      placeholder={t('selectDevice.loading')}
+      placeholder={
+        items.length === 0
+          ? t('selectDevice.loading')
+          : t('selectDevice.select')
+      }
       selectedKey={id || activeDeviceId}
       onSelectionChange={(key) => {
         onSubmit?.(key as string)

src/frontend/src/locales/de/rooms.json

@@ -10,6 +10,7 @@
   "join": {
     "selectDevice": {
       "loading": "Laden…",
+      "select": "Wählen Sie einen Wert",
       "permissionsNeeded": "Genehmigung erforderlich"
     },
     "videoinput": {

src/frontend/src/locales/en/rooms.json

@@ -10,6 +10,7 @@
   "join": {
     "selectDevice": {
       "loading": "Loading…",
+      "select": "Select a value",
       "permissionsNeeded": "Permission needed"
     },
     "videoinput": {

src/frontend/src/locales/fr/rooms.json

@@ -10,6 +10,7 @@
   "join": {
     "selectDevice": {
       "loading": "Chargement…",
+      "select": "Sélectionnez une valeur",
       "permissionsNeeded": "Autorisations nécessaires"
     },
     "videoinput": {

src/frontend/src/locales/nl/rooms.json

@@ -10,6 +10,7 @@
   "join": {
     "selectDevice": {
       "loading": "Bezig met laden…",
+      "select": "Selecteer een waarde",
       "permissionsNeeded": "Toestemming vereist"
     },
     "videoinput": {