diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss index 2bdf571f0d..3207443d65 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 9ab05a320b..a22137b5a2 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 { } } + 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 ( + + { presentableTextForFile(content, _t("Image"), true, true) } + + ); + } + protected messageContent( contentUrl: string, thumbUrl: string, @@ -448,18 +464,8 @@ export default class MImageBody extends React.Component { } 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 = ( - - { presentableTextForFile(content, _t("Image"), true, true) } - - ); + 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 9edbcec304..b36438741d 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 d754f04b08..18d8e4df6c 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 + } }