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`

test/unit-tests/components/structures/TimelinePanel-test.tsx

@@ -51,6 +51,7 @@ import { Action } from "../../../../src/dispatcher/actions";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import type Timer from "../../../../src/utils/Timer";
 
 // ScrollPanel calls this, but jsdom doesn't mock it for us
 HTMLDivElement.prototype.scrollBy = () => {};
@@ -369,6 +370,56 @@ describe("TimelinePanel", () => {
         });
     });
 
+    describe("enableReadReceiptsAndMarkersOnActivity", () => {
+        it.each([
+            {
+                enabled: false,
+                testName: "should not set up activity timers when disabled",
+                checkCall: (readReceiptTimer: Timer | null, readMarkerTimer: Timer | null) => {
+                    expect(readReceiptTimer).toBeNull();
+                    expect(readMarkerTimer).toBeNull();
+                },
+            },
+            {
+                enabled: true,
+                testName: "should set up activity timers when enabled",
+                checkCall: (readReceiptTimer: Timer | null, readMarkerTimer: Timer | null) => {
+                    expect(readReceiptTimer).toBeTruthy();
+                    expect(readMarkerTimer).toBeTruthy();
+                },
+            },
+        ])("$testName", async ({ enabled, checkCall }) => {
+            const room = mkRoom(client, "roomId");
+            const events = mockEvents(room);
+            const [, timelineSet] = mkTimeline(room, events);
+
+            let timelinePanel: TimelinePanel | null = null;
+
+            render(
+                <TimelinePanel
+                    timelineSet={timelineSet}
+                    manageReadMarkers={true}
+                    manageReadReceipts={true}
+                    enableReadReceiptsAndMarkersOnActivity={enabled}
+                    ref={(ref) => {
+                        timelinePanel = ref;
+                    }}
+                />,
+                clientAndSDKContextRenderOptions(client, sdkContext),
+            );
+
+            await waitFor(() => expect(timelinePanel).toBeTruthy());
+
+            // Check if the activity timers were set up
+            // @ts-ignore - accessing private property for testing
+            const readReceiptTimer = timelinePanel!.readReceiptActivityTimer;
+            // @ts-ignore - accessing private property for testing
+            const readMarkerTimer = timelinePanel!.readMarkerActivityTimer;
+
+            checkCall(readReceiptTimer, readMarkerTimer);
+        });
+    });
+
     it("should scroll event into view when props.eventId changes", () => {
         const client = MatrixClientPeg.safeGet();
         const room = mkRoom(client, "roomId");