Unify audio message types to new media body

res/css/_components.scss

@@ -169,6 +169,7 @@
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
 @import "./views/messages/_MVoiceMessageBody.scss";
+@import "./views/messages/_MediaBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -22,17 +22,11 @@ limitations under the License.
     // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
     // has a 1px padding on it that we want to account for.
     padding: 7px 12px 7px 11px;
-    background-color: $message-body-panel-bg-color;
-    border-radius: 12px;
 
     // Cheat at alignment a bit
     display: flex;
     align-items: center;
 
-    color: $message-body-panel-fg-color;
-    font-size: $font-14px;
-    line-height: $font-24px;
-
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;

res/css/views/messages/_MediaBody.scss

@@ -0,0 +1,28 @@
+/*
+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.
+*/
+
+// A "media body" is any file upload looking thing, apart from images and videos (they
+// have unique styles).
+
+.mx_MediaBody {
+    background-color: $message-body-panel-bg-color;
+    border-radius: 12px;
+
+    color: $message-body-panel-fg-color;
+    font-size: $font-14px;
+    line-height: $font-24px;
+}
+

src/components/views/audio_messages/AudioPlayer.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import { Playback, PlaybackState } from "../../../voice/Playback";
 import React, { createRef, ReactNode, RefObject } from "react";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { formatBytes } from "../../../utils/FormattingUtils";
@@ -76,7 +75,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
     public render(): ReactNode {
         // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
         // events for accessibility
-        return <div className='mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
+        return <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
             <div className='mx_AudioPlayer_primaryContainer'>
                 <PlayPauseButton
                     playback={this.props.playback}
@@ -90,7 +89,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                     { this.renderFileSize() }
                 </div>
             </div>
-            <PlaybackWaveform playback={this.props.playback} />
+            <span>TODO: Seek bar</span>
         </div>
     }
 }

src/components/views/audio_messages/RecordingPlayback.tsx

@@ -55,7 +55,7 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     };
 
     public render(): ReactNode {
-        return <div className='mx_VoiceMessagePrimaryContainer'>
+        return <div className='mx_MediaBody mx_VoiceMessagePrimaryContainer'>
             <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
             <PlaybackClock playback={this.props.playback} />
             <PlaybackWaveform playback={this.props.playback} />

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -177,7 +177,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         }
 
         // only other UI is the recording-in-progress UI
-        return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
+        return <div className="mx_MediaBody mx_VoiceRecordComposerTile_recording">
             <LiveRecordingClock recorder={this.state.recorder} />
             <LiveRecordingWaveform recorder={this.state.recorder} />
         </div>;