✨(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,6 +304,7 @@ export const EffectsConfiguration = ({
                   </ToggleButton>
                 </div>
               </div>
+              {hasFaceLandmarksAccess && (
                 <div
                   className={css({
                     marginTop: '1.5rem',
@@ -345,6 +348,7 @@ export const EffectsConfiguration = ({
                     </ToggleButton>
                   </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
+}