Add support for <amp-story-audio-sticker>

[swissspidy]

Feature Description

This new amp-story-audio-sticker extension has been added recently, see ampproject/amphtml#39184

245924556-e953c54a-0a09-4f15-8134-be6a0ac758ab.mp4

No limits in how many stickers can be added to a story.

Color of the sticker drop shadow and outline can be customized.

Stickers can be added in two different sizes:

• “large”: 180 x 180 px
• “small”: 120 x 120 px

The following stickers exist:

Accepted Value	Pre-tap Image	Post-tap Image
“headphone-cat”
“tape-player”
“loud-speaker”
“audio-cloud”

Alternatives Considered

Additional Context

Currently blocked by:

• Update validator spec for <amp-story-audio-sticker> ampproject/amp-toolbox-php#542
• Add amp-story-audio-sticker to spec ampproject/amp-wp#7603

[swissspidy]

From chatting with @AnuragVasanwala:

• 3p media tab probably not a good location, as that's not where a user would expect to find the audio stickers
• stickers/shapes tab might be a more suitable place
• how can we make users aware of this new feature?

[swissspidy]

Some thoughts on implementation details:

packages/element-library

• Register a new audio-sticker element, which will be responsible for displaying the sticker in the editor and generating the actual <amp-story-audio-sticker> markup for viewing the story
• Supports the following attributes:
  • size: 'small', 'large' (small is default)
  • sticker: 'headphone-cat','tape-player','loud-speaker','audio-cloud' (headphone-cat is default)
  • style: 'outline','dropshadow', (default is none)
• Needs unit tests, including for AMP validation to ensure the output generated by output.js is valid AMP
• Look at product element type for inspiration, as it's the most recent one.
• Attributes in constants.js are especially important, need to see which ones make sense for this element type.
• Might be a good opportunity to first convert the element-library package to TypeScript
  • Convert element-library to TypeScript #13503

packages/output

• Add some tests with audio-sticker elements to verify that the sticker is properly added to story output and markup is valid AMP
• Might be a good opportunity to convert the output package to TypeScript
  • TypeScript: Convert output package #13504

KSES.php

• Add the new elements to the allowlist to ensure these stickers won't be stripped when saving a story as an author or contributor user
  • Can be verified with e2e tests later
• See https://github.com/ampproject/amp-wp/pull/7603/files for the structure
• Update PHPUnit tests accordingly

In the editor UI

• Create packages/story-editor/src/components/panels/design/audio-sticker to hold the panel for the audio sticker element
  • Allows customizing the sticker, size, and outline
  • sticker: since we have 4 different sticker types, maybe we could just show them side by side and the user can select one? Similar to how filters are presented:
    
  • size: Maybe a <Switch> component to choose between small and large?
  • style maybe similar appearance as for the sticker types as there are effectively 3 different styles, and it would be nice to see a preview of them right in the panel.
• In packages/story-editor/src/app/quickActions, add a new quick action for quickly adding an audio sticker to the page.
  • Maybe https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aar_stickers%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024 or https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Asound_detection_loud_sound%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024 is a good icon for this. We can add the SVG to the design system.
  • Only show if story has either background audio somewhere or at least 1 non-muted video
  

[swissspidy]

From our discussion just now:

• Starting with just the 4 default stickers. Maybe in the future provide option to upload a custom image or provide a richer library of default stickers
• Let's test whether the stickers can be animated
• In the future we can add a checklist item for non-ideal placement of the sticker (e.g. when it is on a page after a page with audio, or when there are too many stickers on a page / in a story.
• Not limiting the number of stickers for now
• Let's put all the panels into the sidebar for now (as per above) and then later look at what to put in the floating menu as well.

To detect whether a story has any audio (untested but should work):

  const hasAudioAnywhere = useStory(
    ({ state }) =>
      state.story.backgroundAudio ||
      state.pages.some(
        (page) =>
          page.backgroundAudio ||
          page.elements
            .filter(elementIs.video)
            .some((element) => !element.resource.isMuted)
      )
  );