From c432524f2abf581eaf85fed2b97949f36eb294ea Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 10 Apr 2025 20:39:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20display=20option=20to?=
 =?UTF-8?q?=20user=20with=20screen=20recording=20access?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a feature flag for screen recording to allow gradual
rollout of the feature.
---
 src/frontend/src/features/analytics/enums.ts       |  1 +
 .../features/rooms/livekit/components/Tools.tsx    | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/analytics/enums.ts b/src/frontend/src/features/analytics/enums.ts
index ba8c7474..29eb8a83 100644
--- a/src/frontend/src/features/analytics/enums.ts
+++ b/src/frontend/src/features/analytics/enums.ts
@@ -1,4 +1,5 @@
 export enum FeatureFlags {
   Transcript = 'transcription-summary',
+  ScreenRecording = 'screen-recording',
   faceLandmarks = 'face-landmarks',
 }
diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
index cd08ab2a..2537545d 100644
--- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
@@ -6,11 +6,16 @@ import { CRISP_HELP_ARTICLE_MORE_TOOLS } from '@/utils/constants'
 import { ReactNode } from 'react'
 import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
-import { useIsRecordingModeEnabled, RecordingMode } from '@/features/recording'
+import {
+  useIsRecordingModeEnabled,
+  RecordingMode,
+  useHasRecordingAccess,
+} from '@/features/recording'
 import {
   TranscriptSidePanel,
   ScreenRecordingSidePanel,
 } from '@/features/recording'
+import { FeatureFlags } from '@/features/analytics/enums'
 
 export interface ToolsButtonProps {
   icon: ReactNode
@@ -78,8 +83,9 @@ export const Tools = () => {
     RecordingMode.Transcript
   )
 
-  const isScreenRecordingEnabled = useIsRecordingModeEnabled(
-    RecordingMode.ScreenRecording
+  const hasScreenRecordingAccess = useHasRecordingAccess(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
   )
 
   switch (activeSubPanelId) {
@@ -123,7 +129,7 @@ export const Tools = () => {
           onPress={() => openTranscript()}
         />
       )}
-      {isScreenRecordingEnabled && (
+      {hasScreenRecordingAccess && (
         <ToolButton
           icon={<RiLiveFill size={24} color="white" />}
           title={t('tools.screenRecording.title')}