From d9a2ecf0585993d3ed89501ea7529ebc68001315 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Wed, 27 Apr 2022 12:58:08 +0200
Subject: [PATCH] =?UTF-8?q?read=20receipts:=20never=20show=20+1,=20if=20it?=
 =?UTF-8?q?=E2=80=99s=20just=204,=20show=20all=20of=20them?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/rooms/ReadReceiptGroup.tsx           | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
index a427c74e072..d45d46762d2 100644
--- a/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/src/components/views/rooms/ReadReceiptGroup.tsx
@@ -31,7 +31,8 @@ import { useTooltip } from "../../../utils/useTooltip";
 import { _t } from "../../../languageHandler";
 import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 
-const MAX_READ_AVATARS = 3;
+const MAX_READ_AVATARS = 4;
+const MAX_READ_AVATARS_PLUS_N = MAX_READ_AVATARS - 1;
 const READ_AVATAR_OFFSET = 10;
 export const READ_AVATAR_SIZE = 16;
 
@@ -44,8 +45,8 @@ interface Props {
 }
 
 // Design specified that we should show the three latest read receipts
-function determineAvatarPosition(index, count): [boolean, number] {
-    const firstVisible = Math.max(0, count - MAX_READ_AVATARS);
+function determineAvatarPosition(index, count, max): [boolean, number] {
+    const firstVisible = Math.max(0, count - max);
 
     if (index >= firstVisible) {
         return [false, index - firstVisible];
@@ -83,8 +84,13 @@ export function ReadReceiptGroup(
         );
     }
 
+    // If we are above MAX_READ_AVATARS, we’ll have to remove a few to have space for the +n count.
+    const maxAvatars = readReceipts.length > MAX_READ_AVATARS
+        ? MAX_READ_AVATARS_PLUS_N
+        : MAX_READ_AVATARS;
+
     const avatars = readReceipts.map((receipt, index) => {
-        const [hidden, position] = determineAvatarPosition(index, readReceipts.length);
+        const [hidden, position] = determineAvatarPosition(index, readReceipts.length, maxAvatars);
 
         const userId = receipt.userId;
         let readReceiptInfo: IReadReceiptInfo;
@@ -114,7 +120,7 @@ export function ReadReceiptGroup(
     });
 
     let remText: JSX.Element;
-    const remainder = readReceipts.length - MAX_READ_AVATARS;
+    const remainder = readReceipts.length - maxAvatars;
     if (remainder > 0) {
         remText = (
             <span className="mx_ReadReceiptGroup_remainder" aria-live="off">
@@ -163,7 +169,7 @@ export function ReadReceiptGroup(
                     <span
                         className="mx_ReadReceiptGroup_container"
                         style={{
-                            width: Math.min(MAX_READ_AVATARS, readReceipts.length) * READ_AVATAR_OFFSET +
+                            width: Math.min(maxAvatars, readReceipts.length) * READ_AVATAR_OFFSET +
                                 READ_AVATAR_SIZE - READ_AVATAR_OFFSET,
                         }}
                     >