The AMP Project Roadmap

What was accomplished

New team member

• Welcome @raxsha!!

AMP Story Player

• Fetch more stories from a remote JSON API endpoint amphtml/issues/29864
• Fix a P0 where an amp-story-player fails to render entirely amphtml/issues/30783

Interactive Components (quizzes/polls)

• Remove confetti effects if user vote is being loaded ampproject/amphtml#30584
• Binary polls won't properly clamp long options to two lines amphtml/issues/30657

amp-story-360

• 360 video support demo ampproject/amphtml#29509
• Gyroscope default heading optimizations amphtml/issues/30002

Others

• Fix .getImpl race condition on Android, that was probably causing completely blank stories on render ampproject/amphtml#30598
• Disable the video equalizer on Stories with no audio UI amphtml/issues/29933
• Fix Story amp-video usage with amp-analytics amphtml/issues/29938
• Fix story video poster stretched on first page amphtml/issues/30651

What's next

AMP Story Player

• Dev preview documentation
• Custom UI Controls API amphtml/issues/30031

360

• Manage webGL resources amphtml/issues/29512
• Component visual diff tests amphtml/issues/30739

cc @ampproject/wg-stories

What was accomplished

Interactive Components (quizzes/polls)

• Official documentation published amphtml/issues/29468
• Fix prompt alignment https://github.com/ampproject/amphtml/issues/30531

360

• 360 video support ampproject/amphtml#29509
• Feature discovery UI & animation amphtml/pull/30406
• Pause animation on long press https://github.com/ampproject/amphtml/issues/29593

Others

• Build pagination buttons for prerendered stories https://github.com/ampproject/amphtml/pull/30503

AMP Story Player

• Fix responsive layout validation https://github.com/ampproject/amphtml/issues/30414
• Fix responsive layout sizing https://github.com/ampproject/amphtml/issues/30423

What's next

AMP Story Player

• Dev preview documentation
• Custom UI Controls API https://github.com/ampproject/amphtml/issues/30031
• Fetch stories from endpoint https://github.com/ampproject/amphtml/issues/29864

Interactive Components (quizzes/polls)

360

• Manage webGL resources amphtml/issues/29512
• Default heading for gyroscope amphtml/issues/30002

cc @ampproject/wg-stories

What was accomplished

Interactive Components (quizzes/polls)

• Official documentation in progress amphtml/issues/29468

360

• Feature discovery UI & animation amphtml/pull/30406

Others

• Reduce bundle size of interactives by 11% ampproject/amphtml/pull/30233/issues/30274
• System UI updates amphtml/issues/30274
• Smooth drop animation ampproject/amphtml/pull/30220

What's next

Interactive Components (quizzes/polls)

• Official documentation amphtml/issues/29468

360

• 360 video support ampproject/amphtml#29509

cc @ampproject/wg-stories

What was accomplished

Web Player

• Started work on UI Controls API https://github.com/ampproject/amphtml/issues/30031
• Scoping for player developer preview milestone

Interactive Components (quizzes/polls)

• Create animations for the results component ampproject/amphtml#29818
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925
• Explore other interactive components (range sliders, image quizzes & polls) ampproject/amphtml#29838

Animations

• Example story for new animation presets https://github.com/ampproject/amphtml/issues/30028

Accessibility

• Talkback: provide a way to navigate to the next story page ampproject/amphtml#29974

cc @ampproject/wg-stories

What's next

(Pending update)

cc @ampproject/wg-stories

What was accomplished

Web Player

• Dispatch end of stories event https://github.com/ampproject/amphtml/issues/29865
• Fix fragment param issue https://github.com/ampproject/amphtml/pull/30069
• End of stories behavior API finalized https://github.com/ampproject/amphtml/issues/29289
• show() improvements https://github.com/ampproject/amphtml/pull/30085

Interactive Components (quizzes/polls)

• Create public documentation for new sizing strategy https://github.com/ampproject/amphtml/issues/30035
• Size components with relative units https://github.com/ampproject/amphtml/issues/29925
• Show ellipsis with 4 lines https://github.com/ampproject/amphtml/issues/29897
• Change amp-story-interactive version to 0.1 https://github.com/ampproject/amphtml/pull/30080

A11y

• Make education screens buttons focusable for screen readers ampproject/amphtml#30021

Others

• Fix audio race conditions. ampproject/amphtml#29520
• "swipe to go to next story" animation bug https://github.com/ampproject/amphtml/issues/30025

What's next

Web Player

• UI Controls API https://github.com/ampproject/amphtml/issues/30031
• End of stories behavior https://github.com/ampproject/amphtml/issues/29289
• More samples / documentation

Interactive Components (quizzes/polls)

• Create animations for the results component ampproject/amphtml#29818
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925

Animations

• Example story for new animation presets https://github.com/ampproject/amphtml/issues/30028

360

• Public documentation https://github.com/ampproject/amphtml/issues/29511
• Feature discovery UI ampproject/amphtml#29591

Accessibility

• Talkback: provide a way to navigate to the next story page ampproject/amphtml#29974

cc @ampproject/wg-stories

What was accomplished

Web Player

• Make initial load 52% faster ampproject/amphtml#29703
• Add stories to the player programmatically (player.add(storiesArray)) ampproject/amphtml#29280
• Expose page attachment state ampproject/amphtml#29219
• Visual tests ampproject/amphtml#29372

Interactive Components (quizzes/polls)

• Validation rules ampproject/amphtml#29465
• UI animation to show interactive elements are tappable ampproject/amphtml#29466
• Move code to a new extension (~10% savings on amp-story.js) ampproject/amphtml#29464
• Implement percentage results page for quizzes ampproject/amphtml#29458
• Add transparent style to all components ampproject/amphtml#29791
• Improve tap targets to only block page navigation on tap when needed ampproject/amphtml#29792

Videos

• Fix joint latency that would not be tracked on the first page ampproject/amphtml#29105
• Send video performance metrics on last Story page ampproject/amphtml#28650

360

• Prompt for iOS gyroscope permissions in code review ampproject/amphtml#29590
• Gyroscope support in code review ampproject/amphtml#29513
• Scale down image if too large for device GPU in code review ampproject/amphtml#29738

Animations

• Refactoring all the presets default timing functions demo ampproject/amphtml#29684
• New preset: Scale fade ampproject/amphtml#29685

Others

• Talkback: provide a way to navigate to the previous story page ampproject/amphtml#28422
• New optional metadata attributes to represent the creator entity ampproject/amphtml#28992
• Swiping back to a story restarts its active page ampproject/amphtml#28927
• Option to opt-out from history localStorage ampproject/amphtml#29645

What's next

Web Player

• Capability to support "Swipe down to close" gestures ampproject/amphtml#28397
• show() API method improvements ampproject/amphtml#28987
• Publish programmatic API documentation ampproject/amphtml#29730
• Fix for Edge browser ampproject/amphtml#27358

Interactive Components (quizzes/polls)

• Early launch 🎉
• Add new designs of results components ampproject/amphtml#29793
• Create animations for the results component ampproject/amphtml#29818
• Prototype other types of interactive components ampproject/amphtml#29838

Videos

• Downgrade bitrate on slow initial load ampproject/amphtml#29501
• Optimize media play/pause operations on page navigation ampproject/amphtml#29508

360

• Feature discovery UI ampproject/amphtml#29591
• Public documentation ampproject/amphtml#29511
• Merge Prompt for iOS gyroscope permissions ampproject/amphtml#29590
• Merge Gyroscope support ampproject/amphtml#29513
• Merge Scale down image if too large for device GPU ampproject/amphtml#29738

Others

• Fix vertical gaps around amp-twitter within a Story ampproject/amphtml#29194
• Ensure services are not included in sub extensions bundles ampproject/amphtml#29282

cc @ampproject/wg-stories

What was accomplished

Web Player

• Publish programmatic API documentation ampproject/amphtml#29730
• AMP version of the Web Player ampproject/amphtml#29312
• Dispatch events on Story page navigation with page ID and Story progress ampproject/amphtml#29878

Interactive Components (quizzes/polls)

• Add new designs of results components ampproject/amphtml#29793
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925

360

• Prompt for iOS gyroscope permissions ampproject/amphtml#29590
• Gyroscope support ampproject/amphtml#29513
• Scale down image if too large for device GPU ampproject/amphtml#29738

Others

• Allow meta tags for Story generators to mark the story ampproject/amphtml#29991
• Messaging queue for incoming viewer communication ampproject/amphtml#29906
• Fix vertical gaps around amp-twitter within a Story ampproject/amphtml#29194

What's next

Web Player

• Capability to support "Swipe down to close" gestures ampproject/amphtml#28397
• show() API method improvements ampproject/amphtml#28987
• Fix for Edge browser ampproject/amphtml#27358

Interactive Components (quizzes/polls)

• Create animations for the results component ampproject/amphtml#29818
• Work on supporting multiple layouts for interactive components ampproject/amphtml#29925

Videos

• Downgrade bitrate on slow initial load ampproject/amphtml#29501
• Optimize media play/pause operations on page navigation ampproject/amphtml#29508

360

• Feature discovery UI ampproject/amphtml#29591

Accessibility

• Talkback: provide a way to navigate to the next story page ampproject/amphtml#29974
• Make education screens buttons focusable for screen readers ampproject/amphtml#30021

cc @ampproject/wg-stories

What was accomplished

• UI Animations for quizzes/polls highlight on page navigation
• Update polls/quizzes API endpoints (base64 encode URL, use component ID over page ID, use :vote method on POST request)
• Category results page for multi-polls story
• Fixing audio state propagation from story to story in a Player
• Ability to navigate back using TalkBack

What's next

• Percentage results page for multi-quizzes story
• Moving interactive components to their own extension
• Interactive components validation
• Prompt gyroscope data access on iOS for amp-story-360
• Player entry point: singleton preview
• Player entry point: circular wrapping
• Player API: proxy to getDocumentState/setDocumentState API
• Restart active page advancement when swiping back to a Story (#28927)
• Fix joint latency video metrics (#29105)

What was accomplished

• Viewer
• Show(), go(), play/pause(), mute/unmute(), add() callbacks
• Exposed a navigation event
• Bug fixes
• Adding visual tests
• New github dashboard for tracking player-related tasks
• "Interactions" (formerly quizzes & polls)
• Results page implementation
• Demos and documentation of API
• Emoji burst animation
• Videos
• Two fixes for videos on first story page, and simplifying video playback code to reduce surface for bugs
• Custom adaptive bitrate implementation MVP
• Other
• 360 images launch with programmatic animations

What's next

• Viewer
• Preview mode for amp-story-player
• Starting implementation work on entry points
• Wrap to first story after finishing last one
• Merging amp-story-player AMP extension
• "Interactions" (formerly quizzes & polls
• Additional demos and documentation
• Emoji validation for emoji confetti
• Other
• 360 component to support video and gyroscope
• Animation preset enhancements

What was accomplished

• Started work on results-page components and multi-option polls
• Interactive poll animations (PR pending) https://github.com/ampproject/amphtml/pull/28931
• Fixit week: 25 bugs closed
• Accessibility fixes (https://github.com/ampproject/amphtml/pull/28860, https://github.com/ampproject/amphtml/pull/28780, https://github.com/ampproject/amphtml/issues/28408, https://github.com/ampproject/amphtml/issues/28294)
• complete docs regarding analytics in STAMP
• audio bug fixes
• increased tap target for swipe up
• tooltip dark-theme
• fix sandbox flag bug in player
• Fixed bugs related to video playback and media pool (on story replay)
• 360 videos and images implementation ongoing, with two projections
• Removed amp-story v0.1 (~2 years after deprecation 😅 )

What's next

• Planning 360 media component
• Figure out solutions to improve the audio UX
• Ongoing video performance work (hoping to get bitrate selection prototypes)
• implement show() callback in player
• expose swipe down to close handlers for players
• Starting to design/implement UI primitives / API methods for the story player
• Demos, documentation, and tooling for fixed aspect ratio grid layers

What was accomplished

• a11y bugs related to TalkBack
• Animations for amp-story-reaction
• Gyroscope experimentation
• Binary polls
• Launched API for programmatic control of the amp-story-player
• Fixed audio bugs
• Support remote attachments in Safari in the amp-story-player

What's next

• Continue launching APIs for the amp-story-player
• Continue work on binary poll
• Documentation pass on analytics

What was accomplished

• amp-story-animation launched
• Video performance bug fixes
• amp-story-reaction refactoring in preparation for new components (quizzes, polls) and finalizing API.
• Animation investigation for amp-story-reaction
• Refactoring of LocalizationService
• Ability to override story language via an attribute at the player level (wip).
• amp-story-player
• Load stories inside the player from the AMP cache of the publisher's choice. This is specified as an amp-cache attribute in the player tag. (e.g. amp-cache="cdn.ampproject.org")
• Progress on programmatic API hooks for publishers to use (onReady, loadStory, etc..)
• Scoping work for entry points to the player (upcoming interns project).

What's next

• Implementation of animations for amp-story-reaction.
• Launch API for programmatic control of the amp-story-player.
• Working through embedded components

What was accomplished

• Work to support <amp-animation> support within <amp-story>
• Prototype of polls in stories
• Work to support player
• Manual QA test cases to improve reliability
• Fix for bug where videos don't fall back to other sources if the first source failed to decode

What's next

• Work to fix race conditions that prevent video playback
• Expose JS APIs to programmatically control player
• Start work to productionize polls in stories

What was accomplished

• Last launch-blocking tweaks for remote URLs in page attachments
• Bugfixes for story education, auto-advance
• Update amp-geo documentation to mark as usable within stories
• Allow single-tap links in <amp-story-grid-layer> if they are within the bottom-most 20% of the viewport (with publisher opt-in)

What's next

• Validation and documentation for remote URLs in page attachments
• Validation and documentation for single-tap links in <amp-story-grid-layer>
• Allow loading stories in the player from the cache
• JS APIs for open source web player
• Adding play/pause controls to the system layer on desktop
• Exploratory work on quiz improvements

What was accomplished

• Fixes for auto-advancing based on audio
• Pull request out for remote page attachments
• Story education mostly complete
• Fixes for style isolation

What's next

• Moving amp-story-player to a custom element
• Allow loading stories from the cache in the player
• Design of player JS API
• Continuing video performance design

What was accomplished

• Support swiping in amp-story-player
• Prototypes of loading remote URLs on swipe up
• Started work on story education

What's next

• Loading stories from the cache in amp-story-player
• Productionize loading remote URLs on swipe up
• Viewer messaging for story education
• Spec out auto-advancing previews

What was accomplished

• Filed intent-to-deprecate: amp-story-bookend
• Filed intent-to-deprecate: amp-sidebar within amp-story
• Player
• Rolled out to production
• Documentation launched
• Navigation and tap-to-next story are in beta
• Quizzes
  • Options to customize quizzes, including theme, chip corner, chip style, accent color, prompt and option text color
• Fix for --story-page-vh and --story-page-vw being incorrect sometimes on desktop

Lessons learned

• It's not always clear which features should exist at the format level and which should exist at the player level

What's next

• Player
  • Swipe-to-next story
  • Sandboxing of iframes
• Story format onboarding and user education
• Kickstarting discussions around remote URLs in page attachments
• Examples for workarounds for sidebars/bookends

What was accomplished

• Viewer (amp-story-player)
• Renamed to public-facing name amp-story-player
• Initial styling for viewer before JS is loaded
• Quiz
• Displaying percentages for options
• Animations for bar filling
• Video
• Investigated performance of video formats: MP4, WEBM (VP9)
• Investigated bitrates to use
• Prototyped using navigator.connection.downlink to determine throughput
• Other
• Removed 1px border that sometimes showed up on 3-panel desktop experience
• Corrected initial position for inactive pages on 3-panel desktop experience to improve animation

Lessons learned

• Test in Safari!

What's next

• Viewer (amp-story-player)
• Launch of single-story experience
• Developer documentation and usage examples
• Quiz
• RTL for percentage animations
• Resolve Safari bug where entrance animation for options is not triggered
• Internationalization of (a), (b), (c), and (d) options
• Accessibility review (e.g. roles on interactive options)
• Documentation of next steps for validation
• Video
• Create prototype to test on different phones