From f3fc00ebabb1c864e0bbbde7990e6a3c7c933b6b Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 26 Apr 2022 14:42:38 +0200
Subject: [PATCH 1/6] fix: don't pass hideTitle to base avatar

---
 src/components/views/avatars/MemberAvatar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 41ad6118741..f01a8eb4b6d 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -108,7 +108,7 @@ export default class MemberAvatar extends React.PureComponent<IProps, IState> {
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        let { member, fallbackUserId, onClick, viewUserOnClick, forceHistorical, ...otherProps } = this.props;
+        let { member, fallbackUserId, onClick, viewUserOnClick, forceHistorical, hideTitle, ...otherProps } = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
         if (viewUserOnClick) {
@@ -125,7 +125,7 @@ export default class MemberAvatar extends React.PureComponent<IProps, IState> {
             <BaseAvatar
                 {...otherProps}
                 name={this.state.name}
-                title={this.props.hideTitle ? undefined : this.state.title}
+                title={hideTitle ? undefined : this.state.title}
                 idName={userId}
                 url={this.state.imageUrl}
                 onClick={onClick}

From 737ad24b6d674a6a04e9e11b8697976ab301da8e Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 26 Apr 2022 16:19:12 +0200
Subject: [PATCH 2/6] fix: correctly position read receipt markers

---
 .../views/rooms/ReadReceiptMarker.tsx         | 91 ++++++++++++++-----
 1 file changed, 66 insertions(+), 25 deletions(-)

diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index 453f7dd225e..62fcd83247b 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -17,11 +17,12 @@ limitations under the License.
 
 import React, { createRef, RefObject } from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import NodeAnimator from "../../../NodeAnimator";
 import { toPx } from "../../../utils/units";
 import MemberAvatar from '../avatars/MemberAvatar';
+import { logger } from "../../../../../matrix-js-sdk/src/logger";
+import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
 
 export interface IReadReceiptInfo {
     top?: number;
@@ -101,10 +102,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
             return;
         }
 
-        const avatarNode = this.avatar.current;
-        rrInfo.top = avatarNode.offsetTop;
-        rrInfo.right = avatarNode.getBoundingClientRect().right - avatarNode.offsetParent.getBoundingClientRect().right;
-        rrInfo.parent = avatarNode.offsetParent;
+        this.buildReadReceiptInfo(rrInfo);
     }
 
     public componentDidMount(): void {
@@ -123,42 +121,85 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
         }
     }
 
-    private animateMarker(): void {
-        // treat new RRs as though they were off the top of the screen
-        let oldTop = -15;
+    private buildReadReceiptInfo(target: IReadReceiptInfo = {}): IReadReceiptInfo {
+        const element = this.avatar.current;
+        // this is the mx_ReadReceiptsGroup_container
+        const horizontalContainer = element.offsetParent;
+        if (horizontalContainer == null || !(horizontalContainer 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 horizontalContainer`,
+            );
 
-        const oldInfo = this.props.readReceiptInfo;
-        if (oldInfo && oldInfo.parent) {
-            oldTop = oldInfo.top + oldInfo.parent.getBoundingClientRect().top;
+            target.top = 0;
+            target.right = 0;
+            target.parent = null;
+            return;
         }
+        // this is the mx_ReadReceiptsGroup
+        const verticalContainer = horizontalContainer.offsetParent;
+        if (verticalContainer == null || !(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`,
+            );
 
-        const newElement = this.avatar.current;
-        let startTopOffset;
-        if (!newElement.offsetParent) {
+            target.top = 0;
+            target.right = 0;
+            target.parent = null;
+            return;
+        }
+
+        target.top = element.offsetTop;
+        target.right = element.getBoundingClientRect().right - horizontalContainer.getBoundingClientRect().right;
+        target.parent = verticalContainer;
+        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} in has no offsetParent`,
+                `ReadReceiptMarker for ${this.props.fallbackUserId} has no offsetParent`,
             );
-            startTopOffset = 0;
-        } else {
-            startTopOffset = oldTop - newElement.offsetParent.getBoundingClientRect().top;
+            return 0;
         }
 
-        const startStyles = [];
+        return info.top + info.parent.getBoundingClientRect().top;
+    }
 
-        if (oldInfo && oldInfo.right) {
+    private animateMarker(): void {
+        const oldInfo = this.props.readReceiptInfo;
+        const newInfo = this.buildReadReceiptInfo();
+
+        const newPosition = this.readReceiptPosition(newInfo);
+        const oldPosition = oldInfo
             // start at the old height and in the old h pos
-            startStyles.push({ top: startTopOffset+"px",
-                right: toPx(oldInfo.right) });
-        }
+            ? this.readReceiptPosition(oldInfo)
+            // treat new RRs as though they were off the top of the screen
+            : -READ_AVATAR_SIZE;
 
-        startStyles.push({ top: startTopOffset+'px', right: '0' });
+        const startStyles = [];
+        if (oldInfo && oldInfo.right) {
+            startStyles.push({
+                top: oldPosition - newPosition,
+                right: oldInfo.right,
+            });
+        }
+        startStyles.push({
+            top: oldPosition - newPosition,
+            right: 0,
+        });
 
         this.setState({
             suppressDisplay: false,
-            startStyles: startStyles,
+            startStyles
         });
     }
 

From 0ee6f045cdf116284ccdfd3be0dceb3d61d775d6 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 26 Apr 2022 16:29:43 +0200
Subject: [PATCH 3/6] fix: correct eslint complaints

---
 src/components/views/rooms/ReadReceiptMarker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index 62fcd83247b..4776b89da54 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -199,7 +199,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
 
         this.setState({
             suppressDisplay: false,
-            startStyles
+            startStyles,
         });
     }
 

From 4035428ca0cc6104a76d72b39e75a9f13c050f31 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 26 Apr 2022 16:49:13 +0200
Subject: [PATCH 4/6] fix: make eslint happy

---
 src/components/views/avatars/MemberAvatar.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index f01a8eb4b6d..76dc9e69621 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -107,8 +107,16 @@ export default class MemberAvatar extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        let { member, fallbackUserId, onClick, viewUserOnClick, forceHistorical, hideTitle, ...otherProps } = this.props;
+        let {
+            member,
+            fallbackUserId,
+            onClick,
+            viewUserOnClick,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            forceHistorical,
+            hideTitle,
+            ...otherProps
+        } = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
         if (viewUserOnClick) {

From ecca342da8134198780957450a3ee5d1528433f0 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 26 Apr 2022 17:07:34 +0200
Subject: [PATCH 5/6] fix: correct import for logger

---
 src/components/views/rooms/ReadReceiptMarker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index 4776b89da54..ff1ce750e71 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -17,11 +17,11 @@ limitations under the License.
 
 import React, { createRef, RefObject } from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import NodeAnimator from "../../../NodeAnimator";
 import { toPx } from "../../../utils/units";
 import MemberAvatar from '../avatars/MemberAvatar';
-import { logger } from "../../../../../matrix-js-sdk/src/logger";
 import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
 
 export interface IReadReceiptInfo {

From d34a4046eb68f0fb590b04afb7245790ea74bd76 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 26 Apr 2022 17:57:13 +0200
Subject: [PATCH 6/6] fix: clarify intention of condition

---
 src/components/views/rooms/ReadReceiptMarker.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/ReadReceiptMarker.tsx b/src/components/views/rooms/ReadReceiptMarker.tsx
index ff1ce750e71..934fd7af7ab 100644
--- a/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -125,7 +125,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
         const element = this.avatar.current;
         // this is the mx_ReadReceiptsGroup_container
         const horizontalContainer = element.offsetParent;
-        if (horizontalContainer == null || !(horizontalContainer instanceof HTMLElement)) {
+        if (!horizontalContainer || !(horizontalContainer 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.
@@ -140,7 +140,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
         }
         // this is the mx_ReadReceiptsGroup
         const verticalContainer = horizontalContainer.offsetParent;
-        if (verticalContainer == null || !(verticalContainer instanceof HTMLElement)) {
+        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.