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/RoomView-test.tsx

@@ -335,6 +335,54 @@ describe("RoomView", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    describe("enableReadReceiptsAndMarkersOnActivity", () => {
+        it.each([
+            {
+                enabled: false,
+                testName: "should send read receipts and update read marker on focus when disabled",
+                checkCall: (sendReadReceiptsSpy: jest.Mock, updateReadMarkerSpy: jest.Mock) => {
+                    expect(sendReadReceiptsSpy).toHaveBeenCalled();
+                    expect(updateReadMarkerSpy).toHaveBeenCalled();
+                },
+            },
+            {
+                enabled: true,
+                testName: "should not send read receipts and update read marker on focus when enabled",
+                checkCall: (sendReadReceiptsSpy: jest.Mock, updateReadMarkerSpy: jest.Mock) => {
+                    expect(sendReadReceiptsSpy).not.toHaveBeenCalled();
+                    expect(updateReadMarkerSpy).not.toHaveBeenCalled();
+                },
+            },
+        ])("$testName", async ({ enabled, checkCall }) => {
+            // Join the room
+            jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+            const ref = createRef<RoomView>();
+            await mountRoomView(ref, {
+                enableReadReceiptsAndMarkersOnActivity: enabled,
+            });
+
+            // Wait for the timeline to be rendered
+            await waitFor(() => expect(screen.getByTestId("timeline")).not.toBeNull());
+
+            // Get the RoomView instance and mock the messagePanel methods
+            const instance = ref.current!;
+            const sendReadReceiptsSpy = jest.fn();
+            const updateReadMarkerSpy = jest.fn();
+            // @ts-ignore - accessing private property for testing
+            instance.messagePanel = {
+                sendReadReceipts: sendReadReceiptsSpy,
+                updateReadMarker: updateReadMarkerSpy,
+            };
+
+            // Find the main RoomView div and trigger focus
+            const timeline = screen.getByTestId("timeline");
+            fireEvent.focus(timeline);
+
+            // Verify that sendReadReceipts and updateReadMarker were called or not based on the enabled state
+            checkCall(sendReadReceiptsSpy, updateReadMarkerSpy);
+        });
+    });
+
     describe("invites", () => {
         beforeEach(() => {
             const member = new RoomMember(room.roomId, cli.getSafeUserId());