Add option to enable read receipt and marker when user interact with UI (#31353)

* feat(room view): add `enableReadReceiptsAndMarkersOnActivity` props

For the multiroom module, we display several room views at the same
time. In order to avoid all the rooms to send read receipts and markers
automatically when we are interacting with the UI, we add
`enableReadReceiptsAndMarkersOnActivity`props.

When at false, the timeline doesn't listen to user activity to send
these receipts. Only when the room is focused, marker and read receipts
are updated.

* test(room view): add test for `enableReadReceiptsAndMarkersOnActivity`

* build(ew-api): update `@element-hq/element-web-module-api` to `v1.9.0`

src/components/structures/RoomView.tsx

@@ -190,6 +190,13 @@ interface IRoomProps extends RoomViewProps {
      * If true, hide the widgets
      */
     hideWidgets?: boolean;
+
+    /**
+     * If true, enable sending read receipts and markers on user activity in the room view. When the user interacts with the room view, read receipts and markers are sent.
+     * If false, the read receipts and markers are only send when the room view is focused. The user has to focus the room view in order to clear any unreads and to move the unread marker to the bottom of the view.
+     * @default true
+     */
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
 }
 
 export { MainSplitContentType };
@@ -418,6 +425,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     public static contextType = SDKContext;
     declare public context: React.ContextType<typeof SDKContext>;
 
+    public static readonly defaultProps = {
+        enableReadReceiptsAndMarkersOnActivity: true,
+    };
+
     public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
@@ -2182,6 +2193,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
     };
 
+    /**
+     * Handles the focus event on the RoomView component.
+     *
+     * Sends read receipts and updates the read marker if the
+     * disableReadReceiptsAndMarkersOnActivity prop is set.
+     */
+    private onFocus = (): void => {
+        if (this.props.enableReadReceiptsAndMarkersOnActivity) return;
+
+        this.messagePanel?.sendReadReceipts();
+        this.messagePanel?.updateReadMarker();
+    };
+
     public render(): ReactNode {
         if (!this.context.client) return null;
         const { isRoomEncrypted } = this.state;
@@ -2539,7 +2563,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     timelineSet={this.state.room.getUnfilteredTimelineSet()}
                     showReadReceipts={this.state.showReadReceipts}
                     manageReadReceipts={!this.state.isPeeking}
-                    sendReadReceiptOnLoad={!this.state.wasContextSwitch}
+                    sendReadReceiptOnLoad={
+                        !this.state.wasContextSwitch && this.props.enableReadReceiptsAndMarkersOnActivity
+                    }
                     manageReadMarkers={!this.state.isPeeking}
                     hidden={hideMessagePanel}
                     highlightedEventId={highlightedEventId}
@@ -2556,6 +2582,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     showReactions={true}
                     layout={this.state.layout}
                     editState={this.state.editState}
+                    enableReadReceiptsAndMarkersOnActivity={this.props.enableReadReceiptsAndMarkersOnActivity}
                 />
             );
         }
@@ -2622,7 +2649,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         <Measured sensor={this.roomViewBody} onMeasurement={this.onMeasurement} />
                         {auxPanel}
                         {pinnedMessageBanner}
-                        <main className={timelineClasses}>
+                        <main className={timelineClasses} data-testid="timeline">
                             <FileDropTarget
                                 parent={this.roomView.current}
                                 onFileDrop={this.onFileDrop}
@@ -2683,7 +2710,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         return (
             <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
-                <div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
+                <div
+                    className={mainClasses}
+                    ref={this.roomView}
+                    onKeyDown={this.onReactKeyDown}
+                    onFocus={this.onFocus}
+                    tabIndex={-1}
+                >
                     {showChatEffects && this.roomView.current && (
                         <EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
                     )}

src/components/structures/TimelinePanel.tsx

@@ -139,6 +139,12 @@ interface IProps {
 
     hideThreadedMessages?: boolean;
     disableGrouping?: boolean;
+
+    /**
+     * Enable updating the read receipts and markers on user activity.
+     * @default true
+     */
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
 }
 
 interface IState {
@@ -228,6 +234,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         sendReadReceiptOnLoad: true,
         hideThreadedMessages: true,
         disableGrouping: false,
+        enableReadReceiptsAndMarkersOnActivity: true,
     };
 
     private lastRRSentEventId: string | null | undefined = undefined;
@@ -302,10 +309,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
         this.props.timelineSet.room?.on(ThreadEvent.Update, this.onThreadUpdate);
 
-        if (this.props.manageReadReceipts) {
+        if (this.props.manageReadReceipts && this.props.enableReadReceiptsAndMarkersOnActivity) {
             this.updateReadReceiptOnUserActivity();
         }
-        if (this.props.manageReadMarkers) {
+        if (this.props.manageReadMarkers && this.props.enableReadReceiptsAndMarkersOnActivity) {
             this.updateReadMarkerOnUserActivity();
         }
         this.initTimeline(this.props);
@@ -1028,7 +1035,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
         );
     }
 
-    private sendReadReceipts = async (): Promise<void> => {
+    /**
+     * Sends read receipts and fully read markers as appropriate.
+     */
+    public sendReadReceipts = async (): Promise<void> => {
         if (SettingsStore.getValue("lowBandwidth")) return;
         if (!this.messagePanel.current) return;
         if (!this.props.manageReadReceipts) return;
@@ -1134,9 +1144,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
         }
     }
 
-    // if the read marker is on the screen, we can now assume we've caught up to the end
-    // of the screen, so move the marker down to the bottom of the screen.
-    private updateReadMarker = async (): Promise<void> => {
+    /**
+     * Move the marker to the bottom of the screen.
+     * If the read marker is on the screen, we can now assume we've caught up to the end
+     * of the screen, so move the marker down to the bottom of the screen.
+     */
+    public updateReadMarker = async (): Promise<void> => {
         if (!this.props.manageReadMarkers) return;
         if (this.getReadMarkerPosition() === 1) {
             // the read marker is at an event below the viewport,