♻️(frontend) simplify raised hand notification

Listen to metadata changed events instead of messaging the whole
room. Less code, might be less clean, to be discussed.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
+import { Participant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
@@ -50,31 +50,32 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
-  // fixme - close all related toasters when hands are lowered remotely
   useEffect(() => {
-    const decoder = new TextDecoder()
-
     const handleNotificationReceived = (
-      payload: Uint8Array,
-      participant?: RemoteParticipant
+      prevMetadataStr: string | undefined,
+      participant: Participant
     ) => {
-      if (!participant) {
-        return
-      }
-      if (isMobileBrowser()) {
-        return
-      }
-      const notification = decoder.decode(payload)
+      if (!participant) return
+      if (isMobileBrowser()) return
+      if (participant.isLocal) return
+
+      const prevMetadata = JSON.parse(prevMetadataStr || '{}')
+      const metadata = JSON.parse(participant.metadata || '{}')
+
+      if (prevMetadata.raised == metadata.raised) return
+
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>
           toast.content.participant === participant &&
           toast.content.type === NotificationType.Raised
       )
-      if (existingToast && notification === NotificationType.Lowered) {
+
+      if (existingToast && prevMetadata.raised && !metadata.raised) {
         toastQueue.close(existingToast.key)
         return
       }
-      if (!existingToast && notification === NotificationType.Raised) {
+
+      if (!existingToast && !prevMetadata.raised && metadata.raised) {
         triggerNotificationSound(NotificationType.Raised)
         toastQueue.add(
           {
@@ -86,10 +87,10 @@ export const MainNotificationToast = () => {
       }
     }
 
-    room.on(RoomEvent.DataReceived, handleNotificationReceived)
+    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
 
     return () => {
-      room.off(RoomEvent.DataReceived, handleNotificationReceived)
+      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
     }
   }, [room, triggerNotificationSound])
 

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -4,7 +4,6 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useRoomContext } from '@livekit/components-react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { NotificationType } from '@/features/notifications/NotificationType'
 
 export const HandToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
@@ -16,17 +15,6 @@ export const HandToggle = () => {
 
   const tooltipLabel = isHandRaised ? 'lower' : 'raise'
 
-  const notifyOtherParticipants = (isHandRaised: boolean) => {
-    room.localParticipant.publishData(
-      new TextEncoder().encode(
-        !isHandRaised ? NotificationType.Raised : NotificationType.Lowered
-      ),
-      {
-        reliable: true,
-      }
-    )
-  }
-
   return (
     <div
       className={css({
@@ -40,10 +28,7 @@ export const HandToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
-        onPress={() => {
-          notifyOtherParticipants(isHandRaised)
-          toggleRaisedHand()
-        }}
+        onPress={() => toggleRaisedHand()}
         data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />