diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx index 0ff7a526..f6bc0dd8 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, 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]) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx index 0e16eb59..5cb673a4 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx +++ b/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 (
{ aria-label={t(tooltipLabel)} tooltip={t(tooltipLabel)} isSelected={isHandRaised} - onPress={() => { - notifyOtherParticipants(isHandRaised) - toggleRaisedHand() - }} + onPress={() => toggleRaisedHand()} data-attr={`controls-hand-${tooltipLabel}`} >