✨(frontend) add face landmarks flag

Introduced a new hook, useHasFaceLandmarksAccess
to manage access to face landmark features
based on posthog feature flags.

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -16,6 +16,7 @@ import { useTrackToggle } from '@livekit/components-react'
 import { Loader } from '@/primitives/Loader'
 import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
 import { RiProhibited2Line, RiUserVoiceLine } from '@remixicon/react'
+import { useHasFaceLandmarksAccess } from '../../hooks/useHasFaceLandmarksAccess'
 
 enum BlurRadius {
   NONE = 0,
@@ -50,6 +51,7 @@ export const EffectsConfiguration = ({
   const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
   const [processorPending, setProcessorPending] = useState(false)
   const processorPendingReveal = useSyncAfterDelay(processorPending)
+  const hasFaceLandmarksAccess = useHasFaceLandmarksAccess()
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -302,49 +304,51 @@ export const EffectsConfiguration = ({
                   </ToggleButton>
                 </div>
               </div>
-              <div
+              {hasFaceLandmarksAccess && (
-                className={css({
-                  marginTop: '1.5rem',
-                })}
-              >
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('faceLandmarks.title')}
-                </H>
                 <div
                   className={css({
-                    display: 'flex',
+                    marginTop: '1.5rem',
-                    gap: '1.25rem',
                   })}
                 >
-                  <ToggleButton
+                  <H
-                    variant="bigSquare"
+                    lvl={3}
-                    aria-label={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                    style={{
-                      blurRadius: 0,
+                      marginBottom: '1rem',
-                    })}
+                    }}
-                    tooltip={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                    variant="bodyXsBold"
-                      blurRadius: 0,
-                    })}
-                    isDisabled={processorPendingReveal}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.FACE_LANDMARKS, {
-                        blurRadius: 0,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.FACE_LANDMARKS, {
-                      blurRadius: 0,
-                    })}
-                    data-attr="toggle-face-landmarks"
                   >
-                    <RiUserVoiceLine />
+                    {t('faceLandmarks.title')}
-                  </ToggleButton>
+                  </H>
+                  <div
+                    className={css({
+                      display: 'flex',
+                      gap: '1.25rem',
+                    })}
+                  >
+                    <ToggleButton
+                      variant="bigSquare"
+                      aria-label={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                        blurRadius: 0,
+                      })}
+                      tooltip={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                        blurRadius: 0,
+                      })}
+                      isDisabled={processorPendingReveal}
+                      onChange={async () =>
+                        await toggleEffect(ProcessorType.FACE_LANDMARKS, {
+                          blurRadius: 0,
+                        })
+                      }
+                      isSelected={isSelected(ProcessorType.FACE_LANDMARKS, {
+                        blurRadius: 0,
+                      })}
+                      data-attr="toggle-face-landmarks"
+                    >
+                      <RiUserVoiceLine />
+                    </ToggleButton>
+                  </div>
                 </div>
-              </div>
+              )}
               <div
                 className={css({
                   marginTop: '1.5rem',

src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts

@@ -0,0 +1,9 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+
+export const useHasFaceLandmarksAccess = () => {
+  const featureEnabled = useFeatureFlagEnabled('face-landmarks')
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  return featureEnabled || !isAnalyticsEnabled
+}