wip enable one of the recording not both

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"

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 { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess'
 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)
@@ -32,7 +36,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()
 
@@ -80,11 +86,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 (
@@ -133,7 +136,7 @@ export const Transcript = () => {
         </>
       ) : (
         <>
-          {room.isRecording ? (
+          {isTranscriptStarted ? (
             <>
               <Text>{t('stop.heading')}</Text>
               <Text

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
+}

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)
+}