Fix unmuting through setDocumentState. (ampproject#29536)

Author: gmajoulet

extensions/amp-story/1.0/amp-story-page.js

@@ -495,6 +495,10 @@ export class AmpStoryPage extends AMP.BaseElement {
       this.pauseAllMedia_(true /** rewindToBeginning */);
     }
 
+    if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
+      this.muteAllMedia();
+    }
+
     if (this.animationManager_) {
       this.animationManager_.cancelAll();
     }
@@ -525,7 +529,12 @@ export class AmpStoryPage extends AMP.BaseElement {
         this.startMeasuringAllVideoPerformance_();
         this.preloadAllMedia_()
           .then(() => this.startListeningToVideoEvents_())
-          .then(() => this.playAllMedia_());
+          .then(() => {
+            this.playAllMedia_();
+            if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
+              this.unmuteAllMedia();
+            }
+          });
       });
       this.prefersReducedMotion_()
         ? this.maybeFinishAnimations_()

extensions/amp-story/1.0/amp-story.js

@@ -1546,11 +1546,6 @@ export class AmpStory extends AMP.BaseElement {
         if (!oldPage) {
           this.registerAndPreloadBackgroundAudio_();
         }
-
-        if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
-          oldPage && oldPage.muteAllMedia();
-          this.activePage_.unmuteAllMedia();
-        }
       },
       // Third and last step contains all the actions that can be delayed after
       // the navigation happened, like preloading the following pages, or

extensions/amp-story/1.0/test/test-amp-story-page.js

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import {Action, AmpStoryStoreService} from '../amp-story-store-service';
 import {AmpDocSingle} from '../../../../src/service/ampdoc-impl';
 import {AmpStoryPage, PageState, Selectors} from '../amp-story-page';
-import {AmpStoryStoreService} from '../amp-story-store-service';
 import {Deferred} from '../../../../src/utils/promise';
 import {LocalizationService} from '../../../../src/service/localization';
 import {MediaType} from '../media-pool';
@@ -34,6 +34,7 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   let element;
   let gridLayerEl;
   let page;
+  let storeService;
   let isPerformanceTrackingOn;
 
   const nextTick = () => new Promise((resolve) => win.setTimeout(resolve, 0));
@@ -55,7 +56,7 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
       .stub(Services, 'localizationForDoc')
       .returns(localizationService);
 
-    const storeService = new AmpStoryStoreService(win);
+    storeService = new AmpStoryStoreService(win);
     registerServiceBuilder(win, 'story-store', function () {
       return storeService;
     });
@@ -207,6 +208,34 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
       });
   });
 
+  it('should unmute audio when state becomes active', (done) => {
+    env.sandbox.stub(page, 'loadPromise').returns(Promise.resolve());
+
+    storeService.dispatch(Action.TOGGLE_MUTED, false);
+
+    const videoEl = win.document.createElement('video');
+    videoEl.setAttribute('src', 'https://example.com/video.mp3');
+    gridLayerEl.appendChild(videoEl);
+
+    let mediaPoolMock;
+
+    page.buildCallback();
+    page
+      .layoutCallback()
+      .then(() => page.mediaPoolPromise_)
+      .then((mediaPool) => {
+        mediaPoolMock = env.sandbox.mock(mediaPool);
+        mediaPoolMock.expects('unmute').once();
+
+        page.setState(PageState.PLAYING);
+
+        win.requestAnimationFrame(() => {
+          mediaPoolMock.verify();
+          done();
+        });
+      });
+  });
+
   it('should perform media operations on fie video when active', (done) => {
     const iframe = win.document.createElement('iframe');
     const fiePromise = installFriendlyIframeEmbed(iframe, gridLayerEl, {
@@ -394,6 +423,32 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
       });
   });
 
+  it('should mute audio when state becomes active', (done) => {
+    storeService.dispatch(Action.TOGGLE_MUTED, false);
+
+    const videoEl = win.document.createElement('video');
+    videoEl.setAttribute('src', 'https://example.com/video.mp3');
+    gridLayerEl.appendChild(videoEl);
+
+    let mediaPoolMock;
+
+    page.buildCallback();
+    page
+      .layoutCallback()
+      .then(() => page.mediaPoolPromise_)
+      .then((mediaPool) => {
+        mediaPoolMock = env.sandbox.mock(mediaPool);
+        mediaPoolMock.expects('mute').withExactArgs(videoEl).once();
+
+        page.setState(PageState.NOT_ACTIVE);
+
+        win.requestAnimationFrame(() => {
+          mediaPoolMock.verify();
+          done();
+        });
+      });
+  });
+
   it('should stop the advancement when state becomes paused', async () => {
     page.buildCallback();
     const advancementStopStub = env.sandbox.stub(page.advancement_, 'stop');

extensions/amp-story/1.0/test/test-amp-story.js

@@ -1030,30 +1030,6 @@ describes.realWin(
           expect(unmuteStub).not.to.have.been.called;
           expect(playStub).not.to.have.been.called;
         });
-
-        it('should mute the page and unmute the next page upon navigation', async () => {
-          await createStoryWithPages(4, [
-            'cover',
-            'page-1',
-            'page-2',
-            'page-3',
-          ]);
-
-          story.storeService_.dispatch(Action.TOGGLE_MUTED, false);
-
-          await story.layoutCallback();
-          const coverMuteStub = env.sandbox.stub(
-            story.getPageById('cover'),
-            'muteAllMedia'
-          );
-          const firstPageUnmuteStub = env.sandbox.stub(
-            story.getPageById('page-1'),
-            'unmuteAllMedia'
-          );
-          await story.switchTo_('page-1');
-          expect(coverMuteStub).to.have.been.calledOnce;
-          expect(firstPageUnmuteStub).to.have.been.calledOnce;
-        });
       });
 
       it('should remove the muted attribute on unmuted state change', async () => {