From 6bfdb3e16b738a0353da8f344a3a1716ab730f97 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Tue, 3 Sep 2024 12:59:30 +0100
Subject: [PATCH] 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 | 4 +-
src/components/views/rooms/EventTile.tsx | 4 +-
.../views/rooms/ReadReceiptGroup.tsx | 16 ++--
.../views/rooms/ReadReceiptMarker.tsx | 58 ++++----------
.../views/rooms/ReadReceiptMarker-test.tsx | 79 +++++++++++++++++++
5 files changed, 108 insertions(+), 53 deletions(-)
create mode 100644 test/components/views/rooms/ReadReceiptMarker-test.tsx
diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index 07b600484a..c28992f33e 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/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:
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index e0f8ab1161..616ed1442c 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -60,7 +60,7 @@ import PlatformPeg from "../../../PlatformPeg";
import MemberAvatar from "../avatars/MemberAvatar";
import SenderProfile from "../messages/SenderProfile";
import MessageTimestamp from "../messages/MessageTimestamp";
-import { IReadReceiptInfo } from "./ReadReceiptMarker";
+import { IReadReceiptPosition } from "./ReadReceiptMarker";
import MessageActionBar from "../messages/MessageActionBar";
import ReactionsRow from "../messages/ReactionsRow";
import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
@@ -167,7 +167,7 @@ export interface EventTileProps {
// opaque readreceipt info for each userId; used by ReadReceiptMarker
// to manage its animations. Should be an empty object when the room
// first loads
- readReceiptMap?: { [userId: string]: IReadReceiptInfo };
+ readReceiptMap?: { [userId: string]: IReadReceiptPosition };
// A function which is used to check if the parent panel is being
// unmounted, to avoid unnecessary work. Should return true if we
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
index c9d00a4e69..551658a54b 100644
--- a/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/src/components/views/rooms/ReadReceiptGroup.tsx
@@ -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}
diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index 7b907e6f23..c1f2e3ccaa 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -24,10 +24,10 @@ import { toPx } from "../../../utils/units";
import MemberAvatar from "../avatars/MemberAvatar";
import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
-export interface IReadReceiptInfo {
+// The top & right from the bounding client rect of each read receipt
+export interface IReadReceiptPosition {
top?: number;
right?: number;
- parent?: Element;
}
interface IProps {
@@ -48,7 +48,7 @@ interface IProps {
suppressAnimation?: boolean;
// an opaque object for storing information about this user's RR in this room
- readReceiptInfo?: IReadReceiptInfo;
+ readReceiptPosition?: IReadReceiptPosition;
// A function which is used to check if the parent panel is being
// unmounted, to avoid unnecessary work. Should return true if we
@@ -90,7 +90,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
public componentWillUnmount(): void {
// before we remove the rr, store its location in the map, so that if
// it reappears, it can be animated from the right place.
- const rrInfo = this.props.readReceiptInfo;
+ const rrInfo = this.props.readReceiptPosition;
if (!rrInfo) {
return;
}
@@ -121,11 +121,11 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
}
}
- private buildReadReceiptInfo(target: IReadReceiptInfo = {}): IReadReceiptInfo {
+ private buildReadReceiptInfo(target: IReadReceiptPosition = {}): IReadReceiptPosition {
const element = this.avatar.current;
// this is the mx_ReadReceiptsGroup_container
const horizontalContainer = element?.offsetParent;
- if (!horizontalContainer || !(horizontalContainer instanceof HTMLElement)) {
+ if (!horizontalContainer || !horizontalContainer.getBoundingClientRect) {
// this seems to happen sometimes for reasons I don't understand
// the docs for `offsetParent` say it may be null if `display` is
// `none`, but I can't see why that would happen.
@@ -133,51 +133,27 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
target.top = 0;
target.right = 0;
- target.parent = undefined;
return target;
}
- // this is the mx_ReadReceiptsGroup
- const verticalContainer = horizontalContainer.offsetParent;
- if (!verticalContainer || !(verticalContainer instanceof HTMLElement)) {
- // this seems to happen sometimes for reasons I don't understand
- // the docs for `offsetParent` say it may be null if `display` is
- // `none`, but I can't see why that would happen.
- logger.warn(`ReadReceiptMarker for ${this.props.fallbackUserId} has no valid verticalContainer`);
- target.top = 0;
- target.right = 0;
- target.parent = undefined;
- return target;
- }
+ const elementRect = element.getBoundingClientRect();
- target.top = element.offsetTop;
- target.right = element.getBoundingClientRect().right - horizontalContainer.getBoundingClientRect().right;
- target.parent = verticalContainer;
+ target.top = elementRect.top;
+ target.right = elementRect.right - horizontalContainer.getBoundingClientRect().right;
return target;
}
- private readReceiptPosition(info: IReadReceiptInfo): number {
- if (!info.parent) {
- // this seems to happen sometimes for reasons I don't understand
- // the docs for `offsetParent` say it may be null if `display` is
- // `none`, but I can't see why that would happen.
- logger.warn(`ReadReceiptMarker for ${this.props.fallbackUserId} has no offsetParent`);
- return 0;
- }
-
- return (info.top ?? 0) + info.parent.getBoundingClientRect().top;
- }
-
private animateMarker(): void {
- const oldInfo = this.props.readReceiptInfo;
+ const oldInfo = this.props.readReceiptPosition;
const newInfo = this.buildReadReceiptInfo();
- const newPosition = this.readReceiptPosition(newInfo);
- const oldPosition = oldInfo
- ? // start at the old height and in the old h pos
- this.readReceiptPosition(oldInfo)
- : // treat new RRs as though they were off the top of the screen
- -READ_AVATAR_SIZE;
+ const newPosition = newInfo.top ?? 0;
+ const oldPosition =
+ oldInfo && oldInfo.top !== undefined
+ ? // start at the old height and in the old h pos
+ oldInfo.top
+ : // treat new RRs as though they were off the top of the screen
+ -READ_AVATAR_SIZE;
const startStyles: IReadReceiptMarkerStyle[] = [];
if (oldInfo?.right) {
diff --git a/test/components/views/rooms/ReadReceiptMarker-test.tsx b/test/components/views/rooms/ReadReceiptMarker-test.tsx
new file mode 100644
index 0000000000..d1584a4280
--- /dev/null
+++ b/test/components/views/rooms/ReadReceiptMarker-test.tsx
@@ -0,0 +1,79 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ReadReceiptMarker, { IReadReceiptPosition } from "../../../../src/components/views/rooms/ReadReceiptMarker";
+
+describe("ReadReceiptMarker", () => {
+ afterEach(() => {
+ jest.restoreAllMocks();
+ jest.useRealTimers();
+ });
+
+ it("should position at -16px if given no previous position", () => {
+ render(<ReadReceiptMarker fallbackUserId="bob" offset={0} />);
+
+ expect(screen.getByTestId("avatar-img").style.top).toBe("-16px");
+ });
+
+ it("should position at previous top if given", () => {
+ render(<ReadReceiptMarker fallbackUserId="bob" offset={0} readReceiptPosition={{ top: 100, right: 0 }} />);
+
+ expect(screen.getByTestId("avatar-img").style.top).toBe("100px");
+ });
+
+ it("should apply new styles after mounted to animate", () => {
+ jest.useFakeTimers();
+
+ render(<ReadReceiptMarker fallbackUserId="bob" offset={0} readReceiptPosition={{ top: 100, right: 0 }} />);
+ expect(screen.getByTestId("avatar-img").style.top).toBe("100px");
+
+ jest.runAllTimers();
+
+ expect(screen.getByTestId("avatar-img").style.top).toBe("0px");
+ });
+
+ it("should update readReceiptPosition when unmounted", () => {
+ const pos: IReadReceiptPosition = {};
+ const { unmount } = render(<ReadReceiptMarker fallbackUserId="bob" offset={0} readReceiptPosition={pos} />);
+
+ expect(pos.top).toBeUndefined();
+
+ unmount();
+
+ expect(pos.top).toBe(0);
+ });
+
+ it("should update readReceiptPosition to current position", () => {
+ const pos: IReadReceiptPosition = {};
+ jest.spyOn(HTMLElement.prototype, "offsetParent", "get").mockImplementation(function (): Element | null {
+ return {
+ getBoundingClientRect: jest.fn().mockReturnValue({ top: 0, right: 0 } as DOMRect),
+ } as unknown as Element;
+ });
+ jest.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({ top: 100, right: 0 } as DOMRect);
+
+ const { unmount } = render(<ReadReceiptMarker fallbackUserId="bob" offset={0} readReceiptPosition={pos} />);
+
+ expect(pos.top).toBeUndefined();
+
+ unmount();
+
+ expect(pos.top).toBe(100);
+ });
+});
--
GitLab