2015-09-18 16:34:36 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-09-18 16:34:36 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
2017-09-27 18:18:15 +03:00
|
|
|
import React from "react";
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2017-09-27 18:18:15 +03:00
|
|
|
import {ContentRepo} from "matrix-js-sdk";
|
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
|
|
|
import sdk from "../../../index";
|
2015-09-18 16:34:36 +03:00
|
|
|
|
2015-11-26 15:02:31 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomAvatar',
|
|
|
|
|
2016-03-02 14:59:17 +03:00
|
|
|
// Room may be left unset here, but if it is,
|
|
|
|
// oobData.avatarUrl should be set (else there
|
|
|
|
// would be nowhere to get the avatar from)
|
2016-01-15 19:13:25 +03:00
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
room: PropTypes.object,
|
|
|
|
oobData: PropTypes.object,
|
|
|
|
width: PropTypes.number,
|
|
|
|
height: PropTypes.number,
|
|
|
|
resizeMethod: PropTypes.string,
|
2016-01-15 19:13:25 +03:00
|
|
|
},
|
|
|
|
|
2015-09-18 16:34:36 +03:00
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
2015-10-11 04:08:39 +03:00
|
|
|
width: 36,
|
|
|
|
height: 36,
|
2016-03-01 21:23:57 +03:00
|
|
|
resizeMethod: 'crop',
|
|
|
|
oobData: {},
|
2017-01-20 17:22:27 +03:00
|
|
|
};
|
2015-09-18 16:34:36 +03:00
|
|
|
},
|
|
|
|
|
2015-10-22 15:08:35 +03:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-09-27 18:18:15 +03:00
|
|
|
urls: this.getImageUrls(this.props),
|
2015-10-22 15:08:35 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
componentWillMount: function() {
|
|
|
|
MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
2018-03-14 17:55:36 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
if (cli) {
|
|
|
|
cli.removeListener("RoomState.events", this.onRoomStateEvents);
|
|
|
|
}
|
2018-03-14 17:29:55 +03:00
|
|
|
},
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
componentWillReceiveProps: function(newProps) {
|
|
|
|
this.setState({
|
2017-09-27 18:18:15 +03:00
|
|
|
urls: this.getImageUrls(newProps),
|
2017-01-20 17:22:27 +03:00
|
|
|
});
|
2016-01-15 20:05:05 +03:00
|
|
|
},
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
onRoomStateEvents: function(ev) {
|
2018-04-03 19:35:34 +03:00
|
|
|
if (!this.props.room ||
|
|
|
|
ev.getRoomId() !== this.props.room.roomId ||
|
2018-03-14 17:29:55 +03:00
|
|
|
ev.getType() !== 'm.room.avatar'
|
|
|
|
) return;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
urls: this.getImageUrls(this.props),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
getImageUrls: function(props) {
|
|
|
|
return [
|
2016-03-01 21:23:57 +03:00
|
|
|
ContentRepo.getHttpUriForMxc(
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
|
|
|
props.oobData.avatarUrl,
|
2017-04-27 13:38:03 +03:00
|
|
|
Math.floor(props.width * window.devicePixelRatio),
|
|
|
|
Math.floor(props.height * window.devicePixelRatio),
|
2017-09-27 18:18:15 +03:00
|
|
|
props.resizeMethod,
|
2016-03-01 21:23:57 +03:00
|
|
|
), // highest priority
|
|
|
|
this.getRoomAvatarUrl(props),
|
2017-09-27 18:18:15 +03:00
|
|
|
this.getOneToOneAvatar(props), // lowest priority
|
2016-01-15 20:05:05 +03:00
|
|
|
].filter(function(url) {
|
2016-03-03 19:16:40 +03:00
|
|
|
return (url != null && url != "");
|
2016-01-15 20:05:05 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
getRoomAvatarUrl: function(props) {
|
2017-07-11 16:31:07 +03:00
|
|
|
if (!props.room) return null;
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
return props.room.getAvatarUrl(
|
2015-10-20 12:30:58 +03:00
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
2017-04-27 13:38:03 +03:00
|
|
|
Math.floor(props.width * window.devicePixelRatio),
|
|
|
|
Math.floor(props.height * window.devicePixelRatio),
|
2017-04-21 01:05:52 +03:00
|
|
|
props.resizeMethod,
|
2017-09-27 18:18:15 +03:00
|
|
|
false,
|
2015-09-18 16:34:36 +03:00
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
getOneToOneAvatar: function(props) {
|
2017-07-11 16:31:07 +03:00
|
|
|
if (!props.room) return null;
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2017-09-27 18:18:15 +03:00
|
|
|
const mlist = props.room.currentState.members;
|
|
|
|
const userIds = [];
|
2018-02-06 19:46:25 +03:00
|
|
|
const leftUserIds = [];
|
2016-01-22 14:11:56 +03:00
|
|
|
// for .. in optimisation to return early if there are >2 keys
|
2017-09-27 18:18:15 +03:00
|
|
|
for (const uid in mlist) {
|
2016-01-22 14:11:56 +03:00
|
|
|
if (mlist.hasOwnProperty(uid)) {
|
2016-12-19 21:41:34 +03:00
|
|
|
if (["join", "invite"].includes(mlist[uid].membership)) {
|
|
|
|
userIds.push(uid);
|
|
|
|
} else {
|
|
|
|
leftUserIds.push(uid);
|
|
|
|
}
|
2016-01-22 14:11:56 +03:00
|
|
|
}
|
|
|
|
if (userIds.length > 2) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
2015-10-22 15:08:35 +03:00
|
|
|
|
|
|
|
if (userIds.length == 2) {
|
2017-09-27 18:18:15 +03:00
|
|
|
let theOtherGuy = null;
|
2016-01-22 14:11:56 +03:00
|
|
|
if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
|
|
|
|
theOtherGuy = mlist[userIds[1]];
|
2015-10-22 15:08:35 +03:00
|
|
|
} else {
|
2016-01-22 14:11:56 +03:00
|
|
|
theOtherGuy = mlist[userIds[0]];
|
2015-10-22 15:08:35 +03:00
|
|
|
}
|
|
|
|
return theOtherGuy.getAvatarUrl(
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
2017-04-27 13:38:03 +03:00
|
|
|
Math.floor(props.width * window.devicePixelRatio),
|
|
|
|
Math.floor(props.height * window.devicePixelRatio),
|
2017-04-21 01:05:52 +03:00
|
|
|
props.resizeMethod,
|
2017-09-27 18:18:15 +03:00
|
|
|
false,
|
2015-10-22 15:08:35 +03:00
|
|
|
);
|
|
|
|
} else if (userIds.length == 1) {
|
2016-12-19 21:41:34 +03:00
|
|
|
// The other 1-1 user left, leaving just the current user, so show the left user's avatar
|
|
|
|
if (leftUserIds.length === 1) {
|
|
|
|
return mlist[leftUserIds[0]].getAvatarUrl(
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
|
|
|
props.width, props.height, props.resizeMethod,
|
2018-02-07 21:57:32 +03:00
|
|
|
false,
|
2016-12-19 21:41:34 +03:00
|
|
|
);
|
|
|
|
}
|
2016-01-22 14:11:56 +03:00
|
|
|
return mlist[userIds[0]].getAvatarUrl(
|
2015-10-22 15:08:35 +03:00
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
2017-04-27 13:38:03 +03:00
|
|
|
Math.floor(props.width * window.devicePixelRatio),
|
|
|
|
Math.floor(props.height * window.devicePixelRatio),
|
2017-04-21 01:05:52 +03:00
|
|
|
props.resizeMethod,
|
2017-09-27 18:18:15 +03:00
|
|
|
false,
|
2015-10-22 15:08:35 +03:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
2015-09-18 16:34:36 +03:00
|
|
|
},
|
|
|
|
|
2015-11-26 15:02:31 +03:00
|
|
|
render: function() {
|
2017-09-27 18:18:15 +03:00
|
|
|
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2017-09-27 18:18:15 +03:00
|
|
|
const {room, oobData, ...otherProps} = this.props;
|
2016-07-27 13:38:04 +03:00
|
|
|
|
2017-09-27 18:18:15 +03:00
|
|
|
const roomName = room ? room.name : oobData.name;
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2016-01-15 19:13:25 +03:00
|
|
|
return (
|
2016-07-27 13:38:04 +03:00
|
|
|
<BaseAvatar {...otherProps} name={roomName}
|
|
|
|
idName={room ? room.roomId : null}
|
2016-03-01 21:23:57 +03:00
|
|
|
urls={this.state.urls} />
|
2016-01-15 19:13:25 +03:00
|
|
|
);
|
2017-09-27 18:18:15 +03:00
|
|
|
},
|
2015-11-26 15:02:31 +03:00
|
|
|
});
|