Override pause/resumeCallback for STAMP needs. (ampproject#25422)

Author: gmajoulet

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

@@ -393,13 +393,13 @@ export class AmpStoryPage extends AMP.BaseElement {
     switch (state) {
       case PageState.NOT_ACTIVE:
         this.element.removeAttribute('active');
-        this.pauseCallback();
+        this.pause_();
         this.state_ = state;
         break;
       case PageState.PLAYING:
         if (this.state_ === PageState.NOT_ACTIVE) {
           this.element.setAttribute('active', '');
-          this.resumeCallback();
+          this.resume_();
         }
 
         if (this.state_ === PageState.PAUSED) {
@@ -430,8 +430,10 @@ export class AmpStoryPage extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  pauseCallback() {
+  /**
+   * @private
+   */
+  pause_() {
     this.advancement_.stop();
 
     this.stopMeasuringVideoPerformance_();
@@ -458,8 +460,10 @@ export class AmpStoryPage extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  resumeCallback() {
+  /**
+   * @private
+   */
+  resume_() {
     this.registerAllMedia_();
 
     if (this.isActive()) {

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

@@ -457,16 +457,24 @@ export class AmpStory extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  pauseCallback() {
+  /**
+   * Pauses the whole story on viewer visibilityState updates, or tab visibility
+   * updates.
+   * @private
+   */
+  pause_() {
     this.pausedStateToRestore_ = !!this.storeService_.get(
       StateProperty.PAUSED_STATE
     );
     this.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
   }
 
-  /** @override */
-  resumeCallback() {
+  /**
+   * Resumes the whole story on viewer visibilityState updates, or tab
+   * visibility updates.
+   * @private
+   */
+  resume_() {
     this.storeService_.dispatch(
       Action.TOGGLE_PAUSED,
       this.pausedStateToRestore_
@@ -1790,7 +1798,7 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   onVisibilityChanged_() {
-    this.getAmpDoc().isVisible() ? this.resumeCallback() : this.pauseCallback();
+    this.getAmpDoc().isVisible() ? this.resume_() : this.pause_();
   }
 
   /**

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

@@ -33,6 +33,7 @@ import {MediaType} from '../media-pool';
 import {PageState} from '../amp-story-page';
 import {PaginationButtons} from '../pagination-buttons';
 import {Services} from '../../../../src/services';
+import {VisibilityState} from '../../../../src/visibility-state';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {poll} from '../../../../testing/iframe';
 import {registerServiceBuilder} from '../../../../src/service';
@@ -224,11 +225,15 @@ describes.realWin(
       const oldPage = pages[0];
       const newPage = pages[1];
 
-      const pauseOldPageStub = sandbox.stub(oldPage, 'pauseCallback');
-      const resumeNewPageStub = sandbox.stub(newPage, 'resumeCallback');
+      const setStateOldPageStub = sandbox.stub(oldPage, 'setState');
+      const setStateNewPageStub = sandbox.stub(newPage, 'setState');
       await story.switchTo_('page-1');
-      expect(pauseOldPageStub).to.have.been.calledOnce;
-      expect(resumeNewPageStub).to.have.been.calledOnce;
+      expect(setStateOldPageStub).to.have.been.calledOnceWithExactly(
+        PageState.NOT_ACTIVE
+      );
+      expect(setStateNewPageStub).to.have.been.calledOnceWithExactly(
+        PageState.PLAYING
+      );
     });
 
     // TODO(#11639): Re-enable this test.
@@ -698,28 +703,66 @@ describes.realWin(
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
-        story.pauseCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
-      it('should play the story when viewer becomes active', async () => {
+      it('should pause the story when viewer becomes hidden', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
-        story.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
+        await story.layoutCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.HIDDEN);
+        expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
+      });
+
+      it('should pause the story when viewer becomes paused', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
+      });
+
+      it('should pause the story page when viewer becomes paused', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
-        story.resumeCallback();
+        const setStateStub = sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        expect(setStateStub).to.have.been.calledOnceWithExactly(
+          PageState.PAUSED
+        );
+      });
+
+      it('should play the story when viewer becomes active', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.false;
       });
 
+      it('should play the story page when viewer becomes active', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
+        expect(setStateStub.getCall(1)).to.have.been.calledWithExactly(
+          PageState.PLAYING
+        );
+      });
+
       it('should keep the story paused on resume when previously paused', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         story.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
 
         await story.layoutCallback();
-        story.pauseCallback();
-        story.resumeCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });