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

hueitan created this task.Aug 12 2020, 9:10 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 12 2020, 9:10 AM
hueitan claimed this task.Aug 13 2020, 2:26 PM
hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
AMuigai triaged this task as Medium priority.Aug 13 2020, 2:27 PM
hueitan added a comment.EditedAug 28 2020, 8:14 AM

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
hueitan updated the task description. (Show Details)Sep 1 2020, 2:25 PM
hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Sep 2 2020, 9:28 AM
hueitan updated the task description. (Show Details)Sep 3 2020, 10:47 AM
hueitan updated the task description. (Show Details)Sep 3 2020, 2:47 PM
hueitan updated the task description. (Show Details)Sep 3 2020, 3:56 PM
hueitan updated the task description. (Show Details)Sep 7 2020, 9:31 AM
SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Sep 8 2020, 5:11 PM
SBisson added a subscriber: SBisson.

The PR is merged

hueitan updated the task description. (Show Details)Sep 10 2020, 9:20 AM

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

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

Jpita added a comment.Sep 16 2020, 7:09 AM

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.

Jpita added a comment.Sep 16 2020, 7:32 AM

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!

dcausse removed a subscriber: dcausse.Sep 16 2020, 9:27 AM
AMuigai closed this task as Resolved.Sep 17 2020, 1:50 PM