URL previewing support

src/ImageUtils.js

@@ -0,0 +1,57 @@
+/*
+Copyright 2015, 2016 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 = {
+
+    /**
+     * Returns the actual height that an image of dimensions (fullWidth, fullHeight)
+     * will occupy if resized to fit inside a thumbnail bounding box of size
+     * (thumbWidth, thumbHeight).
+     *
+     * If the aspect ratio of the source image is taller than the aspect ratio of
+     * the thumbnail bounding box, then we return the thumbHeight parameter unchanged.
+     * Otherwise we return the thumbHeight parameter scaled down appropriately to
+     * reflect the actual height the scaled thumbnail occupies.
+     *
+     * This is very useful for calculating how much height a thumbnail will actually
+     * consume in the timeline, when performing scroll offset calcuations
+     * (e.g. scroll locking)
+     */
+    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);
+        }
+    },
+}
+

src/component-index.js

@@ -26,10 +26,6 @@ limitations under the License.
 
 module.exports.components = {};
 module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom');
-module.exports.components['structures.login.ForgotPassword'] = require('./components/structures/login/ForgotPassword');
-module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
-module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
-module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat');
 module.exports.components['structures.MessagePanel'] = require('./components/structures/MessagePanel');
 module.exports.components['structures.RoomStatusBar'] = require('./components/structures/RoomStatusBar');
@@ -38,6 +34,10 @@ module.exports.components['structures.ScrollPanel'] = require('./components/stru
 module.exports.components['structures.TimelinePanel'] = require('./components/structures/TimelinePanel');
 module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar');
 module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings');
+module.exports.components['structures.login.ForgotPassword'] = require('./components/structures/login/ForgotPassword');
+module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
+module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
+module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['views.avatars.BaseAvatar'] = require('./components/views/avatars/BaseAvatar');
 module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar');
 module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar');
@@ -64,10 +64,10 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie
 module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin');
 module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm');
 module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig');
-module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody');
 module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
 module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
+module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
 module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
 module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
@@ -77,6 +77,7 @@ module.exports.components['views.rooms.AuxPanel'] = require('./components/views/
 module.exports.components['views.rooms.EntityTile'] = require('./components/views/rooms/EntityTile');
 module.exports.components['views.rooms.EventTile'] = require('./components/views/rooms/EventTile');
 module.exports.components['views.rooms.InviteMemberList'] = require('./components/views/rooms/InviteMemberList');
+module.exports.components['views.rooms.LinkPreviewWidget'] = require('./components/views/rooms/LinkPreviewWidget');
 module.exports.components['views.rooms.MemberInfo'] = require('./components/views/rooms/MemberInfo');
 module.exports.components['views.rooms.MemberList'] = require('./components/views/rooms/MemberList');
 module.exports.components['views.rooms.MemberTile'] = require('./components/views/rooms/MemberTile');
@@ -90,8 +91,8 @@ module.exports.components['views.rooms.RoomPreviewBar'] = require('./components/
 module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
 module.exports.components['views.rooms.RoomTopicEditor'] = require('./components/views/rooms/RoomTopicEditor');
-module.exports.components['views.rooms.SearchableEntityList'] = require('./components/views/rooms/SearchableEntityList');
 module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile');
+module.exports.components['views.rooms.SearchableEntityList'] = require('./components/views/rooms/SearchableEntityList');
 module.exports.components['views.rooms.SimpleRoomHeader'] = require('./components/views/rooms/SimpleRoomHeader');
 module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar');
 module.exports.components['views.rooms.TopUnreadMessagesBar'] = require('./components/views/rooms/TopUnreadMessagesBar');

src/components/structures/MessagePanel.js

@@ -337,6 +337,7 @@ module.exports = React.createClass({
                         ref={this._collectEventNode.bind(this, eventId)}
                         data-scroll-token={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
+                        onWidgetLoad={this._onWidgetLoad}
                         last={last} isSelectedEvent={highlight} />
                 </li>
         );
@@ -398,6 +399,15 @@ module.exports = React.createClass({
         this.eventNodes[eventId] = node;
     },
 
+    // once dynamic content in the events load, make the scrollPanel check the
+    // scroll offsets.
+    _onWidgetLoad: function() {
+        var scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel) {
+            scrollPanel.forceUpdate();
+        }
+    },
+
     onResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },

src/components/structures/RoomView.js

@@ -798,9 +798,9 @@ module.exports = React.createClass({
             }
         }
 
-        // once images in the search results load, make the scrollPanel check
+        // once dynamic content in the search results load, make the scrollPanel check
         // the scroll offsets.
-        var onImageLoad = () => {
+        var onWidgetLoad = () => {
             var scrollPanel = this.refs.searchResultsPanel;
             if (scrollPanel) {
                 scrollPanel.checkScroll();
@@ -844,7 +844,7 @@ module.exports = React.createClass({
                      searchResult={result}
                      searchHighlights={this.state.searchHighlights}
                      resultLink={resultLink}
-                     onImageLoad={onImageLoad}/>);
+                     onWidgetLoad={onWidgetLoad}/>);
         }
         return ret;
     },

src/components/views/messages/MImageBody.js

@@ -20,6 +20,7 @@ var React = require('react');
 var filesize = require('filesize');
 
 var MatrixClientPeg = require('../../../MatrixClientPeg');
+var ImageUtils = require('../../../ImageUtils');
 var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
@@ -30,31 +31,6 @@ module.exports = React.createClass({
     propTypes: {
         /* the MatrixEvent to show */
         mxEvent: React.PropTypes.object.isRequired,
-
-        /* callback called when images in events are loaded */
-        onImageLoad: React.PropTypes.func,
-    },
-
-    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);
-        }
     },
 
     onClick: function onClick(ev) {
@@ -71,6 +47,7 @@ module.exports = React.createClass({
             if (content.info) {
                 params.width = content.info.w;
                 params.height = content.info.h;
+                params.fileSize = content.info.size;
             }
 
             Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
@@ -134,7 +111,9 @@ module.exports = React.createClass({
         // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
 
         //console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
-        if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
+        if (content.info) {
+            thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
+        }
         this.refs.image.style.height = thumbHeight + "px";
         // console.log("Image height now", thumbHeight);
     },
@@ -152,8 +131,7 @@ module.exports = React.createClass({
                         <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                             alt={content.body}
                             onMouseEnter={this.onImageEnter}
-                            onMouseLeave={this.onImageLeave}
-                            onLoad={this.props.onImageLoad} />
+                            onMouseLeave={this.onImageLeave} />
                     </a>
                     <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">

src/components/views/messages/MessageEvent.js

@@ -38,15 +38,18 @@ module.exports = React.createClass({
         /* link URL for the highlights */
         highlightLink: React.PropTypes.string,
 
-        /* callback called when images in events are loaded */
-        onImageLoad: React.PropTypes.func,
+        /* callback called when dynamic content in events are loaded */
+        onWidgetLoad: React.PropTypes.func,
     },
 
+    getEventTileOps: function() {
+        return this.refs.body ? this.refs.body.getEventTileOps() : null;
+    },
 
     render: function() {
-        var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
+        var UnknownBody = sdk.getComponent('messages.UnknownBody');
 
-        var tileTypes = {
+        var bodyTypes = {
             'm.text': sdk.getComponent('messages.TextualBody'),
             'm.notice': sdk.getComponent('messages.TextualBody'),
             'm.emote': sdk.getComponent('messages.TextualBody'),
@@ -57,13 +60,13 @@ module.exports = React.createClass({
 
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;
-        var TileType = UnknownMessageTile;
-        if (msgtype && tileTypes[msgtype]) {
-            TileType = tileTypes[msgtype];
+        var BodyType = UnknownBody;
+        if (msgtype && bodyTypes[msgtype]) {
+            BodyType = bodyTypes[msgtype];
         }
 
-        return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
+        return <BodyType ref="body" mxEvent={this.props.mxEvent} highlights={this.props.highlights}
                     highlightLink={this.props.highlightLink}
-                    onImageLoad={this.props.onImageLoad} />;
+                    onWidgetLoad={this.props.onWidgetLoad} />;
     },
 });