Hide image banner on stickers, they have a tooltip already (#8641)

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 {

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 = [
+        if (this.state.showImage && this.state.hover) {
-            TimelineRenderingType.Room,
+            banner = this.getBanner(content);
-            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>
-            );
         }
 
         const classes = classNames({

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

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
+    }
 }