2018-12-13 04:03:30 +03:00
|
|
|
/*
|
|
|
|
Copyright 2018 New Vector 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';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
|
|
|
import MemberAvatar from '../avatars/MemberAvatar';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import * as ContextualMenu from "../../structures/ContextualMenu";
|
2018-12-13 08:26:39 +03:00
|
|
|
import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
|
2018-12-19 01:11:08 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2018-12-13 04:03:30 +03:00
|
|
|
|
2018-12-19 01:11:08 +03:00
|
|
|
export default class MemberStatusMessageAvatar extends React.Component {
|
2018-12-18 20:53:37 +03:00
|
|
|
static propTypes = {
|
|
|
|
member: PropTypes.object.isRequired,
|
|
|
|
width: PropTypes.number,
|
|
|
|
height: PropTypes.number,
|
|
|
|
resizeMethod: PropTypes.string,
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
width: 40,
|
|
|
|
height: 40,
|
|
|
|
resizeMethod: 'crop',
|
|
|
|
};
|
|
|
|
|
2018-12-13 04:03:30 +03:00
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
|
|
|
|
throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
|
|
|
|
|
|
|
|
if (this.props.member.user) {
|
2018-12-13 09:07:03 +03:00
|
|
|
this.setState({message: this.props.member.user._unstable_statusMessage});
|
2018-12-13 04:03:30 +03:00
|
|
|
} else {
|
|
|
|
this.setState({message: ""});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (MatrixClientPeg.get()) {
|
|
|
|
MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-12-18 20:53:37 +03:00
|
|
|
_onRoomStateEvents = (ev, state) => {
|
2018-12-13 04:03:30 +03:00
|
|
|
if (ev.getStateKey() !== MatrixClientPeg.get().getUserId()) return;
|
|
|
|
if (ev.getType() !== "im.vector.user_status") return;
|
2018-12-13 09:07:03 +03:00
|
|
|
// TODO: We should be relying on `this.props.member.user._unstable_statusMessage`
|
2018-12-19 20:21:43 +03:00
|
|
|
// We don't currently because the js-sdk doesn't emit a specific event for this
|
|
|
|
// change, and we don't want to race it. This should be improved when we rip out
|
|
|
|
// the im.vector.user_status stuff and replace it with a complete solution.
|
2018-12-13 04:03:30 +03:00
|
|
|
this.setState({message: ev.getContent()["status"]});
|
2018-12-18 20:53:37 +03:00
|
|
|
};
|
2018-12-13 04:03:30 +03:00
|
|
|
|
2018-12-18 20:53:37 +03:00
|
|
|
_onClick = (e) => {
|
2018-12-13 04:03:30 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
const elementRect = e.target.getBoundingClientRect();
|
|
|
|
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
|
|
|
const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
|
|
|
|
const chevronOffset = 12;
|
|
|
|
let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
|
|
|
|
y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
|
|
|
|
|
2018-12-13 08:26:39 +03:00
|
|
|
ContextualMenu.createMenu(StatusMessageContextMenu, {
|
2018-12-13 04:03:30 +03:00
|
|
|
chevronOffset: chevronOffset,
|
|
|
|
chevronFace: 'bottom',
|
|
|
|
left: x,
|
|
|
|
top: y,
|
|
|
|
menuWidth: 190,
|
2018-12-13 08:26:39 +03:00
|
|
|
user: this.props.member.user,
|
2018-12-13 04:03:30 +03:00
|
|
|
});
|
2018-12-18 20:53:37 +03:00
|
|
|
};
|
2018-12-13 04:03:30 +03:00
|
|
|
|
|
|
|
render() {
|
2019-01-14 19:26:11 +03:00
|
|
|
const customStatusFeatureEnabled =
|
|
|
|
SettingsStore.isFeatureEnabled("feature_custom_status");
|
|
|
|
|
|
|
|
let onClick = null;
|
|
|
|
let hasStatus = false;
|
2018-12-19 01:11:08 +03:00
|
|
|
|
2019-01-14 19:26:11 +03:00
|
|
|
if (customStatusFeatureEnabled) {
|
|
|
|
onClick = this._onClick;
|
|
|
|
if (this.props.member.user) {
|
|
|
|
hasStatus = !!this.props.member.user._unstable_statusMessage;
|
|
|
|
}
|
|
|
|
}
|
2018-12-13 04:03:30 +03:00
|
|
|
|
|
|
|
const classes = classNames({
|
|
|
|
"mx_MemberStatusMessageAvatar": true,
|
|
|
|
"mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
|
|
|
|
});
|
|
|
|
|
2019-01-14 19:26:11 +03:00
|
|
|
return <AccessibleButton onClick={onClick} className={classes} element="div">
|
2018-12-13 04:03:30 +03:00
|
|
|
<MemberAvatar member={this.props.member}
|
|
|
|
width={this.props.width}
|
|
|
|
height={this.props.height}
|
2018-12-13 08:26:39 +03:00
|
|
|
resizeMethod={this.props.resizeMethod} />
|
2018-12-13 04:03:30 +03:00
|
|
|
</AccessibleButton>;
|
|
|
|
}
|
|
|
|
}
|