From 513f3c588a56f3cf5923a1253d0d19586d7000da Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 25 Jun 2025 22:08:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A9(frontend)=20add=20noise=20reductio?=
 =?UTF-8?q?n=20availability=20hook=20with=20feature=20flag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Encapsulate noise reduction availability logic in hook and add feature flag
for quick production disable if issues arise. Gives product owners emergency
control over the feature.
---
 src/frontend/src/features/analytics/enums.ts        |  1 +
 .../rooms/livekit/hooks/useNoiseReduction.ts        |  8 ++++----
 .../livekit/hooks/useNoiseReductionAvailable.ts     | 13 +++++++++++++
 .../features/settings/components/tabs/AudioTab.tsx  |  8 +++++---
 4 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useNoiseReductionAvailable.ts

diff --git a/src/frontend/src/features/analytics/enums.ts b/src/frontend/src/features/analytics/enums.ts
index 29eb8a83..5c28e84f 100644
--- a/src/frontend/src/features/analytics/enums.ts
+++ b/src/frontend/src/features/analytics/enums.ts
@@ -2,4 +2,5 @@ export enum FeatureFlags {
   Transcript = 'transcription-summary',
   ScreenRecording = 'screen-recording',
   faceLandmarks = 'face-landmarks',
+  noiseReduction = 'noise-reduction',
 }
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
index 5beae50b..64388f67 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReduction.ts
@@ -3,11 +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'
+import { useNoiseReductionAvailable } from '@/features/rooms/livekit/hooks/useNoiseReductionAvailable'
 
 export const useNoiseReduction = () => {
   const room = useRoomContext()
-  const isMobile = useIsMobile()
+  const noiseReductionAvailable = useNoiseReductionAvailable()
 
   const {
     userChoices: { noiseReductionEnabled },
@@ -18,7 +18,7 @@ export const useNoiseReduction = () => {
   )?.audioTrack
 
   useEffect(() => {
-    if (!audioTrack || isMobile) return
+    if (!audioTrack || !noiseReductionAvailable) return
 
     const processor = audioTrack?.getProcessor()
 
@@ -28,5 +28,5 @@ export const useNoiseReduction = () => {
     } else if (!noiseReductionEnabled && processor) {
       audioTrack.stopProcessor()
     }
-  }, [audioTrack, noiseReductionEnabled, isMobile])
+  }, [audioTrack, noiseReductionEnabled, noiseReductionAvailable])
 }
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useNoiseReductionAvailable.ts b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReductionAvailable.ts
new file mode 100644
index 00000000..b030e97a
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useNoiseReductionAvailable.ts
@@ -0,0 +1,13 @@
+import { useIsMobile } from '@/utils/useIsMobile'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { FeatureFlags } from '@/features/analytics/enums'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+
+export const useNoiseReductionAvailable = () => {
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.faceLandmarks)
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  const isMobile = useIsMobile()
+
+  return !isMobile && (!isAnalyticsEnabled || featureEnabled)
+}
diff --git a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
index 630139f5..a2899690 100644
--- a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
+++ b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
@@ -14,7 +14,8 @@ 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'
+import posthog from 'posthog-js'
+import { useNoiseReductionAvailable } from '@/features/rooms/livekit/hooks/useNoiseReductionAvailable'
 
 type RowWrapperProps = {
   heading: string
@@ -142,7 +143,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
     return defaultItem.value
   }
 
-  const isMobile = useIsMobile()
+  const noiseReductionAvailable = useNoiseReductionAvailable()
 
   return (
     <TabPanel padding={'md'} flex id={id}>
@@ -193,7 +194,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           <SoundTester />
         </RowWrapper>
       )}
-      {!isMobile && (
+      {noiseReductionAvailable && (
         <RowWrapper heading={t('audio.noiseReduction.heading')} beta>
           <Switch
             aria-label={t(
@@ -202,6 +203,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
             isSelected={noiseReductionEnabled}
             onChange={(v) => {
               saveNoiseReductionEnabled(v)
+              if (v) posthog.capture('noise-reduction-init')
             }}
           >
             {t('audio.noiseReduction.label')}