Better labeling of images and stickers

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

src/components/views/messages/MFileBody.js

@@ -25,6 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { TileShape } from "../rooms/EventTile";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 
 let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
 
@@ -90,35 +91,6 @@ function computedStyle(element) {
     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, withSize = true) {
-    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;
-}
-
 @replaceableComponent("views.messages.MFileBody")
 export default class MFileBody extends React.Component {
     static propTypes = {

src/components/views/messages/MImageBody.tsx

@@ -451,7 +451,7 @@ export default class MImageBody extends React.Component<IProps, IState> {
     }
 
     // Overidden by MStickerBody
-    protected getFileBody(): JSX.Element {
+    protected getFileBody(): string | JSX.Element {
         return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
     }
 

src/components/views/messages/MImageReplyBody.tsx

@@ -16,9 +16,11 @@ limitations under the License.
 
 import React from "react";
 import MImageBody from "./MImageBody";
-import { presentableTextForFile } from "./MFileBody";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 import SenderProfile from "./SenderProfile";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { _t } from "../../../languageHandler";
 
 const FORCED_IMAGE_HEIGHT = 44;
 
@@ -32,8 +34,9 @@ export default class MImageReplyBody extends MImageBody {
     }
 
     // Don't show "Download this_file.png ..."
-    public getFileBody(): JSX.Element {
-        return presentableTextForFile(this.props.mxEvent.getContent());
+    public getFileBody(): string {
+        const sticker = this.props.mxEvent.getType() === EventType.Sticker;
+        return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
     }
 
     render() {