From b4abe870cf9e2e11f15db01704be12254d4eabd8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 6 Jul 2015 18:09:19 +0100 Subject: [PATCH] Image displaying! --- skins/base/css/molecules/MImageTile.css | 19 +++++++ skins/base/views/molecules/MImageTile.js | 69 +++++++++++++++++++++++ skins/base/views/molecules/MessageTile.js | 3 +- skins/base/views/organisms/RoomView.js | 15 +---- src/ComponentBroker.js | 2 + src/controllers/molecules/MImageTile.js | 21 +++++++ src/controllers/organisms/RoomView.js | 24 ++++++++ 7 files changed, 138 insertions(+), 15 deletions(-) create mode 100644 skins/base/css/molecules/MImageTile.css create mode 100644 skins/base/views/molecules/MImageTile.js create mode 100644 src/controllers/molecules/MImageTile.js diff --git a/skins/base/css/molecules/MImageTile.css b/skins/base/css/molecules/MImageTile.css new file mode 100644 index 0000000000..775ebca925 --- /dev/null +++ b/skins/base/css/molecules/MImageTile.css @@ -0,0 +1,19 @@ +/* +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. +*/ + +.mx_MImageTile { +} + diff --git a/skins/base/views/molecules/MImageTile.js b/skins/base/views/molecules/MImageTile.js new file mode 100644 index 0000000000..783583cbdd --- /dev/null +++ b/skins/base/views/molecules/MImageTile.js @@ -0,0 +1,69 @@ +/* +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 MImageTileController = require("../../../../src/controllers/molecules/MImageTile"); + +var MatrixClientPeg = require('../../../../src/MatrixClientPeg'); + +module.exports = React.createClass({ + displayName: 'MImageTile', + mixins: [MImageTileController], + + thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) { + if (!fullWidth || !fullHeight) { + // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even + // log this because it's spammy + return undefined; + } + if (fullWidth < thumbWidth && fullHeight < thumbHeight) { + // no scaling needs to be applied + return fullHeight; + } + var widthMulti = thumbWidth / fullWidth; + var heightMulti = thumbHeight / fullHeight; + if (widthMulti < heightMulti) { + // width is the dominant dimension so scaling will be fixed on that + return Math.floor(widthMulti * fullHeight); + } + else { + // height is the dominant dimension so scaling will be fixed on that + return Math.floor(heightMulti * fullHeight); + } + }, + + render: function() { + var content = this.props.mxEvent.getContent(); + var cli = MatrixClientPeg.get(); + + var thumbHeight = null; + if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, 320, 240); + + var imgStyle = {}; + if (thumbHeight) imgStyle['height'] = thumbHeight; + + return ( + + + {content.body} + + + ); + }, +}); diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js index 95f4a9ac44..257441423d 100644 --- a/skins/base/views/molecules/MessageTile.js +++ b/skins/base/views/molecules/MessageTile.js @@ -30,7 +30,8 @@ var UnknownMessageTile = ComponentBroker.get('molecules/UnknownMessageTile'); var tileTypes = { 'm.text': ComponentBroker.get('molecules/MTextTile'), 'm.notice': ComponentBroker.get('molecules/MNoticeTile'), - 'm.emote': ComponentBroker.get('molecules/MEmoteTile') + 'm.emote': ComponentBroker.get('molecules/MEmoteTile'), + 'm.image': ComponentBroker.get('molecules/MImageTile') }; var MessageTileController = require("../../../../src/controllers/molecules/MessageTile"); diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index a576c3c697..78f1f0b9ba 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -37,19 +37,6 @@ module.exports = React.createClass({ displayName: 'RoomView', mixins: [RoomViewController], - getMessageTiles: function() { - var ret = []; - var count = 0; - for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) { - var mxEv = this.state.room.timeline[i]; - ret.unshift( -
    • - ); - ++count; - } - return ret; - }, - render: function() { var myUserId = MatrixClientPeg.get().credentials.userId; if (this.state.room.currentState.members[myUserId].membership == 'invite') { @@ -85,7 +72,7 @@ module.exports = React.createClass({ diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 61b2d85ee0..1177d4aa45 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -69,6 +69,8 @@ require('../skins/base/views/molecules/UnknownMessageTile'); require('../skins/base/views/molecules/MTextTile'); require('../skins/base/views/molecules/MNoticeTile'); require('../skins/base/views/molecules/MEmoteTile'); +require('../skins/base/views/molecules/MImageTile'); +require('../skins/base/views/molecules/MRoomMemberTile'); require('../skins/base/views/molecules/RoomHeader'); require('../skins/base/views/molecules/MessageComposer'); require('../skins/base/views/molecules/ProgressBar'); diff --git a/src/controllers/molecules/MImageTile.js b/src/controllers/molecules/MImageTile.js new file mode 100644 index 0000000000..8aa688b21e --- /dev/null +++ b/src/controllers/molecules/MImageTile.js @@ -0,0 +1,21 @@ +/* +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'; + +module.exports = { +}; + diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index b3ea6666a4..692e31023e 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -17,12 +17,20 @@ limitations under the License. 'use strict'; var MatrixClientPeg = require("../../MatrixClientPeg"); +var React = require("react"); var dis = require("../../dispatcher"); var PAGINATE_SIZE = 20; var INITIAL_SIZE = 100; +var ComponentBroker = require('../../ComponentBroker'); + +var tileTypes = { + 'm.room.message': ComponentBroker.get('molecules/MessageTile'), + 'm.room.member': ComponentBroker.get('molecules/MRoomMemberTile') +}; + module.exports = { getInitialState: function() { return { @@ -169,6 +177,22 @@ module.exports = { this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight; } if (!this.state.paginating) this.fillSpace(); + }, + + getEventTiles: function() { + var ret = []; + var count = 0; + + for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) { + var mxEv = this.state.room.timeline[i]; + var TileType = tileTypes[mxEv.getType()]; + if (!TileType) continue; + ret.unshift( +
    • + ); + ++count; + } + return ret; } };