From 3438b4608c3e4f4952c4318bc6cd0564ccc7b94b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 16 Apr 2025 20:06:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20make=20recording=20sta?=
 =?UTF-8?q?te=20toast=20clickable=20to=20reopen=20side=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enable recording status toast to function as clickable element that reopens
the side panel for admins and owners. Provides convenient way to access
recording controls when side panel has been previously closed.
---
 .../components/RecordingStateToast.tsx        | 73 +++++++++++++++++--
 1 file changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/features/recording/components/RecordingStateToast.tsx b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
index 9b87d5dc..f39c8f2e 100644
--- a/src/frontend/src/features/recording/components/RecordingStateToast.tsx
+++ b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
@@ -10,6 +10,14 @@ import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
 import { RiRecordCircleLine } from '@remixicon/react'
+import {
+  RecordingMode,
+  useHasRecordingAccess,
+  useIsRecordingActive,
+} from '@/features/recording'
+import { FeatureFlags } from '@/features/analytics/enums'
+import { Button as RACButton } from 'react-aria-components'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
@@ -17,8 +25,26 @@ export const RecordingStateToast = () => {
   })
   const room = useRoomContext()
 
+  const { openTranscript, openScreenRecording } = useSidePanel()
+
   const recordingSnap = useSnapshot(recordingStore)
 
+  const hasTranscriptAccess = useHasRecordingAccess(
+    RecordingMode.Transcript,
+    FeatureFlags.Transcript
+  )
+
+  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
+
+  const hasScreenRecordingAccess = useHasRecordingAccess(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
+  )
+
+  const isScreenRecordingActive = useIsRecordingActive(
+    RecordingMode.ScreenRecording
+  )
+
   useEffect(() => {
     if (room.isRecording && recordingSnap.status == RecordingStatus.STOPPED) {
       recordingStore.status = RecordingStatus.ANY_STARTED
@@ -101,6 +127,10 @@ export const RecordingStateToast = () => {
 
   const isStarted = key?.includes('started')
 
+  const hasScreenRecordingAccessAndActive =
+    isScreenRecordingActive && hasScreenRecordingAccess
+  const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
+
   return (
     <div
       className={css({
@@ -128,14 +158,41 @@ export const RecordingStateToast = () => {
       ) : (
         <Spinner size={20} variant="dark" />
       )}
-      <Text
-        variant={'sm'}
-        className={css({
-          fontWeight: '500 !important',
-        })}
-      >
-        {t(key)}
-      </Text>
+
+      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
+        <Text
+          variant={'sm'}
+          className={css({
+            fontWeight: '500 !important',
+          })}
+        >
+          {t(key)}
+        </Text>
+      )}
+      {hasScreenRecordingAccessAndActive && (
+        <RACButton
+          onPress={openScreenRecording}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
+      {hasTranscriptAccessAndActive && (
+        <RACButton
+          onPress={openTranscript}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
     </div>
   )
 }