Add btn to hide membership events from timeline

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/settings/Settings.jsx

@@ -5,7 +5,7 @@ import './Settings.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
-import { toggleMarkdown } from '../../../client/action/settings';
+import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
@@ -66,11 +66,31 @@ function AppearanceSection() {
         options={(
           <Toggle
             isActive={settings.isMarkdown}
-            onToggle={(isMarkdown) => { toggleMarkdown(isMarkdown); updateState({}); }}
+            onToggle={() => { toggleMarkdown(); updateState({}); }}
           />
         )}
         content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
       />
+      <SettingTile
+        title="Hide membership events"
+        options={(
+          <Toggle
+            isActive={settings.hideMembershipEvents}
+            onToggle={() => { toggleMembershipEvents(); updateState({}); }}
+          />
+        )}
+        content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
+      />
+      <SettingTile
+        title="Hide nick/avatar events"
+        options={(
+          <Toggle
+            isActive={settings.hideNickAvatarEvents}
+            onToggle={() => { toggleNickAvatarEvents(); updateState({}); }}
+          />
+        )}
+        content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
+      />
     </div>
   );
 }

src/client/action/settings.js

@@ -1,19 +1,26 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-function toggleMarkdown() {
+export function toggleMarkdown() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_MARKDOWN,
   });
 }
 
-function togglePeopleDrawer() {
+export function togglePeopleDrawer() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,
   });
 }
 
-export {
+export function toggleMembershipEvents() {
-  toggleMarkdown,
+  appDispatcher.dispatch({
-  togglePeopleDrawer,
+    type: cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT,
-};
+  });
+}
+
+export function toggleNickAvatarEvents() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_NICKAVATAR_EVENT,
+  });
+}

src/client/state/RoomTimeline.js

@@ -2,6 +2,8 @@ import EventEmitter from 'events';
 import initMatrix from '../initMatrix';
 import cons from './cons';
 
+import settings from './settings';
+
 function isEdited(mEvent) {
   return mEvent.getRelation()?.rel_type === 'm.replace';
 }
@@ -110,6 +112,19 @@ class RoomTimeline extends EventEmitter {
   }
 
   addToTimeline(mEvent) {
+    if (mEvent.getType() === 'm.room.member' && (settings.hideMembershipEvents || settings.hideNickAvatarEvents)) {
+      const content = mEvent.getContent();
+      const prevContent = mEvent.getPrevContent();
+      const { membership } = content;
+
+      if (settings.hideMembershipEvents) {
+        if (membership === 'invite' || membership === 'ban' || membership === 'leave') return;
+        if (prevContent.membership !== 'join') return;
+      }
+      if (settings.hideNickAvatarEvents) {
+        if (membership === 'join' && prevContent.membership === 'join') return;
+      }
+    }
     if (mEvent.isRedacted()) return;
     if (isReaction(mEvent)) {
       addToMap(this.reactionTimeline, mEvent);

src/client/state/cons.js

@@ -56,6 +56,8 @@ const cons = {
     settings: {
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
+      TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
+      TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
     },
   },
   events: {
@@ -109,6 +111,8 @@ const cons = {
     settings: {
       MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
+      MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
+      NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
     },
   },
 };

src/client/state/settings.js

@@ -25,6 +25,8 @@ class Settings extends EventEmitter {
 
     this.isMarkdown = this.getIsMarkdown();
     this.isPeopleDrawer = this.getIsPeopleDrawer();
+    this.hideMembershipEvents = this.getHideMembershipEvents();
+    this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
 
     this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
   }
@@ -63,6 +65,24 @@ class Settings extends EventEmitter {
     return settings.isMarkdown;
   }
 
+  getHideMembershipEvents() {
+    if (typeof this.hideMembershipEvents === 'boolean') return this.hideMembershipEvents;
+
+    const settings = getSettings();
+    if (settings === null) return false;
+    if (typeof settings.hideMembershipEvents === 'undefined') return false;
+    return settings.hideMembershipEvents;
+  }
+
+  getHideNickAvatarEvents() {
+    if (typeof this.hideNickAvatarEvents === 'boolean') return this.hideNickAvatarEvents;
+
+    const settings = getSettings();
+    if (settings === null) return false;
+    if (typeof settings.hideNickAvatarEvents === 'undefined') return false;
+    return settings.hideNickAvatarEvents;
+  }
+
   getIsPeopleDrawer() {
     if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
 
@@ -84,6 +104,16 @@ class Settings extends EventEmitter {
         setSettings('isPeopleDrawer', this.isPeopleDrawer);
         this.emit(cons.events.settings.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawer);
       },
+      [cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT]: () => {
+        this.hideMembershipEvents = !this.hideMembershipEvents;
+        setSettings('hideMembershipEvents', this.hideMembershipEvents);
+        this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
+      },
+      [cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
+        this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
+        setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
+        this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
+      },
     };
 
     actions[action.type]?.();