Send read receipts for events in thread's timeline (#7229)

src/components/structures/ThreadView.tsx

@@ -242,10 +242,11 @@ export default class ThreadView extends React.Component<IProps, IState> {
                     { this.state.thread && (
                         <TimelinePanel
                             ref={this.timelinePanelRef}
-                            showReadReceipts={false} // No RR support in thread's MVP
+                            showReadReceipts={false} // Hide the read receipts
-                            manageReadReceipts={false} // No RR support in thread's MVP
+                            // until homeservers speak threads language
-                            manageReadMarkers={false} // No RM support in thread's MVP
+                            manageReadReceipts={true}
-                            sendReadReceiptOnLoad={false} // No RR support in thread's MVP
+                            manageReadMarkers={true}
+                            sendReadReceiptOnLoad={true}
                             timelineSet={this.state?.thread?.timelineSet}
                             showUrlPreview={true}
                             tileShape={TileShape.Thread}

src/components/structures/TimelinePanel.tsx

@@ -28,7 +28,7 @@ import SettingsStore from "../../settings/SettingsStore";
 import { Layout } from "../../settings/enums/Layout";
 import { _t } from '../../languageHandler';
 import { MatrixClientPeg } from "../../MatrixClientPeg";
-import RoomContext from "../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import UserActivity from "../../UserActivity";
 import Modal from "../../Modal";
 import dis from "../../dispatcher/dispatcher";
@@ -1310,12 +1310,17 @@ class TimelinePanel extends React.Component<IProps, IState> {
     }
 
     private indexForEventId(evId: string): number | null {
-        for (let i = 0; i < this.state.events.length; ++i) {
+        /* Threads do not have server side support for read receipts and the concept
-            if (evId == this.state.events[i].getId()) {
+        is very tied to the main room timeline, we are forcing the timeline to
-                return i;
+        send read receipts for threaded events */
-            }
+        const isThreadTimeline = this.context.timelineRenderingType === TimelineRenderingType.Thread;
+        if (SettingsStore.getValue("feature_thread") && isThreadTimeline) {
+            return 0;
         }
-        return null;
+        const index = this.state.events.findIndex(ev => ev.getId() === evId);
+        return index > -1
+            ? index
+            : null;
     }
 
     private getLastDisplayedEventIndex(opts: IEventIndexOpts = {}): number | null {

src/components/views/rooms/EventTile.tsx

@@ -1294,6 +1294,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             case TileShape.Thread: {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return React.createElement(this.props.as || "li", {
+                    "ref": this.ref,
                     "className": classes,
                     "aria-live": ariaLive,
                     "aria-atomic": true,