🔒️(frontend) prevent disconnected users from accessing recording tools

Block recording and transcript features when user isn't connected to prevent
database state corruption. Users were previously able to trigger these
actions despite being disconnected.

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -6,19 +6,19 @@ import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
 import { useRoomContext } from '@livekit/components-react'
 import {
   RecordingMode,
+  useIsRecordingTransitioning,
   useStartRecording,
   useStopRecording,
 } from '@/features/recording'
 import { useEffect, useMemo, useState } from 'react'
-import { RoomEvent } from 'livekit-client'
+import { ConnectionState, RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
 import { CRISP_HELP_ARTICLE_RECORDING } from '@/utils/constants'
-import { useIsRecordingTransitioning } from '@/features/recording'
 
 import {
-  useNotifyParticipants,
   NotificationType,
+  useNotifyParticipants,
 } from '@/features/notifications'
 import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
@@ -58,6 +58,7 @@ export const ScreenRecordingSidePanel = () => {
   }, [recordingSnap])
 
   const room = useRoomContext()
+  const isRoomConnected = room.state == ConnectionState.Connected
   const isRecordingTransitioning = useIsRecordingTransitioning()
 
   useEffect(() => {
@@ -102,8 +103,11 @@ export const ScreenRecordingSidePanel = () => {
 
   const isDisabled = useMemo(
     () =>
-      isLoading || isRecordingTransitioning || statuses.isAnotherModeStarted,
-    [isLoading, isRecordingTransitioning, statuses]
+      isLoading ||
+      isRecordingTransitioning ||
+      statuses.isAnotherModeStarted ||
+      !isRoomConnected,
+    [isLoading, isRecordingTransitioning, statuses, isRoomConnected]
   )
 
   return (

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -12,7 +12,7 @@ import {
   useStopRecording,
 } from '../index'
 import { useEffect, useMemo, useState } from 'react'
-import { RoomEvent } from 'livekit-client'
+import { ConnectionState, RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
 import {
@@ -67,6 +67,7 @@ export const TranscriptSidePanel = () => {
   const isRecordingTransitioning = useIsRecordingTransitioning()
 
   const room = useRoomContext()
+  const isRoomConnected = room.state == ConnectionState.Connected
 
   useEffect(() => {
     const handleRecordingStatusChanged = () => {
@@ -107,8 +108,11 @@ export const TranscriptSidePanel = () => {
 
   const isDisabled = useMemo(
     () =>
-      isLoading || isRecordingTransitioning || statuses.isAnotherModeStarted,
-    [isLoading, isRecordingTransitioning, statuses]
+      isLoading ||
+      isRecordingTransitioning ||
+      statuses.isAnotherModeStarted ||
+      !isRoomConnected,
+    [isLoading, isRecordingTransitioning, statuses, isRoomConnected]
   )
 
   return (