2015-11-27 18:02:32 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-11-27 18:02:32 +03:00
|
|
|
|
|
|
|
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';
|
|
|
|
|
2016-11-08 14:42:20 +03:00
|
|
|
import React from 'react';
|
2016-11-04 21:20:20 +03:00
|
|
|
import MFileBody from './MFileBody';
|
2016-11-08 14:42:20 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import ImageUtils from '../../../ImageUtils';
|
|
|
|
import Modal from '../../../Modal';
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import dis from '../../../dispatcher';
|
2016-11-08 15:57:24 +03:00
|
|
|
import {decryptFile} from '../../../utils/DecryptFile';
|
2016-11-15 14:22:39 +03:00
|
|
|
import q from 'q';
|
2016-11-02 19:26:10 +03:00
|
|
|
|
2015-11-27 18:02:32 +03:00
|
|
|
module.exports = React.createClass({
|
2015-11-30 18:19:43 +03:00
|
|
|
displayName: 'MImageBody',
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2016-02-22 20:19:04 +03:00
|
|
|
propTypes: {
|
|
|
|
/* the MatrixEvent to show */
|
|
|
|
mxEvent: React.PropTypes.object.isRequired,
|
2015-11-27 18:02:32 +03:00
|
|
|
},
|
|
|
|
|
2016-11-04 14:52:47 +03:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
decryptedUrl: null,
|
2016-11-15 14:22:39 +03:00
|
|
|
decryptedThumbnailUrl: null,
|
2016-11-18 23:08:26 +03:00
|
|
|
error: null
|
2016-11-04 14:52:47 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
|
2015-12-08 22:49:16 +03:00
|
|
|
onClick: function onClick(ev) {
|
2015-11-27 18:02:32 +03:00
|
|
|
if (ev.button == 0 && !ev.metaKey) {
|
|
|
|
ev.preventDefault();
|
2016-11-08 15:57:24 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
|
|
|
const httpUrl = this._getContentUrl();
|
|
|
|
const ImageView = sdk.getComponent("elements.ImageView");
|
|
|
|
const params = {
|
2015-11-27 18:02:32 +03:00
|
|
|
src: httpUrl,
|
2015-12-08 22:49:16 +03:00
|
|
|
mxEvent: this.props.mxEvent
|
|
|
|
};
|
|
|
|
|
|
|
|
if (content.info) {
|
|
|
|
params.width = content.info.w;
|
|
|
|
params.height = content.info.h;
|
2016-04-07 20:58:50 +03:00
|
|
|
params.fileSize = content.info.size;
|
2015-12-08 22:49:16 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
|
2015-11-27 18:02:32 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_isGif: function() {
|
2016-11-08 15:57:24 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2015-11-27 18:02:32 +03:00
|
|
|
return (content && content.info && content.info.mimetype === "image/gif");
|
|
|
|
},
|
|
|
|
|
|
|
|
onImageEnter: function(e) {
|
|
|
|
if (!this._isGif()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var imgElement = e.target;
|
2016-11-04 21:40:57 +03:00
|
|
|
imgElement.src = this._getContentUrl();
|
2015-11-27 18:02:32 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onImageLeave: function(e) {
|
|
|
|
if (!this._isGif()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var imgElement = e.target;
|
|
|
|
imgElement.src = this._getThumbUrl();
|
|
|
|
},
|
|
|
|
|
2016-11-04 14:52:47 +03:00
|
|
|
_getContentUrl: function() {
|
2016-11-08 14:42:20 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined) {
|
|
|
|
return this.state.decryptedUrl;
|
|
|
|
} else {
|
|
|
|
return MatrixClientPeg.get().mxcUrlToHttp(content.url);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-11-27 18:02:32 +03:00
|
|
|
_getThumbUrl: function() {
|
2016-11-08 14:42:20 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined) {
|
2016-11-15 14:22:39 +03:00
|
|
|
if (this.state.decryptedThumbnailUrl) {
|
|
|
|
return this.state.decryptedThumbnailUrl;
|
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
return this.state.decryptedUrl;
|
|
|
|
} else {
|
|
|
|
return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600);
|
|
|
|
}
|
2015-11-27 18:02:32 +03:00
|
|
|
},
|
|
|
|
|
2016-03-24 03:13:32 +03:00
|
|
|
componentDidMount: function() {
|
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
|
|
|
this.fixupHeight();
|
2016-11-08 14:42:20 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
2016-11-15 14:22:39 +03:00
|
|
|
var thumbnailPromise = q(null);
|
|
|
|
if (content.info.thumbnail_file) {
|
|
|
|
thumbnailPromise = decryptFile(
|
|
|
|
content.info.thumbnail_file
|
|
|
|
);
|
|
|
|
}
|
|
|
|
thumbnailPromise.then((thumbnailUrl) => {
|
|
|
|
decryptFile(content.file).then((contentUrl) => {
|
|
|
|
this.setState({
|
|
|
|
decryptedUrl: contentUrl,
|
|
|
|
decryptedThumbnailUrl: thumbnailUrl,
|
|
|
|
});
|
2016-11-04 18:39:39 +03:00
|
|
|
});
|
2016-11-15 14:22:39 +03:00
|
|
|
}).catch((err) => {
|
2016-11-18 23:08:26 +03:00
|
|
|
console.warn("Unable to decrypt attachment: ", err);
|
2016-11-04 14:52:47 +03:00
|
|
|
// Set a placeholder image when we can't decrypt the image.
|
2016-11-18 23:08:26 +03:00
|
|
|
this.setState({
|
|
|
|
error: err,
|
|
|
|
});
|
2016-11-15 14:22:39 +03:00
|
|
|
}).done();
|
2016-11-04 14:52:47 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-24 03:13:32 +03:00
|
|
|
componentWillUnmount: function() {
|
|
|
|
dis.unregister(this.dispatcherRef);
|
|
|
|
},
|
|
|
|
|
|
|
|
onAction: function(payload) {
|
|
|
|
if (payload.action === "timeline_resize") {
|
|
|
|
this.fixupHeight();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
fixupHeight: function() {
|
2016-03-24 19:58:27 +03:00
|
|
|
if (!this.refs.image) {
|
2016-03-29 02:46:51 +03:00
|
|
|
console.warn("Refusing to fix up height on MImageBody with no image element");
|
2016-03-24 19:58:27 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-11-08 15:57:24 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
|
|
|
const timelineWidth = this.refs.body.offsetWidth;
|
|
|
|
const maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
|
2016-03-24 04:12:51 +03:00
|
|
|
// the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
|
2016-03-24 03:13:32 +03:00
|
|
|
|
2016-03-24 19:58:27 +03:00
|
|
|
//console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
|
2016-11-08 15:57:24 +03:00
|
|
|
var thumbHeight = null;
|
2016-04-02 02:36:19 +03:00
|
|
|
if (content.info) {
|
|
|
|
thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
|
|
|
|
}
|
2016-03-24 19:58:27 +03:00
|
|
|
this.refs.image.style.height = thumbHeight + "px";
|
2016-03-29 02:46:51 +03:00
|
|
|
// console.log("Image height now", thumbHeight);
|
2016-03-24 03:13:32 +03:00
|
|
|
},
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2016-03-24 03:13:32 +03:00
|
|
|
render: function() {
|
2016-11-08 15:57:24 +03:00
|
|
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-11 14:59:08 +03:00
|
|
|
|
2016-11-18 23:08:26 +03:00
|
|
|
if (this.state.error !== null) {
|
|
|
|
return (
|
|
|
|
<span className="mx_MImageBody" ref="body">
|
|
|
|
<img src="img/warning.svg" width="16" height="16"/>
|
|
|
|
Error decrypting image
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
|
|
|
|
|
|
|
// Need to decrypt the attachment
|
|
|
|
// The attachment is decrypted in componentDidMount.
|
|
|
|
// For now add an img tag with a spinner.
|
|
|
|
return (
|
|
|
|
<span className="mx_MImageBody" ref="body">
|
2016-11-18 23:08:26 +03:00
|
|
|
<div className="mx_MImageBody_thumbnail" ref="image" style={{
|
|
|
|
"display": "flex",
|
|
|
|
"align-items": "center",
|
|
|
|
"justify-items": "center",
|
|
|
|
"width": "100%",
|
|
|
|
}}>
|
|
|
|
<img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
|
|
|
|
</div>
|
2016-11-04 14:52:47 +03:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-11-08 15:57:24 +03:00
|
|
|
const contentUrl = this._getContentUrl();
|
|
|
|
const thumbUrl = this._getThumbUrl();
|
2016-11-04 14:52:47 +03:00
|
|
|
|
2016-11-04 14:52:47 +03:00
|
|
|
if (thumbUrl) {
|
2015-11-27 18:02:32 +03:00
|
|
|
return (
|
2016-03-24 19:58:27 +03:00
|
|
|
<span className="mx_MImageBody" ref="body">
|
2016-11-04 14:52:47 +03:00
|
|
|
<a href={contentUrl} onClick={ this.onClick }>
|
2016-03-24 19:58:27 +03:00
|
|
|
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
|
2016-03-24 03:13:32 +03:00
|
|
|
alt={content.body}
|
2015-11-27 18:02:32 +03:00
|
|
|
onMouseEnter={this.onImageEnter}
|
2016-04-02 02:36:19 +03:00
|
|
|
onMouseLeave={this.onImageLeave} />
|
2015-11-27 18:02:32 +03:00
|
|
|
</a>
|
2016-11-04 21:20:20 +03:00
|
|
|
<MFileBody {...this.props} decryptedUrl={this.state.decryptedUrl} />
|
2015-11-27 18:02:32 +03:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
} else if (content.body) {
|
|
|
|
return (
|
2016-01-03 03:11:11 +03:00
|
|
|
<span className="mx_MImageBody">
|
2015-11-27 18:02:32 +03:00
|
|
|
Image '{content.body}' cannot be displayed.
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
2016-01-03 03:11:11 +03:00
|
|
|
<span className="mx_MImageBody">
|
2015-11-27 18:02:32 +03:00
|
|
|
This image cannot be displayed.
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|