Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/messages/MFileBody.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2018, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 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.
@@ -24,6 +24,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import ErrorDialog from "../dialogs/ErrorDialog";
+import { TileShape } from "../rooms/EventTile";
 
 let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
 
@@ -308,7 +309,7 @@ export default class MFileBody extends React.Component {
             // If the attachment is not encrypted then we check whether we
             // are being displayed in the room timeline or in a list of
             // files in the right hand side of the screen.
-            if (this.props.tileShape === "file_grid") {
+            if (this.props.tileShape === TileShape.FileGrid) {
                 return (
                     <span className="mx_MFileBody">
                         {placeholder}

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>
         );

src/components/views/messages/MessageEvent.js

@@ -42,7 +42,7 @@ export default class MessageEvent extends React.Component {
         onHeightChanged: PropTypes.func,
 
         /* the shape of the tile, used */
-        tileShape: PropTypes.string,
+        tileShape: PropTypes.string, // TODO: Use TileShape enum
 
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,