From 28aa7d21777a201715df4e9811b4a1115c989b93 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 18 May 2022 07:43:22 +0100
Subject: [PATCH] Hide image banner on stickers, they have a tooltip already

---
 res/css/views/messages/_MImageReplyBody.scss  |  4 ---
 src/components/views/messages/MImageBody.tsx  | 30 +++++++++++--------
 .../views/messages/MImageReplyBody.tsx        |  4 +++
 .../views/messages/MStickerBody.tsx           |  5 ++++
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 2bdf571f0d1..3207443d65b 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -20,10 +20,6 @@ limitations under the License.
     .mx_MImageBody_thumbnail_container {
         flex: 1;
         margin-right: 4px;
-
-        .mx_MImageBody_banner {
-            display: none;
-        }
     }
 
     .mx_MImageReplyBody_info {
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 9ab05a320ba..a22137b5a2e 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -355,6 +355,22 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     }
 
+    protected getBanner(content: IMediaEventContent): JSX.Element {
+        // Hide it for the threads list & the file panel where we show it as text anyway.
+        if ([
+            TimelineRenderingType.ThreadsList,
+            TimelineRenderingType.File,
+        ].includes(this.context.timelineRenderingType)) {
+            return null;
+        }
+
+        return (
+            <span className="mx_MImageBody_banner">
+                { presentableTextForFile(content, _t("Image"), true, true) }
+            </span>
+        );
+    }
+
     protected messageContent(
         contentUrl: string,
         thumbUrl: string,
@@ -448,18 +464,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
 
         let banner: JSX.Element;
-        const isTimeline = [
-            TimelineRenderingType.Room,
-            TimelineRenderingType.Search,
-            TimelineRenderingType.Thread,
-            TimelineRenderingType.Notification,
-        ].includes(this.context.timelineRenderingType);
-        if (this.state.showImage && this.state.hover && isTimeline) {
-            banner = (
-                <span className="mx_MImageBody_banner">
-                    { presentableTextForFile(content, _t("Image"), true, true) }
-                </span>
-            );
+        if (this.state.showImage && this.state.hover) {
+            banner = this.getBanner(content);
         }
 
         const classes = classNames({
diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx
index 9edbcec304d..b36438741d0 100644
--- a/src/components/views/messages/MImageReplyBody.tsx
+++ b/src/components/views/messages/MImageReplyBody.tsx
@@ -40,6 +40,10 @@ export default class MImageReplyBody extends MImageBody {
         return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
     }
 
+    protected getBanner(content: IMediaEventContent): JSX.Element {
+        return null; // we don't need a banner, nor have space for one
+    }
+
     render() {
         if (this.state.error) {
             return super.render();
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index d754f04b08a..18d8e4df6c1 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 import MImageBody from './MImageBody';
 import { BLURHASH_FIELD } from "../../../utils/image-media";
 import Tooltip from "../elements/Tooltip";
+import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 
 export default class MStickerBody extends MImageBody {
     // Mostly empty to prevent default behaviour of MImageBody
@@ -69,4 +70,8 @@ export default class MStickerBody extends MImageBody {
     protected getFileBody() {
         return null;
     }
+
+    protected getBanner(content: IMediaEventContent): JSX.Element {
+        return null; // we don't need a banner, we have a tooltip
+    }
 }