Add btn to hide membership events from timeline

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-12 20:53:32 +05:30
parent ecb7d5ef10
commit 90c6b18cbb
5 changed files with 84 additions and 8 deletions

View file

@ -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>
);
}

View file

@ -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,
});
}

View file

@ -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);

View file

@ -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',
},
},
};

View file

@ -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]?.();