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 ( + + + + + + ); + }, +}); 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( -