Remove old code
This commit is contained in:
R Midhun Suresh
@@ -1,170 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import { _t, _td, TranslationKey } from "../../../languageHandler";
|
||||
import E2EIcon, { E2EState } from "./E2EIcon";
|
||||
import BaseAvatar from "../avatars/BaseAvatar";
|
||||
import PresenceLabel from "./PresenceLabel";
|
||||
|
||||
export enum PowerStatus {
|
||||
Admin = "admin",
|
||||
Moderator = "moderator",
|
||||
}
|
||||
|
||||
const PowerLabel: Record<PowerStatus, TranslationKey> = {
|
||||
[PowerStatus.Admin]: _td("power_level|admin"),
|
||||
[PowerStatus.Moderator]: _td("power_level|mod"),
|
||||
};
|
||||
|
||||
export type PresenceState = "offline" | "online" | "unavailable" | "io.element.unreachable";
|
||||
|
||||
const PRESENCE_CLASS: Record<PresenceState, string> = {
|
||||
"offline": "mx_EntityTile_offline",
|
||||
"online": "mx_EntityTile_online",
|
||||
"unavailable": "mx_EntityTile_unavailable",
|
||||
"io.element.unreachable": "mx_EntityTile_unreachable",
|
||||
};
|
||||
|
||||
function presenceClassForMember(presenceState?: PresenceState, lastActiveAgo?: number, showPresence?: boolean): string {
|
||||
if (showPresence === false) {
|
||||
return "mx_EntityTile_online_beenactive";
|
||||
}
|
||||
|
||||
// offline is split into two categories depending on whether we have
|
||||
// a last_active_ago for them.
|
||||
if (presenceState === "offline") {
|
||||
if (lastActiveAgo) {
|
||||
return PRESENCE_CLASS["offline"] + "_beenactive";
|
||||
} else {
|
||||
return PRESENCE_CLASS["offline"] + "_neveractive";
|
||||
}
|
||||
} else if (presenceState) {
|
||||
return PRESENCE_CLASS[presenceState];
|
||||
} else {
|
||||
return PRESENCE_CLASS["offline"] + "_neveractive";
|
||||
}
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
name?: string;
|
||||
nameJSX?: JSX.Element;
|
||||
title?: string;
|
||||
avatarJsx?: JSX.Element; // <BaseAvatar />
|
||||
className?: string;
|
||||
presenceState: PresenceState;
|
||||
presenceLastActiveAgo: number;
|
||||
presenceLastTs: number;
|
||||
presenceCurrentlyActive?: boolean;
|
||||
onClick(): void;
|
||||
showPresence: boolean;
|
||||
subtextLabel?: string;
|
||||
e2eStatus?: E2EState;
|
||||
powerStatus?: PowerStatus;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
hover: boolean;
|
||||
}
|
||||
|
||||
export default class EntityTile extends React.PureComponent<IProps, IState> {
|
||||
public static defaultProps = {
|
||||
onClick: () => {},
|
||||
presenceState: "offline",
|
||||
presenceLastActiveAgo: 0,
|
||||
presenceLastTs: 0,
|
||||
showInviteButton: false,
|
||||
showPresence: true,
|
||||
};
|
||||
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
hover: false,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the PresenceLabel component if needed
|
||||
* @returns The PresenceLabel component if we need to render it, undefined otherwise
|
||||
*/
|
||||
private getPresenceLabel(): JSX.Element | undefined {
|
||||
if (!this.props.showPresence) return;
|
||||
const activeAgo = this.props.presenceLastActiveAgo
|
||||
? Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)
|
||||
: -1;
|
||||
return (
|
||||
<PresenceLabel
|
||||
activeAgo={activeAgo}
|
||||
currentlyActive={this.props.presenceCurrentlyActive}
|
||||
presenceState={this.props.presenceState}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const mainClassNames: Record<string, boolean> = {
|
||||
mx_EntityTile: true,
|
||||
};
|
||||
if (this.props.className) mainClassNames[this.props.className] = true;
|
||||
|
||||
const presenceClass = presenceClassForMember(
|
||||
this.props.presenceState,
|
||||
this.props.presenceLastActiveAgo,
|
||||
this.props.showPresence,
|
||||
);
|
||||
mainClassNames[presenceClass] = true;
|
||||
|
||||
const name = this.props.nameJSX || this.props.name;
|
||||
const nameAndPresence = (
|
||||
<div className="mx_EntityTile_details">
|
||||
<div className="mx_EntityTile_name">{name}</div>
|
||||
{this.getPresenceLabel()}
|
||||
</div>
|
||||
);
|
||||
|
||||
let powerLabel;
|
||||
const powerStatus = this.props.powerStatus;
|
||||
if (powerStatus) {
|
||||
const powerText = _t(PowerLabel[powerStatus]);
|
||||
powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
|
||||
}
|
||||
|
||||
let e2eIcon;
|
||||
const { e2eStatus } = this.props;
|
||||
if (e2eStatus) {
|
||||
e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
|
||||
}
|
||||
|
||||
const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} size="36px" aria-hidden="true" />;
|
||||
|
||||
// The wrapping div is required to make the magic mouse listener work, for some reason.
|
||||
return (
|
||||
<div>
|
||||
<AccessibleButton
|
||||
className={classNames(mainClassNames)}
|
||||
title={this.props.title}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
<div className="mx_EntityTile_avatar">
|
||||
{av}
|
||||
{e2eIcon}
|
||||
</div>
|
||||
{nameAndPresence}
|
||||
{powerLabel}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,450 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
||||
Copyright 2017, 2018 New Vector Ltd
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
MatrixEvent,
|
||||
Room,
|
||||
RoomEvent,
|
||||
RoomMember,
|
||||
RoomMemberEvent,
|
||||
RoomState,
|
||||
RoomStateEvent,
|
||||
User,
|
||||
UserEvent,
|
||||
EventType,
|
||||
ClientEvent,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { KnownMembership } from "matrix-js-sdk/src/types";
|
||||
import { throttle } from "lodash";
|
||||
import { Button, Tooltip } from "@vector-im/compound-web";
|
||||
import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import OverflowHorizontalSvg from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import { isValid3pidInvite } from "../../../RoomInvite";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import BaseCard from "../right_panel/BaseCard";
|
||||
import TruncatedList from "../elements/TruncatedList";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import SearchBox from "../../structures/SearchBox";
|
||||
import { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import EntityTile from "./EntityTile";
|
||||
import MemberTile from "./MemberTile";
|
||||
import BaseAvatar from "../avatars/BaseAvatar";
|
||||
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
|
||||
import { UIComponent } from "../../../settings/UIFeature";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import { SDKContext } from "../../../contexts/SDKContext";
|
||||
import { canInviteTo } from "../../../utils/room/canInviteTo";
|
||||
import { inviteToRoom } from "../../../utils/room/inviteToRoom";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
|
||||
const INITIAL_LOAD_NUM_MEMBERS = 30;
|
||||
const INITIAL_LOAD_NUM_INVITED = 5;
|
||||
const SHOW_MORE_INCREMENT = 100;
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
searchQuery: string;
|
||||
onClose(): void;
|
||||
onSearchQueryChanged: (query: string) => void;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
loading: boolean;
|
||||
filteredJoinedMembers: Array<RoomMember>;
|
||||
filteredInvitedMembers: Array<RoomMember | MatrixEvent>;
|
||||
canInvite: boolean;
|
||||
truncateAtJoined: number;
|
||||
truncateAtInvited: number;
|
||||
}
|
||||
|
||||
export default class MemberList extends React.Component<IProps, IState> {
|
||||
private readonly showPresence: boolean;
|
||||
private unmounted = false;
|
||||
|
||||
public static contextType = SDKContext;
|
||||
declare public context: React.ContextType<typeof SDKContext>;
|
||||
private tiles: Map<string, MemberTile> = new Map();
|
||||
|
||||
public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
|
||||
super(props, context);
|
||||
this.state = this.getMembersState([], []);
|
||||
this.showPresence = context?.memberListStore.isPresenceEnabled() ?? true;
|
||||
}
|
||||
|
||||
private listenForMembersChanges(): void {
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
cli.on(RoomStateEvent.Update, this.onRoomStateUpdate);
|
||||
cli.on(RoomMemberEvent.Name, this.onRoomMemberName);
|
||||
cli.on(RoomStateEvent.Events, this.onRoomStateEvent);
|
||||
// We listen for changes to the lastPresenceTs which is essentially
|
||||
// listening for all presence events (we display most of not all of
|
||||
// the information contained in presence events).
|
||||
cli.on(UserEvent.LastPresenceTs, this.onUserPresenceChange);
|
||||
cli.on(UserEvent.Presence, this.onUserPresenceChange);
|
||||
cli.on(UserEvent.CurrentlyActive, this.onUserPresenceChange);
|
||||
cli.on(ClientEvent.Room, this.onRoom); // invites & joining after peek
|
||||
cli.on(RoomEvent.MyMembership, this.onMyMembership);
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
this.unmounted = false;
|
||||
this.listenForMembersChanges();
|
||||
this.updateListNow(true);
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
this.unmounted = true;
|
||||
const cli = MatrixClientPeg.get();
|
||||
if (cli) {
|
||||
cli.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
|
||||
cli.removeListener(RoomMemberEvent.Name, this.onRoomMemberName);
|
||||
cli.removeListener(RoomEvent.MyMembership, this.onMyMembership);
|
||||
cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvent);
|
||||
cli.removeListener(ClientEvent.Room, this.onRoom);
|
||||
cli.removeListener(UserEvent.LastPresenceTs, this.onUserPresenceChange);
|
||||
cli.removeListener(UserEvent.Presence, this.onUserPresenceChange);
|
||||
cli.removeListener(UserEvent.CurrentlyActive, this.onUserPresenceChange);
|
||||
}
|
||||
|
||||
// cancel any pending calls to the rate_limited_funcs
|
||||
this.updateList.cancel();
|
||||
}
|
||||
|
||||
private get canInvite(): boolean {
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
const room = cli.getRoom(this.props.roomId);
|
||||
|
||||
return !!room && canInviteTo(room);
|
||||
}
|
||||
|
||||
private getMembersState(invitedMembers: Array<RoomMember>, joinedMembers: Array<RoomMember>): IState {
|
||||
return {
|
||||
loading: false,
|
||||
filteredJoinedMembers: joinedMembers,
|
||||
filteredInvitedMembers: invitedMembers,
|
||||
canInvite: this.canInvite,
|
||||
|
||||
// ideally we'd size this to the page height, but
|
||||
// in practice I find that a little constraining
|
||||
truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
|
||||
truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
|
||||
};
|
||||
}
|
||||
|
||||
private onUserPresenceChange = (event: MatrixEvent | undefined, user: User): void => {
|
||||
// Attach a SINGLE listener for global presence changes then locate the
|
||||
// member tile and re-render it. This is more efficient than every tile
|
||||
// ever attaching their own listener.
|
||||
const tile = this.tiles.get(user.userId);
|
||||
if (tile) {
|
||||
this.updateList(); // reorder the membership list
|
||||
}
|
||||
};
|
||||
|
||||
private onRoom = (room: Room): void => {
|
||||
if (room.roomId !== this.props.roomId) {
|
||||
return;
|
||||
}
|
||||
// We listen for room events because when we accept an invite
|
||||
// we need to wait till the room is fully populated with state
|
||||
// before refreshing the member list else we get a stale list.
|
||||
this.updateListNow(true);
|
||||
};
|
||||
|
||||
private onMyMembership = (room: Room, membership: string, oldMembership?: string): void => {
|
||||
if (
|
||||
room.roomId === this.props.roomId &&
|
||||
membership === KnownMembership.Join &&
|
||||
oldMembership !== KnownMembership.Join
|
||||
) {
|
||||
// we just joined the room, load the member list
|
||||
this.updateListNow(true);
|
||||
}
|
||||
};
|
||||
|
||||
private onRoomStateUpdate = (state: RoomState): void => {
|
||||
if (state.roomId !== this.props.roomId) return;
|
||||
this.updateList();
|
||||
};
|
||||
|
||||
private onRoomMemberName = (ev: MatrixEvent, member: RoomMember): void => {
|
||||
if (member.roomId !== this.props.roomId) {
|
||||
return;
|
||||
}
|
||||
this.updateList();
|
||||
};
|
||||
|
||||
private onRoomStateEvent = (event: MatrixEvent): void => {
|
||||
if (event.getRoomId() === this.props.roomId && event.getType() === EventType.RoomThirdPartyInvite) {
|
||||
this.updateList();
|
||||
}
|
||||
|
||||
if (this.canInvite !== this.state.canInvite) this.setState({ canInvite: this.canInvite });
|
||||
};
|
||||
|
||||
private updateList = throttle(
|
||||
() => {
|
||||
this.updateListNow(false);
|
||||
},
|
||||
500,
|
||||
{ leading: true, trailing: true },
|
||||
);
|
||||
|
||||
// XXX: exported for tests
|
||||
public async updateListNow(showLoadingSpinner?: boolean): Promise<void> {
|
||||
if (this.unmounted) {
|
||||
return;
|
||||
}
|
||||
if (showLoadingSpinner) {
|
||||
this.setState({ loading: true });
|
||||
}
|
||||
const { joined, invited } = await this.context.memberListStore.loadMemberList(
|
||||
this.props.roomId,
|
||||
this.props.searchQuery,
|
||||
);
|
||||
if (this.unmounted) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
loading: false,
|
||||
filteredJoinedMembers: joined,
|
||||
filteredInvitedMembers: invited,
|
||||
});
|
||||
}
|
||||
|
||||
private createOverflowTileJoined = (overflowCount: number, totalCount: number): JSX.Element => {
|
||||
return this.createOverflowTile(overflowCount, totalCount, this.showMoreJoinedMemberList);
|
||||
};
|
||||
|
||||
private createOverflowTileInvited = (overflowCount: number, totalCount: number): JSX.Element => {
|
||||
return this.createOverflowTile(overflowCount, totalCount, this.showMoreInvitedMemberList);
|
||||
};
|
||||
|
||||
private createOverflowTile = (overflowCount: number, totalCount: number, onClick: () => void): JSX.Element => {
|
||||
// For now we'll pretend this is any entity. It should probably be a separate tile.
|
||||
const text = _t("common|and_n_others", { count: overflowCount });
|
||||
return (
|
||||
<EntityTile
|
||||
className="mx_EntityTile_ellipsis"
|
||||
avatarJsx={<BaseAvatar url={OverflowHorizontalSvg} name="..." size="36px" />}
|
||||
name={text}
|
||||
showPresence={false}
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
private showMoreJoinedMemberList = (): void => {
|
||||
this.setState({
|
||||
truncateAtJoined: this.state.truncateAtJoined + SHOW_MORE_INCREMENT,
|
||||
});
|
||||
};
|
||||
|
||||
private showMoreInvitedMemberList = (): void => {
|
||||
this.setState({
|
||||
truncateAtInvited: this.state.truncateAtInvited + SHOW_MORE_INCREMENT,
|
||||
});
|
||||
};
|
||||
|
||||
public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
|
||||
if (prevProps.searchQuery !== this.props.searchQuery) {
|
||||
this.updateListNow(false);
|
||||
}
|
||||
}
|
||||
|
||||
private onSearchQueryChanged = (searchQuery: string): void => {
|
||||
this.props.onSearchQueryChanged(searchQuery);
|
||||
};
|
||||
|
||||
private onPending3pidInviteClick = (inviteEvent: MatrixEvent): void => {
|
||||
dis.dispatch({
|
||||
action: Action.View3pidInvite,
|
||||
event: inviteEvent,
|
||||
});
|
||||
};
|
||||
|
||||
private getPending3PidInvites(): MatrixEvent[] {
|
||||
// include 3pid invites (m.room.third_party_invite) state events.
|
||||
// The HS may have already converted these into m.room.member invites so
|
||||
// we shouldn't add them if the 3pid invite state key (token) is in the
|
||||
// member invite (content.third_party_invite.signed.token)
|
||||
const room = MatrixClientPeg.safeGet().getRoom(this.props.roomId);
|
||||
|
||||
if (room) {
|
||||
return room.currentState.getStateEvents("m.room.third_party_invite").filter(function (e) {
|
||||
if (!isValid3pidInvite(e)) return false;
|
||||
|
||||
// discard all invites which have a m.room.member event since we've
|
||||
// already added them.
|
||||
const memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey()!);
|
||||
if (memberEvent) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
private makeMemberTiles(members: Array<RoomMember | MatrixEvent>): JSX.Element[] {
|
||||
return members.map((m) => {
|
||||
if (m instanceof RoomMember) {
|
||||
// Is a Matrix invite
|
||||
return (
|
||||
<MemberTile
|
||||
key={m.userId}
|
||||
member={m}
|
||||
ref={(tile) => {
|
||||
if (tile) this.tiles.set(m.userId, tile);
|
||||
else this.tiles.delete(m.userId);
|
||||
}}
|
||||
showPresence={this.showPresence}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// Is a 3pid invite
|
||||
return (
|
||||
<EntityTile
|
||||
key={m.getStateKey()}
|
||||
name={m.getContent().display_name}
|
||||
showPresence={false}
|
||||
onClick={() => this.onPending3pidInviteClick(m)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getChildrenJoined = (start: number, end: number): Array<JSX.Element> => {
|
||||
return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
|
||||
};
|
||||
|
||||
private getChildCountJoined = (): number => this.state.filteredJoinedMembers.length;
|
||||
|
||||
private getChildrenInvited = (start: number, end: number): Array<JSX.Element> => {
|
||||
let targets = this.state.filteredInvitedMembers;
|
||||
if (end > this.state.filteredInvitedMembers.length) {
|
||||
targets = targets.concat(this.getPending3PidInvites());
|
||||
}
|
||||
|
||||
return this.makeMemberTiles(targets.slice(start, end));
|
||||
};
|
||||
|
||||
private getChildCountInvited = (): number => {
|
||||
return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length;
|
||||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
if (this.state.loading) {
|
||||
return (
|
||||
<BaseCard
|
||||
id="memberlist-panel"
|
||||
className="mx_MemberList"
|
||||
ariaLabelledBy="memberlist-panel-tab"
|
||||
role="tabpanel"
|
||||
header={_t("common|people")}
|
||||
onClose={this.props.onClose}
|
||||
>
|
||||
<Spinner />
|
||||
</BaseCard>
|
||||
);
|
||||
}
|
||||
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
const room = cli.getRoom(this.props.roomId);
|
||||
let inviteButton: JSX.Element | undefined;
|
||||
|
||||
if (room?.getMyMembership() === KnownMembership.Join && shouldShowComponent(UIComponent.InviteUsers)) {
|
||||
const inviteButtonText = room.isSpaceRoom() ? _t("space|invite_this_space") : _t("room|invite_this_room");
|
||||
|
||||
const button = (
|
||||
<Button
|
||||
size="sm"
|
||||
kind="secondary"
|
||||
className="mx_MemberList_invite"
|
||||
onClick={this.onInviteButtonClick}
|
||||
disabled={!this.state.canInvite}
|
||||
>
|
||||
<UserAddIcon width="1em" height="1em" />
|
||||
{inviteButtonText}
|
||||
</Button>
|
||||
);
|
||||
|
||||
if (this.state.canInvite) {
|
||||
inviteButton = button;
|
||||
} else {
|
||||
inviteButton = <Tooltip label={_t("member_list|invite_button_no_perms_tooltip")}>{button}</Tooltip>;
|
||||
}
|
||||
}
|
||||
|
||||
let invitedHeader;
|
||||
let invitedSection;
|
||||
if (this.getChildCountInvited() > 0) {
|
||||
invitedHeader = <h2>{_t("member_list|invited_list_heading")}</h2>;
|
||||
invitedSection = (
|
||||
<TruncatedList
|
||||
className="mx_MemberList_section mx_MemberList_invited"
|
||||
truncateAt={this.state.truncateAtInvited}
|
||||
createOverflowElement={this.createOverflowTileInvited}
|
||||
getChildren={this.getChildrenInvited}
|
||||
getChildCount={this.getChildCountInvited}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const footer = (
|
||||
<SearchBox
|
||||
className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
|
||||
placeholder={_t("member_list|filter_placeholder")}
|
||||
onSearch={this.onSearchQueryChanged}
|
||||
initialValue={this.props.searchQuery}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseCard
|
||||
id="memberlist-panel"
|
||||
className="mx_MemberList"
|
||||
ariaLabelledBy="memberlist-panel-tab"
|
||||
role="tabpanel"
|
||||
header={_t("common|people")}
|
||||
footer={footer}
|
||||
onClose={this.props.onClose}
|
||||
>
|
||||
{inviteButton}
|
||||
<div className="mx_MemberList_wrapper">
|
||||
<TruncatedList
|
||||
className="mx_MemberList_section mx_MemberList_joined"
|
||||
truncateAt={this.state.truncateAtJoined}
|
||||
createOverflowElement={this.createOverflowTileJoined}
|
||||
getChildren={this.getChildrenJoined}
|
||||
getChildCount={this.getChildCountJoined}
|
||||
/>
|
||||
{invitedHeader}
|
||||
{invitedSection}
|
||||
</div>
|
||||
</BaseCard>
|
||||
);
|
||||
}
|
||||
|
||||
private onInviteButtonClick = (ev: ButtonEvent): void => {
|
||||
PosthogTrackers.trackInteraction("WebRightPanelMemberListInviteButton", ev);
|
||||
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
const room = cli.getRoom(this.props.roomId)!;
|
||||
|
||||
inviteToRoom(room);
|
||||
};
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { RoomMember, RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
|
||||
import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
|
||||
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import EntityTile, { PowerStatus, PresenceState } from "./EntityTile";
|
||||
import MemberAvatar from "./../avatars/MemberAvatar";
|
||||
import DisambiguatedProfile from "../messages/DisambiguatedProfile";
|
||||
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
|
||||
import { E2EState } from "./E2EIcon";
|
||||
import { asyncSome } from "../../../utils/arrays";
|
||||
import { getUserDeviceIds } from "../../../utils/crypto/deviceInfo";
|
||||
|
||||
interface IProps {
|
||||
member: RoomMember;
|
||||
showPresence?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
isRoomEncrypted: boolean;
|
||||
e2eStatus?: E2EState;
|
||||
}
|
||||
|
||||
export default class MemberTile extends React.Component<IProps, IState> {
|
||||
private userLastModifiedTime?: number;
|
||||
private memberLastModifiedTime?: number;
|
||||
|
||||
public static defaultProps = {
|
||||
showPresence: true,
|
||||
};
|
||||
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isRoomEncrypted: false,
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
|
||||
const { roomId } = this.props.member;
|
||||
if (roomId) {
|
||||
const isRoomEncrypted = cli.isRoomEncrypted(roomId);
|
||||
this.setState({
|
||||
isRoomEncrypted,
|
||||
});
|
||||
if (isRoomEncrypted) {
|
||||
cli.on(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
|
||||
this.updateE2EStatus();
|
||||
} else {
|
||||
// Listen for room to become encrypted
|
||||
cli.on(RoomStateEvent.Events, this.onRoomStateEvents);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
const cli = MatrixClientPeg.get();
|
||||
|
||||
if (cli) {
|
||||
cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
|
||||
cli.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private onRoomStateEvents = (ev: MatrixEvent): void => {
|
||||
if (ev.getType() !== EventType.RoomEncryption) return;
|
||||
const { roomId } = this.props.member;
|
||||
if (ev.getRoomId() !== roomId) return;
|
||||
|
||||
// The room is encrypted now.
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
|
||||
this.setState({
|
||||
isRoomEncrypted: true,
|
||||
});
|
||||
this.updateE2EStatus();
|
||||
};
|
||||
|
||||
private onUserTrustStatusChanged = (userId: string, trustStatus: UserVerificationStatus): void => {
|
||||
if (userId !== this.props.member.userId) return;
|
||||
this.updateE2EStatus();
|
||||
};
|
||||
|
||||
private async updateE2EStatus(): Promise<void> {
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
const { userId } = this.props.member;
|
||||
const isMe = userId === cli.getUserId();
|
||||
const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId);
|
||||
if (!userTrust?.isCrossSigningVerified()) {
|
||||
this.setState({
|
||||
e2eStatus: userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const deviceIDs = await getUserDeviceIds(cli, userId);
|
||||
const anyDeviceUnverified = await asyncSome(deviceIDs, async (deviceId) => {
|
||||
// For your own devices, we use the stricter check of cross-signing
|
||||
// verification to encourage everyone to trust their own devices via
|
||||
// cross-signing so that other users can then safely trust you.
|
||||
// For other people's devices, the more general verified check that
|
||||
// includes locally verified devices can be used.
|
||||
const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, deviceId);
|
||||
return !deviceTrust || (isMe ? !deviceTrust.crossSigningVerified : !deviceTrust.isVerified());
|
||||
});
|
||||
this.setState({
|
||||
e2eStatus: anyDeviceUnverified ? E2EState.Warning : E2EState.Verified,
|
||||
});
|
||||
}
|
||||
|
||||
public shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
|
||||
if (
|
||||
this.memberLastModifiedTime === undefined ||
|
||||
this.memberLastModifiedTime < nextProps.member.getLastModifiedTime()
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
nextProps.member.user &&
|
||||
(this.userLastModifiedTime === undefined ||
|
||||
this.userLastModifiedTime < nextProps.member.user.getLastModifiedTime())
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.isRoomEncrypted !== this.state.isRoomEncrypted || nextState.e2eStatus !== this.state.e2eStatus) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private onClick = (): void => {
|
||||
dis.dispatch({
|
||||
action: Action.ViewUser,
|
||||
member: this.props.member,
|
||||
push: true,
|
||||
});
|
||||
};
|
||||
|
||||
private getDisplayName(): string {
|
||||
return this.props.member.name;
|
||||
}
|
||||
|
||||
private getPowerLabel(): string {
|
||||
return _t("member_list|power_label", {
|
||||
userName: UserIdentifierCustomisations.getDisplayUserIdentifier(this.props.member.userId, {
|
||||
roomId: this.props.member.roomId,
|
||||
}),
|
||||
powerLevelNumber: this.props.member.powerLevel,
|
||||
}).trim();
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const member = this.props.member;
|
||||
const name = this.getDisplayName();
|
||||
const presenceState = member.user?.presence as PresenceState | undefined;
|
||||
|
||||
const av = <MemberAvatar member={member} size="36px" aria-hidden="true" />;
|
||||
|
||||
if (member.user) {
|
||||
this.userLastModifiedTime = member.user.getLastModifiedTime();
|
||||
}
|
||||
this.memberLastModifiedTime = member.getLastModifiedTime();
|
||||
|
||||
const powerStatusMap = new Map([
|
||||
[100, PowerStatus.Admin],
|
||||
[50, PowerStatus.Moderator],
|
||||
]);
|
||||
|
||||
// Find the nearest power level with a badge
|
||||
let powerLevel = this.props.member.powerLevel;
|
||||
for (const [pl] of powerStatusMap) {
|
||||
if (this.props.member.powerLevel >= pl) {
|
||||
powerLevel = pl;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const powerStatus = powerStatusMap.get(powerLevel);
|
||||
|
||||
let e2eStatus: E2EState | undefined;
|
||||
if (this.state.isRoomEncrypted) {
|
||||
e2eStatus = this.state.e2eStatus;
|
||||
}
|
||||
|
||||
const nameJSX = <DisambiguatedProfile member={member} fallbackName={name || ""} />;
|
||||
|
||||
return (
|
||||
<EntityTile
|
||||
{...this.props}
|
||||
presenceState={presenceState}
|
||||
presenceLastActiveAgo={member.user ? member.user.lastActiveAgo : 0}
|
||||
presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
|
||||
presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
|
||||
avatarJsx={av}
|
||||
title={this.getPowerLabel()}
|
||||
name={name}
|
||||
nameJSX={nameJSX}
|
||||
powerStatus={powerStatus}
|
||||
showPresence={this.props.showPresence}
|
||||
e2eStatus={e2eStatus}
|
||||
onClick={this.onClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user