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