Add GroupAvatar to handle fallback images etc.

And a few misc tidyups
This commit is contained in:
David Baker 2017-06-29 17:51:38 +01:00
parent d6ecec1987
commit 84e13d5437
4 changed files with 74 additions and 14 deletions

View file

@ -15,17 +15,18 @@ limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import MatrixClientPeg from '../../MatrixClientPeg';
import sdk from '../../index';
import { sanitizedHtmlNode } from '../../HtmlUtils';
import { _t } from '../../languageHandler';
module.exports = React.createClass({
export default React.createClass({
displayName: 'GroupView',
propTypes: {
groupId: React.PropTypes.string.isRequired,
groupId: PropTypes.string.isRequired,
},
getInitialState: function() {
@ -64,21 +65,13 @@ module.exports = React.createClass({
},
render: function() {
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Loader = sdk.getComponent("elements.Spinner");
if (this.state.summary === null && this.state.error === null) {
return <Loader />;
} else if (this.state.summary) {
const summary = this.state.summary;
let avatarNode = null;
if (summary.profile && summary.profile.avatar_url) {
avatarNode = <BaseAvatar
url={MatrixClientPeg.get().mxcUrlToHttp(summary.profile.avatar_url)}
name={summary.profile.name}
width={48} height={48}
/>;
}
let description = null;
if (summary.profile && summary.profile.long_description) {
description = sanitizedHtmlNode(summary.profile.long_description);
@ -103,7 +96,11 @@ module.exports = React.createClass({
<div className="mx_RoomHeader">
<div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_avatar">
{avatarNode}
<GroupAvatar
groupId={this.props.groupId}
groupAvatarUrl={summary.profile.avatar_url}
width={48} height={48}
/>
</div>
<div className="mx_RoomHeader_info">
{nameNode}