From 60321296e5fd54481658d0620c7564a56020cc14 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 4 Apr 2025 16:25:14 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20introduce=20a=20notificat?= =?UTF-8?q?ion=20for=20transcription?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Main goal: notify participant when the meeting is being recorded. It helps understand the whole system behavior with clear notification states. --- .../notifications/MainNotificationToast.tsx | 10 ++++++ .../notifications/NotificationType.ts | 2 ++ .../notifications/components/ToastRegion.tsx | 5 +++ .../components/ToastTranscript.tsx | 33 +++++++++++++++++++ .../src/locales/de/notifications.json | 4 ++- .../src/locales/en/notifications.json | 4 ++- .../src/locales/fr/notifications.json | 4 ++- .../src/locales/nl/notifications.json | 4 ++- 8 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 src/frontend/src/features/notifications/components/ToastTranscript.tsx diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx index 7aeaf20f..0e4a8746 100644 --- a/src/frontend/src/features/notifications/MainNotificationToast.tsx +++ b/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 } diff --git a/src/frontend/src/features/notifications/NotificationType.ts b/src/frontend/src/features/notifications/NotificationType.ts index 74974ecf..b2eb8709 100644 --- a/src/frontend/src/features/notifications/NotificationType.ts +++ b/src/frontend/src/features/notifications/NotificationType.ts @@ -6,4 +6,6 @@ export enum NotificationType { LowerHand = 'lowerHand', ReactionReceived = 'reactionReceived', ParticipantWaiting = 'participantWaiting', + TranscriptionStarted = 'transcriptionStarted', + TranscriptionStopped = 'transcriptionStopped', } diff --git a/src/frontend/src/features/notifications/components/ToastRegion.tsx b/src/frontend/src/features/notifications/components/ToastRegion.tsx index 09ea4dad..208bff8f 100644 --- a/src/frontend/src/features/notifications/components/ToastRegion.tsx +++ b/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 @@ -36,6 +37,10 @@ const renderToast = ( case NotificationType.LowerHand: return + case NotificationType.TranscriptionStarted: + case NotificationType.TranscriptionStopped: + return + default: return } diff --git a/src/frontend/src/features/notifications/components/ToastTranscript.tsx b/src/frontend/src/features/notifications/components/ToastTranscript.tsx new file mode 100644 index 00000000..639db009 --- /dev/null +++ b/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 ( + + + {t(key, { + name: participant.name, + })} + + + ) +} diff --git a/src/frontend/src/locales/de/notifications.json b/src/frontend/src/locales/de/notifications.json index 0ef15bf3..bbef20f7 100644 --- a/src/frontend/src/locales/de/notifications.json +++ b/src/frontend/src/locales/de/notifications.json @@ -21,5 +21,7 @@ "several": "", "open": "", "accept": "" - } + }, + "recordingStarted": "", + "recordingStopped": "" } diff --git a/src/frontend/src/locales/en/notifications.json b/src/frontend/src/locales/en/notifications.json index 45e55c27..0d63f4b0 100644 --- a/src/frontend/src/locales/en/notifications.json +++ b/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." } diff --git a/src/frontend/src/locales/fr/notifications.json b/src/frontend/src/locales/fr/notifications.json index 9a0cef3d..d4cda69d 100644 --- a/src/frontend/src/locales/fr/notifications.json +++ b/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." } diff --git a/src/frontend/src/locales/nl/notifications.json b/src/frontend/src/locales/nl/notifications.json index 6c524852..d19d3488 100644 --- a/src/frontend/src/locales/nl/notifications.json +++ b/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." }