diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx index cd664160..ead9ada0 100644 --- a/src/frontend/src/features/notifications/MainNotificationToast.tsx +++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx @@ -7,7 +7,6 @@ import { Div } from '@/primitives' export const MainNotificationToast = () => { const room = useRoomContext() - // fixme - remove toast if the user quit room in the 5s she joined // fixme - don't show toast on mobile screen useEffect(() => { const showJoinNotification = (participant: Participant) => { @@ -27,6 +26,23 @@ export const MainNotificationToast = () => { } }, [room]) + useEffect(() => { + const removeJoinNotification = (participant: Participant) => { + const existingToast = toastQueue.visibleToasts.find( + (toast) => + toast.content.participant === participant && + toast.content.type === NotificationType.Joined + ) + if (existingToast) { + toastQueue.close(existingToast.key) + } + } + room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification) + return () => { + room.off(RoomEvent.ParticipantConnected, removeJoinNotification) + } + }, [room]) + // fixme - close all related toasters when hands are lowered remotely useEffect(() => { const decoder = new TextDecoder()