Register background-audio. (#27782)

ampproject · Apr 16, 2020 · d5f7813 · d5f7813
1 parent b28472e
commit d5f7813
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -92,7 +92,7 @@ const PAGE_LOADED_CLASS_NAME = 'i-amphtml-story-page-loaded';
  * contained in amp-story-page-attachment.
  * @enum {string}
  */
-const Selectors = {
+export const Selectors = {
   // which media to wait for on page layout.
   ALL_AMP_MEDIA:
     'amp-story-grid-layer amp-audio, ' +
@@ -521,7 +521,12 @@ export class AmpStoryPage extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    upgradeBackgroundAudio(this.element);
+    const audioEl = upgradeBackgroundAudio(this.element);
+    if (audioEl) {
+      this.mediaPoolPromise_.then((mediaPool) => {
+        this.registerMedia_(mediaPool, dev().assertElement(audioEl));
+      });
+    }
     this.muteAllMedia();
     this.getViewport().onResize(
       debounce(this.win, () => this.onResize_(), RESIZE_TIMEOUT_MS)

diff --git a/extensions/amp-story/1.0/test/test-amp-story-page.js b/extensions/amp-story/1.0/test/test-amp-story-page.js
@@ -15,11 +15,14 @@
  */
 
 import {AmpDocSingle} from '../../../../src/service/ampdoc-impl';
-import {AmpStoryPage, PageState} from '../amp-story-page';
+import {AmpStoryPage, PageState, Selectors} from '../amp-story-page';
 import {AmpStoryStoreService} from '../amp-story-store-service';
 import {LocalizationService} from '../../../../src/service/localization';
 import {MediaType} from '../media-pool';
-import {createElementWithAttributes} from '../../../../src/dom';
+import {
+  createElementWithAttributes,
+  scopedQuerySelectorAll,
+} from '../../../../src/dom';
 import {installFriendlyIframeEmbed} from '../../../../src/friendly-iframe-embed';
 import {registerServiceBuilder} from '../../../../src/service';
 
@@ -236,6 +239,34 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     });
   });
 
+  it('should build the background audio on layoutCallback', async () => {
+    env.sandbox
+      .stub(page.resources_, 'getResourceForElement')
+      .returns({isDisplayed: () => true});
+
+    element.setAttribute('background-audio', 'foo.mp3');
+    page.buildCallback();
+    await page.layoutCallback();
+    expect(
+      scopedQuerySelectorAll(element, Selectors.ALL_MEDIA)[0].tagName
+    ).to.equal('AUDIO');
+  });
+
+  it('should register the background audio on layoutCallback', async () => {
+    env.sandbox
+      .stub(page.resources_, 'getResourceForElement')
+      .returns({isDisplayed: () => true});
+
+    element.setAttribute('background-audio', 'foo.mp3');
+    page.buildCallback();
+    const mediaPool = await page.mediaPoolPromise_;
+    const mediaPoolRegister = env.sandbox.stub(mediaPool, 'register');
+    await page.layoutCallback();
+
+    const audioEl = scopedQuerySelectorAll(element, Selectors.ALL_MEDIA)[0];
+    expect(mediaPoolRegister).to.have.been.calledOnceWithExactly(audioEl);
+  });
+
   it('should stop the advancement when state becomes not active', async () => {
     page.buildCallback();
     const advancementStopStub = env.sandbox.stub(page.advancement_, 'stop');