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:
parent
d52355f80e
commit
f3b6b2cc06
2 changed files with 29 additions and 38 deletions
|
@ -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 ?
|
||||||
|
|
|
@ -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} />
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue