Fix GroupView summary rooms displaying without avatars

- GroupView can now render with rooms in the summary that do not have an avatar
 - RoomAvatar no longer has a redundant fallback avatar (this is handled by BaseAvatar)
 - RoomAvatar was delinted
This commit is contained in:
Luke Barnard 2017-09-27 16:18:15 +01:00
parent d52355f80e
commit f3b6b2cc06
2 changed files with 29 additions and 38 deletions

View file

@ -179,20 +179,26 @@ const FeaturedRoom = React.createClass({
render: function() { render: function() {
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
const roomName = this.props.summaryInfo.profile.name ||
this.props.summaryInfo.profile.canonical_alias ||
_t("Unnamed Room");
const oobData = { const oobData = {
roomId: this.props.summaryInfo.room_id, roomId: this.props.summaryInfo.room_id,
avatarUrl: this.props.summaryInfo.profile.avatar_url, avatarUrl: this.props.summaryInfo.profile.avatar_url,
name: this.props.summaryInfo.profile.name, name: roomName,
}; };
let permalink = null; let permalink = null;
if (this.props.summaryInfo.profile && this.props.summaryInfo.profile.canonical_alias) { if (this.props.summaryInfo.profile && this.props.summaryInfo.profile.canonical_alias) {
permalink = 'https://matrix.to/#/' + this.props.summaryInfo.profile.canonical_alias; permalink = 'https://matrix.to/#/' + this.props.summaryInfo.profile.canonical_alias;
} }
let roomNameNode = null; let roomNameNode = null;
if (permalink) { if (permalink) {
roomNameNode = <a href={permalink} onClick={this.onClick} >{this.props.summaryInfo.profile.name}</a>; roomNameNode = <a href={permalink} onClick={this.onClick} >{roomName}</a>;
} else { } else {
roomNameNode = <span>{this.props.summaryInfo.profile.name}</span>; roomNameNode = <span>{roomName}</span>;
} }
const deleteButton = this.props.editing ? const deleteButton = this.props.editing ?

View file

@ -13,11 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
var React = require('react'); import React from "react";
var ContentRepo = require("matrix-js-sdk").ContentRepo; import {ContentRepo} from "matrix-js-sdk";
var MatrixClientPeg = require('../../../MatrixClientPeg'); import MatrixClientPeg from "../../../MatrixClientPeg";
var Avatar = require('../../../Avatar'); import sdk from "../../../index";
var sdk = require("../../../index");
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'RoomAvatar', displayName: 'RoomAvatar',
@ -30,7 +29,7 @@ module.exports = React.createClass({
oobData: React.PropTypes.object, oobData: React.PropTypes.object,
width: React.PropTypes.number, width: React.PropTypes.number,
height: React.PropTypes.number, height: React.PropTypes.number,
resizeMethod: React.PropTypes.string resizeMethod: React.PropTypes.string,
}, },
getDefaultProps: function() { getDefaultProps: function() {
@ -44,13 +43,13 @@ module.exports = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
urls: this.getImageUrls(this.props) urls: this.getImageUrls(this.props),
}; };
}, },
componentWillReceiveProps: function(newProps) { componentWillReceiveProps: function(newProps) {
this.setState({ this.setState({
urls: this.getImageUrls(newProps) urls: this.getImageUrls(newProps),
}); });
}, },
@ -61,11 +60,10 @@ module.exports = React.createClass({
props.oobData.avatarUrl, props.oobData.avatarUrl,
Math.floor(props.width * window.devicePixelRatio), Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio), Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod props.resizeMethod,
), // highest priority ), // highest priority
this.getRoomAvatarUrl(props), this.getRoomAvatarUrl(props),
this.getOneToOneAvatar(props), this.getOneToOneAvatar(props), // lowest priority
this.getFallbackAvatar(props) // lowest priority
].filter(function(url) { ].filter(function(url) {
return (url != null && url != ""); return (url != null && url != "");
}); });
@ -79,17 +77,17 @@ module.exports = React.createClass({
Math.floor(props.width * window.devicePixelRatio), Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio), Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod, props.resizeMethod,
false false,
); );
}, },
getOneToOneAvatar: function(props) { getOneToOneAvatar: function(props) {
if (!props.room) return null; if (!props.room) return null;
var mlist = props.room.currentState.members; const mlist = props.room.currentState.members;
var userIds = []; const userIds = [];
// for .. in optimisation to return early if there are >2 keys // for .. in optimisation to return early if there are >2 keys
for (var uid in mlist) { for (const uid in mlist) {
if (mlist.hasOwnProperty(uid)) { if (mlist.hasOwnProperty(uid)) {
userIds.push(uid); userIds.push(uid);
} }
@ -99,7 +97,7 @@ module.exports = React.createClass({
} }
if (userIds.length == 2) { if (userIds.length == 2) {
var theOtherGuy = null; let theOtherGuy = null;
if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) { if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
theOtherGuy = mlist[userIds[1]]; theOtherGuy = mlist[userIds[1]];
} else { } else {
@ -110,7 +108,7 @@ module.exports = React.createClass({
Math.floor(props.width * window.devicePixelRatio), Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio), Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod, props.resizeMethod,
false false,
); );
} else if (userIds.length == 1) { } else if (userIds.length == 1) {
return mlist[userIds[0]].getAvatarUrl( return mlist[userIds[0]].getAvatarUrl(
@ -118,37 +116,24 @@ module.exports = React.createClass({
Math.floor(props.width * window.devicePixelRatio), Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio), Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod, props.resizeMethod,
false false,
); );
} else { } else {
return null; return null;
} }
}, },
getFallbackAvatar: function(props) {
let roomId = null;
if (props.oobData && props.oobData.roomId) {
roomId = this.props.oobData.roomId;
} else if (props.room) {
roomId = props.room.roomId;
} else {
return null;
}
return Avatar.defaultAvatarUrlForString(roomId);
},
render: function() { render: function() {
var BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
var {room, oobData, ...otherProps} = this.props; const {room, oobData, ...otherProps} = this.props;
var roomName = room ? room.name : oobData.name; const roomName = room ? room.name : oobData.name;
return ( return (
<BaseAvatar {...otherProps} name={roomName} <BaseAvatar {...otherProps} name={roomName}
idName={room ? room.roomId : null} idName={room ? room.roomId : null}
urls={this.state.urls} /> urls={this.state.urls} />
); );
} },
}); });