From 2b9b977f5760a1fc2282002d5c322bc3fa67227b Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Mon, 11 Aug 2025 19:30:15 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20speaker=20select=20?= =?UTF-8?q?component=20for=20audio=20output=20configuration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../features/rooms/components/Conference.tsx | 4 ++++ .../src/features/rooms/components/Join.tsx | 17 +++++++++++++++-- .../rooms/components/join/SelectDevice.tsx | 5 +++++ .../settings/components/tabs/AudioTab.tsx | 6 ++++-- src/frontend/src/locales/de/rooms.json | 4 ++++ src/frontend/src/locales/en/rooms.json | 4 ++++ src/frontend/src/locales/fr/rooms.json | 4 ++++ src/frontend/src/locales/nl/rooms.json | 4 ++++ 8 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx index 89e18407..e5cf0684 100644 --- a/src/frontend/src/features/rooms/components/Conference.tsx +++ b/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, ]) diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx index 5e7c84ed..d6c63235 100644 --- a/src/frontend/src/features/rooms/components/Join.tsx +++ b/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 = ({ >
+ +
+
{ return { icon: RiMicLine, } + case 'audiooutput': + return { + icon: RiVolumeDownLine, + } case 'videoinput': return { icon: RiVideoOnLine, diff --git a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx index f4d3e77f..eb369067 100644 --- a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx +++ b/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, diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 6e0f3111..89aa08bc 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/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", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index d2d4c242..e45611e4 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/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", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 0af4db0f..7ee191a7 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/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", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 2b74b9cb..270d25f0 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/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",