From 0d6881382b3f9c76f5a60a90c2108a82cc5322ce Mon Sep 17 00:00:00 2001
From: Arnaud Robin <arnaud.robin@beta.gouv.fr>
Date: Sun, 30 Mar 2025 12:25:31 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20face=20landmarks=20?=
 =?UTF-8?q?flag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduced a new hook, useHasFaceLandmarksAccess
to manage access to face landmark features
based on posthog feature flags.
---
 .../effects/EffectsConfiguration.tsx          | 78 ++++++++++---------
 .../hooks/useHasFaceLandmarksAccess.ts        |  9 +++
 2 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts

diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
index c0a59ef3..306f16c0 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/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
-                className={css({
-                  marginTop: '1.5rem',
-                })}
-              >
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('faceLandmarks.title')}
-                </H>
+              {hasFaceLandmarksAccess && (
                 <div
                   className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
+                    marginTop: '1.5rem',
                   })}
                 >
-                  <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"
+                  <H
+                    lvl={3}
+                    style={{
+                      marginBottom: '1rem',
+                    }}
+                    variant="bodyXsBold"
                   >
-                    <RiUserVoiceLine />
-                  </ToggleButton>
+                    {t('faceLandmarks.title')}
+                  </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',
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts b/src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts
new file mode 100644
index 00000000..f1ce9840
--- /dev/null
+++ b/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
+} 
\ No newline at end of file