diff --git a/src/Avatar.js b/src/Avatar.js index 02025a9384..c919630f96 100644 --- a/src/Avatar.js +++ b/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) { - 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="; - } + return 'img/' + images[total % images.length] + '.png'; } } diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js index f65f11256b..4a6c9fb92e 100644 --- a/src/components/views/avatars/MemberAvatar.js +++ b/src/components/views/avatars/MemberAvatar.js @@ -43,10 +43,7 @@ module.exports = React.createClass({ }, defaultAvatarUrl: function(member, width, height, resizeMethod) { - if (this.skinnedDefaultAvatarUrl) { - return this.skinnedDefaultAvatarUrl(member, width, height, resizeMethod); - } - return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII="; + return Avatar.defaultAvatarUrlForString(member.userId); }, onError: function(ev) { @@ -60,22 +57,10 @@ module.exports = React.createClass({ }, _computeUrl: function() { - var url = this.props.member.getAvatarUrl( - MatrixClientPeg.get().getHomeserverUrl(), - this.props.width, - this.props.height, - this.props.resizeMethod, - false - ); - if (!url) { - url = this.defaultAvatarUrl( - this.props.member, - this.props.width, - this.props.height, - this.props.resizeMethod - ); - } - return url; + return Avatar.avatarUrlForMember(this.props.member, + this.props.width, + this.props.height, + this.props.resizeMethod); }, 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)) { diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js index 55f0e92cc1..95ec39de2e 100644 --- a/src/components/views/avatars/RoomAvatar.js +++ b/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' ]; - 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'; + return Avatar.defaultAvatarUrlForString(this.props.room.roomId); }, render: function() { diff --git a/src/components/views/messages/MFileMessage.js b/src/components/views/messages/MFileBody.js similarity index 98% rename from src/components/views/messages/MFileMessage.js rename to src/components/views/messages/MFileBody.js index 93e366a2cd..be7f2f0593 100644 --- a/src/components/views/messages/MFileMessage.js +++ b/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'; diff --git a/src/components/views/messages/MImageMessage.js b/src/components/views/messages/MImageBody.js similarity index 99% rename from src/components/views/messages/MImageMessage.js rename to src/components/views/messages/MImageBody.js index dee5c37c1e..93e2ce1b06 100644 --- a/src/components/views/messages/MImageMessage.js +++ b/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) { diff --git a/src/components/views/messages/MRoomMemberEvent.js b/src/components/views/messages/MRoomMemberEvent.js deleted file mode 100644 index 6e73519f2e..0000000000 --- a/src/components/views/messages/MRoomMemberEvent.js +++ /dev/null @@ -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 ? : null; - var text = this.getMemberEventText(); - if (!text) return
; - var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp'); - var MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); - return ( -
-
- -
- { timestamp } - - - { text } - -
- ); - }, -}); - diff --git a/src/components/views/messages/MVideoMessage.js b/src/components/views/messages/MVideoBody.js similarity index 98% rename from src/components/views/messages/MVideoMessage.js rename to src/components/views/messages/MVideoBody.js index a9139e2b3f..0d022f1648 100644 --- a/src/components/views/messages/MVideoMessage.js +++ b/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) { diff --git a/src/components/views/messages/Message.js b/src/components/views/messages/MessageEvent.js similarity index 73% rename from src/components/views/messages/Message.js rename to src/components/views/messages/MessageEvent.js index 2318ca4a66..164bf11930 100644 --- a/src/components/views/messages/Message.js +++ b/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.notice': sdk.getComponent('messages.TextualMessage'), - 'm.emote': sdk.getComponent('messages.TextualMessage'), - 'm.image': sdk.getComponent('messages.MImageMessage'), - 'm.file': sdk.getComponent('messages.MFileMessage'), - 'm.video': sdk.getComponent('messages.MVideoMessage') + 'm.text': sdk.getComponent('messages.TextualBody'), + 'm.notice': sdk.getComponent('messages.TextualBody'), + 'm.emote': sdk.getComponent('messages.TextualBody'), + 'm.image': sdk.getComponent('messages.MImageBody'), + 'm.file': sdk.getComponent('messages.MFileBody'), + 'm.video': sdk.getComponent('messages.MVideoBody') }; var content = this.props.mxEvent.getContent(); diff --git a/src/components/views/messages/TextualMessage.js b/src/components/views/messages/TextualBody.js similarity index 98% rename from src/components/views/messages/TextualMessage.js rename to src/components/views/messages/TextualBody.js index f90b5ec738..7134d5faf4 100644 --- a/src/components/views/messages/TextualMessage.js +++ b/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); diff --git a/src/components/views/messages/UnknownMessage.js b/src/components/views/messages/UnknownBody.js similarity index 96% rename from src/components/views/messages/UnknownMessage.js rename to src/components/views/messages/UnknownBody.js index c0392cbaf5..ae49af198d 100644 --- a/src/components/views/messages/UnknownMessage.js +++ b/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(); diff --git a/src/components/views/messages/Event.js b/src/components/views/rooms/EventTile.js similarity index 94% rename from src/components/views/messages/Event.js rename to src/components/views/rooms/EventTile.js index 6b1acc3690..81f5ca3a4a 100644 --- a/src/components/views/messages/Event.js +++ b/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', diff --git a/src/components/views/messages/MessageComposer.js b/src/components/views/rooms/MessageComposer.js similarity index 100% rename from src/components/views/messages/MessageComposer.js rename to src/components/views/rooms/MessageComposer.js