From 3de4cc01dca5e4da735a2fdf1fb5230a4568dcb4 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 25 Jun 2025 00:36:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20disable=20noise=20reducti?=
 =?UTF-8?q?on=20on=20mobile=20devices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevent enabling noise reduction on mobile to avoid performance issues
from resource-intensive audio processing.
---
 .../rooms/livekit/hooks/useNoiseReduction.ts  |  6 ++--
 .../settings/components/tabs/AudioTab.tsx     | 33 +++++++++++--------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
index 9d257805..5beae50b 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
@@ -3,9 +3,11 @@ import { Track } from 'livekit-client'
 import { useRoomContext } from '@livekit/components-react'
 import { RnnNoiseProcessor } from '../processors/RnnNoiseProcessor'
 import { usePersistentUserChoices } from './usePersistentUserChoices'
+import { useIsMobile } from '@/utils/useIsMobile'
 
 export const useNoiseReduction = () => {
   const room = useRoomContext()
+  const isMobile = useIsMobile()
 
   const {
     userChoices: { noiseReductionEnabled },
@@ -16,7 +18,7 @@ export const useNoiseReduction = () => {
   )?.audioTrack
 
   useEffect(() => {
-    if (!audioTrack) return
+    if (!audioTrack || isMobile) return
 
     const processor = audioTrack?.getProcessor()
 
@@ -26,5 +28,5 @@ export const useNoiseReduction = () => {
     } else if (!noiseReductionEnabled && processor) {
       audioTrack.stopProcessor()
     }
-  }, [audioTrack, noiseReductionEnabled])
+  }, [audioTrack, noiseReductionEnabled, isMobile])
 }
diff --git a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
index a5ff34e9..630139f5 100644
--- a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
+++ b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
@@ -14,6 +14,7 @@ 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'
+import { useIsMobile } from '@/utils/useIsMobile'
 
 type RowWrapperProps = {
   heading: string
@@ -141,6 +142,8 @@ export const AudioTab = ({ id }: AudioTabProps) => {
     return defaultItem.value
   }
 
+  const isMobile = useIsMobile()
+
   return (
     <TabPanel padding={'md'} flex id={id}>
       <RowWrapper heading={t('audio.microphone.heading')}>
@@ -190,20 +193,22 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           <SoundTester />
         </RowWrapper>
       )}
-      <RowWrapper heading={t('audio.noiseReduction.heading')} beta>
-        <Switch
-          aria-label={t(
-            `audio.noiseReduction.ariaLabel.${noiseReductionEnabled ? 'disable' : 'enable'}`
-          )}
-          isSelected={noiseReductionEnabled}
-          onChange={(v) => {
-            saveNoiseReductionEnabled(v)
-          }}
-        >
-          {t('audio.noiseReduction.label')}
-        </Switch>
-        <div />
-      </RowWrapper>
+      {!isMobile && (
+        <RowWrapper heading={t('audio.noiseReduction.heading')} beta>
+          <Switch
+            aria-label={t(
+              `audio.noiseReduction.ariaLabel.${noiseReductionEnabled ? 'disable' : 'enable'}`
+            )}
+            isSelected={noiseReductionEnabled}
+            onChange={(v) => {
+              saveNoiseReductionEnabled(v)
+            }}
+          >
+            {t('audio.noiseReduction.label')}
+          </Switch>
+          <div />
+        </RowWrapper>
+      )}
     </TabPanel>
   )
 }