🚩(frontend) add noise reduction availability hook with feature flag

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

@@ -2,4 +2,5 @@ export enum FeatureFlags {
   Transcript = 'transcription-summary',
   ScreenRecording = 'screen-recording',
   faceLandmarks = 'face-landmarks',
+  noiseReduction = 'noise-reduction',
 }

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

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

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