Merge branch 'develop' into skindex-nextgen

src/Avatar.js

@@ -24,7 +24,9 @@ module.exports = {
             MatrixClientPeg.get().getHomeserverUrl(),
             width,
             height,
-            resizeMethod
+            resizeMethod,
+            false,
+            false
         );
         if (!url) {
             // member can be null here currently since on invites, the JS SDK
@@ -36,18 +38,12 @@ module.exports = {
     },
 
     defaultAvatarUrlForString: function(s) {
+        var images = [ '76cfa6', '50e2c2', 'f4c371' ];
         var total = 0;
         for (var i = 0; i < s.length; ++i) {
             total += s.charCodeAt(i);
         }
-        switch (total % 3) {
+        return 'img/' + images[total % images.length] + '.png';
-            case 0:
-                return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII=";
-            case 1:
-                return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9chOaxgCP4eagAFk9seHFErFYLBaLxWKxWCwWi8Vi8cX4CzAAtKMCks/JG8MAAAAASUVORK5CYII=";
-            case 2:
-                return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9YzNayQCP4eagADldseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAAyiACeHwPiu4AAAAASUVORK5CYII=";
-        }
     }
 }
 

src/components/views/avatars/MemberAvatar.js

@@ -43,10 +43,7 @@ module.exports = React.createClass({
     },
 
     defaultAvatarUrl: function(member, width, height, resizeMethod) {
-        if (this.skinnedDefaultAvatarUrl) {
+        return Avatar.defaultAvatarUrlForString(member.userId);
-            return this.skinnedDefaultAvatarUrl(member, width, height, resizeMethod);
-        }
-        return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII=";
     },
 
     onError: function(ev) {
@@ -60,22 +57,10 @@ module.exports = React.createClass({
     },
 
     _computeUrl: function() {
-        var url = this.props.member.getAvatarUrl(
+        return Avatar.avatarUrlForMember(this.props.member,
-            MatrixClientPeg.get().getHomeserverUrl(),
+                                         this.props.width,
-            this.props.width,
+                                         this.props.height,
-            this.props.height,
+                                         this.props.resizeMethod);
-            this.props.resizeMethod,
-            false
-        );
-        if (!url) {
-            url = this.defaultAvatarUrl(
-                this.props.member,
-                this.props.width,
-                this.props.height,
-                this.props.resizeMethod
-            );
-        }
-        return url;
     },
 
     refreshUrl: function() {
@@ -95,21 +80,6 @@ module.exports = React.createClass({
 
     ///////////////
 
-
-    avatarUrlForMember: function(member) {
-        return Avatar.avatarUrlForMember(
-            member,
-            this.props.member,
-            this.props.width,
-            this.props.height,
-            this.props.resizeMethod
-        );
-    },
-
-    skinnedDefaultAvatarUrl: function(member, width, height, resizeMethod) {
-        return Avatar.defaultAvatarUrlForString(member.userId);
-    },
-
     render: function() {
         // XXX: recalculates default avatar url constantly
         if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
@@ -122,9 +92,9 @@ module.exports = React.createClass({
             return (
                 <span className="mx_MemberAvatar" {...this.props}>
                     <span className="mx_MemberAvatar_initial" aria-hidden="true"
-                          style={{ fontSize: (this.props.width * 0.75) + "px",
+                          style={{ fontSize: (this.props.width * 0.65) + "px",
                                    width: this.props.width + "px",
-                                   lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+                                   lineHeight: this.props.height + "px" }}>{ initial }</span>
                     <img className="mx_MemberAvatar_image" src={this.state.imageUrl} title={this.props.member.name}
                          onError={this.onError} width={this.props.width} height={this.props.height} />
                 </span>

src/components/views/avatars/RoomAvatar.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
+var Avatar = require('../../../Avatar');
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
@@ -134,12 +135,7 @@ module.exports = React.createClass({
     },
 
     getFallbackAvatar: function() {
-        var images = [ '76cfa6', '50e2c2', 'f4c371' ];
+        return Avatar.defaultAvatarUrlForString(this.props.room.roomId);
-        var total = 0;
-        for (var i = 0; i < this.props.room.roomId.length; ++i) {
-            total += this.props.room.roomId.charCodeAt(i);
-        }
-        return 'img/' + images[total % images.length] + '.png';
     },
 
     render: function() {
@@ -159,9 +155,9 @@ module.exports = React.createClass({
             return (
                 <span>
                     <span className="mx_RoomAvatar_initial" aria-hidden="true"
-                          style={{ fontSize: (this.props.width * 0.75) + "px",
+                          style={{ fontSize: (this.props.width * 0.65) + "px",
                                    width: this.props.width + "px",
-                                   lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+                                   lineHeight: this.props.height + "px" }}>{ initial }</span>
                     <img className="mx_RoomAvatar" src={this.state.imageUrl}
                             onError={this.onError} style={style} />
                 </span>

src/components/views/messages/MFileBody.js

@@ -21,7 +21,7 @@ var filesize = require('filesize');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 
 module.exports = React.createClass({
-    displayName: 'MFileMessage',
+    displayName: 'MFileBody',
 
     presentableTextForFile: function(content) {
         var linkText = 'Attachment';

src/components/views/messages/MImageBody.js

@@ -24,7 +24,7 @@ var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
-    displayName: 'MImageMessage',
+    displayName: 'MImageBody',
 
     thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
         if (!fullWidth || !fullHeight) {

src/components/views/messages/MRoomMemberEvent.js

@@ -1,52 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('../../../index');
-var TextForEvent = require('../../../TextForEvent');
-
-module.exports = React.createClass({
-    displayName: 'MRoomMemberEvent',
-
-    getMemberEventText: function() {
-        return TextForEvent.textForEvent(this.props.mxEvent);
-    },
-
-    render: function() {
-        // XXX: for now, just cheekily borrow the css from message tile...
-        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
-        var text = this.getMemberEventText();
-        if (!text) return <div/>;
-        var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
-        var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        return (
-            <div className="mx_MessageTile mx_MessageTile_notice">
-                <div className="mx_MessageTile_avatar">
-                    <MemberAvatar member={this.props.mxEvent.sender} />
-                </div>            
-                { timestamp }
-                <span className="mx_SenderProfile"></span>
-                <span className="mx_MessageTile_content">
-                    { text }
-                </span>
-            </div>
-        );
-    },
-});
-

src/components/views/messages/MVideoBody.js

@@ -24,7 +24,7 @@ var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
-    displayName: 'MVideoMessage',
+    displayName: 'MVideoBody',
 
     thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
         if (!fullWidth || !fullHeight) {

src/components/views/messages/MessageEvent.js

@@ -20,7 +20,7 @@ var React = require('react');
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
-    displayName: 'Message',
+    displayName: 'MessageEvent',
 
     statics: {
         needsSenderProfile: function() {
@@ -29,15 +29,15 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var UnknownMessageTile = sdk.getComponent('messages.UnknownMessage');
+        var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
 
         var tileTypes = {
-            'm.text': sdk.getComponent('messages.TextualMessage'),
+            'm.text': sdk.getComponent('messages.TextualBody'),
-            'm.notice': sdk.getComponent('messages.TextualMessage'),
+            'm.notice': sdk.getComponent('messages.TextualBody'),
-            'm.emote': sdk.getComponent('messages.TextualMessage'),
+            'm.emote': sdk.getComponent('messages.TextualBody'),
-            'm.image': sdk.getComponent('messages.MImageMessage'),
+            'm.image': sdk.getComponent('messages.MImageBody'),
-            'm.file': sdk.getComponent('messages.MFileMessage'),
+            'm.file': sdk.getComponent('messages.MFileBody'),
-            'm.video': sdk.getComponent('messages.MVideoMessage')
+            'm.video': sdk.getComponent('messages.MVideoBody')
         };
 
         var content = this.props.mxEvent.getContent();

src/components/views/messages/TextualBody.js

@@ -26,7 +26,7 @@ var linkifyMatrix = require('../../../linkify-matrix');
 linkifyMatrix(linkify);
 
 module.exports = React.createClass({
-    displayName: 'TextualMessage',
+    displayName: 'TextualBody',
 
     componentDidMount: function() {
         linkifyElement(this.refs.content, linkifyMatrix.options);

src/components/views/messages/UnknownBody.js

@@ -19,7 +19,7 @@ limitations under the License.
 var React = require('react');
 
 module.exports = React.createClass({
-    displayName: 'UnknownMessage',
+    displayName: 'UnknownBody',
 
     render: function() {
         var content = this.props.mxEvent.getContent();

src/components/views/rooms/EventTile.js

@@ -37,7 +37,7 @@ try {
 }
 
 var eventTileTypes = {
-    'm.room.message': 'messages.Message',
+    'm.room.message': 'messages.MessageEvent',
     'm.room.member' : 'messages.TextualEvent',
     'm.call.invite' : 'messages.TextualEvent',
     'm.call.answer' : 'messages.TextualEvent',
@@ -48,6 +48,17 @@ var eventTileTypes = {
 
 var MAX_READ_AVATARS = 5;
 
+// Our component structure for EventTiles on the timeline is:
+//
+// .-EventTile------------------------------------------------.
+// | MemberAvatar (SenderProfile)                   TimeStamp |
+// |    .-{Message,Textual}Event---------------. Read Avatars |
+// |    |   .-MFooBody-------------------.     |              |
+// |    |   |  (only if MessageEvent)    |     |              |
+// |    |   '----------------------------'     |              |
+// |    '--------------------------------------'              |
+// '----------------------------------------------------------'
+
 module.exports = React.createClass({
     displayName: 'Event',
 

src/components/views/rooms/MemberInfo.js

@@ -34,6 +34,12 @@ var sdk = require('../../../index');
 module.exports = React.createClass({
     displayName: 'MemberInfo',
 
+    getDefaultProps: function() {
+        return {
+            onFinished: function() {}
+        };
+    },
+
     componentDidMount: function() {
         // work out the current state
         if (this.props.member) {