imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix read receipt animation (#12923)

Browse source 
* 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
This commit is contained in:
David Baker 2024-09-03 12:59:30 +01:00 • committed by GitHub
parent 5ff3fd67c4
commit 6bfdb3e16b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 109 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/rooms/ReadReceiptGroup.tsx
View file

@ -18,7 +18,7 @@ import React, { PropsWithChildren } from "react";
import { User } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
import ReadReceiptMarker, { IReadReceiptPosition } from "./ReadReceiptMarker";
import { IReadReceiptProps } from "./EventTile";
import AccessibleButton from "../elements/AccessibleButton";
import MemberAvatar from "../avatars/MemberAvatar";
@ -41,7 +41,7 @@ export const READ_AVATAR_SIZE = 16;
interface Props {
readReceipts: IReadReceiptProps[];
readReceiptMap: { [userId: string]: IReadReceiptInfo };
readReceiptMap: { [userId: string]: IReadReceiptPosition };
checkUnmounting?: () => boolean;
suppressAnimation: boolean;
isTwelveHour?: boolean;
@ -111,13 +111,13 @@ export function ReadReceiptGroup({
const { hidden, position } = determineAvatarPosition(index, maxAvatars);
const userId = receipt.userId;
let readReceiptInfo: IReadReceiptInfo | undefined;
let readReceiptPosition: IReadReceiptPosition | undefined;
if (readReceiptMap) {
readReceiptInfo = readReceiptMap[userId];
if (!readReceiptInfo) {
readReceiptInfo = {};
readReceiptMap[userId] = readReceiptInfo;
readReceiptPosition = readReceiptMap[userId];
if (!readReceiptPosition) {
readReceiptPosition = {};
readReceiptMap[userId] = readReceiptPosition;
}
}
@ -128,7 +128,7 @@ export function ReadReceiptGroup({
fallbackUserId={userId}
offset={position * READ_AVATAR_OFFSET}
hidden={hidden}
readReceiptInfo={readReceiptInfo}
readReceiptPosition={readReceiptPosition}
checkUnmounting={checkUnmounting}
suppressAnimation={suppressAnimation}
timestamp={receipt.ts}