Enhancement: support animation (auto-play) of multi-image subjects

[trouille]

As a participant, I would like to have the option for multi-image subjects to automatically loop through (e.g., animate). This would mirror the functionality on the browser-based experience.

Example project: https://www.zooniverse.org/projects/coolneighbors/backyard-worlds-cool-neighbors/classify
In the browser-based version, you can click the play button and it automatically loops through the multiple images, making it easier to see the potential mover moving in the center of the frame from one image to the next.

On the mobile app, there is no 'play' option and so you manually swipe through the images. That action makes it a little harder to focus on the potential mover.

Note: this is not a high priority.

[seanmiller26]

The ideal functionality should be as follows:

The multi-image subject should auto-play through infinitely.
Click on a subject image to pause autoplay.
Click again to re-enable the sequence.
A volunteer can tap and hold to pause on specific frames.
A carousel indicator will step through to indicate which frame you are viewing.
A volunteer can tap on specific indicators to view that frame paused.

For reference:

(All styling TBD)

This is a slimmed-down version of our desktop classifier viewer 'Flipbook'. It should function similarly minus play/pause/speed controls and frame thumbnail previews. If it helps here is a related issue:

Desktop 'Flipbook Viewer' frame speed: zooniverse/front-end-monorepo#3885

(Edited to document discussion notes and decisions.)

[lcjohnso]

@seanmiller26 -- A specific question re: frame indicators. How do you recommend we handle many-frame (e.g., up to 10) situation where that number of dots will not fit side-by-side. Horizontal scroll for set of dots? Adding second row of dots? Something else?

[seanmiller26]

@lcjohnso Do we or will we have a limit on max number of frames to display? For now I have mocked up a max of ten indicators. If we suspect more may be needed I can revisit.

[lcjohnso]

I think 10 frames is a reasonable maximum frame count to assume. I had assumed that 10 would not fit; thanks for the correction via above screenshot.

@coryzoon -- based on Sean's answer, I think you can move forward assuming we can place frame indicators side-by-side, but let us know if that isn't feasible.

[seanmiller26]

Additional guidance for our full screen discussion on Slack:

When the animation is paused and they click on the image it should restart the animation. While paused, we would display a maximize image icon (similar to how it is now) which would allow them to view the modal and zoom.

Additional actions I came across: when in full screen - drag the image all the way down or up to exit full screen (must be at original image size), double click a zoomed in image to zoom out to original image size, click in any black area to exit, use the back button (in android) to exit.

[seanmiller26]

Responding to this progress update video: https://share.vidyard.com/watch/RseiKDavEdMcE5GeY1QoJT

I'm going to focus mostly on the functionality here and hope the styling updates in #535 take care of some of the minor issues. (see above comment for a reference of full screen styling)

It looks like we have taken care of all the asks from our initial list:

The multi-image subject should auto-play through infinitely.
Click on a subject image to pause autoplay.
Click again to re-enable the sequence.
A volunteer can tap and hold to pause on specific frames.
A carousel indicator will step through to indicate which frame you are viewing.
A volunteer can tap on specific indicators to view that frame paused.

I'd like to confirm these functionalities when in full screen:

• Double click to zoom.
• Double click again to zoom out.
• Click anywhere outside of the image to close the modal.

[lcjohnso]

Closed by #568