Editor: Add support for `amp-story-audio-sticker`

[AnuragVasanwala]

Summary

This PR adds support for amp-story-audio-sticker.

User-facing changes

https://github.com/GoogleForCreators/web-stories-wp/assets/75766877/d422dc47-b1b7-4d89-b72e-9fa65326f532

https://github.com/GoogleForCreators/web-stories-wp/assets/75766877/86945bcb-6f0b-4bf1-8d94-f18244dca65b

Testing Instructions

This PR can be tested by following these steps:

1. Press the Insert Audio Sticker quick action button. Please note that this button is only visible if the story has video with audio/background audio.
2. The headphone-cat variant of the sticker is added by default. To change this and other options, select the sticker element and view the style panel.

Reviews

Does this PR have a security-related impact?

Yes.

Does this PR change what data or activity we track or use?

No.

Does this PR have a legal-related impact?

No.

Checklist

• [x] This PR addresses an existing issue and I have linked this PR to it
• [x] I have tested this code to the best of my abilities
• [x] I have verified accessibility to the best of my abilities (docs)
• [x] I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
• [x] This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
• [x] I have added documentation where necessary
• [x] I have added a matching Type: XYZ label to the PR

---

Fixes #13440

[swissspidy]

Whoop whoop, this is really exciting! 🎉 🚀

I'll check it out a bit more closely later.

---

Possible Bugs in amp-story-audio-sticker:

1. Clicking/tapping audio sticker doesn't seem to be working in WebStories. Also tried in standalone AMP page and it is > not working. Although, sticker gets toggled when toggling audio from the story (top right button).
2. On setting the sticker style attribute to outline, the style does not get applied to the sticker. Also tried in standalone AMP page.

This doesn't sound good 👀 So what you are saying is that the audio sticker is actually broken right now? Do you have a link to reproduce or something?

If it's broken, we should pause development on this and ensure it first gets fixed upstream in the AMP repo.

Right click menu for the sticker element.

I can't think of any good right click menu items for this element right now. Let's not add any for now. Products don't have them either.

Style panels other than the default one for the audio sticker element.

What panels are you thinking of adding? The current ones seem to cover all features, no?

Quick actions that appear on selecting an audio sticker element.

Hmm I can't think of any good quick actions for this element. Let's not add any for now. Products don't have quick actions either.

[AnuragVasanwala]

@swissspidy Should we restrict copy pasting of the Audio Sticker? Typically, only one sticker per page is required!

[swissspidy]

Let's not make it too complicated for now, so no restrictions. I doubt anyone will put 10 audio stickers on the same page. Plus, there are so many places where we'd have to do this that it's best done in a separate PR anyway.

[swissspidy]

https://github.com/ampproject/amphtml/pull/39727 just got merged 🎉 Once that lands in production in a couple of weeks, we can then submit a PR against https://github.com/ampproject/amp-wp/ to update the PHP sanitizers.

[AnuragVasanwala]

@swissspidy Need help writing unit-test!

While writing unit-test for the amp-story-audio-sticker, I went through other elements test case. It seems like more detail will be needed for following function (that is found in other element's test case, as well):

https://github.com/GoogleForCreators/web-stories-wp/blob/8e349ab044ffb21498a4f0c0e008feecfa4c91d9/packages/story-editor/src/components/panels/design/link/test/link.js#L40-L99 Would you please provide some context on this arrange function?

[swissspidy]

In this particular example, arrange is just a small wrapper around React Testing Library's render() function for rendering the LinkPanel component with the necessary React context providers around it. So LinkPanel uses useStory() and useCanvas() etc., so it's important that in tests the component is wrapped in StoryContext and CanvasContext. In the documentation, this is described as custom renders.

configValue etc. are just the bare minimum parameters for these context providers to work in tests.

From what I can see at first glance, the new audio sticker panel doesn't use useStory() or so, so you might not even need a custom renderer and can just use RTL's render() function directly. But haven't looked closely.

[Swanand01]

Hi @swissspidy !

I needed some help with writing integration tests for the amp-story-audio-sticker element.

How should I go about writing the test for this scenario?

When the user clicks Tape Player in the Type style panel, the element in the Editor should render with the correct image.

https://github.com/GoogleForCreators/web-stories-wp/blob/b439bfbb751227702e31daa855d7530a3945cd5b/packages/element-library/src/audioSticker/display.js#L37-L54

https://github.com/GoogleForCreators/web-stories-wp/blob/b439bfbb751227702e31daa855d7530a3945cd5b/packages/element-library/src/audioSticker/constants.js#L54-L59

[swissspidy]

I recommend checking out existing Karma tests for the panels and elements, that's really the best way to find the way around writing new tests.

It sounds like you already have a test where you add some background audio & then add the audio sticker via quick actions? So the question is just about the assertion part after updating the sticker type.

If so, the easiest way to verify the element got updated is to get the currently selected element on the canvas and check its properties:

const selectedElement = await fixture.renderHook(() =>
    useStory(({ state }) => state.currentPage.elements[1])
  );
expect (selectedElement.style).toBe(...)

By the way, you'll probably want to add a new container fixture to packages/story-editor/src/karma/fixture/containers/designPanel to make it easier to interact with the new audioSticker panel. Then, in the test you could choose the sticker types via shortcuts such as fixture.editor.sidebar.designPanel.audioSticker.stickerTypes

[swissspidy]

Apologies for the merge conflicts here! Hopefully should be easy to resolve

[AnuragVasanwala]

Apologies for the merge conflicts here! Hopefully should be easy to resolve

No worries at all! Will fix them ✅

[Swanand01]

Hi @swissspidy,

We found that this karma test is failing.

https://github.com/GoogleForCreators/web-stories-wp/blob/48ca21d1d1969217489d7c84a4618731393ebf6d/packages/story-editor/src/components/canvas/karma/quickActions.karma.js#L126-L138

Adding a small delay of 100ms after the click() call seems to fix this.

it(`clicking the \`${ACTIONS.INSERT_TEXT.text}\` button should select the background, open the text tab in the library and insert the default text`, async () => {
      // click quick menu button
      await fixture.events.click(
        fixture.editor.canvas.quickActionMenu.insertTextButton
      );
+      await new Promise((r) => setTimeout(r, 100));
      expect(fixture.editor.canvas.framesLayer.frames.length).toBe(2);
      expect(
        fixture.editor.sidebar.designPanel.selectionSection
      ).not.toBeNull();
      expect(document.activeElement).toEqual(
        fixture.editor.canvas.framesLayer.frames[1].node
      );
});

Any suggestions?

[swissspidy]

As a rule of thumb, we should never add timeouts or delays to tests. It's bad practice. We have to many of those already in our codebase, we shouldn't add more :)

It's better to use utilities like waitFor and similar.

[github-actions[bot]]

Size Change: +3.17 kB (+0.11%)

Total Size: 2.77 MB

Filename	Size	Change
assets/js/web-stories-editor.js	1.46 MB	+3.17 kB (+0.22%)

ℹ️ View Unchanged

Filename	Size
assets/css/web-stories-block-rtl.css	4.65 kB
assets/css/web-stories-block.css	4.68 kB
assets/css/web-stories-carousel-rtl.css	711 B
assets/css/web-stories-carousel.css	712 B
assets/css/web-stories-dashboard-rtl.css	656 B
assets/css/web-stories-dashboard.css	658 B
assets/css/web-stories-editor-rtl.css	769 B
assets/css/web-stories-editor.css	771 B
assets/css/web-stories-embed-rtl.css	664 B
assets/css/web-stories-embed.css	667 B
assets/css/web-stories-list-styles-rtl.css	2.43 kB
assets/css/web-stories-list-styles.css	2.46 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css	102 B
assets/css/web-stories-theme-style-twentyeleven.css	102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css	251 B
assets/css/web-stories-theme-style-twentyfifteen.css	251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css	287 B
assets/css/web-stories-theme-style-twentyfourteen.css	287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css	310 B
assets/css/web-stories-theme-style-twentyseventeen.css	310 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css	239 B
assets/css/web-stories-theme-style-twentysixteen.css	239 B
assets/css/web-stories-theme-style-twentyten-rtl.css	143 B
assets/css/web-stories-theme-style-twentyten.css	143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css	265 B
assets/css/web-stories-theme-style-twentytwelve.css	265 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css	86 B
assets/css/web-stories-theme-style-twentytwenty.css	86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css	326 B
assets/css/web-stories-theme-style-twentytwentyone.css	326 B
assets/css/web-stories-widget-rtl.css	456 B
assets/css/web-stories-widget.css	456 B
assets/js/3768.js	13.9 kB
assets/js/3933.js	27.2 kB
assets/js/4032.js	4.74 kB
assets/js/4810.js	218 kB
assets/js/5380.js	8.12 kB
assets/js/7830.js	38.1 kB
assets/js/9391.js	93 B
assets/js/945.js	49.1 kB
assets/js/9947.js	97.3 kB
assets/js/chunk-colorthief.js	2.62 kB
assets/js/chunk-ffmpeg.js	5.98 kB
assets/js/chunk-html-to-image.js	4.51 kB
assets/js/chunk-media-gallery.js	6.11 kB
assets/js/chunk-mediainfo.js	94 B
assets/js/chunk-opentype.js	96 B
assets/js/chunk-react-calendar.js	10.8 kB
assets/js/chunk-react-color.js	25.7 kB
assets/js/chunk-selfie-segmentation.js	16.3 kB
assets/js/chunk-web-stories-template-0-metaData.js	546 B
assets/js/chunk-web-stories-template-0.js	11 kB
assets/js/chunk-web-stories-template-1-metaData.js	538 B
assets/js/chunk-web-stories-template-1.js	9.27 kB
assets/js/chunk-web-stories-template-10-metaData.js	532 B
assets/js/chunk-web-stories-template-10.js	7.23 kB
assets/js/chunk-web-stories-template-11-metaData.js	539 B
assets/js/chunk-web-stories-template-11.js	8.87 kB
assets/js/chunk-web-stories-template-12-metaData.js	496 B
assets/js/chunk-web-stories-template-12.js	8.67 kB
assets/js/chunk-web-stories-template-13-metaData.js	524 B
assets/js/chunk-web-stories-template-13.js	6.9 kB
assets/js/chunk-web-stories-template-14-metaData.js	582 B
assets/js/chunk-web-stories-template-14.js	7.26 kB
assets/js/chunk-web-stories-template-15-metaData.js	545 B
assets/js/chunk-web-stories-template-15.js	8.78 kB
assets/js/chunk-web-stories-template-16-metaData.js	588 B
assets/js/chunk-web-stories-template-16.js	10.5 kB
assets/js/chunk-web-stories-template-17-metaData.js	540 B
assets/js/chunk-web-stories-template-17.js	9.05 kB
assets/js/chunk-web-stories-template-18-metaData.js	586 B
assets/js/chunk-web-stories-template-18.js	9.31 kB
assets/js/chunk-web-stories-template-19-metaData.js	499 B
assets/js/chunk-web-stories-template-19.js	9.17 kB
assets/js/chunk-web-stories-template-2-metaData.js	587 B
assets/js/chunk-web-stories-template-2.js	9.02 kB
assets/js/chunk-web-stories-template-20-metaData.js	547 B
assets/js/chunk-web-stories-template-20.js	8.72 kB
assets/js/chunk-web-stories-template-21-metaData.js	536 B
assets/js/chunk-web-stories-template-21.js	9.49 kB
assets/js/chunk-web-stories-template-22-metaData.js	526 B
assets/js/chunk-web-stories-template-22.js	7.44 kB
assets/js/chunk-web-stories-template-23-metaData.js	605 B
assets/js/chunk-web-stories-template-23.js	6.95 kB
assets/js/chunk-web-stories-template-24-metaData.js	517 B
assets/js/chunk-web-stories-template-24.js	11.2 kB
assets/js/chunk-web-stories-template-25-metaData.js	544 B
assets/js/chunk-web-stories-template-25.js	6.8 kB
assets/js/chunk-web-stories-template-26-metaData.js	600 B
assets/js/chunk-web-stories-template-26.js	6.97 kB
assets/js/chunk-web-stories-template-27-metaData.js	543 B
assets/js/chunk-web-stories-template-27.js	7.66 kB
assets/js/chunk-web-stories-template-28-metaData.js	532 B
assets/js/chunk-web-stories-template-28.js	8.76 kB
assets/js/chunk-web-stories-template-29-metaData.js	563 B
assets/js/chunk-web-stories-template-29.js	8.94 kB
assets/js/chunk-web-stories-template-3-metaData.js	537 B
assets/js/chunk-web-stories-template-3.js	8.23 kB
assets/js/chunk-web-stories-template-30-metaData.js	575 B
assets/js/chunk-web-stories-template-30.js	7.43 kB
assets/js/chunk-web-stories-template-31-metaData.js	504 B
assets/js/chunk-web-stories-template-31.js	9.93 kB
assets/js/chunk-web-stories-template-32-metaData.js	551 B
assets/js/chunk-web-stories-template-32.js	12.3 kB
assets/js/chunk-web-stories-template-33-metaData.js	492 B
assets/js/chunk-web-stories-template-33.js	8.9 kB
assets/js/chunk-web-stories-template-34-metaData.js	570 B
assets/js/chunk-web-stories-template-34.js	7.43 kB
assets/js/chunk-web-stories-template-35-metaData.js	565 B
assets/js/chunk-web-stories-template-35.js	8.7 kB
assets/js/chunk-web-stories-template-36-metaData.js	576 B
assets/js/chunk-web-stories-template-36.js	12.1 kB
assets/js/chunk-web-stories-template-37-metaData.js	529 B
assets/js/chunk-web-stories-template-37.js	6.13 kB
assets/js/chunk-web-stories-template-38-metaData.js	572 B
assets/js/chunk-web-stories-template-38.js	7.63 kB
assets/js/chunk-web-stories-template-39-metaData.js	588 B
assets/js/chunk-web-stories-template-39.js	7.79 kB
assets/js/chunk-web-stories-template-4-metaData.js	564 B
assets/js/chunk-web-stories-template-4.js	11.8 kB
assets/js/chunk-web-stories-template-40-metaData.js	557 B
assets/js/chunk-web-stories-template-40.js	9.85 kB
assets/js/chunk-web-stories-template-41-metaData.js	572 B
assets/js/chunk-web-stories-template-41.js	7.45 kB
assets/js/chunk-web-stories-template-42-metaData.js	522 B
assets/js/chunk-web-stories-template-42.js	6.82 kB
assets/js/chunk-web-stories-template-43-metaData.js	558 B
assets/js/chunk-web-stories-template-43.js	8.49 kB
assets/js/chunk-web-stories-template-44-metaData.js	583 B
assets/js/chunk-web-stories-template-44.js	10.8 kB
assets/js/chunk-web-stories-template-45-metaData.js	563 B
assets/js/chunk-web-stories-template-45.js	7.15 kB
assets/js/chunk-web-stories-template-46-metaData.js	531 B
assets/js/chunk-web-stories-template-46.js	5.1 kB
assets/js/chunk-web-stories-template-47-metaData.js	592 B
assets/js/chunk-web-stories-template-47.js	8.97 kB
assets/js/chunk-web-stories-template-48-metaData.js	555 B
assets/js/chunk-web-stories-template-48.js	8.78 kB
assets/js/chunk-web-stories-template-49-metaData.js	517 B
assets/js/chunk-web-stories-template-49.js	8.58 kB
assets/js/chunk-web-stories-template-5-metaData.js	555 B
assets/js/chunk-web-stories-template-5.js	9.54 kB
assets/js/chunk-web-stories-template-50-metaData.js	503 B
assets/js/chunk-web-stories-template-50.js	8.93 kB
assets/js/chunk-web-stories-template-51-metaData.js	527 B
assets/js/chunk-web-stories-template-51.js	10.1 kB
assets/js/chunk-web-stories-template-52-metaData.js	603 B
assets/js/chunk-web-stories-template-52.js	9.97 kB
assets/js/chunk-web-stories-template-53-metaData.js	552 B
assets/js/chunk-web-stories-template-53.js	5.65 kB
assets/js/chunk-web-stories-template-54-metaData.js	547 B
assets/js/chunk-web-stories-template-54.js	7.46 kB
assets/js/chunk-web-stories-template-55-metaData.js	574 B
assets/js/chunk-web-stories-template-55.js	6.95 kB
assets/js/chunk-web-stories-template-56-metaData.js	542 B
assets/js/chunk-web-stories-template-56.js	9.54 kB
assets/js/chunk-web-stories-template-57-metaData.js	527 B
assets/js/chunk-web-stories-template-57.js	14.5 kB
assets/js/chunk-web-stories-template-58-metaData.js	552 B
assets/js/chunk-web-stories-template-58.js	5.43 kB
assets/js/chunk-web-stories-template-59-metaData.js	589 B
assets/js/chunk-web-stories-template-59.js	8.73 kB
assets/js/chunk-web-stories-template-6-metaData.js	570 B
assets/js/chunk-web-stories-template-6.js	6.93 kB
assets/js/chunk-web-stories-template-60-metaData.js	511 B
assets/js/chunk-web-stories-template-60.js	8.95 kB
assets/js/chunk-web-stories-template-7-metaData.js	569 B
assets/js/chunk-web-stories-template-7.js	7.15 kB
assets/js/chunk-web-stories-template-8-metaData.js	568 B
assets/js/chunk-web-stories-template-8.js	8.34 kB
assets/js/chunk-web-stories-template-9-metaData.js	579 B
assets/js/chunk-web-stories-template-9.js	8.24 kB
assets/js/chunk-web-stories-templates.js	581 B
assets/js/chunk-web-stories-textset-0.js	4.59 kB
assets/js/chunk-web-stories-textset-1.js	5.61 kB
assets/js/chunk-web-stories-textset-2.js	6.83 kB
assets/js/chunk-web-stories-textset-3.js	12.8 kB
assets/js/chunk-web-stories-textset-4.js	3.91 kB
assets/js/chunk-web-stories-textset-5.js	5.27 kB
assets/js/chunk-web-stories-textset-6.js	4.99 kB
assets/js/chunk-web-stories-textset-7.js	8.9 kB
assets/js/generateBlurhash.worker.worker.js	1.1 kB
assets/js/web-stories-activation-notice.js	22.5 kB
assets/js/web-stories-block.js	27.5 kB
assets/js/web-stories-carousel.js	9.88 kB
assets/js/web-stories-dashboard.js	63.2 kB
assets/js/web-stories-embed.js	20 B
assets/js/web-stories-lightbox.js	7.31 kB
assets/js/web-stories-tinymce-button.js	9.72 kB
assets/js/web-stories-widget.js	553 B

_{compressed-size-action}

[googleforcreators-bot]

Plugin builds for 50327ae67049ef9f2cb64945a85a6e6b7a6863a7 are ready :bellhop_bell:!

• Download development build
• Download production build

[swissspidy]

There are some TypeScript errors. Do you need help with those?

[Swanand01]

There are some TypeScript errors. Do you need help with those?

Yes, to be honest, I'm at a loss as to why these errors are appearing 😅

[swissspidy]

Fixed them for you.

When importing files like .png in a script file (thanks to Webpack), you need to tell TypeScript about their type. Also, when importing files in another TS file, they both need to be included by the tsconfig.json. So it's important to add all the necessary files there. Eventually hopefully #13503 converts the whole element-library package to TS, then all files will be included. The last issue was a missing type in getUsedAmpExtensions where you could just look at how the other extensions were defined and properly define the AmpExtension type.

[swissspidy]

@Swanand01 can‘t we do it without sleep?

[Swanand01]

@Swanand01 can‘t we do it without sleep?

I tried waitFor, but it did not work. This is probably happening because it takes some time for the active element to be set to the text box, after the insert text button is clicked.

[swissspidy]

@Swanand01 can‘t we do it without sleep?

I tried waitFor, but it did not work. This is probably happening because it takes some time for the active element to be set to the text box, after the insert text button is clicked.

There's rarely a case where waitFor doesn't work. Worst case waitFor also supports a timeout (which is quite high though, 1000ms). I doubt this is such a case. But I also don't want to block this PR. Let's focus on audio stickers for now..