From c08c3efdbb4f02ee5059148c89af90e0c279cee8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 7 Apr 2025 21:33:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20avoid=20having=20the?=
 =?UTF-8?q?=20two=20recording=20modes=20concurrently?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement mutual exclusivity between transcript and screen recording modes
to prevent both from being active simultaneously. Add validation logic to
ensure users can only enable one recording type at a time.
---
 .../livekit/components/ScreenRecording.tsx    | 25 +++++++++++--------
 .../rooms/livekit/components/Transcript.tsx   | 19 ++++++++------
 .../livekit/hooks/useIsRecordingStarted.ts    | 12 +++++++++
 .../hooks/useIsRecordingTransitioning.ts      | 15 +++++++++++
 4 files changed, 52 insertions(+), 19 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useIsRecordingStarted.ts
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useIsRecordingTransitioning.ts

diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenRecording.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenRecording.tsx
index 3168f468..ff2cb2ff 100644
--- a/src/frontend/src/features/rooms/livekit/components/ScreenRecording.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ScreenRecording.tsx
@@ -14,9 +14,13 @@ import { RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { NotificationPayload } from '@/features/notifications/NotificationPayload'
 import { NotificationType } from '@/features/notifications/NotificationType'
-import { useSnapshot } from 'valtio/index'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
 import { CRISP_HELP_ARTICLE_RECORDING } from '@/utils/constants'
+import { useIsRecordingTransitioning } from '../hooks/useIsRecordingTransitioning'
+import {
+  useIsScreenRecordingStarted,
+  useIsTranscriptStarted,
+} from '../hooks/useIsRecordingStarted'
 
 export const ScreenRecording = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -27,9 +31,11 @@ export const ScreenRecording = () => {
   const { mutateAsync: startRecordingRoom } = useStartRecording()
   const { mutateAsync: stopRecordingRoom } = useStopRecording()
 
-  const recordingSnap = useSnapshot(recordingStore)
+  const isScreenRecordingStarted = useIsScreenRecordingStarted()
+  const isTranscriptStarted = useIsTranscriptStarted()
 
   const room = useRoomContext()
+  const isRecordingTransitioning = useIsRecordingTransitioning()
 
   useEffect(() => {
     const handleRecordingStatusChanged = () => {
@@ -52,7 +58,7 @@ export const ScreenRecording = () => {
     })
   }
 
-  const handleTranscript = async () => {
+  const handleScreenRecording = async () => {
     if (!roomId) {
       console.warn('No room ID found')
       return
@@ -78,11 +84,8 @@ export const ScreenRecording = () => {
   }
 
   const isDisabled = useMemo(
-    () =>
-      isLoading ||
-      recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTING ||
-      recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STOPPING,
-    [isLoading, recordingSnap]
+    () => isLoading || isRecordingTransitioning || isTranscriptStarted,
+    [isLoading, isRecordingTransitioning, isTranscriptStarted]
   )
 
   return (
@@ -103,7 +106,7 @@ export const ScreenRecording = () => {
         })}
       />
 
-      {room.isRecording ? (
+      {isScreenRecordingStarted ? (
         <>
           <Text>{t('stop.heading')}</Text>
           <Text
@@ -120,7 +123,7 @@ export const ScreenRecording = () => {
           </Text>
           <Button
             isDisabled={isDisabled}
-            onPress={() => handleTranscript()}
+            onPress={() => handleScreenRecording()}
             data-attr="stop-transcript"
             size="sm"
             variant="tertiary"
@@ -149,7 +152,7 @@ export const ScreenRecording = () => {
           </Text>
           <Button
             isDisabled={isDisabled}
-            onPress={() => handleTranscript()}
+            onPress={() => handleScreenRecording()}
             data-attr="start-transcript"
             size="sm"
             variant="tertiary"
diff --git a/src/frontend/src/features/rooms/livekit/components/Transcript.tsx b/src/frontend/src/features/rooms/livekit/components/Transcript.tsx
index c23c9b3d..66f0ddd4 100644
--- a/src/frontend/src/features/rooms/livekit/components/Transcript.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Transcript.tsx
@@ -14,13 +14,17 @@ import { RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { NotificationPayload } from '@/features/notifications/NotificationPayload'
 import { NotificationType } from '@/features/notifications/NotificationType'
-import { useSnapshot } from 'valtio/index'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
 import { useHasRecordingAccess } from '../hooks/useHasScreenRecordingAccess'
 import {
   BETA_USERS_FORM_URL,
   CRISP_HELP_ARTICLE_TRANSCRIPT,
 } from '@/utils/constants'
+import { useIsRecordingTransitioning } from '../hooks/useIsRecordingTransitioning'
+import {
+  useIsScreenRecordingStarted,
+  useIsTranscriptStarted,
+} from '../hooks/useIsRecordingStarted'
 
 export const Transcript = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -35,7 +39,9 @@ export const Transcript = () => {
   const { mutateAsync: startRecordingRoom } = useStartRecording()
   const { mutateAsync: stopRecordingRoom } = useStopRecording()
 
-  const recordingSnap = useSnapshot(recordingStore)
+  const isScreenRecordingStarted = useIsScreenRecordingStarted()
+  const isTranscriptStarted = useIsTranscriptStarted()
+  const isRecordingTransitioning = useIsRecordingTransitioning()
 
   const room = useRoomContext()
 
@@ -83,11 +89,8 @@ export const Transcript = () => {
   }
 
   const isDisabled = useMemo(
-    () =>
-      isLoading ||
-      recordingSnap.status === RecordingStatus.TRANSCRIPT_STARTING ||
-      recordingSnap.status === RecordingStatus.TRANSCRIPT_STOPPING,
-    [isLoading, recordingSnap]
+    () => isLoading || isRecordingTransitioning || isScreenRecordingStarted,
+    [isLoading, isRecordingTransitioning, isScreenRecordingStarted]
   )
 
   return (
@@ -136,7 +139,7 @@ export const Transcript = () => {
         </>
       ) : (
         <>
-          {room.isRecording ? (
+          {isTranscriptStarted ? (
             <>
               <Text>{t('stop.heading')}</Text>
               <Text
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useIsRecordingStarted.ts b/src/frontend/src/features/rooms/livekit/hooks/useIsRecordingStarted.ts
new file mode 100644
index 00000000..d965e944
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useIsRecordingStarted.ts
@@ -0,0 +1,12 @@
+import { useSnapshot } from 'valtio'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+
+export const useIsScreenRecordingStarted = () => {
+  const recordingSnap = useSnapshot(recordingStore)
+  return recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED
+}
+
+export const useIsTranscriptStarted = () => {
+  const recordingSnap = useSnapshot(recordingStore)
+  return recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED
+}
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useIsRecordingTransitioning.ts b/src/frontend/src/features/rooms/livekit/hooks/useIsRecordingTransitioning.ts
new file mode 100644
index 00000000..bb81b5ba
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useIsRecordingTransitioning.ts
@@ -0,0 +1,15 @@
+import { useSnapshot } from 'valtio'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+
+export const useIsRecordingTransitioning = () => {
+  const recordingSnap = useSnapshot(recordingStore)
+
+  const transitionalStates = [
+    RecordingStatus.TRANSCRIPT_STARTING,
+    RecordingStatus.TRANSCRIPT_STOPPING,
+    RecordingStatus.SCREEN_RECORDING_STARTING,
+    RecordingStatus.SCREEN_RECORDING_STOPPING,
+  ]
+
+  return transitionalStates.includes(recordingSnap.status)
+}