From d2bde299bee8218c753e50fec3f1c434a56d2457 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 11 Aug 2025 23:06:09 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20auto-select=20single?=
 =?UTF-8?q?=20audio=20output=20device=20for=20smoother=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../rooms/components/join/SelectDevice.tsx    | 24 +++++++++++++++++--
 src/frontend/src/locales/de/rooms.json        |  1 +
 src/frontend/src/locales/en/rooms.json        |  1 +
 src/frontend/src/locales/fr/rooms.json        |  1 +
 src/frontend/src/locales/nl/rooms.json        |  1 +
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/join/SelectDevice.tsx b/src/frontend/src/features/rooms/components/join/SelectDevice.tsx
index 1981b0fa..3d151ff2 100644
--- a/src/frontend/src/features/rooms/components/join/SelectDevice.tsx
+++ b/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)
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 89aa08bc..28ae41a5 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/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": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index e45611e4..8d5e3c6c 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -10,6 +10,7 @@
   "join": {
     "selectDevice": {
       "loading": "Loading…",
+      "select": "Select a value",
       "permissionsNeeded": "Permission needed"
     },
     "videoinput": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 7ee191a7..636acfb1 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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": {
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 6659296b..f3e58120 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/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": {