From 3d507e98409af91c9b8cadec511f6e5d253bdbed Mon Sep 17 00:00:00 2001
From: Robert Swain <rob@matrix.org>
Date: Fri, 21 Apr 2017 00:05:52 +0200
Subject: [PATCH 1/2] (Room)?Avatar: Request 96x96 avatars on high DPI screens

---
 src/Avatar.js                              |  9 +++++----
 src/components/views/avatars/RoomAvatar.js | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/Avatar.js b/src/Avatar.js
index 76f5e55ff0..cb5e6965e3 100644
--- a/src/Avatar.js
+++ b/src/Avatar.js
@@ -22,8 +22,8 @@ module.exports = {
     avatarUrlForMember: function(member, width, height, resizeMethod) {
         var url = member.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
-            width,
-            height,
+            window.devicePixelRatio > 1.2 ? 96 : width,
+            window.devicePixelRatio > 1.2 ? 96 : height,
             resizeMethod,
             false,
             false
@@ -40,7 +40,9 @@ module.exports = {
     avatarUrlForUser: function(user, width, height, resizeMethod) {
         var url = ContentRepo.getHttpUriForMxc(
             MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
-            width, height, resizeMethod
+            window.devicePixelRatio > 1.2 ? 96 : width,
+            window.devicePixelRatio > 1.2 ? 96 : height,
+            resizeMethod
         );
         if (!url || url.length === 0) {
             return null;
@@ -57,4 +59,3 @@ module.exports = {
         return 'img/' + images[total % images.length] + '.png';
     }
 };
-
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js
index bfa7575b0c..7ed7bfa9fa 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.js
@@ -59,7 +59,9 @@ module.exports = React.createClass({
             ContentRepo.getHttpUriForMxc(
                 MatrixClientPeg.get().getHomeserverUrl(),
                 props.oobData.avatarUrl,
-                props.width, props.height, props.resizeMethod
+                window.devicePixelRatio > 1.2 ? 96 : props.width,
+                window.devicePixelRatio > 1.2 ? 96 : props.height,
+                props.resizeMethod
             ), // highest priority
             this.getRoomAvatarUrl(props),
             this.getOneToOneAvatar(props),
@@ -74,7 +76,9 @@ module.exports = React.createClass({
 
         return props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
-            props.width, props.height, props.resizeMethod,
+            window.devicePixelRatio > 1.2 ? 96 : props.width,
+            window.devicePixelRatio > 1.2 ? 96 : props.height,
+            props.resizeMethod,
             false
         );
     },
@@ -103,14 +107,18 @@ module.exports = React.createClass({
             }
             return theOtherGuy.getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                props.width, props.height, props.resizeMethod,
+                window.devicePixelRatio > 1.2 ? 96 : props.width,
+                window.devicePixelRatio > 1.2 ? 96 : props.height,
+                props.resizeMethod,
                 false
             );
         } else if (userIds.length == 1) {
             return mlist[userIds[0]].getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                props.width, props.height, props.resizeMethod,
-                    false
+                window.devicePixelRatio > 1.2 ? 96 : props.width,
+                window.devicePixelRatio > 1.2 ? 96 : props.height,
+                props.resizeMethod,
+                false
             );
         } else {
            return null;

From 39de37b547bde50e726ee9a22863bde1585ebe28 Mon Sep 17 00:00:00 2001
From: Robert Swain <rob@matrix.org>
Date: Thu, 27 Apr 2017 12:38:03 +0200
Subject: [PATCH 2/2] *Avatar: Calculate thumbnail dimensions based on
 devicePixelRatio

Multiply the dimension by the device pixel ratio and then round it to
get the width/height of the thumbnail to use in the request.
---
 src/Avatar.js                              |  8 ++++----
 src/components/views/avatars/RoomAvatar.js | 16 ++++++++--------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Avatar.js b/src/Avatar.js
index cb5e6965e3..c0127d49af 100644
--- a/src/Avatar.js
+++ b/src/Avatar.js
@@ -22,8 +22,8 @@ module.exports = {
     avatarUrlForMember: function(member, width, height, resizeMethod) {
         var url = member.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
-            window.devicePixelRatio > 1.2 ? 96 : width,
-            window.devicePixelRatio > 1.2 ? 96 : height,
+            Math.floor(width * window.devicePixelRatio),
+            Math.floor(height * window.devicePixelRatio),
             resizeMethod,
             false,
             false
@@ -40,8 +40,8 @@ module.exports = {
     avatarUrlForUser: function(user, width, height, resizeMethod) {
         var url = ContentRepo.getHttpUriForMxc(
             MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
-            window.devicePixelRatio > 1.2 ? 96 : width,
-            window.devicePixelRatio > 1.2 ? 96 : height,
+            Math.floor(width * window.devicePixelRatio),
+            Math.floor(height * window.devicePixelRatio),
             resizeMethod
         );
         if (!url || url.length === 0) {
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js
index 7ed7bfa9fa..8041fd5cd7 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.js
@@ -59,8 +59,8 @@ module.exports = React.createClass({
             ContentRepo.getHttpUriForMxc(
                 MatrixClientPeg.get().getHomeserverUrl(),
                 props.oobData.avatarUrl,
-                window.devicePixelRatio > 1.2 ? 96 : props.width,
-                window.devicePixelRatio > 1.2 ? 96 : props.height,
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod
             ), // highest priority
             this.getRoomAvatarUrl(props),
@@ -76,8 +76,8 @@ module.exports = React.createClass({
 
         return props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
-            window.devicePixelRatio > 1.2 ? 96 : props.width,
-            window.devicePixelRatio > 1.2 ? 96 : props.height,
+            Math.floor(props.width * window.devicePixelRatio),
+            Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
             false
         );
@@ -107,16 +107,16 @@ module.exports = React.createClass({
             }
             return theOtherGuy.getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                window.devicePixelRatio > 1.2 ? 96 : props.width,
-                window.devicePixelRatio > 1.2 ? 96 : props.height,
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
                 false
             );
         } else if (userIds.length == 1) {
             return mlist[userIds[0]].getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                window.devicePixelRatio > 1.2 ? 96 : props.width,
-                window.devicePixelRatio > 1.2 ? 96 : props.height,
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
                 false
             );