content: Size images and video thumbnails according to realmMediaPreviewSize

Fixes #2177.

Author: Ruhdee

lib/widgets/content.dart

@@ -725,10 +725,11 @@ class MessageMediaContainer extends StatelessWidget {
   final Widget? child;
 
   /// The container's size, in logical pixels.
-  static const size = Size(150, 100);
+  static const baseSize = Size(150, 100);
 
   @override
   Widget build(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
     return GestureDetector(
       onTap: onTap,
       child: UnconstrainedBox(
@@ -742,7 +743,7 @@ class MessageMediaContainer extends StatelessWidget {
             child: Padding(
               padding: const EdgeInsets.all(1),
               child: SizedBox.fromSize(
-                size: size,
+                size: baseSize * store.mediaPreviewSizeFactor,
                 child: child))))));
   }
 }
@@ -1526,17 +1527,18 @@ class _Image extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
     final devicePixelRatio = MediaQuery.devicePixelRatioOf(context);
 
     // Follow web's max-height behavior (10em);
     // see image_box_em in web/src/postprocess_content.ts.
-    final maxHeight = ambientTextStyle.fontSize! * 10;
+    final maxHeight = ambientTextStyle.fontSize! * 10 * store.mediaPreviewSizeFactor;
 
     final imageSize = (node.originalWidth != null && node.originalHeight != null)
       ? Size(node.originalWidth!, node.originalHeight!) / devicePixelRatio
       // Layout plan when original dimensions are unknown:
       // a [MessageMediaContainer]-sized and -colored rectangle.
-      : MessageMediaContainer.size;
+      : MessageMediaContainer.baseSize;
 
     // (a) Don't let tall, thin images take up too much vertical space,
     //     which could be annoying to scroll through. And:
@@ -1549,7 +1551,6 @@ class _Image extends StatelessWidget {
     final size = BoxConstraints(maxHeight: maxHeight)
       .constrainSizeAndAttemptToPreserveAspectRatio(imageSize);
 
-    final store = PerAccountStoreWidget.of(context);
     final message = InheritedMessage.of(context);
 
     final resolvedSrc = switch (node.src) {

test/widgets/content_test.dart

@@ -702,6 +702,20 @@ void main() {
       check(images.map((i) => i.src).toList())
         .deepEquals(expectedImages.map((n) => otherSrc(n.src)));
     });
+
+    testWidgets('scale size by mediaPreviewSizeFactor', (tester) async {
+      tester.view.devicePixelRatio = 1.0;
+      addTearDown(tester.view.resetDevicePixelRatio);
+      await prepareContent(tester,
+        messageContent(ContentExample.imagePreviewSingle.html),
+        initialSnapshot: eg.initialSnapshot(
+          realmMediaPreviewSize: RealmMediaPreviewSize.large),
+        wrapWithPerAccountStoreWidget: true);
+      // The image is tall enough to use the max height: 10em,
+      // with 1em = [kBaseFontSize]. Size gets doubled by the "large" setting.
+      check(tester.getSize(find.byType(RealmContentNetworkImage)))
+        .equals(Size(510, 340));
+    });
   });
 
   group("MessageInlineVideo", () {
@@ -734,6 +748,18 @@ void main() {
       check(pushedRoutes).single.isA<AccountPageRouteBuilder>()
         .fullscreenDialog.isTrue(); // opened lightbox
     });
+
+    testWidgets('scale thumbnail size by mediaPreviewSizeFactor', (tester) async {
+      await prepareContent(tester,
+        messageContent(ContentExample.videoInline.html),
+        initialSnapshot: eg.initialSnapshot(
+          realmMediaPreviewSize: RealmMediaPreviewSize.large),
+        wrapWithPerAccountStoreWidget: true);
+      check(tester.getSize(find.descendant(
+        of: find.byType(MessageMediaContainer),
+        matching: find.byType(Container)))
+      ).equals(MessageMediaContainer.baseSize * 2);
+    });
   });
 
   group("MessageEmbedVideo", () {