2015-11-27 15:02:32 +00:00
|
|
|
/*
|
2016-01-07 04:06:39 +00:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-11-27 15:02:32 +00: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';
|
|
|
|
|
|
|
|
var React = require('react');
|
|
|
|
var filesize = require('filesize');
|
|
|
|
|
2016-11-04 13:05:34 +00:00
|
|
|
|
2015-11-27 15:02:32 +00:00
|
|
|
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
|
|
|
var Modal = require('../../../Modal');
|
|
|
|
var sdk = require('../../../index');
|
2016-11-04 13:05:34 +00:00
|
|
|
var DecryptFile = require("../../../utils/DecryptFile")
|
2015-11-27 15:02:32 +00:00
|
|
|
|
|
|
|
module.exports = React.createClass({
|
2015-11-30 15:19:43 +00:00
|
|
|
displayName: 'MVideoBody',
|
2015-11-27 15:02:32 +00:00
|
|
|
|
2016-11-04 13:05:34 +00:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
decryptedUrl: null,
|
|
|
|
decryptedThumbnailUrl: null,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-11-27 15:02:32 +00:00
|
|
|
thumbScale: 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
|
2016-07-20 10:58:49 +00:00
|
|
|
return 1;
|
2015-11-27 15:02:32 +00:00
|
|
|
}
|
|
|
|
var widthMulti = thumbWidth / fullWidth;
|
|
|
|
var heightMulti = thumbHeight / fullHeight;
|
|
|
|
if (widthMulti < heightMulti) {
|
|
|
|
// width is the dominant dimension so scaling will be fixed on that
|
|
|
|
return widthMulti;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
// height is the dominant dimension so scaling will be fixed on that
|
|
|
|
return heightMulti;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-11-04 13:05:34 +00:00
|
|
|
_getContentUrl: function() {
|
|
|
|
var content = this.props.mxEvent.getContent();
|
|
|
|
if (content.file !== undefined) {
|
|
|
|
return this.state.decryptedUrl;
|
|
|
|
} else {
|
|
|
|
return MatrixClientPeg.get().mxcUrlToHttp(content.url);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_getThumbUrl: function() {
|
|
|
|
var content = this.props.mxEvent.getContent();
|
|
|
|
if (content.file !== undefined) {
|
|
|
|
return this.state.decryptedThumbnailUrl;
|
2016-11-04 13:13:25 +00:00
|
|
|
} else if (content.info.thumbnail_url) {
|
|
|
|
return MatrixClientPeg.get().mxcUrlToHttp(content.info.thumbnail_url);
|
2016-11-04 13:05:34 +00:00
|
|
|
} else {
|
2016-11-04 13:13:25 +00:00
|
|
|
return null;
|
2016-11-04 13:05:34 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount: function() {
|
|
|
|
var content = this.props.mxEvent.getContent();
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
|
|
|
var thumbnailPromise = Promise.resolve(null);
|
|
|
|
if (content.info.thumbnail_file) {
|
|
|
|
thumbnailPromise = DecryptFile.decryptFile(
|
|
|
|
content.info.thumbnail_file
|
|
|
|
);
|
|
|
|
}
|
|
|
|
thumbnailPromise.then(function(thumbnailBlob) {
|
|
|
|
DecryptFile.decryptFile(
|
|
|
|
content.file
|
|
|
|
).then(function(contentBlob) {
|
|
|
|
if (self._unmounted) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var contentUrl = window.URL.createObjectURL(contentBlob);
|
|
|
|
var thumbUrl = null;
|
|
|
|
if (thumbnailBlob) {
|
|
|
|
thumbUrl = window.URL.createObjectURL(thumbnailBlob);
|
|
|
|
}
|
|
|
|
self.setState({
|
|
|
|
decryptedUrl: contentUrl,
|
|
|
|
decryptedThumbnailUrl: thumbUrl,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}).catch(function (err) {
|
|
|
|
console.warn("Unable to decrypt attachment: ", err)
|
|
|
|
// Set a placeholder image when we can't decrypt the image.
|
|
|
|
self.refs.image.src = "img/warning.svg";
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
this._unmounted = true;
|
|
|
|
if (this.state.decryptedUrl) {
|
|
|
|
window.URL.revokeObjectURL(this.state.decryptedUrl);
|
|
|
|
}
|
|
|
|
if (this.state.decryptedThumbnailUrl) {
|
|
|
|
window.URL.revokeObjectURL(this.state.decryptedThumbnailUrl);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
2015-11-27 15:02:32 +00:00
|
|
|
render: function() {
|
|
|
|
var content = this.props.mxEvent.getContent();
|
2016-11-04 13:05:34 +00: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">
|
|
|
|
<img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
|
|
|
|
alt={content.body} />
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
var contentUrl = this._getContentUrl();
|
|
|
|
var thumbUrl = this._getThumbUrl();
|
2015-11-27 15:02:32 +00:00
|
|
|
|
|
|
|
var height = null;
|
|
|
|
var width = null;
|
|
|
|
var poster = null;
|
|
|
|
var preload = "metadata";
|
|
|
|
if (content.info) {
|
|
|
|
var scale = this.thumbScale(content.info.w, content.info.h, 480, 360);
|
|
|
|
if (scale) {
|
|
|
|
width = Math.floor(content.info.w * scale);
|
|
|
|
height = Math.floor(content.info.h * scale);
|
|
|
|
}
|
|
|
|
|
2016-11-04 13:05:34 +00:00
|
|
|
if (thumbUrl) {
|
|
|
|
poster = thumbUrl;
|
2015-11-27 15:02:32 +00:00
|
|
|
preload = "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-11 01:14:27 +00:00
|
|
|
var download;
|
|
|
|
if (this.props.tileShape === "file_grid") {
|
|
|
|
download = (
|
|
|
|
<div className="mx_MImageBody_download">
|
2016-11-04 13:05:34 +00:00
|
|
|
<a className="mx_MImageBody_downloadLink" href={contentUrl} target="_blank" rel="noopener">
|
2016-09-11 01:14:27 +00:00
|
|
|
{content.body}
|
|
|
|
</a>
|
|
|
|
<div className="mx_MImageBody_size">
|
|
|
|
{ content.info && content.info.size ? filesize(content.info.size) : "" }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
else {
|
2016-09-12 15:28:39 +00:00
|
|
|
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
2016-09-11 01:14:27 +00:00
|
|
|
download = (
|
|
|
|
<div className="mx_MImageBody_download">
|
2016-11-04 13:05:34 +00:00
|
|
|
<a href={contentUrl} target="_blank" rel="noopener">
|
2016-09-11 01:14:27 +00:00
|
|
|
<TintableSvg src="img/download.svg" width="12" height="14"/>
|
|
|
|
Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-11-27 15:02:32 +00:00
|
|
|
return (
|
2016-01-03 00:11:11 +00:00
|
|
|
<span className="mx_MVideoBody">
|
2016-11-04 13:05:34 +00:00
|
|
|
<video className="mx_MVideoBody" src={contentUrl} alt={content.body}
|
2016-03-10 17:38:14 +00:00
|
|
|
controls preload={preload} autoPlay={false}
|
2015-11-27 15:02:32 +00:00
|
|
|
height={height} width={width} poster={poster}>
|
|
|
|
</video>
|
2016-09-11 01:14:27 +00:00
|
|
|
{ download }
|
2015-11-27 15:02:32 +00:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|