mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make the spinner smaller, don't decrypt files as eagerly (#564)

Browse source
This commit is contained in:
Mark Haines 2016-11-18 20:08:26 +00:00 committed by GitHub
parent cf41155610
commit 7cb3c0935b
4 changed files with 93 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/views/messages/MAudioBody.js
View file

@ -29,6 +29,7 @@ export default class MAudioBody extends React.Component {
this.state = {
playing: false,
decryptedUrl: null,
error: null,
}
}
onPlayToggle() {
@ -51,27 +52,38 @@ export default class MAudioBody extends React.Component {
if (content.file !== undefined && this.state.decryptedUrl === null) {
decryptFile(content.file).done((url) => {
this.setState({
decryptedUrl: url
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";
console.warn("Unable to decrypt attachment: ", err);
this.setState({
error: err,
});
});
}
}
render() {
const content = this.props.mxEvent.getContent();
if (this.state.error !== null) {
return (
<span className="mx_MAudioBody" ref="body">
<img src="img/warning.svg" width="16" height="16"/>
Error decrypting audio
</span>
);
}
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.
// For now add an img tag with a 16x16 spinner.
// Not sure how tall the audio player is so not sure how tall it should actually be.
return (
<span className="mx_MAudioBody">
<img src="img/spinner.gif" ref="image"
alt={content.body} />
<img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
</span>
);
}

45
src/components/views/messages/MFileBody.js
View file

@ -24,6 +24,8 @@ import {decryptFile} from '../../../utils/DecryptFile';
import Tinter from '../../../Tinter';
import 'isomorphic-fetch';
import q from 'q';
import Modal from '../../../Modal';
// A cached tinted copy of "img/download.svg"
var tintedDownloadImageURL;
@ -110,19 +112,6 @@ module.exports = React.createClass({
this.id = nextMountId++;
mounts[this.id] = this;
this.tint();
// Check whether we need to decrypt the file content.
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() {
@ -141,16 +130,42 @@ module.exports = React.createClass({
const content = this.props.mxEvent.getContent();
const text = this.presentableTextForFile(content);
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
if (content.file !== undefined && this.state.decryptedUrl === null) {
var decrypting = false;
const decrypt = () => {
if (decrypting) {
return false;
}
decrypting = true;
decryptFile(content.file).then((url) => {
this.setState({
decryptedUrl: url,
});
}).catch((err) => {
console.warn("Unable to decrypt attachment: ", err)
// Set a placeholder image when we can't decrypt the image
Modal.createDialog(ErrorDialog, {
description: "Error decrypting attachment"
});
}).finally(function() {
decrypting = false;
}).done();
return false;
};
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a spinner.
return (
<span className="mx_MFileBody" ref="body">
<img src="img/spinner.gif" ref="image"
alt={content.body} />
<div className="mx_MImageBody_download">
<a href="javascript:void(0)" onClick={decrypt}>
Decrypt {text}
</a>
</div>
</span>
);
}

26
src/components/views/messages/MImageBody.js
View file

@ -38,6 +38,7 @@ module.exports = React.createClass({
return {
decryptedUrl: null,
decryptedThumbnailUrl: null,
error: null
};
},
@ -124,9 +125,11 @@ module.exports = React.createClass({
});
});
}).catch((err) => {
console.warn("Unable to decrypt attachment: ", 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";
this.setState({
error: err,
});
}).done();
}
},
@ -165,6 +168,15 @@ module.exports = React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const content = this.props.mxEvent.getContent();
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>
);
}
if (content.file !== undefined && this.state.decryptedUrl === null) {
// Need to decrypt the attachment
@ -172,8 +184,14 @@ module.exports = React.createClass({
// 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} />
<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>
</span>
);
}

26
src/components/views/messages/MVideoBody.js
View file

@ -31,6 +31,7 @@ module.exports = React.createClass({
return {
decryptedUrl: null,
decryptedThumbnailUrl: null,
error: null,
};
},
@ -95,7 +96,9 @@ module.exports = React.createClass({
}).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";
this.setState({
error: err,
});
}).done();
}
},
@ -103,14 +106,29 @@ module.exports = React.createClass({
render: function() {
const content = this.props.mxEvent.getContent();
if (this.state.error !== null) {
return (
<span className="mx_MVideoBody" ref="body">
<img src="img/warning.svg" width="16" height="16"/>
Error decrypting video
</span>
);
}
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 className="mx_MVideoBody" ref="body">
<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>
</span>
);
}