search

stashapp / stash

An organizer for your porn, written in Go. Documentation: https://docs.stashapp.cc
https://stashapp.cc/
GNU Affero General Public License v3.0
9.28k stars 791 forks source link

Mobile controls on gallery lightbox #2538

Open sleetx opened 2 years ago

sleetx commented 2 years ago

On mobile devices, the gallery lightbox does not respond to standard mobile controls. This is sometimes called "touch gestures" or "swipe navigation". Stash still uses desktop image controls despite being in mobile format.

To reproduce: Open gallery lightbox on a mobile device. When attemping to swipe left or right, the image follows the user's finger moving around the screen - often moving most of the image off-screen depending how far you swipe. In addition, double tapping the image does not control zoom, it simply detects which half of the image you tapped and decides to go back/forward one image (like the desktop controls).

Expected functionality should match most mobile UI interfaces:

echo6ix commented 2 years ago

Just a note, touch gestures should not be limited to mobile viewports. Swipe navigation is also very useful on laptops and large viewport touch devices.

echo6ix commented 2 years ago

From Discord

Not sure what lightbox is being used in stash, but there are a few open source alternatives that support mobile swipe and double-tap zoom controls https://github.com/andreknieriem/simplelightbox

eoop commented 2 years ago

Photoswipe is also an excellent open source mobile + desktop image gallery. It supports many types of photos including very high resolution images. https://photoswipe.com/

ghost commented 2 years ago

Indeed with https://github.com/dromru/react-photoswipe-gallery it should be pretty trivial to do. After experimenting a bit, the main change would be the current lightbox component is used inside of ImageList and GalleryList. The new lightbox would wrap those instead.