✨(frontend) add speaker select component for audio output configuration

Introduce speaker selection component requested by users to allow audio
output device configuration before entering calls.

Enables users to test and configure their preferred audio output device
during prejoin setup, ensuring proper audio routing before call begins.
Improves user experience by preventing audio issues during meetings.

src/frontend/src/features/rooms/components/Conference.tsx

@@ -102,11 +102,15 @@ export const Conference = ({
       audioCaptureDefaults: {
         deviceId: userConfig.audioDeviceId ?? undefined,
       },
+      audioOutput: {
+        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+      },
     }
     // do not rely on the userConfig object directly as its reference may change on every render
   }, [
     userConfig.videoDeviceId,
     userConfig.audioDeviceId,
+    userConfig.audioOutputDeviceId,
     isAdaptiveStreamSupported,
     isDynacastSupported,
   ])

src/frontend/src/features/rooms/components/Join.tsx

@@ -101,11 +101,13 @@ export const Join = ({
       audioEnabled,
       videoEnabled,
       audioDeviceId,
+      audioOutputDeviceId,
       videoDeviceId,
       processorSerialized,
       username,
     },
     saveAudioInputEnabled,
+    saveAudioOutputDeviceId,
     saveVideoInputEnabled,
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
@@ -590,7 +592,7 @@ export const Join = ({
             >
               <div
                 className={css({
-                  width: '50%',
+                  width: '30%',
                 })}
               >
                 <SelectDevice
@@ -601,7 +603,18 @@ export const Join = ({
               </div>
               <div
                 className={css({
-                  width: '50%',
+                  width: '30%',
+                })}
+              >
+                <SelectDevice
+                  kind="audiooutput"
+                  id={audioOutputDeviceId}
+                  onSubmit={saveAudioOutputDeviceId}
+                />
+              </div>
+              <div
+                className={css({
+                  width: '30%',
                 })}
               >
                 <SelectDevice

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

@@ -2,6 +2,7 @@ import {
   RemixiconComponentType,
   RiMicLine,
   RiVideoOnLine,
+  RiVolumeDownLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useMediaDeviceSelect } from '@livekit/components-react'
@@ -72,6 +73,10 @@ export const SelectDevice = ({ id, onSubmit, kind }: SelectDeviceProps) => {
         return {
           icon: RiMicLine,
         }
+      case 'audiooutput':
+        return {
+          icon: RiVolumeDownLine,
+        }
       case 'videoinput':
         return {
           icon: RiVideoOnLine,

src/frontend/src/features/settings/components/tabs/AudioTab.tsx

@@ -95,6 +95,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
     userChoices: { noiseReductionEnabled },
     saveAudioInputDeviceId,
     saveNoiseReductionEnabled,
+    saveAudioOutputDeviceId,
   } = usePersistentUserChoices()
 
   const isSpeaking = useIsSpeaking(localParticipant)
@@ -183,9 +184,10 @@ export const AudioTab = ({ id }: AudioTabProps) => {
             defaultSelectedKey={
               activeDeviceIdOut || getDefaultSelectedKey(itemsOut)
             }
-            onSelectionChange={async (key) =>
+            onSelectionChange={(key) => {
               setActiveMediaDeviceOut(key as string)
-            }
+              saveAudioOutputDeviceId(key as string)
+            }}
             {...disabledProps}
             style={{
               minWidth: 0,

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

@@ -27,6 +27,10 @@
       "enable": "Mikrofon aktivieren",
       "label": "Mikrofon"
     },
+    "audiooutput": {
+      "choose": "Lautsprecher auswählen",
+      "permissionsNeeded": "Lautsprecher auswählen - genehmigung erforderlich"
+    },
     "effects": {
       "description": "Effekte anwenden",
       "title": "Effekte",

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

@@ -27,6 +27,10 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
+    "audiooutput": {
+      "choose": "Select speaker",
+      "permissionsNeeded": "Select speaker - permission needed"
+    },
     "effects": {
       "description": "Apply effects",
       "title": "Effects",

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

@@ -27,6 +27,10 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
+    "audiooutput": {
+      "choose": "Choisir le haut-parleur",
+      "permissionsNeeded": "Choisir le haut-parleur - autorisations nécessaires"
+    },
     "heading": "Rejoindre la réunion ?",
     "effects": {
       "description": "Effets d'arrière plan",

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

@@ -27,6 +27,10 @@
       "enable": "Microfoon dempen opheffen",
       "label": "Microfoon"
     },
+    "audiooutput": {
+      "choose": "Selecteer luidspreker",
+      "permissionsNeeded": "Selecteer luidspreker - Toestemming vereist"
+    },
     "effects": {
       "description": "Pas effecten toe",
       "title": "Effecten",