Mobile Swipe and Hide Image Navigation Button Features

[hennyg888]

I added some simple mobile browsing features. They're not complete asset rebuilds for mobile browsing.

Users can now swipe to navigate images on mobile. If a preview image is zoomed in, swipe navigation won't execute so zooming in and then swiping to look around an image preview will still work properly.

Added a global setting to disable image navigation buttons. This doesn't only hide the buttons but removes the button entirely, with only keyboard and swipe navigation being left active. The translations for this setting should probably be checked by native speakers.

The commits up to remove desktop click swipe, clean code are the actual code changes. The following commits are just compiled asset updates. Originally also had desktop click and drag image navigation, but it's a pointless feature since keyboard nav is already implemented and removed as it was just a testing feature at that point.

If this change gets accepted, I'll probably also add a part to the repo README about how to set up a comfortable mobile browsing experience. These features were implemented in response to #767

[zanllp]

Actually, IIB has a TikTok-like mode to address interaction issues on mobile. For further optimizations on mobile, I also hope to build upon this.

c809e5bc6a4eea63bc06bd531c46db3e.mp4

[hennyg888]

Yeah the TikTok mode is pretty good.
This is just another navigation mode that I quickly put together. It doesn't conflict with anything and can be added along with the existing tiktok browsing mode.
Some users prefer horizontal swipe navigation. Also, turning off all transparent side buttons on image preview has been asked for as a feature in the linked issue above.

If horizontal swipe and hide buttons are added to tiktok mode, then that's like changing the entire browser so it's not like tiktok at all. This is why I want to add these features as small addons to the default image preview browsing mode.

[zanllp]

Alright, you've convinced me. But in my opinion, there's still a major issue: the lack of interactive feedback. For example, when users swipe, an arrow (left or right) could appear, gradually becoming clearer as the swipe distance increases. This is just one example—you can think of others, or ask Cursor/Claude; they’ll know what to do.

[hennyg888]

Yeah that's true, just hopping to next image without visual feedback on swipe in progress or success is a bit jarring.
I'm currently stuck on this problem: the only good visual feedback is infinite scroll where the next image in the list is partially displayed during the progress of the swipe, exactly like TikTok view, so it'll be implementing the same thing twice if I add it to normal preview. Every other type of visual feedback, page progress, arrow, current image shift, and current image fade are all visually distracting and adds nothing of value (unlike next image partial preview), it might as well have no visual feedback.
So, I'm wondering how you want the horizontal swipe and simplified UI with no buttons and no side panel done. Do I build on top of current default image preview and duplicate some tiktok view features or do I change or add alternative format to tiktok view?

I'll probs also add a setting to turn off the side panel entirely, and also a one-tap navigation where if you just tap anywhere on the left or right half of the screen and the image will update in-place without animations.
I'm taking these mobile UI features from popular mange reader apps. They're optimized for image viewing so they're a bit different than TikTok view.

[zanllp]

My recommendation is to avoid major modifications or excessive development of the current image viewing system. The existing functionality was actually born out of demanding requirements - it needs to support viewing and managing thousands of images on a single page while maintaining excellent performance. The development and maintenance costs are already relatively high. Moreover, it wasn't specifically designed for mobile platforms; at best, it's just minimally adapted for mobile use.

[zanllp]

I recommend developing based on the TikTok-like interaction mode. You can make modifications to the legacy mode if needed, but ensure your changes deliver a solid user experience while keeping code modifications to a minimum.