Add option to stop sending read receipts (delabs MSC2285: private read receipts)

src/components/structures/TimelinePanel.tsx

@@ -935,25 +935,26 @@ class TimelinePanel extends React.Component<IProps, IState> {
             this.lastRMSentEventId = this.state.readMarkerEventId;
 
             const roomId = this.props.timelineSet.room.roomId;
-            const hiddenRR = SettingsStore.getValue("feature_hidden_read_receipts", roomId);
+            const sendRRs = SettingsStore.getValue("sendReadReceipts", roomId);
+
+            debuglog(
+                `Sending Read Markers for ${this.props.timelineSet.room.roomId}: `,
+                `rm=${this.state.readMarkerEventId} `,
+                `rr=${sendRRs ? lastReadEvent?.getId() : null} `,
+                `prr=${lastReadEvent?.getId()}`,
 
-            debuglog('Sending Read Markers for ',
-                this.props.timelineSet.room.roomId,
-                'rm', this.state.readMarkerEventId,
-                lastReadEvent ? 'rr ' + lastReadEvent.getId() : '',
-                ' hidden:' + hiddenRR,
             );
             MatrixClientPeg.get().setRoomReadMarkers(
                 roomId,
                 this.state.readMarkerEventId,
-                hiddenRR ? null : lastReadEvent, // Could be null, in which case no RR is sent
-                lastReadEvent, // Could be null, in which case no private RR is sent
+                sendRRs ? lastReadEvent : null, // Public read receipt (could be null)
+                lastReadEvent, // Private read receipt (could be null)
             ).catch((e) => {
                 // /read_markers API is not implemented on this HS, fallback to just RR
                 if (e.errcode === 'M_UNRECOGNIZED' && lastReadEvent) {
                     return MatrixClientPeg.get().sendReadReceipt(
                         lastReadEvent,
-                        hiddenRR ? ReceiptType.ReadPrivate : ReceiptType.Read,
+                        sendRRs ? ReceiptType.Read : ReceiptType.ReadPrivate,
                     ).catch((e) => {
                         logger.error(e);
                         this.lastRRSentEventId = undefined;
@@ -1549,8 +1550,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
         const isNodeInView = (node) => {
             if (node) {
                 const boundingRect = node.getBoundingClientRect();
-                if ((allowPartial && boundingRect.top < wrapperRect.bottom) ||
-                    (!allowPartial && boundingRect.bottom < wrapperRect.bottom)) {
+                if ((allowPartial && boundingRect.top <= wrapperRect.bottom) ||
+                    (!allowPartial && boundingRect.bottom <= wrapperRect.bottom)) {
                     return true;
                 }
             }

src/components/views/elements/SettingsFlag.tsx

@@ -33,6 +33,7 @@ interface IProps {
     // XXX: once design replaces all toggles make this the default
     useCheckbox?: boolean;
     disabled?: boolean;
+    disabledTooltipText?: string;
     onChange?(checked: boolean): void;
 }
 
@@ -103,6 +104,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         onChange={this.onChange}
                         disabled={this.props.disabled || !canChange}
                         aria-label={label}
+                        tooltip={this.props.disabled ? this.props.disabledTooltipText : null}
                     />
                 </div>
             );

src/components/views/elements/ToggleSwitch.tsx

@@ -19,6 +19,8 @@ import React from "react";
 import classNames from "classnames";
 
 import AccessibleButton from "./AccessibleButton";
+import useHover from "../../../hooks/useHover";
+import Tooltip from "./Tooltip";
 
 interface IProps {
     // Whether or not this toggle is in the 'on' position.
@@ -27,12 +29,17 @@ interface IProps {
     // Whether or not the user can interact with the switch
     disabled: boolean;
 
+    // The tooltip to show on hover
+    tooltip?: string;
+
     // Called when the checked state changes. First argument will be the new state.
     onChange(checked: boolean): void;
 }
 
 // Controlled Toggle Switch element, written with Accessibility in mind
-export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
+export default ({ checked, disabled = false, onChange, tooltip, ...props }: IProps) => {
+    const [hovered, hoverProps] = useHover();
+
     const _onClick = () => {
         if (disabled) return;
         onChange(!checked);
@@ -45,14 +52,17 @@ export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
     });
 
     return (
-        <AccessibleButton {...props}
+        <AccessibleButton
+            {...props}
+            {...hoverProps}
             className={classes}
             onClick={_onClick}
             role="switch"
             aria-checked={checked}
             aria-disabled={disabled}
         >
             <div className="mx_ToggleSwitch_ball" />
+            { hovered && tooltip && <Tooltip label={tooltip} /> }
         </AccessibleButton>
     );
 };

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -47,24 +47,18 @@ export class LabsSettingToggle extends React.Component<ILabsSettingToggleProps>
 }
 
 interface IState {
-    showHiddenReadReceipts: boolean;
     showJumpToDate: boolean;
 }
 
 export default class LabsUserSettingsTab extends React.Component<{}, IState> {
     constructor(props: {}) {
         super(props);
 
-        MatrixClientPeg.get().doesServerSupportUnstableFeature("org.matrix.msc2285").then((showHiddenReadReceipts) => {
-            this.setState({ showHiddenReadReceipts });
-        });
-
         MatrixClientPeg.get().doesServerSupportUnstableFeature("org.matrix.msc3030").then((showJumpToDate) => {
             this.setState({ showJumpToDate });
         });
 
         this.state = {
-            showHiddenReadReceipts: false,
             showJumpToDate: false,
         };
     }
@@ -113,16 +107,6 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                 />,
             );
 
-            if (this.state.showHiddenReadReceipts) {
-                groups.getOrCreate(LabGroup.Messaging, []).push(
-                    <SettingsFlag
-                        key="feature_hidden_read_receipts"
-                        name="feature_hidden_read_receipts"
-                        level={SettingLevel.DEVICE}
-                    />,
-                );
-            }
-
             if (this.state.showJumpToDate) {
                 groups.getOrCreate(LabGroup.Messaging, []).push(
                     <SettingsFlag

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -65,7 +65,6 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.useMarkdown',
         'MessageComposerInput.suggestEmoji',
-        'sendTypingNotifications',
         'MessageComposerInput.ctrlEnterToSend',
         'MessageComposerInput.surroundWith',
         'MessageComposerInput.showStickersButton',

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -73,6 +73,7 @@ interface IState {
     waitingUnignored: string[];
     managingInvites: boolean;
     invitedRoomIds: Set<string>;
+    canDisableReadReceipts: boolean;
 }
 
 export default class SecurityUserSettingsTab extends React.Component<IProps, IState> {
@@ -84,10 +85,15 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         // Get rooms we're invited to
         const invitedRoomIds = new Set(this.getInvitedRooms().map(room => room.roomId));
 
+        MatrixClientPeg.get().doesServerSupportUnstableFeature("org.matrix.msc2285").then((canDisableReadReceipts) => {
+            this.setState({ canDisableReadReceipts });
+        });
+
         this.state = {
             ignoredUserIds: MatrixClientPeg.get().getIgnoredUsers(),
             waitingUnignored: [],
             managingInvites: false,
+            canDisableReadReceipts: false,
             invitedRoomIds,
         };
     }
@@ -294,7 +300,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
             </div>;
         }
 
-        let privacySection;
+        let analytics;
         if (Analytics.canEnable() || PosthogAnalytics.instance.isEnabled()) {
             const onClickAnalyticsLearnMore = () => {
                 if (PosthogAnalytics.instance.isEnabled()) {
@@ -306,31 +312,28 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     Analytics.showDetailsModal();
                 }
             };
-            privacySection = <React.Fragment>
-                <div className="mx_SettingsTab_heading">{ _t("Privacy") }</div>
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{ _t("Analytics") }</span>
-                    <div className="mx_SettingsTab_subsectionText">
-                        <p>
-                            { _t("Share anonymous data to help us identify issues. Nothing personal. " +
-                                 "No third parties.") }
-                        </p>
-                        <p>
-                            <AccessibleButton className="mx_SettingsTab_linkBtn" onClick={onClickAnalyticsLearnMore}>
-                                { _t("Learn more") }
-                            </AccessibleButton>
-                        </p>
-                    </div>
-                    {
-                        PosthogAnalytics.instance.isEnabled() ?
-                            <SettingsFlag name="pseudonymousAnalyticsOptIn"
-                                level={SettingLevel.ACCOUNT}
-                                onChange={this.updateAnalytics} /> :
-                            <SettingsFlag name="analyticsOptIn"
-                                level={SettingLevel.DEVICE}
-                                onChange={this.updateAnalytics} />
-                    }
+            analytics = <React.Fragment>
+                <span className="mx_SettingsTab_subheading">{ _t("Analytics") }</span>
+                <div className="mx_SettingsTab_subsectionText">
+                    <p>
+                        { _t("Share anonymous data to help us identify issues. Nothing personal. " +
+                            "No third parties.") }
+                    </p>
+                    <p>
+                        <AccessibleButton className="mx_SettingsTab_linkBtn" onClick={onClickAnalyticsLearnMore}>
+                            { _t("Learn more") }
+                        </AccessibleButton>
+                    </p>
                 </div>
+                {
+                    PosthogAnalytics.instance.isEnabled() ?
+                        <SettingsFlag name="pseudonymousAnalyticsOptIn"
+                            level={SettingLevel.ACCOUNT}
+                            onChange={this.updateAnalytics} /> :
+                        <SettingsFlag name="analyticsOptIn"
+                            level={SettingLevel.DEVICE}
+                            onChange={this.updateAnalytics} />
+                }
             </React.Fragment>;
         }
 
@@ -372,7 +375,19 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     { crossSigning }
                     <CryptographyPanel />
                 </div>
-                { privacySection }
+                <div className="mx_SettingsTab_heading">{ _t("Privacy") }</div>
+                <div className="mx_SettingsTab_section">
+                    { analytics }
+                    <span className="mx_SettingsTab_subheading">{ _t("Presence") }</span>
+                    <SettingsFlag name="sendTypingNotifications" level={SettingLevel.ACCOUNT} />
+                    <SettingsFlag
+                        disabled={!this.state.canDisableReadReceipts}
+                        disabledTooltipText={_t("Your server doesn't support disabling read receipts")}
+                        name="sendReadReceipts"
+                        level={SettingLevel.ACCOUNT}
+                    />
+                </div>
+
                 { advancedSection }
             </div>
         );

src/i18n/strings/en_EN.json

@@ -901,7 +901,7 @@
     "To leave, just return to this page or click on the beta badge when you search.": "To leave, just return to this page or click on the beta badge when you search.",
     "Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
     "Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
-    "Don't send read receipts": "Don't send read receipts",
+    "Send read receipts": "Send read receipts",
     "Right-click message context menu": "Right-click message context menu",
     "Location sharing - pin drop": "Location sharing - pin drop",
     "Live Location Sharing (temporary implementation: locations persist in room history)": "Live Location Sharing (temporary implementation: locations persist in room history)",
@@ -1522,10 +1522,12 @@
     "Cross-signing": "Cross-signing",
     "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.": "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
     "Okay": "Okay",
-    "Privacy": "Privacy",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties.": "Share anonymous data to help us identify issues. Nothing personal. No third parties.",
     "Where you're signed in": "Where you're signed in",
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Manage your signed-in devices below. A device's name is visible to people you communicate with.",
+    "Privacy": "Privacy",
+    "Presence": "Presence",
+    "Your server doesn't support disabling read receipts": "Your server doesn't support disabling read receipts",
     "Sidebar": "Sidebar",
     "Spaces to show": "Spaces to show",
     "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.",

src/settings/Settings.tsx

@@ -389,10 +389,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: null,
     },
-    "feature_hidden_read_receipts": {
-        supportedLevels: LEVELS_FEATURE,
-        displayName: _td("Don't send read receipts"),
-        default: false,
+    "sendReadReceipts": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td("Send read receipts"),
+        default: true,
     },
     "feature_message_right_click_context_menu": {
         isFeature: true,