Amphtml: amp-story: Page progress no longer resets when going from inactive to visible

[drtchops]

What's the issue?

Previously when an AMP story's visibility goes from inactive to visible the progress of the current page was reset. Currently, this only happens when auto advance is based on a video and not when based on a timer.

In the case of a viewer that shows multiple stories with autoplay, if you let the last page of a story complete its auto advance timer, let the viewer to advance you the next story, and then try to tap or swipe back to the previous story, the previous story will already be at the end and will automatically advance you to the next story instead of replay the final page.

It would be nice if it was possible for the viewer to tell the story to switch to or restart a specific page, but I assume that is coming in the future.

How do we reproduce the issue?

1. Do a google search on mobile for something that returns visual story search results that have auto advance timers set, eg https://www.google.com/search?q=canada
2. Open the first story and start watching it
3. Tap through until the final page and let it play out
4. Once the viewer has advanced you to the next story, try to go back to the previous story by swiping back
5. Notice that you will go back then will be immediately send forward to the 2nd story

What browsers are affected?

All mobile devices and desktop browsers in mobile dev mode.

Which AMP version is affected?

Seen in Version 2001251659540, started within the last 3 months.

/cc @ampproject/wg-stories

[gmajoulet]

cc @ampproject/wg-stories

[gmajoulet]

Thanks for filing!

A few thoughts:

• The story can get paused for 2 reasons: either the viewer changed the visibilityState, or the tab/browser became inactive
• When the tab/browser becomes inactive, we don't want to rewind the current page upon resuming the story, we can keep playing from where it was at
• When the viewer changes the visibilityState (but the tab is still active) it is likely because the user is swiping. When/if the user comes back, we want to rewind the page (either video or timing). However, rewinding the video will completely change the content visible on the page, so we need to make sure that viewers change the visibilityState only once the story is off screen

@newmuis wdyt?

[drtchops]

From the viewer perspective, I would expect these two functionalities to be handled by the two separate paused and inactive visibility states.

• When the user starts to swipe, set the state to paused, which pauses the playback
• When the story is completely hidden off the side, set the state to inactive, which resets the current page's playback and triggers a redraw
• When the user swipes back to that story, set the state to visible, which resumes playback from the start of the page
• If the user partially swipes but doesn't complete it, keeping the same story in view, set the state to paused at the start of the swipe, then set it to visible after, making the story resume from where it left off instead of starting the page over

This is the functionality that happened a little while ago. Is the expected behavour from switching tabs different, or can it be handled from the same paused/inactive usage?

[gmajoulet]

All your bullet points sound good to me. :)
I checked with the Google Search teams, and this is how the current Search viewer is implemented, so we should be good.

Is the expected behavour from switching tabs different

Do you mean browser tabs?
If yes, we want to pause the story but we can detect that through this API, and not rewind the last page:

https://github.com/ampproject/amphtml/blob/53cb6302d0babf47090f86c355ebdc6646670a9f/src/utils/document-visibility.js#L44-L53

[gmajoulet]

We prioritized https://github.com/ampproject/amphtml/issues/28650 that should fix this issue.