nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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`
This commit is contained in:
Florian Duros
2025-12-05 12:52:41 +01:00
committed by GitHub
parent 5607291f1e
commit 242f2deb64
7 changed files with 190 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
test/unit-tests/components/structures/RoomView-test.tsx
View File

@@ -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());

51
test/unit-tests/components/structures/TimelinePanel-test.tsx
View File

@@ -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");

49
test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@@ -363,7 +363,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_jb_"
aria-labelledby="_r_o5_"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -939,6 +939,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -1127,6 +1128,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
@@ -1166,6 +1168,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -1189,6 +1192,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
@@ -1435,6 +1439,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
<DocumentFragment>
<div
class="mx_RoomView"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -1623,6 +1628,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
@@ -1869,6 +1875,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -2057,6 +2064,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
@@ -2303,6 +2311,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<DocumentFragment>
<div
class="mx_RoomView"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -2371,7 +2380,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_ab_"
aria-labelledby="_r_f5_"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2398,7 +2407,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_ag_"
aria-labelledby="_r_fa_"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2413,7 +2422,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Threads"
aria-labelledby="_r_al_"
aria-labelledby="_r_ff_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -2440,7 +2449,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Room info"
aria-labelledby="_r_aq_"
aria-labelledby="_r_fk_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -2470,7 +2479,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
>
<div
aria-label="0 members"
aria-labelledby="_r_av_"
aria-labelledby="_r_fp_"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -2491,6 +2500,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
data-testid="timeline"
/>
<div
aria-label="Room status bar"
@@ -2515,6 +2525,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<DocumentFragment>
<div
class="mx_RoomView"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -2583,7 +2594,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_ab_"
aria-labelledby="_r_f5_"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2610,7 +2621,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_ag_"
aria-labelledby="_r_fa_"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2625,7 +2636,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Threads"
aria-labelledby="_r_al_"
aria-labelledby="_r_ff_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -2652,7 +2663,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Room info"
aria-labelledby="_r_aq_"
aria-labelledby="_r_fk_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -2682,7 +2693,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
>
<div
aria-label="0 members"
aria-labelledby="_r_av_"
aria-labelledby="_r_fp_"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -2703,6 +2714,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
@@ -2750,7 +2762,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
tabindex="0"
>
<div
aria-labelledby="_r_be_"
aria-labelledby="_r_g8_"
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
data-testid="e2e-icon"
>
@@ -2977,6 +2989,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
<DocumentFragment>
<div
class="mx_RoomView mx_RoomView_immersive"
tabindex="-1"
>
<canvas
aria-hidden="true"
@@ -3033,7 +3046,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Chat"
aria-labelledby="_r_fd_"
aria-labelledby="_r_k7_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -3060,7 +3073,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="_r_fi_"
aria-labelledby="_r_kc_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -3087,7 +3100,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="_r_fn_"
aria-labelledby="_r_kh_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -3117,7 +3130,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
>
<div
aria-label="0 members"
aria-labelledby="_r_fs_"
aria-labelledby="_r_km_"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -3191,7 +3204,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</p>
</div>
<button
aria-labelledby="_r_g5_"
aria-labelledby="_r_kv_"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -3251,7 +3264,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_ge_"
aria-labelledby="_r_l8_"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"