lightbox: Display thumbnail with original image sizing #833

rajveermalviya · 2024-07-23T18:52:36Z

flutter-thumbnails-sizing.mp4

(Initial image opens are older messages missing data-original-dimensions attribute)

Fixes #830

gnprice

Great, thanks @rajveermalviya for building this!

About to go into a meeting, but here's a couple of comments from beginning to read the PR.

gnprice · 2024-07-23T18:59:43Z

lib/model/content.dart

+        final width = double.tryParse(cutsets[0]);
+        final height = double.tryParse(cutsets[1]);


This seems a bit too widely accepting — let's expect ints rather than doubles.

gnprice · 2024-07-23T19:01:31Z

lib/model/content.dart

+    final originalDimensions = imgElement.attributes['data-original-dimensions'];
+    if (originalDimensions != null) {
+      // Server encodes this string as "{width}x{height}" (eg. "300x400")
+      final cutsets = originalDimensions.split('x');


As part of my usual performance paranoia for the content parser, let's avoid split and allocating a list here: instead can find the index of the first 'x' and parse the substrings before and after (if there's a second x, it'll cause the int parsing to fail), or can use a regexp like ^(\d+)x(\d+)$.

gnprice

OK, finished a review — comments below.

gnprice · 2024-07-23T21:07:59Z

lib/model/content.dart

  final bool loading;

+
+  /// The width of the canonical image.


nit: extra blank line

gnprice · 2024-07-23T21:12:01Z

lib/widgets/lightbox.dart

+  BuildContext? context,
+  required Message message,
+  required Uri src,
+  required Uri? thumbnailUrl,


nit: include trailing comma in intermediate commit

(that helps reduce the diff both for that commit and the one after it)

gnprice · 2024-07-23T21:13:28Z

lib/widgets/content.dart

-          src: resolvedSrc,
-          thumbnailUrl: null,
-          mediaType: MediaType.video));
+          src: resolvedSrc));


Cool, I like this refactor splitting into two different entry-point functions. The resulting API feels more thoroughly well-typed.

gnprice · 2024-07-23T21:21:57Z

lib/widgets/lightbox.dart

+    // Use `BoxFit.contain` if the original image size is larger than
+    // the device screen size, otherwise `null` (default).


What's the behavior of the default? If we can it's probably best to pass an explicit value that specifies the behavior we want — if nothing else, that should make it easier to reason about this logic where we're choosing between different values for this option.

gnprice · 2024-07-23T21:27:56Z

lib/widgets/lightbox.dart

+      final physicalSize =
+        MediaQuery.sizeOf(context) * MediaQuery.devicePixelRatioOf(context);


Hmm, the meaning of MediaQuery.sizeOf is that it gives the size of the whole screen.

That's often the same as the size available to this widget, but it may not be — in particular we have a SafeArea around this, so I believe if you use a device with a notched display then this will give a larger size than what's actually available to this widget. That seems like it could lead the below logic astray.

Ideally we'd specify a single value for this option that tells Image to do the same thing that you explain in the comment above. Is this BoxFit.scaleDown?
https://main-api.flutter.dev/flutter/painting/BoxFit.html

Ah I see, but then it's not clear there's a good way to tell Image about originalWidth and originalHeight.

In that case, how about we handle the sizing of the image directly? I think putting it in a SizedBox inside a FittedBox, or something along those lines, should be able to control the size it's displayed at.

gnprice · 2024-07-23T21:44:06Z

lib/widgets/lightbox.dart

+    // This allows the thumbnail image to mimic the same behaviour as
+    // when the original image is loaded, which is, keep small images
+    // small (and in the center) and large images contained in the
+    // viewport.


Let's add a test case or two for this behavior, since it seems like nontrivial logic.

I see we don't have any existing tests for the image lightbox. We don't have to add tests for the rest of its behavior now; but it'd be good to test this, and in particular to have a test exercising the situation I mentioned in another comment with a notched display.

If I find time today I can try to add a couple of basic tests for the existing layout of the image lightbox, to help set the framework for the new tests.

Sent that as #835. So you can rebase this PR atop that one, and then add the new couple of test cases.

gnprice

Thanks for the revision!

I see you hadn't marked this as ready for the next round of review, but took a look at it anyway just to help keep it moving along given its connection to the imminent server-9.0 release.

One small comment below, and otherwise everything here looks good — all it needs is those couple of new test cases as discussed above.

gnprice · 2024-07-25T05:08:39Z

lib/model/content.dart

+        final width = int.tryParse(match.group(1)!);
+        final height = int.tryParse(match.group(2)!);


There's a subtle and unfortunate gotcha in Dart's int.parse and int.tryParse, which it's best to explicitly disable:

Suggested change

final width = int.tryParse(match.group(1)!);

final height = int.tryParse(match.group(2)!);

final width = int.tryParse(match.group(1)!, radix: 10);

final height = int.tryParse(match.group(2)!, radix: 10);

For discussion, see f547771.

In this case I believe it doesn't have any effect on the behavior, because we already know from the regexp that each group matches exactly \d+ and so can't trigger this gotcha. But that's a pretty subtle and nonlocal property, so it's best to avoid the gotcha more directly too: that way (a) the gotcha won't easily be reintroduced by an otherwise-innocent change elsewhere in this logic, and (b) it maintains the pattern for the benefit of anyone copy-pasting or adapting this code for somewhere else in the codebase.

(Separately I was tempted to say tryParse can be just parse, because we already know they match exactly \d+. But if we got an image with something like data-original-dimensions="1234123412341234123412341234x5", the parse would indeed fail because the number is too big for an int. So tryParse is more correct — better to return unimplemented than to throw — and it's good we have it.)

gnprice · 2024-07-25T05:17:37Z

lib/widgets/lightbox.dart

+    return FittedBox(
+      fit: BoxFit.scaleDown,
+      child: SizedBox(
+        width: widget.originalWidth,
+        height: widget.originalHeight,
+        child: RealmContentNetworkImage(widget.thumbnailUrl!,


Cool, this seems nice and clean.

rajveermalviya

Thanks for the review @gnprice, I've addressed your comments in the latest revision.

But haven't gotten tests to work correctly yet.

rajveermalviya · 2024-07-25T20:42:31Z

test/widgets/lightbox_test.dart

+    //   final renderImage = tester.renderObject<RenderImage>(find.descendant(
+    //     of: find.byType(RealmContentNetworkImage),
+    //     matching: find.byType(RawImage)));
+    //   check(renderImage.size).equals(const Size(100, 100));


I can't get this test to pass because seems like flutter test enviroment doesn't report correct image sizes?

rajveermalviya · 2024-07-25T20:44:58Z

test/widgets/lightbox_test.dart

+    //   print('pump');
+    //   await tester.pump();
+    //   print('done pump');
+    //   tester.widgetList<RealmContentNetworkImage>(find.byType(RealmContentNetworkImage)).forEach((w) => print(w.src));


Same for this test, the frame arg in _frameBuilder never changes from null, even though _loadingBuilder's progress become 1.0.

gnprice · 2024-07-25T21:10:02Z

Thanks. Chat thread for debugging those tests: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/.23F833.20lightbox.20tests/near/1902807

Fixes: zulip#830

gnprice · 2024-07-26T01:26:31Z

OK, merging this without those tests, in order to get it into a v0.0.18 beta today since the server 9.0 release just came out. Thanks again @rajveermalviya!

I made a couple of commit-message tweaks:

$ git range-diff origin pr/833 @
…
      ## Commit message ##
    -    model: Parse original image dimensions
    +    content: Parse original image dimensions
…
      ## Commit message ##
    -    lightbox [nfc]: Refactor `getLightboxRoute`
    +    lightbox [nfc]: Split getLightboxRoute for images vs. videos

The second commit can be a bit more specific about what changed, since "[nfc]" already means it was a refactor; and for the first, the summary prefix can be more specific in that we usually mark a change to lib/model/foo.dart as "foo:" rather than "model:".

I definitely appreciate the work you've done already to write those draft tests, and would be glad to get tests along those lines into the tree. So please go ahead and send that as a follow-up PR, using what we found in that chat thread linked above.

(And maybe we still won't have a test for the situation where the frame argument is never changing from null, since that remains mysterious. In that case we can leave a TODO comment for it, perhaps including a draft of the test just with skip: true so it doesn't run. The other tests will still be good to have.)

I've had a tab in my browser open to the end of this #833 thread. Here seems like the right place to serialize out that information so that I can close the tab.

rajveermalviya added the integration review Added by maintainers when PR may be ready for integration label Jul 23, 2024

rajveermalviya requested a review from gnprice July 23, 2024 18:56

gnprice reviewed Jul 23, 2024

View reviewed changes

gnprice mentioned this pull request Jul 24, 2024

lightbox test: Add basic tests for image lightbox #835

Merged

rajveermalviya force-pushed the pr-thumbnail-sizing branch 3 times, most recently from 7e83ad1 to 6956b80 Compare July 24, 2024 12:57

gnprice reviewed Jul 25, 2024

View reviewed changes

rajveermalviya force-pushed the pr-thumbnail-sizing branch from 6956b80 to ec4078d Compare July 25, 2024 20:34

rajveermalviya commented Jul 25, 2024

View reviewed changes

rajveermalviya added 3 commits July 25, 2024 18:16

content: Parse original image dimensions

cf4c465

lightbox [nfc]: Split getLightboxRoute for images vs. videos

4ef5973

lightbox: Display thumbnail with original image sizing

4efcaa7

Fixes: zulip#830

gnprice force-pushed the pr-thumbnail-sizing branch from ec4078d to 4efcaa7 Compare July 26, 2024 01:26

gnprice merged commit 4efcaa7 into zulip:main Jul 26, 2024
1 check passed

rajveermalviya deleted the pr-thumbnail-sizing branch July 26, 2024 05:06

		final width = double.tryParse(cutsets[0]);
		final height = double.tryParse(cutsets[1]);

		// Use `BoxFit.contain` if the original image size is larger than
		// the device screen size, otherwise `null` (default).

		final physicalSize =
		MediaQuery.sizeOf(context) * MediaQuery.devicePixelRatioOf(context);

		final width = int.tryParse(match.group(1)!);
		final height = int.tryParse(match.group(2)!);

lightbox: Display thumbnail with original image sizing #833

lightbox: Display thumbnail with original image sizing #833

Uh oh!

Conversation

rajveermalviya commented Jul 23, 2024

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rajveermalviya left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gnprice commented Jul 25, 2024

Uh oh!

gnprice commented Jul 26, 2024

Uh oh!

Uh oh!

Uh oh!