diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 9644817..7a075d8 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/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={( { toggleMarkdown(isMarkdown); updateState({}); }} + onToggle={() => { toggleMarkdown(); updateState({}); }} /> )} content={Format messages with markdown syntax before sending.} /> + { toggleMembershipEvents(); updateState({}); }} + /> + )} + content={Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)} + /> + { toggleNickAvatarEvents(); updateState({}); }} + /> + )} + content={Hide nick and avatar change messages from room timeline.} + /> ); } diff --git a/src/client/action/settings.js b/src/client/action/settings.js index beac851..d868c15 100644 --- a/src/client/action/settings.js +++ b/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 { - toggleMarkdown, - togglePeopleDrawer, -}; +export function toggleMembershipEvents() { + appDispatcher.dispatch({ + type: cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT, + }); +} + +export function toggleNickAvatarEvents() { + appDispatcher.dispatch({ + type: cons.actions.settings.TOGGLE_NICKAVATAR_EVENT, + }); +} diff --git a/src/client/state/RoomTimeline.js b/src/client/state/RoomTimeline.js index 24e1b2e..014b63d 100644 --- a/src/client/state/RoomTimeline.js +++ b/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); diff --git a/src/client/state/cons.js b/src/client/state/cons.js index df8b5fe..8fdf2cb 100644 --- a/src/client/state/cons.js +++ b/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', }, }, }; diff --git a/src/client/state/settings.js b/src/client/state/settings.js index 2c19690..ba31fa8 100644 --- a/src/client/state/settings.js +++ b/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]?.();