diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx index f082cdef..879dda63 100644 --- a/src/frontend/src/features/notifications/MainNotificationToast.tsx +++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react' import { useRoomContext } from '@livekit/components-react' -import { Participant, RoomEvent } from 'livekit-client' +import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client' import { ToastProvider, toastQueue } from './components/ToastProvider' import { NotificationType } from './NotificationType' import { Div } from '@/primitives' @@ -11,6 +11,36 @@ export const MainNotificationToast = () => { const room = useRoomContext() const { triggerNotificationSound } = useNotificationSound() + useEffect(() => { + const handleDataReceived = ( + payload: Uint8Array, + participant?: RemoteParticipant + ) => { + const decoder = new TextDecoder() + const notificationType = decoder.decode(payload) + + if (!participant) return + + switch (notificationType) { + case NotificationType.ParticipantMuted: + toastQueue.add( + { + participant, + type: NotificationType.ParticipantMuted, + }, + { timeout: 3000 } + ) + break + default: + console.warn(`Unhandled notification type: ${notificationType}`) + } + } + room.on(RoomEvent.DataReceived, handleDataReceived) + return () => { + room.off(RoomEvent.DataReceived, handleDataReceived) + } + }, [room]) + useEffect(() => { const showJoinNotification = (participant: Participant) => { if (isMobileBrowser()) {