Make RoomAvatar use BaseAvatar

src/components/views/avatars/BaseAvatar.js

@@ -23,9 +23,9 @@ module.exports = React.createClass({
     displayName: 'BaseAvatar',
 
     propTypes: {
-        name: React.PropTypes.string.isRequired,
+        name: React.PropTypes.string.isRequired, // The name (first initial used as default)
         idName: React.PropTypes.string, // ID for generating hash colours
-        title: React.PropTypes.string,
+        title: React.PropTypes.string, // onHover title text
         url: React.PropTypes.string, // highest priority of them all
         urls: React.PropTypes.array, // [highest_priority, ... , lowest_priority]
         width: React.PropTypes.number,
@@ -95,7 +95,7 @@ module.exports = React.createClass({
     _getInitialLetter: function() {
         var name = this.props.name;
         var initial = name[0];
-        if (initial === '@' && name[1]) {
+        if ((initial === '@' || initial === '#') && name[1]) {
             initial = name[1];
         }
         return initial.toUpperCase();
@@ -107,21 +107,21 @@ module.exports = React.createClass({
         if (this.state.imageUrl === this.state.defaultImageUrl) {
             var initialLetter = this._getInitialLetter();
             return (
-                <span className="mx_MemberAvatar" {...this.props}>
+                <span className="mx_BaseAvatar" {...this.props}>
-                    <span className="mx_MemberAvatar_initial" aria-hidden="true"
+                    <span className="mx_BaseAvatar_initial" aria-hidden="true"
                             style={{ fontSize: (this.props.width * 0.65) + "px",
                                     width: this.props.width + "px",
                                     lineHeight: this.props.height + "px" }}>
                         { initialLetter }
                     </span>
-                    <img className="mx_MemberAvatar_image" src={this.state.imageUrl}
+                    <img className="mx_BaseAvatar_image" src={this.state.imageUrl}
                         title={this.props.title} onError={this.onError}
                         width={this.props.width} height={this.props.height} />
                 </span>
             );            
         }
         return (
-            <img className="mx_MemberAvatar mx_MemberAvatar_image" src={this.state.imageUrl}
+            <img className="mx_BaseAvatar mx_BaseAvatar_image" src={this.state.imageUrl}
                 onError={this.onError}
                 width={this.props.width} height={this.props.height}
                 title={this.props.title}

src/components/views/avatars/RoomAvatar.js

@@ -16,10 +16,18 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Avatar = require('../../../Avatar');
+var sdk = require("../../../index");
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
 
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        width: React.PropTypes.number,
+        height: React.PropTypes.number,
+        resizeMethod: React.PropTypes.string
+    },
+
     getDefaultProps: function() {
         return {
             width: 36,
@@ -29,65 +37,25 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        this._update();
         return {
-            imageUrl: this._nextUrl()
+            urls: [
+                this.getRoomAvatarUrl(), // highest priority
+                this.getOneToOneAvatar(),
+                this.getFallbackAvatar() // lowest priority
+            ].filter(function(url) {
+                return url != null;
+            })
         };
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    getRoomAvatarUrl: function() {
-        this.refreshImageUrl();
+        return this.props.room.getAvatarUrl(
-    },
-
-    refreshImageUrl: function(nextProps) {
-        // If the list has changed, we start from scratch and re-check, but
-        // don't do so unless the list has changed or we'd re-try fetching
-        // images each time we re-rendered
-        var newList = this.getUrlList();
-        var differs = false;
-        for (var i = 0; i < newList.length && i < this.urlList.length; ++i) {
-            if (this.urlList[i] != newList[i]) differs = true;
-        }
-        if (this.urlList.length != newList.length) differs = true;
-
-        if (differs) {
-            this._update();
-            this.setState({
-                imageUrl: this._nextUrl()
-            });
-        }
-    },
-
-    _update: function() {
-        this.urlList = this.getUrlList();
-        this.urlListIndex = -1;
-    },
-
-    _nextUrl: function() {
-        do {
-            ++this.urlListIndex;
-        } while (
-            this.urlList[this.urlListIndex] === null &&
-            this.urlListIndex < this.urlList.length
-        );
-        if (this.urlListIndex < this.urlList.length) {
-            return this.urlList[this.urlListIndex];
-        } else {
-            return null;
-        }
-    },
-
-    // provided to the view class for convenience
-    roomAvatarUrl: function() {
-        var url = this.props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
             this.props.width, this.props.height, this.props.resizeMethod,
             false
         );
-        return url;
     },
 
-    // provided to the view class for convenience
     getOneToOneAvatar: function() {
         var userIds = Object.keys(this.props.room.currentState.members);
 
@@ -114,58 +82,15 @@ module.exports = React.createClass({
         }
     },
 
-
-    onError: function(ev) {
-        this.setState({
-            imageUrl: this._nextUrl()
-        });
-    },
-
-
-
-    ////////////
-
-
-    getUrlList: function() {
-        return [
-            this.roomAvatarUrl(),
-            this.getOneToOneAvatar(),
-            this.getFallbackAvatar()
-        ];
-    },
-
     getFallbackAvatar: function() {
         return Avatar.defaultAvatarUrlForString(this.props.room.roomId);
     },
 
     render: function() {
-        var style = {
+        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-            width: this.props.width,
-            height: this.props.height,
-        };
-
-        // XXX: recalculates fallback avatar constantly
-        if (this.state.imageUrl === this.getFallbackAvatar()) {
-            var initial;
-            if (this.props.room.name[0])
-                initial = this.props.room.name[0].toUpperCase();
-            if ((initial === '@' || initial === '#') && this.props.room.name[1])
-                initial = this.props.room.name[1].toUpperCase();
-         
         return (
-                <span>
+            <BaseAvatar {...this.props} name={this.props.room.name}
-                    <span className="mx_RoomAvatar_initial" aria-hidden="true"
+                idName={this.props.room.roomId} urls={this.state.urls} />
-                          style={{ fontSize: (this.props.width * 0.65) + "px",
-                                   width: this.props.width + "px",
-                                   lineHeight: this.props.height + "px" }}>{ initial }</span>
-                    <img className="mx_RoomAvatar" src={this.state.imageUrl}
-                            onError={this.onError} style={style} />
-                </span>
         );
     }
-        else {
-            return <img className="mx_RoomAvatar" src={this.state.imageUrl}
-                        onError={this.onError} style={style} />
-        }
-    }
 });

src/components/views/rooms/MemberTile.js

@@ -151,14 +151,26 @@ module.exports = React.createClass({
         }
 
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+        var av;
+        if (member) {
+            av = (
+                <MemberAvatar member={this.props.member} width={36} height={36} />
+            );
+        }
+        else {
+            av = (
+                <BaseAvatar name={name} width={36} height={36} />
+            );
+        }
 
         return (
             <div className={mainClassName} title={ this.getPowerLabel() }
                     onClick={ this.onClick } onMouseEnter={ this.mouseEnter }
                     onMouseLeave={ this.mouseLeave }>
                 <div className="mx_MemberTile_avatar">
-                    <MemberAvatar member={this.props.member} width={36} height={36}
+                    {av}
-                        customDisplayName={this.props.customDisplayName} />
                 </div>
                 { nameEl }
             </div>

src/components/views/rooms/RoomHeader.js

@@ -129,7 +129,7 @@ module.exports = React.createClass({
             var roomAvatar = null;
             if (this.props.room) {
                 roomAvatar = (
-                    <RoomAvatar room={this.props.room} width="48" height="48" />
+                    <RoomAvatar room={this.props.room} width={48} height={48} />
                 );
             }
 

src/components/views/rooms/RoomTile.js

@@ -123,7 +123,7 @@ module.exports = React.createClass({
         return connectDragSource(connectDropTarget(
             <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className="mx_RoomTile_avatar">
-                    <RoomAvatar room={this.props.room} width="24" height="24" />
+                    <RoomAvatar room={this.props.room} width={24} height={24} />
                     { badge }
                 </div>
                 { label }

src/components/views/settings/ChangeAvatar.js

@@ -111,7 +111,7 @@ module.exports = React.createClass({
         // Having just set an avatar we just display that since it will take a little
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
-            avatarImg = <RoomAvatar room={this.props.room} width='240' height='240' resizeMethod='crop' />;
+            avatarImg = <RoomAvatar room={this.props.room} width={240} height={240} resizeMethod='crop' />;
         } else {
             var style = {
                 maxWidth: 240,