Add typing notification and read receipt toggle

src/app/organisms/room/RoomViewInput.jsx

@@ -68,7 +68,7 @@ function RoomViewInput({
   }, []);
 
   const sendIsTyping = (isT) => {
-    mx.sendTyping(roomId, isT, isT ? TYPING_TIMEOUT : undefined);
+    if(settings.getSendTypingNotifications()) mx.sendTyping(roomId, isT, isT ? TYPING_TIMEOUT : undefined);
     isTyping = isT;
 
     if (isT === true) {

src/app/organisms/settings/Settings.jsx

@@ -7,6 +7,7 @@ import settings from '../../../client/state/settings';
 import navigation from '../../../client/state/navigation';
 import {
   toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
+  toggleTypingNotifications, toggleReadReceipts,
   toggleNotifications, toggleNotificationSounds,
 } from '../../../client/action/settings';
 import logout from '../../../client/action/logout';
@@ -108,6 +109,29 @@ function AppearanceSection() {
           content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
         />
       </div>
+      <div className="settings-appearance__card">
+        <MenuHeader>Privacy</MenuHeader>
+        <SettingTile
+          title="Typing notifications"
+          options={(
+            <Toggle
+              isActive={settings.sendTypingNotifications}
+              onToggle={() => { toggleTypingNotifications(); updateState({}); }}
+            />
+          )}
+          content={<Text variant="b3">Send typing notifications.</Text>}
+        />
+        <SettingTile
+          title="Read recipts"
+          options={(
+            <Toggle
+              isActive={settings.sendReadReceipts}
+              onToggle={() => { toggleReadReceipts(); updateState({}); }}
+            />
+          )}
+          content={<Text variant="b3">Send read receipts.</Text>}
+        />
+      </div>
     </div>
   );
 }

src/client/action/notifications.js

@@ -1,3 +1,4 @@
+import settings from '../state/settings';
 import initMatrix from '../initMatrix';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -22,5 +23,5 @@ export async function markAsRead(roomId) {
   const latestEvent = getLatestValidEvent();
   if (latestEvent === null) return;
 
-  await mx.sendReadReceipt(latestEvent);
+  if(settings.getSendReadReceipts()) await mx.sendReadReceipt(latestEvent);
 }

src/client/action/settings.js

@@ -31,6 +31,18 @@ export function toggleNickAvatarEvents() {
   });
 }
 
+export function toggleTypingNotifications() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_TYPING_NOTIFICATIONS,
+  });
+}
+
+export function toggleReadReceipts() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_READ_RECEIPTS,
+  });
+}
+
 export function toggleNotifications() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_NOTIFICATIONS,

src/client/state/cons.js

@@ -70,6 +70,8 @@ const cons = {
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
       TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
+      TOGGLE_READ_RECEIPTS: 'TOGGLE_READ_RECEIPTS',
+      TOGGLE_TYPING_NOTIFICATIONS: 'TOGGLE_TYPING_NOTIFICATIONS',
       TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
       TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS',
     },

src/client/state/settings.js

@@ -28,6 +28,8 @@ class Settings extends EventEmitter {
     this.isPeopleDrawer = this.getIsPeopleDrawer();
     this.hideMembershipEvents = this.getHideMembershipEvents();
     this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
+    this.sendTypingNotifications = this.getSendTypingNotifications();
+    this.sendReadReceipts = this.getSendReadReceipts();
     this._showNotifications = this.getShowNotifications();
     this.isNotificationSounds = this.getIsNotificationSounds();
 
@@ -103,6 +105,24 @@ class Settings extends EventEmitter {
     return settings.hideNickAvatarEvents;
   }
 
+  getSendTypingNotifications() {
+    if (typeof this.sendTypingNotifications === 'boolean') return this.sendTypingNotifications;
+
+    const settings = getSettings();
+    if (settings === null) return true;
+    if (typeof settings.sendTypingNotifications === 'undefined') return true;
+    return settings.sendTypingNotifications;
+  }
+
+  getSendReadReceipts() {
+    if (typeof this.sendReadReceipts === 'boolean') return this.sendReadReceipts;
+
+    const settings = getSettings();
+    if (settings === null) return true;
+    if (typeof settings.sendReadReceipts === 'undefined') return true;
+    return settings.sendReadReceipts;
+  }
+
   getIsPeopleDrawer() {
     if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
 
@@ -165,6 +185,16 @@ class Settings extends EventEmitter {
         setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
         this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
       },
+      [cons.actions.settings.TOGGLE_TYPING_NOTIFICATIONS]: () => {
+        this.sendTypingNotifications = !this.sendTypingNotifications;
+        setSettings('hideNickAvatarEvents', this.sendTypingNotifications);
+        this.emit(cons.events.settings.SEND_TYPING_TOGGLED, this.sendTypingNotifications);
+      },
+      [cons.actions.settings.TOGGLE_READ_RECEIPTS]: () => {
+        this.sendReadReceipts = !this.sendReadReceipts;
+        setSettings('hideNickAvatarEvents', this.sendReadReceipts);
+        this.emit(cons.events.settings.SEND_RECEIPTS_TOGGLED, this.sendReadReceipts);
+      },
       [cons.actions.settings.TOGGLE_NOTIFICATIONS]: async () => {
         if (window.Notification?.permission !== 'granted') {
           this._showNotifications = false;