Skip to content

Commit b4abe87

Browse files
dbkrdbkr
committed
Image displaying!
1 parent dcb4b5f commit b4abe87

7 files changed

Lines changed: 138 additions & 15 deletions

File tree

‎skins/base/css/molecules/MImageTile.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
Copyright 2015 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_MImageTile {
18+
}
19+

‎skins/base/views/molecules/MImageTile.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
Copyright 2015 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
'use strict';
18+
19+
var React = require('react');
20+
21+
var MImageTileController = require("../../../../src/controllers/molecules/MImageTile");
22+
23+
var MatrixClientPeg = require('../../../../src/MatrixClientPeg');
24+
25+
module.exports = React.createClass({
26+
displayName: 'MImageTile',
27+
mixins: [MImageTileController],
28+
29+
thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
30+
if (!fullWidth || !fullHeight) {
31+
// Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
32+
// log this because it's spammy
33+
return undefined;
34+
}
35+
if (fullWidth < thumbWidth && fullHeight < thumbHeight) {
36+
// no scaling needs to be applied
37+
return fullHeight;
38+
}
39+
var widthMulti = thumbWidth / fullWidth;
40+
var heightMulti = thumbHeight / fullHeight;
41+
if (widthMulti < heightMulti) {
42+
// width is the dominant dimension so scaling will be fixed on that
43+
return Math.floor(widthMulti * fullHeight);
44+
}
45+
else {
46+
// height is the dominant dimension so scaling will be fixed on that
47+
return Math.floor(heightMulti * fullHeight);
48+
}
49+
},
50+
51+
render: function() {
52+
var content = this.props.mxEvent.getContent();
53+
var cli = MatrixClientPeg.get();
54+
55+
var thumbHeight = null;
56+
if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, 320, 240);
57+
58+
var imgStyle = {};
59+
if (thumbHeight) imgStyle['height'] = thumbHeight;
60+
61+
return (
62+
<span className="mx_MImageTile">
63+
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
64+
<img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
65+
</a>
66+
</span>
67+
);
68+
},
69+
});

‎skins/base/views/molecules/MessageTile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ var UnknownMessageTile = ComponentBroker.get('molecules/UnknownMessageTile');
3030
var tileTypes = {
3131
'm.text': ComponentBroker.get('molecules/MTextTile'),
3232
'm.notice': ComponentBroker.get('molecules/MNoticeTile'),
33-
'm.emote': ComponentBroker.get('molecules/MEmoteTile')
33+
'm.emote': ComponentBroker.get('molecules/MEmoteTile'),
34+
'm.image': ComponentBroker.get('molecules/MImageTile')
3435
};
3536

3637
var MessageTileController = require("../../../../src/controllers/molecules/MessageTile");

‎skins/base/views/organisms/RoomView.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,6 @@ module.exports = React.createClass({
3737
displayName: 'RoomView',
3838
mixins: [RoomViewController],
3939

40-
getMessageTiles: function() {
41-
var ret = [];
42-
var count = 0;
43-
for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
44-
var mxEv = this.state.room.timeline[i];
45-
ret.unshift(
46-
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
47-
);
48-
++count;
49-
}
50-
return ret;
51-
},
52-
5340
render: function() {
5441
var myUserId = MatrixClientPeg.get().credentials.userId;
5542
if (this.state.room.currentState.members[myUserId].membership == 'invite') {
@@ -85,7 +72,7 @@ module.exports = React.createClass({
8572
<ul className="mx_RoomView_MessageList" ref="messageList" onScroll={this.onMessageListScroll}>
8673
<li className={scrollheader_classes}>
8774
</li>
88-
{this.getMessageTiles()}
75+
{this.getEventTiles()}
8976
</ul>
9077
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
9178
</div>

‎src/ComponentBroker.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ require('../skins/base/views/molecules/UnknownMessageTile');
6969
require('../skins/base/views/molecules/MTextTile');
7070
require('../skins/base/views/molecules/MNoticeTile');
7171
require('../skins/base/views/molecules/MEmoteTile');
72+
require('../skins/base/views/molecules/MImageTile');
73+
require('../skins/base/views/molecules/MRoomMemberTile');
7274
require('../skins/base/views/molecules/RoomHeader');
7375
require('../skins/base/views/molecules/MessageComposer');
7476
require('../skins/base/views/molecules/ProgressBar');

‎src/controllers/molecules/MImageTile.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
Copyright 2015 OpenMarket Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
'use strict';
18+
19+
module.exports = {
20+
};
21+

‎src/controllers/organisms/RoomView.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,20 @@ limitations under the License.
1717
'use strict';
1818

1919
var MatrixClientPeg = require("../../MatrixClientPeg");
20+
var React = require("react");
2021

2122
var dis = require("../../dispatcher");
2223

2324
var PAGINATE_SIZE = 20;
2425
var INITIAL_SIZE = 100;
2526

27+
var ComponentBroker = require('../../ComponentBroker');
28+
29+
var tileTypes = {
30+
'm.room.message': ComponentBroker.get('molecules/MessageTile'),
31+
'm.room.member': ComponentBroker.get('molecules/MRoomMemberTile')
32+
};
33+
2634
module.exports = {
2735
getInitialState: function() {
2836
return {
@@ -169,6 +177,22 @@ module.exports = {
169177
this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight;
170178
}
171179
if (!this.state.paginating) this.fillSpace();
180+
},
181+
182+
getEventTiles: function() {
183+
var ret = [];
184+
var count = 0;
185+
186+
for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
187+
var mxEv = this.state.room.timeline[i];
188+
var TileType = tileTypes[mxEv.getType()];
189+
if (!TileType) continue;
190+
ret.unshift(
191+
<li key={mxEv.getId()}><TileType mxEvent={mxEv} /></li>
192+
);
193+
++count;
194+
}
195+
return ret;
172196
}
173197
};
174198

0 commit comments

Comments
 (0)