Exclude the attachment media from the page media playback. (#20264)

* Exclude the attachment media from the page media playback. * Fixing unit tests.
ampproject · Jan 11, 2019 · 25a3312 · 25a3312
1 parent 3d83bb5
commit 25a3312
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -71,14 +71,20 @@ import {upgradeBackgroundAudio} from './audio';
 const PAGE_LOADED_CLASS_NAME = 'i-amphtml-story-page-loaded';
 
 /**
- * Selectors for media elements
+ * Selectors for media elements.
+ * Only get the page media: direct children of amp-story-page (ie:
+ * background-audio), or descendant of amp-story-grid-layer. That excludes media
+ * contained in amp-story-page-attachment.
  * @enum {string}
  */
 const Selectors = {
   // which media to wait for on page layout.
-  ALL_AMP_MEDIA: 'amp-audio, amp-video, amp-img, amp-anim',
-  ALL_MEDIA: 'audio, video',
-  ALL_VIDEO: 'video',
+  ALL_AMP_MEDIA: 'amp-story-grid-layer amp-audio, ' +
+      'amp-story-grid-layer amp-video, amp-story-grid-layer amp-img, ' +
+      'amp-story-grid-layer amp-anim',
+  ALL_MEDIA: 'amp-story-page > audio, amp-story-grid-layer audio, ' +
+      'amp-story-grid-layer video',
+  ALL_VIDEO: 'amp-story-grid-layer video',
 };
 
 /** @private @const {string} */

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
@@ -24,6 +24,7 @@ import {registerServiceBuilder} from '../../../../src/service';
 describes.realWin('amp-story-page', {amp: true}, env => {
   let win;
   let element;
+  let gridLayerEl;
   let page;
 
   beforeEach(() => {
@@ -44,7 +45,9 @@ describes.realWin('amp-story-page', {amp: true}, env => {
     story.getImpl = () => Promise.resolve(mediaPoolRoot);
 
     element = win.document.createElement('amp-story-page');
+    gridLayerEl = win.document.createElement('amp-story-grid-layer');
     element.getAmpDoc = () => new AmpDocSingle(win);
+    element.appendChild(gridLayerEl);
     story.appendChild(element);
     win.document.body.appendChild(story);
 
@@ -117,7 +120,7 @@ describes.realWin('amp-story-page', {amp: true}, env => {
   it('should perform media operations when state becomes active', done => {
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp3');
-    element.appendChild(videoEl);
+    gridLayerEl.appendChild(videoEl);
 
     let mediaPoolMock;
 
@@ -184,7 +187,7 @@ describes.realWin('amp-story-page', {amp: true}, env => {
   it('should pause/rewind media when state becomes not active', done => {
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp3');
-    element.appendChild(videoEl);
+    gridLayerEl.appendChild(videoEl);
 
     let mediaPoolMock;
 
@@ -224,7 +227,7 @@ describes.realWin('amp-story-page', {amp: true}, env => {
   it('should pause media when state becomes paused', done => {
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp3');
-    element.appendChild(videoEl);
+    gridLayerEl.appendChild(videoEl);
 
     let mediaPoolMock;