Page MenuHomePhabricator

Add supportive gestures to Wikipedia Preview - Gallery part
Closed, ResolvedPublic

Description

Problem

At present, some of the key interactions are only possible when users tap for e.g. to view more content tap on continue reading, to move backward/forward inside the gallery view by tapping on arrows. These interactions get the job done, but we can improve the user experience by allowing other supportive gestures like swipe.

Solution

  • Introduce swipe right/left gestures inside the gallery view to let users change images. This is currently being performed by tapping on the left/right arrows.

Tap gesture supposed to be unchanged after adding swipe gesture.

Implementation Notes

  1. Swipe more than 40% of the current image to get the previous/next image
  2. Swipe more than 5 pixels within 300ms to get the previous/next image
  3. When selecting an image from the gallery row, client only loads the current/next/previous image info for lazy loading, same logic apply when user swipe to another image or tap next/previous button
  4. Loading animation only apply to the image, not the image attribution (caption/license/author)
  5. Transparent image doesn't have white background - can be fixed in another ticket T261745: Gallery optimization: image best fit
  6. IE11 is broken

Event Timeline

In general, this task splits into several steps

  1. Disable the current image/loading/error code, but don't delete
  2. Create new Slider component / element
  3. Attach all image into slider component
  4. Apply gesture swiping for Slider component
  5. Apply loading animation / error message / refersh button UI and Action to each image (Reuse the current code as much as possible)
  6. Make Sure RTL works
  7. Caption and Image attribution
  8. Fix Test Specs
  9. Others (Check PR link below for more details)
NOTE: Checkout the PR for the latest update https://github.com/wikimedia/wikipedia-preview/pull/56
SBisson added a subscriber: SBisson.

The PR is merged

Mentioned in SAL (#wikimedia-operations) [2020-09-10T09:24:18Z] <dcausse> creating missing cirrus indices for jawikivoyage T260228

Sorry for the unrelated log above!

Jpita added a subscriber: Jpita.

If we scroll all the way to the last image and there are 10 images, should we cancel the call/stop loading images from 2 to 8 or 9 to avoid taking too much time to show number 10?
Also, I feel like I asked already so, sorry if it was already replied, are we planning on adapting the image size to the device?
Some images are VERY heavy

image.png (565×107 px, 29 KB)

If we scroll all the way to the last image and there are 10 images, should we cancel the call/stop loading images from 2 to 8 or 9 to avoid taking too much time to show number 10?

That would be ideal if it's not too much work.

Also, I feel like I asked already so, sorry if it was already replied, are we planning on adapting the image size to the device?
Some images are VERY heavy

T261745: Gallery optimization: image best fit

That would be ideal if it's not too much work.

Should this happen here or on a new ticket?

Should this happen here or on a new ticket?

I suggest doing this on the other ticket for the optimization.

Should this happen here or on a new ticket?

I suggest doing this on the other ticket for the optimization.

I'm adding a comment on the other task then, thanks!