🐛 [amp-story] Build pagination buttons for pre-rendered stories

[Enriqe]

While working on #30031 I noticed pagination buttons weren't being built for documents that were initially prerendered. This is because the layoutCallback() was being short circuited here for prerendered documents:

amphtml/extensions/amp-story/1.0/amp-story.js

Lines 1012 to 1019 in 056f82b

	// Story is being prerendered: resolve the layoutCallback when the first
	// page is built. Other pages will only build if the document becomes
	// visible.
	if (!this.getAmpDoc().hasBeenVisible()) {
	return whenUpgradedToCustomElement(firstPageEl).then(() => {
	return firstPageEl.whenBuilt();
	});
	}

Which is right before the pagination buttons are built.

[amp-owners-bot]

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/1.0/amp-story.js
extensions/amp-story/1.0/pagination-buttons.css

[processprocess]

Thanks for catching this Enrique! I see how this ordering is important for pre-rendering now.

[gmajoulet]

Yep this was done on purpose as the pagination buttons are desktop only, and there's no platform prerendering documents with a desktop view.
Is this something the open source Web Story Player needs?

[gmajoulet]

Oh ok got it, they'd actually never build. Do you need to prerender them or do you need them to build once out of prerender? Let's think of when we need them, since we want to do as little as possible during prerender. We have to be super cautious about CPU cycles at this point.

[Enriqe]

Yeah, this is no big deal because I don't think we have a platform where we pre-render a story and then make it visible in desktop view. But it is needed for the open source web player since this is a very present use case.

Do you need to prerender them or do you need them to build once out of prerender?

We could wait building them until after ampDoc.whenFirstVisible() finishes, wdyt?

[Enriqe]

I moved the building of the buttons to inside storyLayoutPromise, which waits for the document to be visible before running the code inside of it:

amphtml/extensions/amp-story/1.0/amp-story.js

Lines 951 to 952 in 8f05773

	const storyLayoutPromise = Promise.all([
	this.getAmpDoc().whenFirstVisible(), // Pauses execution during prerender.

PTAL @gmajoulet

[gmajoulet]

Yep that looks great, and that will actually make the accessibility features @processprocess worked on reachable for players using prerendering, like the Discover integration.