From 915f8b3c9ca7fbfa65eea9ba91f739fc9c2377c0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 26 Apr 2021 18:25:49 +0100
Subject: [PATCH 1/2] Scale all mxc thumbs using device pixel ratio for hidpi

as we are notoriously bad at doing it everywhere we ought to, like the TopLeftMenu avatar
---
 src/Avatar.ts                                     | 12 ++----------
 src/components/structures/SpaceRoomDirectory.tsx  |  2 +-
 src/components/views/avatars/MemberAvatar.tsx     |  4 ++--
 src/components/views/avatars/RoomAvatar.tsx       | 11 +++--------
 src/components/views/dialogs/IncomingSasDialog.js |  2 +-
 src/components/views/messages/MImageBody.js       |  5 ++---
 src/customisations/Media.ts                       |  7 +++++++
 src/editor/parts.ts                               | 12 ++----------
 8 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/src/Avatar.ts b/src/Avatar.ts
index 76c88faa1c3..d218ae8b46e 100644
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -27,11 +27,7 @@ export type ResizeMethod = "crop" | "scale";
 export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) {
     let url: string;
     if (member?.getMxcAvatarUrl()) {
-        url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-            Math.floor(width * window.devicePixelRatio),
-            Math.floor(height * window.devicePixelRatio),
-            resizeMethod,
-        );
+        url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
     }
     if (!url) {
         // member can be null here currently since on invites, the JS SDK
@@ -44,11 +40,7 @@ export function avatarUrlForMember(member: RoomMember, width: number, height: nu
 
 export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) {
     if (!user.avatarUrl) return null;
-    return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(
-        Math.floor(width * window.devicePixelRatio),
-        Math.floor(height * window.devicePixelRatio),
-        resizeMethod,
-    );
+    return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
 }
 
 function isValidHexColor(color: string): boolean {
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 930cfa15a98..513aa25849c 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -136,7 +136,7 @@ const Tile: React.FC<ITileProps> = ({
 
     let url: string;
     if (room.avatar_url) {
-        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(Math.floor(20 * window.devicePixelRatio));
+        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20);
     }
 
     let description = _t("%(count)s members", { count: room.num_joined_members });
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index c79cbc0d32f..3205ca372c0 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -68,8 +68,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
             let imageUrl = null;
             if (props.member.getMxcAvatarUrl()) {
                 imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    Math.floor(props.width * window.devicePixelRatio),
-                    Math.floor(props.height * window.devicePixelRatio),
+                    props.width,
+                    props.height,
                     props.resizeMethod,
                 );
             }
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index ad0eb45a526..4693d907bab 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -93,8 +93,8 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         let oobAvatar = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
+                props.width,
+                props.height,
                 props.resizeMethod,
             );
         }
@@ -109,12 +109,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
-        return Avatar.avatarUrlForRoom(
-            props.room,
-            Math.floor(props.width * window.devicePixelRatio),
-            Math.floor(props.height * window.devicePixelRatio),
-            props.resizeMethod,
-        );
+        return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
     private onRoomAvatarClick = () => {
diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js
index f18b7a9d0c4..5df02d7a6f5 100644
--- a/src/components/views/dialogs/IncomingSasDialog.js
+++ b/src/components/views/dialogs/IncomingSasDialog.js
@@ -130,7 +130,7 @@ export default class IncomingSasDialog extends React.Component {
         const oppProfile = this.state.opponentProfile;
         if (oppProfile) {
             const url = oppProfile.avatar_url
-                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(Math.floor(48 * window.devicePixelRatio))
+                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(48)
                 : null;
             profile = <div className="mx_IncomingSasDialog_opponentProfile">
                 <BaseAvatar name={oppProfile.displayname}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 5af2063c849..06aae03e90e 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -185,9 +185,8 @@ export default class MImageBody extends React.Component {
         // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
         // thumbnail resolution will be unnecessarily reduced.
         // custom timeline widths seems preferable.
-        const pixelRatio = window.devicePixelRatio;
-        const thumbWidth = Math.round(800 * pixelRatio);
-        const thumbHeight = Math.round(600 * pixelRatio);
+        const thumbWidth = 800;
+        const thumbHeight = 600;
 
         const content = this.props.mxEvent.getContent();
         const media = mediaFromContent(content);
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index b651e40a3b5..f9d957b60cc 100644
--- a/src/customisations/Media.ts
+++ b/src/customisations/Media.ts
@@ -96,6 +96,9 @@ export class Media {
      */
     public getThumbnailHttp(width: number, height: number, mode: ResizeMethod = "scale"): string | null | undefined {
         if (!this.hasThumbnail) return null;
+        // scale using the device pixel ratio to keep images clear
+        width = Math.floor(width * window.devicePixelRatio);
+        height = Math.floor(height * window.devicePixelRatio);
         return this.client.mxcUrlToHttp(this.thumbnailMxc, width, height, mode);
     }
 
@@ -107,6 +110,9 @@ export class Media {
      * @returns {string} The HTTP URL which points to the thumbnail.
      */
     public getThumbnailOfSourceHttp(width: number, height: number, mode: ResizeMethod = "scale"): string {
+        // scale using the device pixel ratio to keep images clear
+        width = Math.floor(width * window.devicePixelRatio);
+        height = Math.floor(height * window.devicePixelRatio);
         return this.client.mxcUrlToHttp(this.srcMxc, width, height, mode);
     }
 
@@ -117,6 +123,7 @@ export class Media {
      * @returns {string} An HTTP URL for the thumbnail.
      */
     public getSquareThumbnailHttp(dim: number): string {
+        dim = Math.floor(dim * window.devicePixelRatio); // scale using the device pixel ratio to keep images clear
         if (this.hasThumbnail) {
             return this.getThumbnailHttp(dim, dim, 'crop');
         }
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index ccd90da3e2f..e3ca36e6060 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -341,11 +341,7 @@ class RoomPillPart extends PillPart {
 
     setAvatar(node: HTMLElement) {
         let initialLetter = "";
-        let avatarUrl = Avatar.avatarUrlForRoom(
-            this.room,
-            16 * window.devicePixelRatio,
-            16 * window.devicePixelRatio,
-            "crop");
+        let avatarUrl = Avatar.avatarUrlForRoom(this.room, 16, 16, "crop");
         if (!avatarUrl) {
             initialLetter = Avatar.getInitialLetter(this.room ? this.room.name : this.resourceId);
             avatarUrl = Avatar.defaultAvatarUrlForString(this.room ? this.room.roomId : this.resourceId);
@@ -383,11 +379,7 @@ class UserPillPart extends PillPart {
         }
         const name = this.member.name || this.member.userId;
         const defaultAvatarUrl = Avatar.defaultAvatarUrlForString(this.member.userId);
-        const avatarUrl = Avatar.avatarUrlForMember(
-            this.member,
-            16 * window.devicePixelRatio,
-            16 * window.devicePixelRatio,
-            "crop");
+        const avatarUrl = Avatar.avatarUrlForMember(this.member, 16, 16, "crop");
         let initialLetter = "";
         if (avatarUrl === defaultAvatarUrl) {
             initialLetter = Avatar.getInitialLetter(name);

From cc3571c559e3c223ab6651dc9b7858d89ac460a0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 27 Apr 2021 09:56:28 +0100
Subject: [PATCH 2/2] fix removed pixelRatio

---
 src/components/views/messages/MImageBody.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 06aae03e90e..07a12d70a87 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -217,7 +217,7 @@ export default class MImageBody extends React.Component {
             const info = content.info;
             if (
                 this._isGif() ||
-                pixelRatio === 1.0 ||
+                window.devicePixelRatio === 1.0 ||
                 (!info || !info.w || !info.h || !info.size)
             ) {
                 return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);