PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/MessagePanel.tsx
View file

@ -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:

4
src/components/views/rooms/EventTile.tsx
View file

@ -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

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}

60
src/components/views/rooms/ReadReceiptMarker.tsx
View file

@ -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;
}
target.top = element.offsetTop;
target.right = element.getBoundingClientRect().right - horizontalContainer.getBoundingClientRect().right;
target.parent = verticalContainer;
const elementRect = element.getBoundingClientRect();
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) {

79
test/components/views/rooms/ReadReceiptMarker-test.tsx Normal file
View file

@ -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);
});
});