From 794c49c5db2bd13db601d5d2ab5c333fb3fd5e45 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 09:52:09 +0200
Subject: [PATCH 1/3] Migrate MStickerBody to TypeScript

---
 .../messages/{MStickerBody.js => MStickerBody.tsx}   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)
 rename src/components/views/messages/{MStickerBody.js => MStickerBody.tsx} (88%)

diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.tsx
similarity index 88%
rename from src/components/views/messages/MStickerBody.js
rename to src/components/views/messages/MStickerBody.tsx
index 31af66baf5..61be246ed9 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -23,16 +23,16 @@ import { BLURHASH_FIELD } from "../../../ContentMessages";
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
     // Mostly empty to prevent default behaviour of MImageBody
-    onClick(ev) {
+    protected onClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         if (!this.state.showImage) {
             this.showImage();
         }
-    }
+    };
 
     // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
     // which is added by mx_MStickerBody_wrapper
-    wrapImage(contentUrl, children) {
+    protected wrapImage(contentUrl: string, children: React.ReactNode): JSX.Element {
         let onClick = null;
         if (!this.state.showImage) {
             onClick = this.onClick;
@@ -42,13 +42,13 @@ export default class MStickerBody extends MImageBody {
 
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
-    getPlaceholder(width, height) {
+    protected getPlaceholder(width: number, height: number): JSX.Element {
         if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over
-    getTooltip() {
+    protected getTooltip(): JSX.Element {
         const content = this.props.mxEvent && this.props.mxEvent.getContent();
 
         if (!content || !content.body || !content.info || !content.info.w) return null;
@@ -60,7 +60,7 @@ export default class MStickerBody extends MImageBody {
     }
 
     // Don't show "Download this_file.png ..."
-    getFileBody() {
+    protected getFileBody() {
         return null;
     }
 }

From a7cd5fc49b598cb6ca71f10665720acaa1b9eae4 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 10:03:10 +0200
Subject: [PATCH 2/3] Shift thumbnail dislay to use object-fit to preserve
 aspect-ratio

---
 res/css/views/messages/_MImageBody.scss      | 6 +-----
 src/components/views/messages/MImageBody.tsx | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 0a199c1f45..f5d8131e6e 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -21,11 +21,7 @@ $timelineImageBorderRadius: 4px;
 }
 
 .mx_MImageBody_thumbnail {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
+    object-fit: contain;
     border-radius: $timelineImageBorderRadius;
 
     display: flex;
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 81b6cd634a..75fe642847 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -362,7 +362,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
-                <div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
                 { showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail

From b31b8f1b412df10e2912c7a830125dd59bd7198c Mon Sep 17 00:00:00 2001
From: Germain <germain@souquet.com>
Date: Wed, 21 Jul 2021 09:13:12 +0100
Subject: [PATCH 3/3] Remove old container sizing comment

Co-authored-by: James Salter <jamess@element.io>
---
 src/components/views/messages/MImageBody.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 75fe642847..e641582962 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -361,7 +361,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
-                { /* Calculate aspect ratio, using %padding will size _container correctly */ }
                 { showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail