From f596aae1e82ac0e241d1cff0faf0c12480297f12 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Mon, 7 Apr 2025 11:08:55 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20generalize=20tra?= =?UTF-8?q?nscript=20notification=20for=20all=20recording=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert transcript-specific toast notification into a flexible component that works with any recording type. Create extensible design that can accommodate screen recordings and future recording formats. Implementation is functional though not perfect, with room for future enhancement. --- .../notifications/MainNotificationToast.tsx | 2 ++ .../notifications/NotificationType.ts | 2 ++ ...stTranscript.tsx => ToastAnyRecording.tsx} | 24 +++++++++++++++---- .../notifications/components/ToastRegion.tsx | 6 +++-- .../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, 43 insertions(+), 7 deletions(-) rename src/frontend/src/features/notifications/components/{ToastTranscript.tsx => ToastAnyRecording.tsx} (54%) diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx index 0e4a8746..ea70afaf 100644 --- a/src/frontend/src/features/notifications/MainNotificationToast.tsx +++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx @@ -90,6 +90,8 @@ export const MainNotificationToast = () => { break case NotificationType.TranscriptionStarted: case NotificationType.TranscriptionStopped: + case NotificationType.ScreenRecordingStarted: + case NotificationType.ScreenRecordingStopped: toastQueue.add( { participant, diff --git a/src/frontend/src/features/notifications/NotificationType.ts b/src/frontend/src/features/notifications/NotificationType.ts index b2eb8709..5b0a75fa 100644 --- a/src/frontend/src/features/notifications/NotificationType.ts +++ b/src/frontend/src/features/notifications/NotificationType.ts @@ -8,4 +8,6 @@ export enum NotificationType { ParticipantWaiting = 'participantWaiting', TranscriptionStarted = 'transcriptionStarted', TranscriptionStopped = 'transcriptionStopped', + ScreenRecordingStarted = 'screenRecordingStarted', + ScreenRecordingStopped = 'screenRecordingStopped', } diff --git a/src/frontend/src/features/notifications/components/ToastTranscript.tsx b/src/frontend/src/features/notifications/components/ToastAnyRecording.tsx similarity index 54% rename from src/frontend/src/features/notifications/components/ToastTranscript.tsx rename to src/frontend/src/features/notifications/components/ToastAnyRecording.tsx index 93de32db..c29c7645 100644 --- a/src/frontend/src/features/notifications/components/ToastTranscript.tsx +++ b/src/frontend/src/features/notifications/components/ToastAnyRecording.tsx @@ -1,20 +1,34 @@ import { useToast } from '@react-aria/toast' -import { useRef } from 'react' +import { useMemo, 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', { keyPrefix: 'transcript' }) +export function ToastAnyRecording({ 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 = - type == NotificationType.TranscriptionStarted ? 'started' : 'stopped' + const key = useMemo(() => { + switch (type) { + case NotificationType.TranscriptionStarted: + return 'transcript.started' + case NotificationType.TranscriptionStopped: + return 'transcript.stopped' + case NotificationType.ScreenRecordingStarted: + return 'screenRecording.started' + case NotificationType.ScreenRecordingStopped: + return 'screenRecording.stopped' + default: + return + } + }, [type]) + + if (!key) return return ( diff --git a/src/frontend/src/features/notifications/components/ToastRegion.tsx b/src/frontend/src/features/notifications/components/ToastRegion.tsx index 208bff8f..cf0e4870 100644 --- a/src/frontend/src/features/notifications/components/ToastRegion.tsx +++ b/src/frontend/src/features/notifications/components/ToastRegion.tsx @@ -9,7 +9,7 @@ import { ToastRaised } from './ToastRaised' import { ToastMuted } from './ToastMuted' import { ToastMessageReceived } from './ToastMessageReceived' import { ToastLowerHand } from './ToastLowerHand' -import { ToastTranscript } from './ToastTranscript' +import { ToastAnyRecording } from './ToastAnyRecording' interface ToastRegionProps extends AriaToastRegionProps { state: ToastState @@ -39,7 +39,9 @@ const renderToast = ( case NotificationType.TranscriptionStarted: case NotificationType.TranscriptionStopped: - return + case NotificationType.ScreenRecordingStarted: + case NotificationType.ScreenRecordingStopped: + return default: return diff --git a/src/frontend/src/locales/de/notifications.json b/src/frontend/src/locales/de/notifications.json index 1dd545ba..8b4120f2 100644 --- a/src/frontend/src/locales/de/notifications.json +++ b/src/frontend/src/locales/de/notifications.json @@ -25,5 +25,9 @@ "transcript": { "started": "", "stopped": "" + }, + "screenRecording": { + "started": "", + "stopped": "" } } diff --git a/src/frontend/src/locales/en/notifications.json b/src/frontend/src/locales/en/notifications.json index ffe8876f..f8d4f7aa 100644 --- a/src/frontend/src/locales/en/notifications.json +++ b/src/frontend/src/locales/en/notifications.json @@ -25,5 +25,9 @@ "transcript": { "started": "{{name}} started the meeting transcription.", "stopped": "{{name}} stopped the meeting transcription." + }, + "screenRecording": { + "started": "{{name}} started the meeting recording.", + "stopped": "{{name}} stopped the meeting recording." } } diff --git a/src/frontend/src/locales/fr/notifications.json b/src/frontend/src/locales/fr/notifications.json index d9bd30c6..90b065eb 100644 --- a/src/frontend/src/locales/fr/notifications.json +++ b/src/frontend/src/locales/fr/notifications.json @@ -25,5 +25,9 @@ "transcript": { "started": "{{name}} a démarré la transcription de la réunion.", "stopped": "{{name}} a arrêté la transcription de la réunion." + }, + "screenRecording": { + "started": "{{name}} a démarré l'enregistrement de la réunion.", + "stopped": "{{name}} a arrêté l'enregistrement de la réunion." } } diff --git a/src/frontend/src/locales/nl/notifications.json b/src/frontend/src/locales/nl/notifications.json index cdca57b3..2e653876 100644 --- a/src/frontend/src/locales/nl/notifications.json +++ b/src/frontend/src/locales/nl/notifications.json @@ -25,5 +25,9 @@ "transcript": { "started": "{{name}} is de transcriptie van de vergadering gestart.", "stopped": "{{name}} heeft de transcriptie van de vergadering gestopt." + }, + "screenRecording": { + "started": "{{name}} is begonnen met het opnemen van de vergadering.", + "stopped": "{{name}} is gestopt met het opnemen van de vergadering." } }