From e628cac06b76ae3c8a29ee787a91c0a200a8c1fe Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 09:36:12 +0100
Subject: [PATCH] Improve image drawing fill strategy

---
 src/components/structures/BackdropPanel.tsx | 24 +++++++++++++++------
 src/components/structures/LoggedInView.tsx  |  1 -
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index c20845c4ae..4da8543452 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -37,16 +37,28 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         const imageHeight = (backgroundImage as ImageBitmap).height
                 || (backgroundImage as HTMLImageElement).naturalHeight;
 
-        const destinationX = width - imageWidth;
-        const destinationY = height - imageHeight;
+        const contentRatio = imageWidth / imageHeight;
+        const containerRatio = width / height;
+        let resultHeight;
+        let resultWidth;
+        if (contentRatio > containerRatio) {
+            resultHeight = height;
+            resultWidth = height * contentRatio;
+        } else {
+            resultWidth = width;
+            resultHeight = width / contentRatio;
+        }
+
+        const x = (width - resultWidth) / 2;
+        const y = (height - resultHeight) / 2;
 
         this.ctx.filter = `blur(${this.props.blur})`;
         this.ctx.drawImage(
             backgroundImage,
-            Math.min(destinationX, 0),
-            Math.min(destinationY, 0),
-            Math.max(width, imageWidth),
-            Math.max(height, imageHeight),
+            x,
+            y,
+            resultWidth,
+            resultHeight,
         );
     }
 
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 371de3679b..534e8e0df5 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -61,7 +61,6 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
 import { OwnProfileStore } from '../../stores/OwnProfileStore';
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import { mediaFromMxc } from "../../customisations/Media";
 
 
 // We need to fetch each pinned message individually (if we don't already have it)