feat: implement webtoon-style viewer for tall images #584

omnessssssssss · 2025-09-08T03:20:29Z

Add fitWidthForTallImages parameter to BooruImage widget
Always use BoxFit.fitWidth when fitWidthForTallImages flag is enabled
Remove aspect ratio constraints for tall images to allow proper fit-width
Detect very tall images (aspect ratio > 2.0) in post details
Use SingleChildScrollView for tall images instead of InteractiveViewer
Add proper status bar padding for full-screen tall image viewing
Preserve tap-to-toggle overlay functionality for tall images
Allow natural vertical scrolling instead of pan-to-info gesture
Update OriginalImagePage and PostDetailsImage to use new fit mode

This change allows tall images to fit the screen width and be scrollable vertically, providing a webtoon-style viewing experience for long images.

Fix #524

- Add fitWidthForTallImages parameter to BooruImage widget - Always use BoxFit.fitWidth when fitWidthForTallImages flag is enabled - Remove aspect ratio constraints for tall images to allow proper fit-width - Detect very tall images (aspect ratio > 2.0) in post details - Use SingleChildScrollView for tall images instead of InteractiveViewer - Add proper status bar padding for full-screen tall image viewing - Preserve tap-to-toggle overlay functionality for tall images - Allow natural vertical scrolling instead of pan-to-info gesture - Update OriginalImagePage and PostDetailsImage to use new fit mode This change allows tall images to fit the screen width and be scrollable vertically, providing a webtoon-style viewing experience for long images.

CLAassistant · 2025-09-08T03:20:36Z

All committers have signed the CLA.

khoadng · 2025-09-08T12:30:50Z

Did you vibe code all this? Looks like you ignored all the linter warnings

omnessssssssss · 2025-09-08T15:03:44Z

A lot of it is vibe coded. Never worked in Flutter before so I didn't have vs code setup to even show linter errors and the only warnings I saw were when building and they were just the outdated deps 🤷

If your issue is with warnings I can fix those later today. I really made this feature for myself because large images are impossible to view currently (without downloading and opening in an external image viewer). If your issue is with the underlying implementation I probably won't be able to fix that. I don't know enough about Flutter to do that

lib/core/posts/details/src/widgets/post_details_item.dart

khoadng · 2025-09-09T02:17:21Z

Swiping up to pull up the details sheet no longer works. This is somewhat okay since version 4.2 introduced a button to open and close the sheet. However, the app now has a new TikTok-style swipe feature, which this change will break.
The way to determine when to use the tall image mode is pretty arbitrary, I don't like it.

I have been thinking about adding a dedicated mode in the settings for this kind of usage. The next release will introduce a settings to change between a gallery browsing mode and a tiktok browsing mode. Maybe adding a comic mode would be better

omnessssssssss · 2025-09-09T02:25:34Z

Swiping up to pull up the details sheet no longer works. This is somewhat okay since version 4.2 introduced a button to open and close the sheet. However, the app now has a new TikTok-style swipe feature, which this change will break.

I think this can be fixed if I were to check for the state of the screen (Idk how to word this) where if the icons are stuff are showing then if the user swipes up open the info panel and if not then scroll

2. The way to determine when to use the tall image mode is pretty arbitrary, I don't like it.

I agree. I was trying to think of a good way but there are so many ways to do it I couldn't decide. I think a good way could be if the image is taller than wide then use the scroll view however a complete overhaul of the image viewer could resolve this. As it is now, even a normal image gets squished when the info panel opens up but I don't think it should. IMO the image viewer should be like a background thing with the image fit width by default. The info panel should be an overlay on the image. I am not familiar enough with the codebase to suggest any better changes

Also, this is not meant to replace any method of scrolling left/right is it simply to fix and issue where long images are near impossible to be viewed right now. Yes, you can zoom in however then you must scroll up/down very precisely as the black space on the sides is kind of like a large image.

- Remove _buildPostContent method and inline content as requested in PR review - Fix PostDetailsImage generic type parameter to properly handle T extends Post - Fix state class to maintain generic type information

- Add swipe-up gesture detection for tall images when overlay UI is showing - Disable scrolling when UI is visible to allow swipe gesture to work - Enable normal scrolling when UI is hidden for viewing tall images

khoadng · 2025-09-09T03:36:15Z

IMO the image viewer should be like a background thing with the image fit width by default. The info panel should be an overlay on the image.

This is by design since the viewer is used for mixed media (videos and image), the current design allow user to continue watching the video while browsing the information.

where long images are near impossible to be viewed right now.

I agree, that’s why I’m planning to add a dedicated comic/webtoon mode, separate from gallery or TikTok views. It’ll fit images to screen width, be scrollable, and disable the info panel gesture. This can be set globally or per profile, so if a site focuses on comics or you just want to read that way, you can switch to a dedicated profile.

khoadng · 2025-09-09T03:44:06Z

Related #524

- Resolved import conflict in post_details_item.dart - Regenerated translation files to include new keys from upstream - Merged changes for backup/restore, post grid, and settings features

Implements intelligent tall media detection and specialized scrolling behavior for very tall images/comics. Adds settings-driven classification system to determine when content should use scrollable viewer versus standard interactive viewer. (Trying Codex instead of Claude this time :P)

omnessssssssss · 2025-09-17T04:21:17Z

@khoadng Some more AI changes 😆

Tested on virtual device on a couple of images and it does work for both horizontal and vertical scroll modes

lib/core/settings/src/types/settings.dart

lib/core/posts/details/src/utils/tall_media_classifier.dart

khoadng · 2025-09-17T05:38:52Z

Add some quick feedback, will check the rest later

omnessssssssss · 2025-09-18T00:58:27Z

I will resolve the comments soon however I think you still have a misunderstanding of what it is I want. Hopefully this can help

omnessssssssss · 2025-09-18T01:00:43Z

omnessssssssss · 2025-09-18T01:37:19Z

Sorry the video is small GH has 10mb upload restrictions

demo.mp4

…ction - Reduce TallMediaSettings from 10 complex parameters to single enabled toggle - Convert TallMediaClassifier class to classifyTallMedia function - Move threshold values to static constants for consistent behavior - Add feature disable capability via enabled setting - Update all usage sites and tests for new function-based API

khoadng · 2025-09-18T04:17:19Z

Looking good! Can you make it so that swiping still works at the edge, allowing users to switch pages in tiktok mode and pulling up the info in gallery mode?

khoadng · 2025-09-18T04:33:27Z

lib/core/posts/details/src/utils/tall_media_classifier.dart

+  bool get hasScrollableExtent => scrollExtent > 0;
+}
+
+TallMediaDisposition classifyTallMedia({


this should be a factory method in TallMediaDisposition, rename it to fromViewport. Move all calculation to this method

settings.enabled check, it should be handle from the UI

khoadng · 2025-09-18T04:37:28Z

lib/core/settings/src/types/settings.dart

+  @override
+  List<Object> get props => [enabled];
+
+  static const double aspectRatioThreshold = 2.15;


move these to TallMediaConfigs, pass the config as a option parameter to the above mentioned fromViewport method.

khoadng · 2025-09-18T04:43:15Z

lib/core/posts/details/src/widgets/post_details_item.dart

                    config: authConfig,
                    imageUrlBuilder: imageUrlBuilder,
                    imageCacheManager: imageCacheManager,
-                    // This is used to make sure we have a thumbnail to show instead of a black placeholder


keep the comment

khoadng · 2025-09-18T05:36:26Z

lib/core/posts/details/src/utils/tall_media_classifier.dart

+// Project imports:
+import '../../../../settings/settings.dart';
+
+class TallMediaDisposition {


Change the class name, it sounds strange. Maybe MediaViewportConfiguration

khoadng · 2025-09-18T05:41:57Z

lib/core/posts/details/src/widgets/post_details_image.dart

      placeholderUrl: placeholderImageUrl,
      aspectRatio: post.aspectRatio,
-      forceCover: post.aspectRatio != null,
+      forceCover: false, // Never force cover when we want fit width


This should be conditional based on fitWidthForTallImages

khoadng · 2025-09-18T05:42:08Z

lib/core/posts/details/src/widgets/post_details_image.dart

      imageHeight: post.height,
      imageWidth: post.width,
-      forceFill: true,
+      forceFill: false,


Same as above?

khoadng · 2025-09-18T05:43:02Z

lib/core/posts/details_pageview/src/post_details_page_view_controller.dart

 import 'post_details_page_view.dart';

+enum SwipeLockReason {
+  legacy,


What is legacy?

khoadng · 2025-09-18T05:43:56Z

lib/core/posts/post/src/pages/original_image_page.dart

      imageHeight: widget.contentSize?.height,
      imageWidth: widget.contentSize?.width,
-      forceFill: true,
+      forceFill: false,


This should be conditional based on fitWidthForTallImages

Remove unused variables and fix linter warnings

5c7c495

khoadng reviewed Sep 9, 2025

View reviewed changes

lib/core/posts/details/src/widgets/post_details_item.dart Outdated Show resolved Hide resolved

omnessssssssss added 2 commits September 8, 2025 22:35

refactor: inline post content method and fix generic type issues

4315cb9

- Remove _buildPostContent method and inline content as requested in PR review - Fix PostDetailsImage generic type parameter to properly handle T extends Post - Fix state class to maintain generic type information

fix: restore swipe-up for post info on tall images when UI is visible

c1fa3ae

- Add swipe-up gesture detection for tall images when overlay UI is showing - Disable scrolling when UI is visible to allow swipe gesture to work - Enable normal scrolling when UI is hidden for viewing tall images

omnessssssssss added 3 commits September 9, 2025 21:07

chore: merge upstream master and resolve conflicts

442efa9

- Resolved import conflict in post_details_item.dart - Regenerated translation files to include new keys from upstream - Merged changes for backup/restore, post grid, and settings features

Merge branch 'master' into tall-images-viewer

52ba79d

khoadng reviewed Sep 17, 2025

View reviewed changes

lib/core/settings/src/types/settings.dart Outdated Show resolved Hide resolved

khoadng reviewed Sep 17, 2025

View reviewed changes

lib/core/posts/details/src/utils/tall_media_classifier.dart Outdated Show resolved Hide resolved

khoadng reviewed Sep 18, 2025

View reviewed changes

khoadng added this to the 4.4 milestone Sep 20, 2025

khoadng force-pushed the master branch from f0391aa to 91d4f40 Compare November 8, 2025 07:20

Uh oh!

feat: implement webtoon-style viewer for tall images #584

Are you sure you want to change the base?

feat: implement webtoon-style viewer for tall images #584

Uh oh!

Conversation

omnessssssssss commented Sep 8, 2025 • edited by khoadng Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

khoadng commented Sep 8, 2025

Uh oh!

omnessssssssss commented Sep 8, 2025

Uh oh!

Uh oh!

khoadng commented Sep 9, 2025

Uh oh!

omnessssssssss commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

khoadng commented Sep 9, 2025

Uh oh!

khoadng commented Sep 9, 2025

Uh oh!

omnessssssssss commented Sep 17, 2025

Uh oh!

Uh oh!

Uh oh!

khoadng commented Sep 17, 2025

Uh oh!

omnessssssssss commented Sep 18, 2025

Uh oh!

omnessssssssss commented Sep 18, 2025

Uh oh!

omnessssssssss commented Sep 18, 2025

Uh oh!

khoadng commented Sep 18, 2025

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

omnessssssssss commented Sep 8, 2025 •

edited by khoadng

Loading

CLAassistant commented Sep 8, 2025 •

edited

Loading

omnessssssssss commented Sep 9, 2025 •

edited

Loading