URL previewing support #260
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| /* | ||
| 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 = { | ||
| 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); | ||
| } | ||
| }, | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,6 +22,7 @@ var HtmlUtils = require('../../../HtmlUtils'); | |
| var linkify = require('linkifyjs'); | ||
| var linkifyElement = require('linkifyjs/element'); | ||
| var linkifyMatrix = require('../../../linkify-matrix'); | ||
| var sdk = require('../../../index'); | ||
|
|
||
| linkifyMatrix(linkify); | ||
|
|
||
|
|
@@ -37,28 +38,76 @@ module.exports = React.createClass({ | |
|
|
||
| /* link URL for the highlights */ | ||
| highlightLink: React.PropTypes.string, | ||
|
|
||
| /* callback for when our widget has loaded */ | ||
| onWidgetLoad: React.PropTypes.func, | ||
| }, | ||
|
|
||
| getInitialState: function() { | ||
| return { | ||
| link: null, | ||
|
There was a problem hiding this comment. given There was a problem hiding this comment. It can't be set before the component is mounted, as the links in the message are calculated by linkifyElement() which has to run after the DOM has been created and the component mounted. Therefore we'd still need to re-render() in order to pull in the right LinkPreviewWidget for the links we've discovered - and so might as well still be considered component state. wdyt? There was a problem hiding this comment. I think I'd missed that calculating There was a problem hiding this comment. The only thing that might be nice would be a comment on |
||
|
|
||
| // track whether the preview widget is hidden | ||
| // we can't directly use mxEvent's widgetHidden property | ||
| // as shouldComponentUpdate needs to be able to do before & after | ||
| // comparisons of the property (and we don't pass it in as a top | ||
| // level prop to avoid bloating the number of props flying around) | ||
| widgetHidden: false, | ||
| }; | ||
| }, | ||
|
|
||
| componentDidMount: function() { | ||
| linkifyElement(this.refs.content, linkifyMatrix.options); | ||
|
|
||
| var link = this.findLink(this.refs.content.children); | ||
| if (link) { | ||
| this.setState({ link: link.getAttribute("href") }); | ||
|
|
||
| // lazy-load the hidden state of the preview widget from localstorage | ||
| if (global.localStorage) { | ||
| var hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId()); | ||
| this.props.mxEvent.widgetHidden = hidden; | ||
| this.setState({ widgetHidden: hidden }); | ||
| } | ||
| } | ||
|
|
||
| if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") | ||
| HtmlUtils.highlightDom(ReactDOM.findDOMNode(this)); | ||
| }, | ||
|
|
||
| findLink: function(nodes) { | ||
|
There was a problem hiding this comment. elsewhere we've put helper methods after the lifecycle functions. |
||
| for (var i = 0; i < nodes.length; i++) { | ||
| var node = nodes[i]; | ||
| if (node.tagName === "A" && node.getAttribute("href")) { | ||
| return node; | ||
| } | ||
| else if (node.children && node.children.length) { | ||
| return this.findLink(node.children) | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| shouldComponentUpdate: function(nextProps, nextState) { | ||
| // exploit that events are immutable :) | ||
| return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() || | ||
| nextProps.highlights !== this.props.highlights || | ||
| nextProps.highlightLink !== this.props.highlightLink || | ||
| nextState.link !== this.state.link || | ||
| nextProps.mxEvent.widgetHidden !== this.state.widgetHidden); | ||
| }, | ||
|
|
||
| componentWillUpdate: function(nextProps, nextState) { | ||
| this.setState({ widgetHidden: nextProps.mxEvent.widgetHidden }); | ||
|
There was a problem hiding this comment. https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate says 'You cannot use this.setState() in this method.' Perhaps you could update There was a problem hiding this comment. I feel like I've made a spectacular mess of the whole deal of tracking
Which feels like a spectacular violation of there being one source of There was a problem hiding this comment. Yes... Is tracking it in mxEvent actually buying us anything, given we track it in TextualBody anyway? There was a problem hiding this comment. yes, because MessageContextualMenu can't get at TextualBody, but it can get at mxEvent (when unhiding the wretched things) There was a problem hiding this comment. I'm sure there is a better way of communicating this from contextualmenu to textualbody than piping it through mxEvent... There was a problem hiding this comment. what do you have in mind? dispatcher? or threading properties everywhere?
There was a problem hiding this comment. You could expose an interface object from There was a problem hiding this comment. I have a really weird mental blank on this - sorry :( Are you suggesting that There was a problem hiding this comment. Yes, exactly so.
specifically,
|
||
| }, | ||
|
|
||
| onCancelClick: function(event) { | ||
| this.props.mxEvent.widgetHidden = true; | ||
| this.setState({ widgetHidden: true }); | ||
|
There was a problem hiding this comment. Poking this into the js-sdk |
||
| // FIXME: persist this somewhere smarter than local storage | ||
| if (global.localStorage) { | ||
| global.localStorage.setItem("hide_preview_" + this.props.mxEvent.getId(), "1"); | ||
| } | ||
| this.forceUpdate(); | ||
| }, | ||
|
|
||
| render: function() { | ||
|
|
@@ -67,24 +116,38 @@ module.exports = React.createClass({ | |
| var body = HtmlUtils.bodyToHtml(content, this.props.highlights, | ||
| {highlightLink: this.props.highlightLink}); | ||
|
|
||
|
|
||
| var widget; | ||
| if (this.state.link && !this.state.widgetHidden) { | ||
| var LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget'); | ||
| widget = <LinkPreviewWidget | ||
| link={ this.state.link } | ||
| mxEvent={ this.props.mxEvent } | ||
| onCancelClick={ this.onCancelClick } | ||
| onWidgetLoad={ this.props.onWidgetLoad }/>; | ||
| } | ||
|
|
||
| switch (content.msgtype) { | ||
| case "m.emote": | ||
| var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); | ||
| return ( | ||
| <span ref="content" className="mx_MEmoteBody mx_EventTile_content"> | ||
| * { name } { body } | ||
| { widget } | ||
| </span> | ||
| ); | ||
| case "m.notice": | ||
| return ( | ||
| <span ref="content" className="mx_MNoticeBody mx_EventTile_content"> | ||
| { body } | ||
| { widget } | ||
| </span> | ||
| ); | ||
| default: // including "m.text" | ||
| return ( | ||
| <span ref="content" className="mx_MTextBody mx_EventTile_content"> | ||
| { body } | ||
| { widget } | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now that this is a public function, it would be nice to give this a comment saying what it does and what the parameters mean. How does its result relate to the
thumbHeightparam? Which of the params are allowed to be undefined? I could figure it out, but I shouldn't have to.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done