2016-08-09 19:10:05 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2017-08-30 12:55:25 +03:00
|
|
|
import Flair from '../elements/Flair.js';
|
2017-11-28 13:04:34 +03:00
|
|
|
import FlairStore from '../../../stores/FlairStore';
|
2019-04-17 11:21:30 +03:00
|
|
|
import {getUserNameColorClass} from '../../../utils/FormattingUtils';
|
2019-12-17 20:26:12 +03:00
|
|
|
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
2021-03-09 06:04:46 +03:00
|
|
|
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
2021-04-20 12:09:03 +03:00
|
|
|
import MatrixEvent from "matrix-js-sdk/src/models/event";
|
2016-08-09 19:10:05 +03:00
|
|
|
|
2021-04-20 12:09:03 +03:00
|
|
|
interface IProps {
|
|
|
|
mxEvent: MatrixEvent;
|
|
|
|
onClick(): void;
|
|
|
|
enableFlair: boolean;
|
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2021-04-20 12:09:03 +03:00
|
|
|
interface IState {
|
|
|
|
userGroups;
|
|
|
|
relatedGroups;
|
|
|
|
}
|
|
|
|
|
|
|
|
@replaceableComponent("views.messages.SenderProfile")
|
|
|
|
export default class SenderProfile extends React.Component<IProps, IState> {
|
2020-08-29 14:14:16 +03:00
|
|
|
static contextType = MatrixClientContext;
|
2021-04-20 12:40:50 +03:00
|
|
|
private unmounted: boolean;
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2021-04-20 12:09:03 +03:00
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props)
|
2021-05-20 20:01:38 +03:00
|
|
|
const senderId = this.props.mxEvent.getSender();
|
2021-04-20 12:09:03 +03:00
|
|
|
|
|
|
|
this.state = {
|
2021-05-20 20:01:38 +03:00
|
|
|
userGroups: FlairStore.cachedPublicisedGroups(senderId) || [],
|
2021-04-20 12:09:03 +03:00
|
|
|
relatedGroups: [],
|
|
|
|
};
|
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2020-03-31 23:14:17 +03:00
|
|
|
componentDidMount() {
|
2017-11-28 13:04:34 +03:00
|
|
|
this.unmounted = false;
|
|
|
|
this._updateRelatedGroups();
|
|
|
|
|
2021-05-20 20:01:38 +03:00
|
|
|
if (this.state.userGroups.length === 0) {
|
|
|
|
this.getPublicisedGroups();
|
|
|
|
}
|
|
|
|
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
this.context.on('RoomState.events', this.onRoomStateEvents);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.unmounted = true;
|
2019-12-17 20:26:12 +03:00
|
|
|
this.context.removeListener('RoomState.events', this.onRoomStateEvents);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2021-05-20 20:01:38 +03:00
|
|
|
async getPublicisedGroups() {
|
|
|
|
if (!this.unmounted) {
|
|
|
|
const userGroups = await FlairStore.getPublicisedGroupsCached(
|
|
|
|
this.context, this.props.mxEvent.getSender(),
|
|
|
|
);
|
|
|
|
this.setState({userGroups});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
onRoomStateEvents = event => {
|
2017-11-28 13:04:34 +03:00
|
|
|
if (event.getType() === 'm.room.related_groups' &&
|
|
|
|
event.getRoomId() === this.props.mxEvent.getRoomId()
|
|
|
|
) {
|
|
|
|
this._updateRelatedGroups();
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-11-28 13:04:34 +03:00
|
|
|
|
|
|
|
_updateRelatedGroups() {
|
|
|
|
if (this.unmounted) return;
|
2019-12-17 20:26:12 +03:00
|
|
|
const room = this.context.getRoom(this.props.mxEvent.getRoomId());
|
2018-06-23 03:22:38 +03:00
|
|
|
if (!room) return;
|
|
|
|
|
|
|
|
const relatedGroupsEvent = room.currentState.getStateEvents('m.room.related_groups', '');
|
2017-11-28 13:04:34 +03:00
|
|
|
this.setState({
|
2018-06-23 03:22:38 +03:00
|
|
|
relatedGroups: relatedGroupsEvent ? relatedGroupsEvent.getContent().groups || [] : [],
|
2017-11-28 13:04:34 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2017-11-28 18:46:23 +03:00
|
|
|
_getDisplayedGroups(userGroups, relatedGroups) {
|
|
|
|
let displayedGroups = userGroups || [];
|
|
|
|
if (relatedGroups && relatedGroups.length > 0) {
|
2018-12-25 01:46:36 +03:00
|
|
|
displayedGroups = relatedGroups.filter((groupId) => {
|
|
|
|
return displayedGroups.includes(groupId);
|
2017-11-28 18:46:23 +03:00
|
|
|
});
|
|
|
|
} else {
|
|
|
|
displayedGroups = [];
|
|
|
|
}
|
|
|
|
return displayedGroups;
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-11-28 18:46:23 +03:00
|
|
|
|
2017-11-28 13:04:34 +03:00
|
|
|
render() {
|
|
|
|
const {mxEvent} = this.props;
|
2019-04-17 11:21:30 +03:00
|
|
|
const colorClass = getUserNameColorClass(mxEvent.getSender());
|
2017-11-28 13:04:34 +03:00
|
|
|
const {msgtype} = mxEvent.getContent();
|
|
|
|
|
2021-04-20 12:09:03 +03:00
|
|
|
const disambiguate = mxEvent.sender?.disambiguate;
|
|
|
|
const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
|
|
|
|
const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
|
|
|
|
|
2017-11-28 13:04:34 +03:00
|
|
|
if (msgtype === 'm.emote') {
|
2021-05-20 20:01:38 +03:00
|
|
|
return null; // emote message must include the name so don't duplicate it
|
2017-11-16 18:24:36 +03:00
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2021-04-20 12:09:03 +03:00
|
|
|
let flair;
|
2017-11-28 18:49:11 +03:00
|
|
|
if (this.props.enableFlair) {
|
|
|
|
const displayedGroups = this._getDisplayedGroups(
|
|
|
|
this.state.userGroups, this.state.relatedGroups,
|
|
|
|
);
|
|
|
|
|
|
|
|
flair = <Flair key='flair'
|
|
|
|
userId={mxEvent.getSender()}
|
|
|
|
groups={displayedGroups}
|
|
|
|
/>;
|
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
2021-04-18 16:40:56 +03:00
|
|
|
const displayNameElement = (
|
|
|
|
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
|
2021-04-20 12:09:03 +03:00
|
|
|
{ displayName }
|
2017-11-28 13:04:34 +03:00
|
|
|
</span>
|
2021-04-18 16:40:56 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
let mxidElement;
|
|
|
|
if (disambiguate) {
|
|
|
|
mxidElement = (
|
|
|
|
<span className="mx_SenderProfile_mxid">
|
2021-04-21 18:34:03 +03:00
|
|
|
{ mxid }
|
2021-04-18 16:40:56 +03:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
2017-11-28 13:04:34 +03:00
|
|
|
|
|
|
|
return (
|
2021-06-07 20:42:48 +03:00
|
|
|
<div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
|
|
|
|
{ displayNameElement }
|
|
|
|
{ mxidElement }
|
|
|
|
{ flair }
|
2017-11-28 13:04:34 +03:00
|
|
|
</div>
|
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
|
|
|
}
|