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

swissspidy commented 1 year ago

Feature Description

This new amp-story-audio-sticker extension has been added recently, see https://github.com/ampproject/amphtml/pull/39184

https://github.com/GoogleForCreators/web-stories-wp/assets/841956/85ab1728-3c76-4d20-9106-d6eaa7da54ac

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:

swissspidy commented 12 months ago

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 commented 10 months ago

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
- 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
- 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 commented 9 months ago

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)
      )
  );

GoogleForCreators / web-stories-wp