✨(frontend) disable noise reduction on mobile devices

Prevent enabling noise reduction on mobile to avoid performance issues
from resource-intensive audio processing.

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])
 }

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>
   )
 }