From ed1fbad6c4b75dbb7fd458f9fe7db45787cd4546 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Tue, 13 Jul 2021 18:51:53 -0600
Subject: [PATCH] Respect tile shape for voice messages

Fixes https://github.com/vector-im/element-web/issues/17608
---
 .../views/audio_messages/RecordingPlayback.tsx        | 11 +++++++++--
 src/components/views/messages/MVoiceMessageBody.tsx   |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/views/audio_messages/RecordingPlayback.tsx b/src/components/views/audio_messages/RecordingPlayback.tsx
index a0dea1c6db..d976117f3a 100644
--- a/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -17,15 +17,18 @@ limitations under the License.
 import { Playback, PlaybackState } from "../../../voice/Playback";
 import React, { ReactNode } from "react";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { TileShape } from "../rooms/EventTile";
+import PlaybackWaveform from "./PlaybackWaveform";
 
 interface IProps {
     // Playback instance to render. Cannot change during component lifecycle: create
     // an all-new component instead.
     playback: Playback;
+
+    tileShape?: TileShape;
 }
 
 interface IState {
@@ -50,6 +53,10 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
         this.props.playback.prepare();
     }
 
+    private get isWaveformable(): boolean {
+        return this.props.tileShape !== TileShape.Notif && this.props.tileShape !== TileShape.FileGrid;
+    }
+
     private onPlaybackUpdate = (ev: PlaybackState) => {
         this.setState({ playbackPhase: ev });
     };
@@ -58,7 +65,7 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
         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} />
+            { this.isWaveformable && <PlaybackWaveform playback={this.props.playback} /> }
         </div>;
     }
 }
diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx
index 2edd42f2e4..bec224dd2d 100644
--- a/src/components/views/messages/MVoiceMessageBody.tsx
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@@ -25,9 +25,11 @@ import { mediaFromContent } from "../../../customisations/Media";
 import { decryptFile } from "../../../utils/DecryptFile";
 import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+import { TileShape } from "../rooms/EventTile";
 
 interface IProps {
     mxEvent: MatrixEvent;
+    tileShape?: TileShape;
 }
 
 interface IState {
@@ -103,7 +105,7 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat
         // At this point we should have a playable state
         return (
             <span className="mx_MVoiceMessageBody">
-                <RecordingPlayback playback={this.state.playback} />
+                <RecordingPlayback playback={this.state.playback} tileShape={this.props.tileShape} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
         );