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

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

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>
);
}