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 1/4] 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 a0dea1c6db2..d976117f3a4 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 2edd42f2e46..bec224dd2de 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>
         );

From 49c949248434288265cc52513a66474fa4172160 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Tue, 13 Jul 2021 18:52:07 -0600
Subject: [PATCH 2/4] Pass tile shape down to tiles in the notifications panel

---
 src/components/views/rooms/EventTile.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 7cceef4a866..9142b5910c1 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1093,6 +1093,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             highlightLink={this.props.highlightLink}
                             showUrlPreview={this.props.showUrlPreview}
                             onHeightChanged={this.props.onHeightChanged}
+                            tileShape={this.props.tileShape}
                         />
                     </div>,
                 ]);

From 5a75539b9325fe5c412ce5e9d2ff2caacf172aa7 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Tue, 13 Jul 2021 19:01:55 -0600
Subject: [PATCH 3/4] Introduce a "pinned" tile shape

All components which don't understand this shape will fall through to their normal states, as they would for no explicit tile shape.
---
 src/components/views/audio_messages/RecordingPlayback.tsx | 4 +++-
 src/components/views/rooms/EventTile.tsx                  | 1 +
 src/components/views/rooms/PinnedEventTile.tsx            | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/views/audio_messages/RecordingPlayback.tsx b/src/components/views/audio_messages/RecordingPlayback.tsx
index d976117f3a4..d23be93a7e4 100644
--- a/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -54,7 +54,9 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     }
 
     private get isWaveformable(): boolean {
-        return this.props.tileShape !== TileShape.Notif && this.props.tileShape !== TileShape.FileGrid;
+        return this.props.tileShape !== TileShape.Notif
+            && this.props.tileShape !== TileShape.FileGrid
+            && this.props.tileShape !== TileShape.Pinned;
     }
 
     private onPlaybackUpdate = (ev: PlaybackState) => {
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 9142b5910c1..759f846c59e 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -194,6 +194,7 @@ export enum TileShape {
     FileGrid = "file_grid",
     Reply = "reply",
     ReplyPreview = "reply_preview",
+    Pinned = "pinned",
 }
 
 interface IProps {
diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx
index 774dea70c8a..0e3396e9b08 100644
--- a/src/components/views/rooms/PinnedEventTile.tsx
+++ b/src/components/views/rooms/PinnedEventTile.tsx
@@ -29,6 +29,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { TileShape } from "./EventTile";
 
 interface IProps {
     room: Room;
@@ -87,6 +88,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
                     className="mx_PinnedEventTile_body"
                     maxImageHeight={150}
                     onHeightChanged={() => {}} // we need to give this, apparently
+                    tileShape={TileShape.Pinned}
                 />
             </div>
 

From 1f131db216fb1d2ffe196043e7d2e1967803f064 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Tue, 13 Jul 2021 19:02:12 -0600
Subject: [PATCH 4/4] Set a max width on waveform-less tiles

---
 res/css/views/audio_messages/_PlaybackContainer.scss      | 4 ++++
 src/components/views/audio_messages/RecordingPlayback.tsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
index fd01864bba5..5548f6198e3 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -49,4 +49,8 @@ limitations under the License.
         padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
         padding-left: 8px; // isolate from recording circle / play control
     }
+
+    &.mx_VoiceMessagePrimaryContainer_noWaveform {
+        max-width: 162px; // with all the padding this results in 185px wide
+    }
 }
diff --git a/src/components/views/audio_messages/RecordingPlayback.tsx b/src/components/views/audio_messages/RecordingPlayback.tsx
index d23be93a7e4..7d9312f3697 100644
--- a/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -64,7 +64,8 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     };
 
     public render(): ReactNode {
-        return <div className='mx_MediaBody mx_VoiceMessagePrimaryContainer'>
+        const shapeClass = !this.isWaveformable ? 'mx_VoiceMessagePrimaryContainer_noWaveform' : '';
+        return <div className={'mx_MediaBody mx_VoiceMessagePrimaryContainer ' + shapeClass}>
             <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
             <PlaybackClock playback={this.props.playback} />
             { this.isWaveformable && <PlaybackWaveform playback={this.props.playback} /> }