From fb92e5b79f3c70b71dc6e0029d7c8cef1f6ba93f Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Mon, 9 Jun 2025 18:08:05 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20noise=20reduction?= =?UTF-8?q?=20toggle=20setting=20with=20beta=20label?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement settings option to enable/disable noise suppression with clear beta indicator. Label will be removed after production battle-testing. Note: Settings styling needs polish, will address in future commits. --- .../livekit/hooks/usePersistentUserChoices.ts | 3 ++ .../settings/components/tabs/AudioTab.tsx | 54 +++++++++++++++++-- src/frontend/src/locales/de/settings.json | 8 +++ src/frontend/src/locales/en/settings.json | 8 +++ src/frontend/src/locales/fr/settings.json | 8 +++ src/frontend/src/locales/nl/settings.json | 8 +++ src/frontend/src/stores/userChoices.ts | 1 + 7 files changed, 86 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts b/src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts index 074adf2c..5d457efb 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts +++ b/src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts @@ -22,6 +22,9 @@ export function usePersistentUserChoices() { saveUsername: (username: string) => { userChoicesStore.username = username }, + saveNoiseReductionEnabled: (enabled: boolean) => { + userChoicesStore.noiseReductionEnabled = enabled + }, saveProcessorSerialized: ( processorSerialized: ProcessorSerialized | undefined ) => { diff --git a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx index 3b8c6d13..a5ff34e9 100644 --- a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx +++ b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx @@ -1,4 +1,4 @@ -import { DialogProps, Field, H } from '@/primitives' +import { DialogProps, Field, H, Switch } from '@/primitives' import { TabPanel, TabPanelProps } from '@/primitives/Tabs' import { @@ -13,16 +13,44 @@ import { HStack } from '@/styled-system/jsx' import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker' import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices' import { ReactNode } from 'react' +import { css } from '@/styled-system/css' type RowWrapperProps = { heading: string children: ReactNode[] + beta?: boolean } -const RowWrapper = ({ heading, children }: RowWrapperProps) => { +const BetaBadge = () => ( + + Beta + +) + +const RowWrapper = ({ heading, children, beta }: RowWrapperProps) => { return ( <> - {heading} + + {heading} + {beta && } + { const { t } = useTranslation('settings') const { localParticipant } = useRoomContext() - const { saveAudioInputDeviceId } = usePersistentUserChoices() + const { + userChoices: { noiseReductionEnabled }, + saveAudioInputDeviceId, + saveNoiseReductionEnabled, + } = usePersistentUserChoices() const isSpeaking = useIsSpeaking(localParticipant) @@ -158,6 +190,20 @@ export const AudioTab = ({ id }: AudioTabProps) => { )} + + { + saveNoiseReductionEnabled(v) + }} + > + {t('audio.noiseReduction.label')} + +
+ ) } diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json index 25a15a31..3823227c 100644 --- a/src/frontend/src/locales/de/settings.json +++ b/src/frontend/src/locales/de/settings.json @@ -12,6 +12,14 @@ "label": "Wählen Sie Ihre Audioeingabe", "disabled": "Mikrofon deaktiviert" }, + "noiseReduction": { + "label": "Rauschunterdrückung", + "heading": "Rauschunterdrückung", + "ariaLabel": { + "enable": "Rauschunterdrückung aktivieren", + "disable": "Rauschunterdrückung deaktivieren" + } + }, "speakers": { "heading": "Lautsprecher", "label": "Wählen Sie Ihre Audioausgabe", diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json index 61996d69..51bb70e3 100644 --- a/src/frontend/src/locales/en/settings.json +++ b/src/frontend/src/locales/en/settings.json @@ -12,6 +12,14 @@ "label": "Select your audio input", "disabled": "Microphone disabled" }, + "noiseReduction": { + "label": "Noise reduction", + "heading": "Noise reduction", + "ariaLabel": { + "enable": "Enable noise reduction", + "disable": "Disable noise reduction" + } + }, "speakers": { "heading": "Speakers", "label": "Select your audio output", diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json index 03c557c1..169d5556 100644 --- a/src/frontend/src/locales/fr/settings.json +++ b/src/frontend/src/locales/fr/settings.json @@ -12,6 +12,14 @@ "label": "Sélectionner votre entrée audio", "disabled": "Micro désactivé" }, + "noiseReduction": { + "label": "Réduction de bruit", + "heading": "Réduction de bruit", + "ariaLabel": { + "enable": "Activer la réduction du bruit", + "disable": "Désactiver la réduction du bruit" + } + }, "speakers": { "heading": "Haut-parleurs", "label": "Sélectionner votre sortie audio", diff --git a/src/frontend/src/locales/nl/settings.json b/src/frontend/src/locales/nl/settings.json index 875c29ae..f7ca7b5f 100644 --- a/src/frontend/src/locales/nl/settings.json +++ b/src/frontend/src/locales/nl/settings.json @@ -12,6 +12,14 @@ "label": "Selecteer uw audioinvoer", "disabled": "Microfoon uitgeschakeld" }, + "noiseReduction": { + "label": "Ruisonderdrukking", + "heading": "Ruisonderdrukking", + "ariaLabel": { + "enable": "Ruisonderdrukking inschakelen", + "disable": "Ruisonderdrukking uitschakelen" + } + }, "speakers": { "heading": "Luidsprekers", "label": "Selecteer uw audio-uitvoer", diff --git a/src/frontend/src/stores/userChoices.ts b/src/frontend/src/stores/userChoices.ts index 60ec9fc5..d5ace2ce 100644 --- a/src/frontend/src/stores/userChoices.ts +++ b/src/frontend/src/stores/userChoices.ts @@ -8,6 +8,7 @@ import { export type LocalUserChoices = LocalUserChoicesLK & { processorSerialized?: ProcessorSerialized + noiseReductionEnabled?: boolean } function getUserChoicesState(): LocalUserChoices {