OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix class identifiers

pull/21833/head
Travis Ralston 2021-06-21 15:13:12 -06:00
parent 50127da227
commit 9f2eba4351
3 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_components.scss
View File

@ -156,6 +156,7 @@
@import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss";
@import "./views/messages/_EventTileBubble.scss";
@import "./views/messages/_MAudioBody.scss";
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";

19
res/css/views/messages/_MAudioBody.scss Normal file
View File

@ -0,0 +1,19 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
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.
*/
.mx_MAudioBody {
display: inline-block; // makes the playback controls magically line up
}

16
src/components/views/messages/MAudioBody.tsx
View File

@ -55,7 +55,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
this.setState({decryptedBlob: blob});
} catch (e) {
this.setState({error: e});
console.warn("Unable to decrypt voice message", e);
console.warn("Unable to decrypt audio message", e);
return; // stop processing the audio file
}
} else {
@ -63,15 +63,13 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer());
} catch (e) {
this.setState({error: e});
console.warn("Unable to download voice message", e);
console.warn("Unable to download audio message", e);
return; // stop processing the audio file
}
}
const waveform = content?.["org.matrix.msc1767.audio"]?.waveform?.map(p => p / 1024);
// We should have a buffer to work with now: let's set it up
const playback = new Playback(buffer, waveform);
const playback = new Playback(buffer);
this.setState({ playback });
// Note: the RecordingPlayback component will handle preparing the Playback class for us.
}
@ -84,9 +82,9 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
if (this.state.error) {
// TODO: @@TR: Verify error state
return (
<span className="mx_MVoiceMessageBody">
<span className="mx_MAudioBody">
<img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
{ _t("Error processing voice message") }
{ _t("Error processing audio message") }
</span>
);
}
@ -94,7 +92,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
if (!this.state.playback) {
// TODO: @@TR: Verify loading/decrypting state
return (
<span className="mx_MVoiceMessageBody">
<span className="mx_MAudioBody">
<InlineSpinner />
</span>
);
@ -102,7 +100,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
// At this point we should have a playable state
return (
<span className="mx_MVoiceMessageBody">
<span className="mx_MAudioBody">
<RecordingPlayback playback={this.state.playback} />
<MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
</span>