✨(frontend) introduce a notification for transcription

Main goal: notify participant when the meeting is being recorded.
It helps understand the whole system behavior with clear
notification states.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -88,6 +88,16 @@ export const MainNotificationToast = () => {
           if (notification.data?.emoji)
             handleEmoji(notification.data.emoji, participant)
           break
+        case NotificationType.TranscriptionStarted:
+        case NotificationType.TranscriptionStopped:
+          toastQueue.add(
+            {
+              participant,
+              type: notification.type,
+            },
+            { timeout: NotificationDuration.ALERT }
+          )
+          break
         default:
           return
       }

src/frontend/src/features/notifications/NotificationType.ts

@@ -6,4 +6,6 @@ export enum NotificationType {
   LowerHand = 'lowerHand',
   ReactionReceived = 'reactionReceived',
   ParticipantWaiting = 'participantWaiting',
+  TranscriptionStarted = 'transcriptionStarted',
+  TranscriptionStopped = 'transcriptionStopped',
 }

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -9,6 +9,7 @@ import { ToastRaised } from './ToastRaised'
 import { ToastMuted } from './ToastMuted'
 import { ToastMessageReceived } from './ToastMessageReceived'
 import { ToastLowerHand } from './ToastLowerHand'
+import { ToastTranscript } from './ToastTranscript'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -36,6 +37,10 @@ const renderToast = (
     case NotificationType.LowerHand:
       return <ToastLowerHand key={toast.key} toast={toast} state={state} />
 
+    case NotificationType.TranscriptionStarted:
+    case NotificationType.TranscriptionStopped:
+      return <ToastTranscript key={toast.key} toast={toast} state={state} />
+
     default:
       return <Toast key={toast.key} toast={toast} state={state} />
   }

src/frontend/src/features/notifications/components/ToastTranscript.tsx

@@ -0,0 +1,33 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+import { NotificationType } from '../NotificationType'
+
+export function ToastTranscript({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+  const type = props.toast.content.type
+
+  const key = `recording${type == NotificationType.TranscriptionStarted ? 'Started' : 'Stopped'}`
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t(key, {
+          name: participant.name,
+        })}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/locales/de/notifications.json

@@ -21,5 +21,7 @@
     "several": "",
     "open": "",
     "accept": ""
-  }
+  },
+  "recordingStarted": "",
+  "recordingStopped": ""
 }

src/frontend/src/locales/en/notifications.json

@@ -21,5 +21,7 @@
     "several": "Several people want to join this call.",
     "open": "Open",
     "accept": "Accept"
-  }
+  },
+  "recordingStarted": "{{name}} started the meeting transcription.",
+  "recordingStopped": "{{name}} stopped the meeting transcription."
 }

src/frontend/src/locales/fr/notifications.json

@@ -21,5 +21,7 @@
     "several": "Plusieurs personnes souhaitent participer à cet appel.",
     "open": "Afficher",
     "accept": "Accepter"
-  }
+  },
+  "recordingStarted": "{{name}} a démarré la transcription de la réunion.",
+  "recordingStopped": "{{name}} a arrêté la transcription de la réunion."
 }

src/frontend/src/locales/nl/notifications.json

@@ -21,5 +21,7 @@
     "several": "Meerdere mensen willen deelnemen aan dit gesprek.",
     "open": "Openen",
     "accept": "Accepteren"
-  }
+  },
+  "recordingStarted": "{{name}} is de transcriptie van de vergadering gestart.",
+  "recordingStopped": "{{name}} heeft de transcriptie van de vergadering gestopt."
 }