From 1fe1a557adf914a6ad777371fedfaa0e9aee9646 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 9 Jun 2025 18:29:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20hook=20to=20manage?=
 =?UTF-8?q?=20noise=20reduction=20processor=20toggling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create concise hook that listens to audio track status and user noise
reduction preference to automatically handle processor state changes.

Note: Logging could be improved in future iterations.
---
 .../rooms/livekit/hooks/useNoiseReduction.ts  | 30 +++++++++++++++++++
 .../rooms/livekit/prefabs/VideoConference.tsx |  3 ++
 2 files changed, 33 insertions(+)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts

diff --git a/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
new file mode 100644
index 00000000..9d257805
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { Track } from 'livekit-client'
+import { useRoomContext } from '@livekit/components-react'
+import { RnnNoiseProcessor } from '../processors/RnnNoiseProcessor'
+import { usePersistentUserChoices } from './usePersistentUserChoices'
+
+export const useNoiseReduction = () => {
+  const room = useRoomContext()
+
+  const {
+    userChoices: { noiseReductionEnabled },
+  } = usePersistentUserChoices()
+
+  const audioTrack = room.localParticipant.getTrackPublication(
+    Track.Source.Microphone
+  )?.audioTrack
+
+  useEffect(() => {
+    if (!audioTrack) return
+
+    const processor = audioTrack?.getProcessor()
+
+    if (noiseReductionEnabled && !processor) {
+      const rnnNoiseProcessor = new RnnNoiseProcessor()
+      audioTrack.setProcessor(rnnNoiseProcessor)
+    } else if (!noiseReductionEnabled && processor) {
+      audioTrack.stopProcessor()
+    }
+  }, [audioTrack, noiseReductionEnabled])
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 4944ac7f..96d6b74a 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -31,6 +31,7 @@ import { useSidePanel } from '../hooks/useSidePanel'
 import { RecordingStateToast } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
+import { useNoiseReduction } from '../hooks/useNoiseReduction'
 
 const LayoutWrapper = styled(
   'div',
@@ -87,6 +88,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
 
   const layoutContext = useCreateLayoutContext()
 
+  useNoiseReduction()
+
   const screenShareTracks = tracks
     .filter(isTrackReference)
     .filter((track) => track.publication.source === Track.Source.ScreenShare)