diff --git a/src/app/hooks/useRoomEventReaders.ts b/src/app/hooks/useRoomEventReaders.ts index f6bac27..6222bf9 100644 --- a/src/app/hooks/useRoomEventReaders.ts +++ b/src/app/hooks/useRoomEventReaders.ts @@ -3,6 +3,11 @@ import { useEffect, useState } from 'react'; const getEventReaders = (room: Room, evtId?: string) => { if (!evtId) return []; + + // if eventId is locally generated + // we don't have read receipt for it yet + if (!evtId.startsWith('$')) return []; + const liveEvents = room.getLiveTimeline().getEvents(); const userIds: string[] = []; @@ -25,9 +30,25 @@ export const useRoomEventReaders = (room: Room, eventId?: string): string[] => { setReaders(getEventReaders(room, eventId)); }; + const handleLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = ( + event, + r, + oldEventId + ) => { + // update members on local event id replaced + // with server generated id + if (r.roomId !== room.roomId || !oldEventId) return; + if (oldEventId.startsWith('$')) return; + if (oldEventId !== eventId) return; + + setReaders(getEventReaders(room, event.getId())); + }; + room.on(RoomEvent.Receipt, handleReceipt); + room.on(RoomEvent.LocalEchoUpdated, handleLocalEcho); return () => { room.removeListener(RoomEvent.Receipt, handleReceipt); + room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEcho); }; }, [room, eventId]);