-
+
Download {text}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 4a3cfce591..526fc6a3a5 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -16,15 +16,14 @@ limitations under the License.
'use strict';
-import React from 'react';
-import MFileBody from './MFileBody';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import ImageUtils from '../../../ImageUtils';
-import Modal from '../../../Modal';
-import sdk from '../../../index';
-import dis from '../../../dispatcher';
-import {decryptFile} from '../../../utils/DecryptFile';
+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");
module.exports = React.createClass({
displayName: 'MImageBody',
@@ -34,20 +33,13 @@ module.exports = React.createClass({
mxEvent: React.PropTypes.object.isRequired,
},
- getInitialState: function() {
- return {
- decryptedUrl: null,
- };
- },
-
-
onClick: function onClick(ev) {
if (ev.button == 0 && !ev.metaKey) {
ev.preventDefault();
- const content = this.props.mxEvent.getContent();
- const httpUrl = this._getContentUrl();
- const ImageView = sdk.getComponent("elements.ImageView");
- const params = {
+ var content = this.props.mxEvent.getContent();
+ var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
+ var ImageView = sdk.getComponent("elements.ImageView");
+ var params = {
src: httpUrl,
mxEvent: this.props.mxEvent
};
@@ -63,7 +55,7 @@ module.exports = React.createClass({
},
_isGif: function() {
- const content = this.props.mxEvent.getContent();
+ var content = this.props.mxEvent.getContent();
return (content && content.info && content.info.mimetype === "image/gif");
},
@@ -72,7 +64,9 @@ module.exports = React.createClass({
return;
}
var imgElement = e.target;
- imgElement.src = this._getContentUrl();
+ imgElement.src = MatrixClientPeg.get().mxcUrlToHttp(
+ this.props.mxEvent.getContent().url
+ );
},
onImageLeave: function(e) {
@@ -83,40 +77,14 @@ module.exports = React.createClass({
imgElement.src = this._getThumbUrl();
},
- _getContentUrl: function() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
- return this.state.decryptedUrl;
- } else {
- return MatrixClientPeg.get().mxcUrlToHttp(content.url);
- }
- },
-
_getThumbUrl: function() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
- // TODO: Decrypt and use the thumbnail file if one is present.
- return this.state.decryptedUrl;
- } else {
- return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600);
- }
+ var content = this.props.mxEvent.getContent();
+ return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600);
},
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
this.fixupHeight();
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined && this.state.decryptedUrl === null) {
- decryptFile(content.file).done((url) => {
- this.setState({
- decryptedUrl: url,
- });
- }, (err) => {
- console.warn("Unable to decrypt attachment: ", err)
- // Set a placeholder image when we can't decrypt the image.
- this.refs.image.src = "img/warning.svg";
- });
- }
},
componentWillUnmount: function() {
@@ -135,13 +103,14 @@ module.exports = React.createClass({
return;
}
- 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.
+ var content = this.props.mxEvent.getContent();
+
+ var thumbHeight = null;
+ var timelineWidth = this.refs.body.offsetWidth;
+ var maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
// 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);
- var thumbHeight = null;
if (content.info) {
thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
}
@@ -150,35 +119,45 @@ module.exports = React.createClass({
},
render: function() {
- const TintableSvg = sdk.getComponent("elements.TintableSvg");
- const content = this.props.mxEvent.getContent();
+ var TintableSvg = sdk.getComponent("elements.TintableSvg");
+ var content = this.props.mxEvent.getContent();
+ var cli = MatrixClientPeg.get();
- 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 (
-
- 
-
+ var download;
+ if (this.props.tileShape === "file_grid") {
+ download = (
+
+
+ {content.body}
+
+
+ { content.info && content.info.size ? filesize(content.info.size) : "" }
+
+
+ );
+ }
+ else {
+ download = (
+
);
}
- const contentUrl = this._getContentUrl();
- const thumbUrl = this._getThumbUrl();
-
+ var thumbUrl = this._getThumbUrl();
if (thumbUrl) {
return (
-
+
-
+ { download }
);
} else if (content.body) {
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index a32348ea1a..d29a3ea53e 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -16,24 +16,16 @@ limitations under the License.
'use strict';
-import React from 'react';
-import MFileBody from './MFileBody';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import Model from '../../../Modal';
-import sdk from '../../../index';
-import { decryptFile } from '../../../utils/DecryptFile';
-import q from 'q';
+var React = require('react');
+var filesize = require('filesize');
+
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var Modal = require('../../../Modal');
+var sdk = require('../../../index');
module.exports = React.createClass({
displayName: 'MVideoBody',
- getInitialState: function() {
- return {
- decryptedUrl: null,
- decryptedThumbnailUrl: null,
- };
- },
-
thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
if (!fullWidth || !fullHeight) {
// Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
@@ -56,92 +48,59 @@ module.exports = React.createClass({
}
},
- _getContentUrl: function() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
- return this.state.decryptedUrl;
- } else {
- return MatrixClientPeg.get().mxcUrlToHttp(content.url);
- }
- },
-
- _getThumbUrl: function() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined) {
- return this.state.decryptedThumbnailUrl;
- } else if (content.info.thumbnail_url) {
- return MatrixClientPeg.get().mxcUrlToHttp(content.info.thumbnail_url);
- } else {
- return null;
- }
- },
-
- componentDidMount: function() {
- const content = this.props.mxEvent.getContent();
- if (content.file !== undefined && this.state.decryptedUrl === null) {
- 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,
- });
- });
- }).catch((err) => {
- console.warn("Unable to decrypt attachment: ", err)
- // Set a placeholder image when we can't decrypt the image.
- this.refs.image.src = "img/warning.svg";
- }).done();
- }
- },
-
render: function() {
- const content = this.props.mxEvent.getContent();
-
- 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 (
-
-
-
- );
- }
-
- const contentUrl = this._getContentUrl();
- const thumbUrl = this._getThumbUrl();
+ var content = this.props.mxEvent.getContent();
+ var cli = MatrixClientPeg.get();
var height = null;
var width = null;
var poster = null;
var preload = "metadata";
if (content.info) {
- const scale = this.thumbScale(content.info.w, content.info.h, 480, 360);
+ 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);
}
- if (thumbUrl) {
- poster = thumbUrl;
+ if (content.info.thumbnail_url) {
+ poster = cli.mxcUrlToHttp(content.info.thumbnail_url);
preload = "none";
}
}
+ var download;
+ if (this.props.tileShape === "file_grid") {
+ download = (
+
+
+ {content.body}
+
+
+ { content.info && content.info.size ? filesize(content.info.size) : "" }
+
+
+ );
+ }
+ else {
+ var TintableSvg = sdk.getComponent("elements.TintableSvg");
+ download = (
+
+ );
+ }
+
return (
-
-
+ { download }
);
},
diff --git a/src/utils/DecryptFile.js b/src/utils/DecryptFile.js
deleted file mode 100644
index 38eab1d073..0000000000
--- a/src/utils/DecryptFile.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-Copyright 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.
-*/
-
-// Pull in the encryption lib so that we can decrypt attachments.
-import encrypt from 'browser-encrypt-attachment';
-// Pull in a fetch polyfill so we can download encrypted attachments.
-import 'isomorphic-fetch';
-// Grab the client so that we can turn mxc:// URLs into https:// URLS.
-import MatrixClientPeg from '../MatrixClientPeg';
-import q from 'q';
-
-
-/**
- * Read blob as a data:// URI.
- * @return {Promise} A promise that resolves with the data:// URI.
- */
-function readBlobAsDataUri(file) {
- var deferred = q.defer();
- var reader = new FileReader();
- reader.onload = function(e) {
- deferred.resolve(e.target.result);
- };
- reader.onerror = function(e) {
- deferred.reject(e);
- };
- reader.readAsDataURL(file);
- return deferred.promise;
-}
-
-
-/**
- * Decrypt a file attached to a matrix event.
- * @param file {Object} The json taken from the matrix event.
- * This passed to [link]{@link https://github.com/matrix-org/browser-encrypt-attachments}
- * as the encryption info object, so will also have the those keys in addition to
- * the keys below.
- * @param file.url {string} An mxc:// URL for the encrypted file.
- * @param file.mimetype {string} The MIME-type of the plaintext file.
- */
-export function decryptFile(file) {
- const url = MatrixClientPeg.get().mxcUrlToHttp(file.url);
- // Download the encrypted file as an array buffer.
- return q(fetch(url)).then(function(response) {
- return response.arrayBuffer();
- }).then(function(responseData) {
- // Decrypt the array buffer using the information taken from
- // the event content.
- return encrypt.decryptAttachment(responseData, file);
- }).then(function(dataArray) {
- // Turn the array into a Blob and give it the correct MIME-type.
- var blob = new Blob([dataArray], {type: file.mimetype});
- return readBlobAsDataUri(blob);
- });
-}