diff --git a/res/css/_components.scss b/res/css/_components.scss index ec3af8655e..c997881138 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -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"; diff --git a/res/css/views/messages/_MAudioBody.scss b/res/css/views/messages/_MAudioBody.scss new file mode 100644 index 0000000000..2c9b6f7030 --- /dev/null +++ b/res/css/views/messages/_MAudioBody.scss @@ -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 +} diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx index 9e77bc0893..8568899323 100644 --- a/src/components/views/messages/MAudioBody.tsx +++ b/src/components/views/messages/MAudioBody.tsx @@ -55,7 +55,7 @@ export default class MAudioBody extends React.PureComponent { 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 { 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 { if (this.state.error) { // TODO: @@TR: Verify error state return ( - + - { _t("Error processing voice message") } + { _t("Error processing audio message") } ); } @@ -94,7 +92,7 @@ export default class MAudioBody extends React.PureComponent { if (!this.state.playback) { // TODO: @@TR: Verify loading/decrypting state return ( - + ); @@ -102,7 +100,7 @@ export default class MAudioBody extends React.PureComponent { // At this point we should have a playable state return ( - +