From f85e178fc18b22215ff016982c2644c1bf28cfa5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 25 Apr 2022 18:36:32 +0100
Subject: [PATCH] Fix centering issue with sticker placeholder (#8404)

---
 res/css/views/messages/_MStickerBody.scss      |  7 +++++++
 src/components/views/messages/MImageBody.tsx   |  4 ++--
 src/components/views/messages/MStickerBody.tsx | 14 +++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/res/css/views/messages/_MStickerBody.scss b/res/css/views/messages/_MStickerBody.scss
index 165dcd8208..12cd7c6f39 100644
--- a/res/css/views/messages/_MStickerBody.scss
+++ b/res/css/views/messages/_MStickerBody.scss
@@ -33,3 +33,10 @@ limitations under the License.
     align-items: center;
     justify-content: center;
 }
+
+.mx_MStickerBody_placeholder {
+    // centering
+    position: absolute;
+    left: calc(50% - 40px);
+    top: calc(50% - 40px);
+}
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 5ed699b232..73c59472fd 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -138,7 +138,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     };
 
-    private onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
+    protected onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: true });
 
         if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
@@ -148,7 +148,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         imgElement.src = this.state.contentUrl;
     };
 
-    private onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
+    protected onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: false });
 
         if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index eb56d8d2e5..d754f04b08 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -39,11 +39,19 @@ export default class MStickerBody extends MImageBody {
         return <div className="mx_MStickerBody_wrapper" onClick={onClick}> { children } </div>;
     }
 
-    // Placeholder to show in place of the sticker image if
-    // img onLoad hasn't fired yet.
+    // Placeholder to show in place of the sticker image if img onLoad hasn't fired yet.
     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").default} width="75" height="75" />;
+        return (
+            <img
+                className="mx_MStickerBody_placeholder"
+                src={require("../../../../res/img/icons-show-stickers.svg").default}
+                width="80"
+                height="80"
+                onMouseEnter={this.onImageEnter}
+                onMouseLeave={this.onImageLeave}
+            />
+        );
     }
 
     // Tooltip to show on mouse over