Amphtml: [Issue tracker] 👓 amp-story-player

[Enriqe]

Overview

Open Source Story Player: a container for embedding and playing AMP Stories on the web. A player can have multiple stories within it, and supports capabilities like “swipe-to-next” and social sharing options. Existent players can be found in native apps and on the web in the Google Search results.

Goals

• Support in both AMP and non-AMP websites.
• Open source
• Support the following features:
  
  
  
  • Swipe/tap-to-next and previous story.
  
  
  • Pre-rendering.
  
  
• Identical API & behavior across AMP/non-AMP.
• Support for mobile and desktop web.

Subtasks
Title	Description	Status	Github Issue/PR
1. Add JS library	To make the viewer work in non-AMP pages. Refine the experience when the JS and/or iframe are not yet loaded.	Done	#26276 #26557 #26305
2. Add & support fragment param to communicate with stories	This will enable us to (1) make runtime changes (e.g. UI tweaks) when in player (2) load viewer integration script conditionally (3) open the door for analytics.	Done	#26694
3. Add viewer integration messaging API	This API will enable communication between the viewer and the document.	Done	#26305 #26694 #26719
4. Pre-rendering & navigation logic	Whenever a user is navigating, we should pause the story, play the next one, and pre-render the next-next story.	Done	#26696
5. Add tap to next/prev story	Whenever a user is finished reading a story, the next tap should take the user to the next story.	Done	#26697
6. Add swipe-to-previous/next story	Add support for swiping to previous/next story.	Done	#26698
7. Sandbox iframes	The iframes we create in the player should be iframed, see amp [iframe].	Done	#27178
8. Control the player programmatically	We should expose an API so that the player can be controlled programmatically.	In progress	#28416
9. Load documents from the cache.	We should load the stories from the cache unless the publisher opts-out.	Done	#27588
10. Add embed modes	Add a parameter that publishers can specify in the DOM/JSON configuration that can be passed through to the embedMode fragment parameter, to allow specifying embed modes.	Not started
11. Support embedding within an AMP document	Once the above tasks are ready we should add the same support for AMP pages.	Done	#29312

[newmuis]

For "Add JS Library" milestone, I think there may still be more work to do. We need to refine the experience when the JS and/or iframe are not yet loaded.

[newmuis]

Can we add a few things to this list?

• Load documents from cache
• Sandbox iframes
• Support for embedding within an AMP document (supporting all other features mentioned here)

[Enriqe]

@newmuis done!

[gmajoulet]

@Enriqe is it ready to be closed now that new features are tracked separately?

[Enriqe]

I think it's fine to keep open, as there are other general features that could be tracked here (non programmatic API-related)

[llccrr]

@Enriqe Would it be possible to have the in-between Stories animation customizable with some css, presets or keyframes... ?

[newmuis]

@llccrr do you mind filing this as a separate feature request?

[llccrr]

I just found out that it had already been mentionned in the following feature request #27333

[irene84111]

Is there any progress/plan on Task 11?
Partners are eager to embedded Web Stories in their AMP pages and it would be great to have an expected release date.

[Enriqe]

Hey @irene84111 , we recently launched the (basic) AMP version for the player. Which allows you to embed 1 or more stories in your own AMP site. You can take a look at the work in progress documentation PR here https://github.com/ampproject/amphtml/pull/29922