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