Fix read receipt animation (#12923)

* Fix read receipt animation

The way it was done involved remembering dom nodes and then getting
their position later when animating the receipt to its next position,
but I'm not sure how this worked since the DOM node may not neccessarily
be in the DOM anymore. Instead, just remember the bounding box coordinates.
At worst it might go weird if the window is resized but seems fine in
practice. Also, keeping references to dom nodes feels like a fast road
to memory leaks.

Fixes https://github.com/element-hq/element-web/issues/27916

* Attempt to write a test for read receipts

and fix naming

* Another test

also change a condition to make it testable

src/components/structures/MessagePanel.tsx

@@ -47,7 +47,7 @@ import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
 import { Action } from "../../dispatcher/actions";
 import { getEventDisplayInfo } from "../../utils/EventRenderingUtils";
-import { IReadReceiptInfo } from "../views/rooms/ReadReceiptMarker";
+import { IReadReceiptPosition } from "../views/rooms/ReadReceiptMarker";
 import { haveRendererForEvent } from "../../events/EventTileFactory";
 import { editorRoomKey } from "../../Editing";
 import { hasThreadSummary } from "../../utils/EventUtils";
@@ -213,7 +213,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     // opaque readreceipt info for each userId; used by ReadReceiptMarker
     // to manage its animations
-    private readReceiptMap: { [userId: string]: IReadReceiptInfo } = {};
+    private readReceiptMap: { [userId: string]: IReadReceiptPosition } = {};
 
     // Track read receipts by event ID. For each _shown_ event ID, we store
     // the list of read receipts to display: