Profile picture setting and notifdications thereof.

skins/base/views/molecules/ChangeAvatar.js

@@ -20,11 +20,23 @@ var React = require('react');
 
 var ChangeAvatarController = require("../../../../src/controllers/molecules/ChangeAvatar");
 
+var Loader = require("react-loader");
+
 
 module.exports = React.createClass({
     displayName: 'ChangeAvatar',
     mixins: [ChangeAvatarController],
 
+    onFileSelected: function(ev) {
+        this.setAvatarFromFile(ev.target.files[0]);
+    },
+
+    onError: function(error) {
+        this.setState({
+            errorText: "Failed to set profile picture!"
+        });
+    },
+
     render: function() {
         switch (this.state.phase) {
             case this.Phases.Display:
@@ -33,7 +45,9 @@ module.exports = React.createClass({
                     <div>
                         <img src={this.state.avatarUrl} />
                         <div>
-                            <button>Upload new</button>
+                            Upload new:
+                            <input type="file" onChange={this.onFileSelected}/>
+                            {this.state.errorText}
                             <button onClick={this.props.onFinished}>Cancel</button>
                         </div>
                     </div>

src/TextForEvent.js

@@ -21,11 +21,18 @@ function textForMemberEvent(ev) {
                     return ev.getSender() + " set their display name to " + ev.getContent().displayname;
                 } else if (ev.getPrevContent().displayname && !ev.getContent().displayname) {
                     return ev.getSender() + " removed their display name";
+                } else if (ev.getPrevContent().avatar_url && !ev.getContent().avatar_url) {
+                    return ev.getSender() + " removed their profile picture";
+                } else if (ev.getPrevContent().avatar_url && ev.getContent().avatar_url) {
+                    return ev.getSender() + " changed their profile picture";
+                } else if (!ev.getPrevContent().avatar_url && ev.getContent().avatar_url) {
+                    return ev.getSender() + " set a profile picture";
                 }
             } else {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
                 return targetName + " joined the room.";
             }
+            return '';
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
                 return targetName + " left the room.";

src/controllers/molecules/ChangeAvatar.js

@@ -46,7 +46,28 @@ module.exports = {
         }
     },
 
-    uploadNewAvatar: function() {
+    setAvatarFromFile: function(file) {
+        var newUrl = null;
 
+        this.setState({
+            phase: this.Phases.Uploading
+        });
+        var self = this;
+        MatrixClientPeg.get().uploadContent(file).then(function(url) {
+            newUrl = url;
+            return MatrixClientPeg.get().setProfileInfo('avatar_url', {
+                avatar_url: url
+            });
+        }).done(function() {
+            self.setState({
+                phase: self.Phases.Display,
+                avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
+            });
+        }, function(error) {
+            self.setState({
+                phase: this.Phases.Error
+            });
+            self.onError(error);
+        });
     },
 }