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.
|
|
|
|
*/
|
2020-07-07 00:42:46 +03:00
|
|
|
import React from 'react';
|
|
|
|
import Room from 'matrix-js-sdk/src/models/room';
|
|
|
|
import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
|
|
|
|
|
|
|
|
import BaseAvatar from './BaseAvatar';
|
|
|
|
import ImageView from '../elements/ImageView';
|
|
|
|
import {MatrixClientPeg} from '../../../MatrixClientPeg';
|
2018-04-21 06:47:31 +03:00
|
|
|
import Modal from '../../../Modal';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as Avatar from '../../../Avatar';
|
2015-11-26 15:02:31 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
interface IProps {
|
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)
|
2020-07-07 00:42:46 +03:00
|
|
|
room?: Room;
|
|
|
|
// TODO: type when js-sdk has types
|
|
|
|
oobData?: any;
|
|
|
|
width?: number;
|
|
|
|
height?: number;
|
|
|
|
resizeMethod?: string;
|
|
|
|
viewAvatarOnClick?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
|
|
|
urls: string[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class RoomAvatar extends React.Component<IProps, IState> {
|
|
|
|
public static defaultProps = {
|
|
|
|
width: 36,
|
|
|
|
height: 36,
|
|
|
|
resizeMethod: 'crop',
|
|
|
|
oobData: {},
|
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
urls: RoomAvatar.getImageUrls(this.props),
|
2020-07-07 17:40:05 +03:00
|
|
|
};
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
2015-10-22 15:08:35 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
public componentDidMount() {
|
2018-03-14 17:29:55 +03:00
|
|
|
MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
2018-03-14 17:29:55 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
public componentWillUnmount() {
|
2018-03-14 17:55:36 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
if (cli) {
|
|
|
|
cli.removeListener("RoomState.events", this.onRoomStateEvents);
|
|
|
|
}
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
2018-03-14 17:29:55 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
public static getDerivedStateFromProps(nextProps: IProps): IState {
|
|
|
|
return {
|
|
|
|
urls: RoomAvatar.getImageUrls(nextProps),
|
|
|
|
};
|
|
|
|
}
|
2016-01-15 20:05:05 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
// TODO: type when js-sdk has types
|
|
|
|
private onRoomStateEvents = (ev: any) => {
|
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({
|
2020-07-07 00:42:46 +03:00
|
|
|
urls: RoomAvatar.getImageUrls(this.props),
|
2018-03-14 17:29:55 +03:00
|
|
|
});
|
2020-07-07 17:40:05 +03:00
|
|
|
};
|
2018-03-14 17:29:55 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
private static getImageUrls(props: IProps): string[] {
|
2016-01-15 20:05:05 +03:00
|
|
|
return [
|
2020-01-03 22:29:22 +03:00
|
|
|
getHttpUriForMxc(
|
2016-03-01 21:23:57 +03:00
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
2020-07-07 00:42:46 +03:00
|
|
|
// Default props don't play nicely with getDerivedStateFromProps
|
|
|
|
//props.oobData !== undefined ? props.oobData.avatarUrl : {},
|
2016-03-01 21:23:57 +03:00
|
|
|
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
|
2020-07-07 00:42:46 +03:00
|
|
|
RoomAvatar.getRoomAvatarUrl(props),
|
2016-01-15 20:05:05 +03:00
|
|
|
].filter(function(url) {
|
2020-07-07 17:40:05 +03:00
|
|
|
return (url !== null && url !== "");
|
2016-01-15 20:05:05 +03:00
|
|
|
});
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
2016-01-15 20:05:05 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
private static getRoomAvatarUrl(props: IProps): string {
|
2017-07-11 16:31:07 +03:00
|
|
|
if (!props.room) return null;
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2019-05-20 16:33:26 +03:00
|
|
|
return Avatar.avatarUrlForRoom(
|
|
|
|
props.room,
|
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,
|
2015-09-18 16:34:36 +03:00
|
|
|
);
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
2015-09-18 16:34:36 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
private onRoomAvatarClick = () => {
|
2020-08-21 12:36:57 +03:00
|
|
|
const avatarUrl = Avatar.avatarUrlForRoom(
|
|
|
|
this.props.room,
|
|
|
|
null,
|
|
|
|
null,
|
|
|
|
null,
|
|
|
|
);
|
2018-04-21 06:47:31 +03:00
|
|
|
const params = {
|
|
|
|
src: avatarUrl,
|
|
|
|
name: this.props.room.name,
|
|
|
|
};
|
|
|
|
|
|
|
|
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
|
2020-07-07 17:40:05 +03:00
|
|
|
};
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2020-07-07 00:42:46 +03:00
|
|
|
public render() {
|
2018-05-06 01:25:50 +03:00
|
|
|
const {room, oobData, viewAvatarOnClick, ...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 (
|
2020-07-12 20:40:24 +03:00
|
|
|
<BaseAvatar {...otherProps}
|
|
|
|
name={roomName}
|
2016-07-27 13:38:04 +03:00
|
|
|
idName={room ? room.roomId : null}
|
2018-04-21 06:47:31 +03:00
|
|
|
urls={this.state.urls}
|
2020-07-12 20:40:24 +03:00
|
|
|
onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : null}
|
2020-07-07 00:42:46 +03:00
|
|
|
/>
|
2016-01-15 19:13:25 +03:00
|
|
|
);
|
2020-07-07 00:42:46 +03:00
|
|
|
}
|
|
|
|
}
|