UI to set Room Avatars

src/skins/vector/views/atoms/RoomAvatar.js

@@ -43,9 +43,13 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var style = {
+            'max-width': this.props.width,
+            'max-height': this.props.height,
+        };
         return (
             <img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
-                width={this.props.width} height={this.props.height}
+                style={style}
             />
         );
     }

src/skins/vector/views/molecules/ChangeAvatar.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 
+var sdk = require('matrix-react-sdk')
 var ChangeAvatarController = require('matrix-react-sdk/lib/controllers/molecules/ChangeAvatar')
 
 var Loader = require("react-loader");
@@ -28,6 +29,7 @@ module.exports = React.createClass({
     mixins: [ChangeAvatarController],
 
     onFileSelected: function(ev) {
+        this.avatarSet = true;
         this.setAvatarFromFile(ev.target.files[0]);
     },
 
@@ -38,13 +40,23 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
+        var avatarImg;
+        // 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='320' height='240' resizeMethod='scale' />;
+        } else {
+            avatarImg = <img src={this.state.avatarUrl}/>;
+        }
+
         switch (this.state.phase) {
             case this.Phases.Display:
             case this.Phases.Error:
                 return (
                     <div>
                         <div className="mx_Dialog_content">
-                            <img src={this.state.avatarUrl}/>
+                            {avatarImg}
                         </div>
                         <div className="mx_Dialog_content">
                             Upload new:

src/skins/vector/views/molecules/RoomSettings.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var sdk = require('matrix-react-sdk');
 
 var RoomSettingsController = require('matrix-react-sdk/lib/controllers/molecules/RoomSettings')
 
@@ -65,6 +66,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
+
         var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
         if (topic) topic = topic.getContent().topic;
 
@@ -76,6 +79,8 @@ module.exports = React.createClass({
 
         var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
 
+        var events_levels = power_levels.events || {};
+
         if (power_levels) {
             power_levels = power_levels.getContent();
 
@@ -91,8 +96,7 @@ module.exports = React.createClass({
             if (power_levels.kick == undefined) kick_level = 50;
             if (power_levels.redact == undefined) redact_level = 50;
 
-            var user_levels = power_levels.users || [];
-            var events_levels = power_levels.events || [];
+            var user_levels = power_levels.users || {};
 
             var user_id = MatrixClientPeg.get().credentials.userId;
 
@@ -124,6 +128,20 @@ module.exports = React.createClass({
             var can_change_levels = false;
         }
 
+        var room_avatar_level = parseInt(power_levels.state_default || 0);
+        if (events_levels['m.room.avatar'] !== undefined) {
+            room_avatar_level = events_levels['m.room.avatar'];
+        }
+        var can_set_room_avatar = current_user_level >= room_avatar_level;
+
+        var change_avatar;
+        if (can_set_room_avatar) {
+            change_avatar = <div>
+                <h3>Room Icon</h3>
+                <ChangeAvatar room={this.props.room} />
+            </div>;
+        }
+
         var banned = this.props.room.getMembersWithMemership("ban");
 
         return (
@@ -207,6 +225,7 @@ module.exports = React.createClass({
                         );
                     })}
                 </div>
+                {change_avatar}
             </div>
         );
     }