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 { 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)