mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-12-02 16:01:10 +01:00
Code Issues Projects Releases Wiki Activity

feat(room view): add disableReadReceiptsAndMarkersOnActivity props

Browse Source 
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
`disableReadReceiptsAndMarkersOnActivity`props.

When at true, the timeline doesn't listen to user activity to send these
receipts. Only when the room is focused, marker and read receipts are
updated.
This commit is contained in:
Florian Duros 2025-11-27 16:59:47 +01:00
parent 771696e0f0
commit d85e37e938
No known key found for this signature in database
GPG Key ID: A5BBB4041B493F15
2 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/structures/RoomView.tsx
View File

@ -185,12 +185,20 @@ interface IRoomProps extends RoomViewProps {
* If true, hide the pinned messages banner
*/
hidePinnedMessageBanner?: boolean;
/**
* If true, 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.
* Otherwise, if the user interacts with the UI when the room view is displayed, read receipts and markers are sent.
*/
disableReadReceiptsAndMarkersOnActivity?: boolean;
}
export { MainSplitContentType };
export interface IRoomState {
room?: Room;
roomId?: string;
roomAlias?: string;
roomLoading: boolean;
@ -2176,6 +2184,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.disableReadReceiptsAndMarkersOnActivity) return;
this.messagePanel?.sendReadReceipts();
this.messagePanel?.updateReadMarker();
};
public render(): ReactNode {
if (!this.context.client) return null;
const { isRoomEncrypted } = this.state;
@ -2533,7 +2554,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.disableReadReceiptsAndMarkersOnActivity
}
manageReadMarkers={!this.state.isPeeking}
hidden={hideMessagePanel}
highlightedEventId={highlightedEventId}
@ -2550,6 +2573,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
showReactions={true}
layout={this.state.layout}
editState={this.state.editState}
disableReadReceiptsAndMarkersOnActivity={this.props.disableReadReceiptsAndMarkersOnActivity}
/>
);
}
@ -2677,7 +2701,7 @@ 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}>
{showChatEffects && this.roomView.current && (
<EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
)}

23
src/components/structures/TimelinePanel.tsx
View File

@ -139,6 +139,11 @@ interface IProps {
hideThreadedMessages?: boolean;
disableGrouping?: boolean;
/**
* Disable updating the read receipts and markers on user activity.
*/
disableReadReceiptsAndMarkersOnActivity?: boolean;
}
interface IState {
@ -302,10 +307,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.disableReadReceiptsAndMarkersOnActivity) {
this.updateReadReceiptOnUserActivity();
}
if (this.props.manageReadMarkers) {
if (this.props.manageReadMarkers && !this.props.disableReadReceiptsAndMarkersOnActivity) {
this.updateReadMarkerOnUserActivity();
}
this.initTimeline(this.props);
@ -1028,7 +1033,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 +1142,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,