Image displaying!
This commit is contained in:
parent
dcb4b5f912
commit
b4abe870cf
7 changed files with 138 additions and 15 deletions
skins/base
src
19
skins/base/css/molecules/MImageTile.css
Normal file
19
skins/base/css/molecules/MImageTile.css
Normal file
|
@ -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 {
|
||||
}
|
||||
|
69
skins/base/views/molecules/MImageTile.js
Normal file
69
skins/base/views/molecules/MImageTile.js
Normal file
|
@ -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 (
|
||||
<span className="mx_MImageTile">
|
||||
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
|
||||
<img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
});
|
|
@ -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");
|
||||
|
|
|
@ -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(
|
||||
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
|
||||
);
|
||||
++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({
|
|||
<ul className="mx_RoomView_MessageList" ref="messageList" onScroll={this.onMessageListScroll}>
|
||||
<li className={scrollheader_classes}>
|
||||
</li>
|
||||
{this.getMessageTiles()}
|
||||
{this.getEventTiles()}
|
||||
</ul>
|
||||
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
|
||||
</div>
|
||||
|
|
|
@ -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');
|
||||
|
|
21
src/controllers/molecules/MImageTile.js
Normal file
21
src/controllers/molecules/MImageTile.js
Normal file
|
@ -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 = {
|
||||
};
|
||||
|
|
@ -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(
|
||||
<li key={mxEv.getId()}><TileType mxEvent={mxEv} /></li>
|
||||
);
|
||||
++count;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue