avatar: Fix blurriness on profile screen by adjusting physical image size

Fixes: #301

Author: saisumith770

lib/model/avatar_url.dart

@@ -0,0 +1,50 @@
+/// The size threshold above which is "medium" size for an avatar.
+///
+/// This is DEFAULT_AVATAR_SIZE in zerver/lib/upload.py.
+const defaultUploadSizePx = 100;
+
+abstract class AvatarUrl {
+  factory AvatarUrl.fromUserData({required Uri resolvedUrl}) {
+    // TODO(#255): handle computing gravatars
+    // TODO(#254): handle computing fallback avatar
+    if (resolvedUrl.toString().startsWith(GravatarUrl.origin)) {
+      return GravatarUrl(resolvedUrl: resolvedUrl);
+    } else {
+      return UploadedAvatarUrl(resolvedUrl: resolvedUrl);
+    }
+  }
+
+  Uri get(int sizePhysicalPx);
+}
+
+class GravatarUrl implements AvatarUrl {
+  GravatarUrl({required Uri resolvedUrl}) : standardUrl = resolvedUrl;
+
+  static String origin = 'https://secure.gravatar.com';
+
+  Uri standardUrl;
+
+  @override
+  Uri get(int sizePhysicalPx) {
+    return standardUrl.replace(queryParameters: {
+      ...standardUrl.queryParameters,
+      's': sizePhysicalPx.toString(),
+    });
+  }
+}
+
+class UploadedAvatarUrl implements AvatarUrl {
+  UploadedAvatarUrl({required Uri resolvedUrl}) : standardUrl = resolvedUrl;
+
+  Uri standardUrl;
+
+  @override
+  Uri get(int sizePhysicalPx) {
+    if (sizePhysicalPx > defaultUploadSizePx) {
+      return standardUrl.replace(
+        path: standardUrl.path.replaceFirst(RegExp(r'(?:\.png)?$'), "-medium.png"));
+    }
+
+    return standardUrl;
+  }
+}

lib/widgets/content.dart

@@ -7,6 +7,7 @@ import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 
 import '../api/core.dart';
 import '../api/model/model.dart';
+import '../model/avatar_url.dart';
 import '../model/binding.dart';
 import '../model/content.dart';
 import '../model/internal_link.dart';
@@ -1059,9 +1060,19 @@ class AvatarImage extends StatelessWidget {
       null          => null, // TODO(#255): handle computing gravatars
       var avatarUrl => store.tryResolveUrl(avatarUrl),
     };
-    return (resolvedUrl == null)
-      ? const SizedBox.shrink()
-      : RealmContentNetworkImage(resolvedUrl, filterQuality: FilterQuality.medium, fit: BoxFit.cover);
+
+    if (resolvedUrl == null) {
+      return const SizedBox.shrink();
+    }
+
+    final avatarUrl = AvatarUrl.fromUserData(resolvedUrl: resolvedUrl);
+    final physicalSize = (MediaQuery.devicePixelRatioOf(context) * size).ceil();
+
+    return RealmContentNetworkImage(
+      avatarUrl.get(physicalSize),
+      filterQuality: FilterQuality.medium,
+      fit: BoxFit.cover,
+    );
   }
 }
 

lib/widgets/recent_dm_conversations.dart

@@ -81,11 +81,11 @@ class RecentDmConversationsItem extends StatelessWidget {
     required this.unreadCount,
   });
 
-  static const double _avatarSize = 32;
-
   final DmNarrow narrow;
   final int unreadCount;
 
+  static const double _avatarSize = 32;
+
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);

test/model/avatar_url_test.dart

@@ -0,0 +1,34 @@
+import 'package:checks/checks.dart';
+import 'package:test/scaffolding.dart';
+import 'package:zulip/model/avatar_url.dart';
+
+void main() {
+  const defaultSize = 30;
+  const largeSize = 120;
+
+  group('GravatarUrl', () {
+    test('gravatar url', () {
+      final url = '${GravatarUrl.origin}/avatar/1234';
+      final avatarUrl = AvatarUrl.fromUserData(resolvedUrl: Uri.parse(url));
+
+      check(avatarUrl.get(defaultSize).toString()).equals('$url?s=30');
+    });
+  });
+
+  group('UploadedAvatarUrl', () {
+    test('png image', () {
+      const url = 'https://zulip.example/image.png';
+      final avatarUrl = AvatarUrl.fromUserData(resolvedUrl: Uri.parse(url));
+
+      check(avatarUrl.get(defaultSize).toString()).equals(url);
+    });
+
+    test('png image, larger size', () {
+      const url = 'https://zulip.example/image.png';
+      final avatarUrl = AvatarUrl.fromUserData(resolvedUrl: Uri.parse(url));
+      final expectedUrl = url.replaceAll('.png', '-medium.png');
+
+      check(avatarUrl.get(largeSize).toString()).equals(expectedUrl);
+    });
+  });
+}

test/widgets/content_test.dart

@@ -538,7 +538,7 @@ void main() {
   group('AvatarImage', () {
     late PerAccountStore store;
 
-    Future<Uri?> actualUrl(WidgetTester tester, String avatarUrl) async {
+    Future<Uri?> actualUrl(WidgetTester tester, String avatarUrl, [double? size]) async {
       addTearDown(testBinding.reset);
       await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());
       store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
@@ -548,7 +548,7 @@ void main() {
       prepareBoringImageHttpClient();
       await tester.pumpWidget(GlobalStoreWidget(
         child: PerAccountStoreWidget(accountId: eg.selfAccount.id,
-          child: AvatarImage(userId: user.userId))));
+          child: AvatarImage(userId: user.userId, size: size ?? 30))));
       await tester.pump();
       await tester.pump();
       tester.widget(find.byType(AvatarImage));
@@ -571,6 +571,26 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
 
+   testWidgets('absolute URL, larger size', (tester) async {
+      tester.view.devicePixelRatio = 2.5;
+      addTearDown(tester.view.resetDevicePixelRatio);
+
+      const avatarUrl = 'https://example/avatar.png';
+      check(await actualUrl(tester, avatarUrl, 50)).isNotNull()
+        .asString.equals(avatarUrl.replaceAll('.png', '-medium.png'));
+      debugNetworkImageHttpClientProvider = null;
+    });
+
+    testWidgets('relative URL, larger size', (tester) async {
+      tester.view.devicePixelRatio = 2.5;
+      addTearDown(tester.view.resetDevicePixelRatio);
+
+      const avatarUrl = '/avatar.png';
+      check(await actualUrl(tester, avatarUrl, 50))
+        .equals(store.tryResolveUrl('/avatar-medium.png')!);
+      debugNetworkImageHttpClientProvider = null;
+    });
+
     testWidgets('smoke with invalid URL', (tester) async {
       const avatarUrl = '::not a URL::';
       check(await actualUrl(tester, avatarUrl)).isNull();