Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 7cb3c09

Browse files
NegativeMjarkNegativeMjark
authored
Make the spinner smaller, don't decrypt files as eagerly (#564)
1 parent cf41155 commit 7cb3c09

File tree

4 files changed

+93
-30
lines changed

4 files changed

+93
-30
lines changed

‎src/components/views/messages/MAudioBody.js‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default class MAudioBody extends React.Component {
2929
this.state = {
3030
playing: false,
3131
decryptedUrl: null,
32+
error: null,
3233
}
3334
}
3435
onPlayToggle() {
@@ -51,27 +52,38 @@ export default class MAudioBody extends React.Component {
5152
if (content.file !== undefined && this.state.decryptedUrl === null) {
5253
decryptFile(content.file).done((url) => {
5354
this.setState({
54-
decryptedUrl: url
55+
decryptedUrl: url,
5556
});
5657
}, (err) => {
57-
console.warn("Unable to decrypt attachment: ", err)
58-
// Set a placeholder image when we can't decrypt the image.
59-
this.refs.image.src = "img/warning.svg";
58+
console.warn("Unable to decrypt attachment: ", err);
59+
this.setState({
60+
error: err,
61+
});
6062
});
6163
}
6264
}
6365

6466
render() {
67+
6568
const content = this.props.mxEvent.getContent();
6669

70+
if (this.state.error !== null) {
71+
return (
72+
<span className="mx_MAudioBody" ref="body">
73+
<img src="img/warning.svg" width="16" height="16"/>
74+
Error decrypting audio
75+
</span>
76+
);
77+
}
78+
6779
if (content.file !== undefined && this.state.decryptedUrl === null) {
6880
// Need to decrypt the attachment
6981
// The attachment is decrypted in componentDidMount.
70-
// For now add an img tag with a spinner.
82+
// For now add an img tag with a 16x16 spinner.
83+
// Not sure how tall the audio player is so not sure how tall it should actually be.
7184
return (
7285
<span className="mx_MAudioBody">
73-
<img src="img/spinner.gif" ref="image"
74-
alt={content.body} />
86+
<img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
7587
</span>
7688
);
7789
}

‎src/components/views/messages/MFileBody.js‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {decryptFile} from '../../../utils/DecryptFile';
2424
import Tinter from '../../../Tinter';
2525
import 'isomorphic-fetch';
2626
import q from 'q';
27+
import Modal from '../../../Modal';
28+
2729

2830
// A cached tinted copy of "img/download.svg"
2931
var tintedDownloadImageURL;
@@ -110,19 +112,6 @@ module.exports = React.createClass({
110112
this.id = nextMountId++;
111113
mounts[this.id] = this;
112114
this.tint();
113-
// Check whether we need to decrypt the file content.
114-
const content = this.props.mxEvent.getContent();
115-
if (content.file !== undefined && this.state.decryptedUrl === null) {
116-
decryptFile(content.file).done((url) => {
117-
this.setState({
118-
decryptedUrl: url,
119-
});
120-
}, (err) => {
121-
console.warn("Unable to decrypt attachment: ", err)
122-
// Set a placeholder image when we can't decrypt the image.
123-
this.refs.image.src = "img/warning.svg";
124-
});
125-
}
126115
},
127116

128117
componentWillUnmount: function() {
@@ -141,16 +130,42 @@ module.exports = React.createClass({
141130
const content = this.props.mxEvent.getContent();
142131

143132
const text = this.presentableTextForFile(content);
133+
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
144134

145135
if (content.file !== undefined && this.state.decryptedUrl === null) {
146136

137+
var decrypting = false;
138+
const decrypt = () => {
139+
if (decrypting) {
140+
return false;
141+
}
142+
decrypting = true;
143+
decryptFile(content.file).then((url) => {
144+
this.setState({
145+
decryptedUrl: url,
146+
});
147+
}).catch((err) => {
148+
console.warn("Unable to decrypt attachment: ", err)
149+
// Set a placeholder image when we can't decrypt the image
150+
Modal.createDialog(ErrorDialog, {
151+
description: "Error decrypting attachment"
152+
});
153+
}).finally(function() {
154+
decrypting = false;
155+
}).done();
156+
return false;
157+
};
158+
147159
// Need to decrypt the attachment
148160
// The attachment is decrypted in componentDidMount.
149161
// For now add an img tag with a spinner.
150162
return (
151163
<span className="mx_MFileBody" ref="body">
152-
<img src="img/spinner.gif" ref="image"
153-
alt={content.body} />
164+
<div className="mx_MImageBody_download">
165+
<a href="javascript:void(0)" onClick={decrypt}>
166+
Decrypt {text}
167+
</a>
168+
</div>
154169
</span>
155170
);
156171
}

‎src/components/views/messages/MImageBody.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ module.exports = React.createClass({
3838
return {
3939
decryptedUrl: null,
4040
decryptedThumbnailUrl: null,
41+
error: null
4142
};
4243
},
4344

@@ -124,9 +125,11 @@ module.exports = React.createClass({
124125
});
125126
});
126127
}).catch((err) => {
127-
console.warn("Unable to decrypt attachment: ", err)
128+
console.warn("Unable to decrypt attachment: ", err);
128129
// Set a placeholder image when we can't decrypt the image.
129-
this.refs.image.src = "img/warning.svg";
130+
this.setState({
131+
error: err,
132+
});
130133
}).done();
131134
}
132135
},
@@ -165,15 +168,30 @@ module.exports = React.createClass({
165168
const TintableSvg = sdk.getComponent("elements.TintableSvg");
166169
const content = this.props.mxEvent.getContent();
167170

171+
if (this.state.error !== null) {
172+
return (
173+
<span className="mx_MImageBody" ref="body">
174+
<img src="img/warning.svg" width="16" height="16"/>
175+
Error decrypting image
176+
</span>
177+
);
178+
}
179+
168180
if (content.file !== undefined && this.state.decryptedUrl === null) {
169181

170182
// Need to decrypt the attachment
171183
// The attachment is decrypted in componentDidMount.
172184
// For now add an img tag with a spinner.
173185
return (
174186
<span className="mx_MImageBody" ref="body">
175-
<img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
176-
alt={content.body} />
187+
<div className="mx_MImageBody_thumbnail" ref="image" style={{
188+
"display": "flex",
189+
"align-items": "center",
190+
"justify-items": "center",
191+
"width": "100%",
192+
}}>
193+
<img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
194+
</div>
177195
</span>
178196
);
179197
}

‎src/components/views/messages/MVideoBody.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ module.exports = React.createClass({
3131
return {
3232
decryptedUrl: null,
3333
decryptedThumbnailUrl: null,
34+
error: null,
3435
};
3536
},
3637

@@ -95,22 +96,39 @@ module.exports = React.createClass({
9596
}).catch((err) => {
9697
console.warn("Unable to decrypt attachment: ", err)
9798
// Set a placeholder image when we can't decrypt the image.
98-
this.refs.image.src = "img/warning.svg";
99+
this.setState({
100+
error: err,
101+
});
99102
}).done();
100103
}
101104
},
102105

103106
render: function() {
104107
const content = this.props.mxEvent.getContent();
105108

109+
if (this.state.error !== null) {
110+
return (
111+
<span className="mx_MVideoBody" ref="body">
112+
<img src="img/warning.svg" width="16" height="16"/>
113+
Error decrypting video
114+
</span>
115+
);
116+
}
117+
106118
if (content.file !== undefined && this.state.decryptedUrl === null) {
107119
// Need to decrypt the attachment
108120
// The attachment is decrypted in componentDidMount.
109121
// For now add an img tag with a spinner.
110122
return (
111-
<span className="mx_MImageBody" ref="body">
112-
<img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
113-
alt={content.body} />
123+
<span className="mx_MVideoBody" ref="body">
124+
<div className="mx_MImageBody_thumbnail" ref="image" style={{
125+
"display": "flex",
126+
"align-items": "center",
127+
"justify-items": "center",
128+
"width": "100%",
129+
}}>
130+
<img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
131+
</div>
114132
</span>
115133
);
116134
}

0 commit comments

Comments
 (0)