From 591a3a5d8be082e4115de10df9e79f5df0b38e94 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 11 Feb 2025 18:26:56 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20notify=20user=20when=20he?=
 =?UTF-8?q?r=20was=20muted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add notification system to handle user mute events. Implement extensible
design to support future notification types. Set notification duration to 3s.
---
 .../notifications/MainNotificationToast.tsx   | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

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()) {