Enable read receipts on thread timelines

Author: Germain Souquet

src/components/structures/MessagePanel.tsx

@@ -826,8 +826,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         if (!room) {
             return null;
         }
+
+        const receiptDestination = this.context.threadId
+            ? room.getThread(this.context.threadId)
+            : room;
+
         const receipts: IReadReceiptProps[] = [];
-        room.getReceiptsForEvent(event).forEach((r) => {
+        receiptDestination.getReceiptsForEvent(event).forEach((r) => {
             if (
                 !r.userId ||
                 !isSupportedReceiptType(r.type) ||

src/components/structures/ThreadPanel.tsx

@@ -282,10 +282,10 @@ const ThreadPanel: React.FC<IProps> = ({
                     ? <TimelinePanel
                         key={timelineSet.getFilter()?.filterId ?? (roomId + ":" + filterOption)}
                         ref={timelinePanel}
-                        showReadReceipts={false} // No RR support in thread's MVP
-                        manageReadReceipts={false} // No RR support in thread's MVP
-                        manageReadMarkers={false} // No RM support in thread's MVP
-                        sendReadReceiptOnLoad={false} // No RR support in thread's MVP
+                        showReadReceipts={false} // No RR support in thread's list
+                        manageReadReceipts={false} // No RR support in thread's list
+                        manageReadMarkers={false} // No RM support in thread's list
+                        sendReadReceiptOnLoad={false} // No RR support in thread's list
                         timelineSet={timelineSet}
                         showUrlPreview={false} // No URL previews at the threads list level
                         empty={<EmptyThread

src/components/structures/ThreadView.tsx

@@ -328,8 +328,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 <TimelinePanel
                     key={this.state.thread.id}
                     ref={this.timelinePanel}
-                    showReadReceipts={false} // Hide the read receipts
-                    // until homeservers speak threads language
+                    showReadReceipts={true}
                     manageReadReceipts={true}
                     manageReadMarkers={true}
                     sendReadReceiptOnLoad={true}

src/components/structures/TimelinePanel.tsx

@@ -943,13 +943,13 @@ class TimelinePanel extends React.Component<IProps, IState> {
         if (lastReadEventIndex === null) {
             shouldSendRR = false;
         }
-        let lastReadEvent = this.state.events[lastReadEventIndex];
+        let lastReadEvent: MatrixEvent | null = this.state.events[lastReadEventIndex];
         shouldSendRR = shouldSendRR &&
             // Only send a RR if the last read event is ahead in the timeline relative to
             // the current RR event.
             lastReadEventIndex > currentRREventIndex &&
             // Only send a RR if the last RR set != the one we would send
-            this.lastRRSentEventId != lastReadEvent.getId();
+            this.lastRRSentEventId !== lastReadEvent.getId();
 
         // Only send a RM if the last RM sent != the one we would send
         const shouldSendRM =
@@ -975,33 +975,43 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 `prr=${lastReadEvent?.getId()}`,
 
             );
-            MatrixClientPeg.get().setRoomReadMarkers(
-                roomId,
-                this.state.readMarkerEventId,
-                sendRRs ? lastReadEvent : null, // Public read receipt (could be null)
-                lastReadEvent, // Private read receipt (could be null)
-            ).catch(async (e) => {
-                // /read_markers API is not implemented on this HS, fallback to just RR
-                if (e.errcode === 'M_UNRECOGNIZED' && lastReadEvent) {
-                    const privateField = await getPrivateReadReceiptField(MatrixClientPeg.get());
-                    if (!sendRRs && !privateField) return;
-
-                    try {
-                        return await MatrixClientPeg.get().sendReadReceipt(
-                            lastReadEvent,
-                            sendRRs ? ReceiptType.Read : privateField,
-                        );
-                    } catch (error) {
+
+            if (this.props.timelineSet.thread && sendRRs) {
+                // There's no support for fully read markers on threads
+                // as defined by MSC3771
+                cli.sendReadReceipt(
+                    lastReadEvent,
+                    sendRRs ? ReceiptType.Read : ReceiptType.ReadPrivate,
+                );
+            } else {
+                cli.setRoomReadMarkers(
+                    roomId,
+                    this.state.readMarkerEventId,
+                    sendRRs ? lastReadEvent : null, // Public read receipt (could be null)
+                    lastReadEvent, // Private read receipt (could be null)
+                ).catch(async (e) => {
+                    // /read_markers API is not implemented on this HS, fallback to just RR
+                    if (e.errcode === 'M_UNRECOGNIZED' && lastReadEvent) {
+                        const privateField = await getPrivateReadReceiptField(cli);
+                        if (!sendRRs && !privateField) return;
+
+                        try {
+                            return await cli.sendReadReceipt(
+                                lastReadEvent,
+                                sendRRs ? ReceiptType.Read : privateField,
+                            );
+                        } catch (error) {
+                            logger.error(e);
+                            this.lastRRSentEventId = undefined;
+                        }
+                    } else {
                         logger.error(e);
-                        this.lastRRSentEventId = undefined;
                     }
-                } else {
-                    logger.error(e);
-                }
-                // it failed, so allow retries next time the user is active
-                this.lastRRSentEventId = undefined;
-                this.lastRMSentEventId = undefined;
-            });
+                    // it failed, so allow retries next time the user is active
+                    this.lastRRSentEventId = undefined;
+                    this.lastRMSentEventId = undefined;
+                });
+            }
 
             // do a quick-reset of our unreadNotificationCount to avoid having
             // to wait from the remote echo from the homeserver.
@@ -1654,15 +1664,16 @@ class TimelinePanel extends React.Component<IProps, IState> {
      *                                    SDK.
      * @return {String} the event ID
      */
-    private getCurrentReadReceipt(ignoreSynthesized = false): string {
+    private getCurrentReadReceipt(ignoreSynthesized = false): string | null {
         const client = MatrixClientPeg.get();
         // the client can be null on logout
         if (client == null) {
             return null;
         }
 
         const myUserId = client.credentials.userId;
-        return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized);
+        const receiptStore = this.props.timelineSet.thread ?? this.props.timelineSet.room;
+        return receiptStore.getEventReadUpTo(myUserId, ignoreSynthesized);
     }
 
     private setReadMarker(eventId: string, eventTs: number, inhibitSetState = false): void {

src/components/views/rooms/EventTile.tsx

@@ -1333,6 +1333,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                         <a href={permalink} onClick={this.onPermalinkClicked}>
                             { timestamp }
                         </a>
+                        { msgOption }
                     </div>,
                     reactionsRow,
                 ]);

src/components/views/settings/Notifications.tsx

@@ -398,12 +398,13 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
     };
 
     private onClearNotificationsClicked = () => {
-        MatrixClientPeg.get().getRooms().forEach(r => {
+        const client = MatrixClientPeg.get();
+        client.getRooms().forEach(r => {
             if (r.getUnreadNotificationCount() > 0) {
                 const events = r.getLiveTimeline().getEvents();
                 if (events.length) {
                     // noinspection JSIgnoredPromiseFromCall
-                    MatrixClientPeg.get().sendReadReceipt(events[events.length - 1]);
+                    client.sendReadReceipt(events[events.length - 1]);
                 }
             }
         });