Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into export-conversations

src/components/views/messages/MFileBody.tsx

@@ -23,7 +23,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { TileShape } from "../rooms/EventTile";
-import { IContent } from "matrix-js-sdk/src";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 import { IBodyProps } from "./IBodyProps";
 
@@ -93,35 +93,6 @@ export function computedStyle(element: HTMLElement) {
     return cssText;
 }
 
-/**
- * Extracts a human readable label for the file attachment to use as
- * link text.
- *
- * @param {Object} content The "content" key of the matrix event.
- * @param {boolean} withSize Whether to include size information. Default true.
- * @return {string} the human readable link text for the attachment.
- */
-export function presentableTextForFile(content: IContent, withSize = true): string {
-    let linkText = _t("Attachment");
-    if (content.body && content.body.length > 0) {
-        // The content body should be the name of the file including a
-        // file extension.
-        linkText = content.body;
-    }
-
-    if (content.info && content.info.size && withSize) {
-        // If we know the size of the file then add it as human readable
-        // string to the end of the link text so that the user knows how
-        // big a file they are downloading.
-        // The content.info also contains a MIME-type but we don't display
-        // it since it is "ugly", users generally aren't aware what it
-        // means and the type of the attachment can usually be inferrered
-        // from the file extension.
-        linkText += ' (' + filesize(content.info.size) + ')';
-    }
-    return linkText;
-}
-
 interface IProps extends IBodyProps {
     /* whether or not to show the default placeholder for the file. Defaults to true. */
     showGenericPlaceholder: boolean;
@@ -171,14 +142,14 @@ export default class MFileBody extends React.Component<IProps, IState> {
         let placeholder = null;
         if (this.props.showGenericPlaceholder) {
             placeholder = (
-                <div className="mx_MFileBody_info">
+                <div className="mx_MediaBody mx_MFileBody_info">
                     <span className="mx_MFileBody_info_icon">
                         { this.props.forExport ?
                             <img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
                             : null }
                     </span>
                     <span className="mx_MFileBody_info_filename">
-                        { presentableTextForFile(content, false) }
+                        { presentableTextForFile(content, _t("Attachment"), false) }
                     </span>
                 </div>
             );