Rewind last story page on visibilitystate inactive. (ampproject#29704)

Author: gmajoulet

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

@@ -76,6 +76,7 @@ import {SwipeXYRecognizer} from '../../../src/gesture-recognizers';
 import {SystemLayer} from './amp-story-system-layer';
 import {UnsupportedBrowserLayer} from './amp-story-unsupported-browser-layer';
 import {ViewportWarningLayer} from './amp-story-viewport-warning-layer';
+import {VisibilityState} from '../../../src/visibility-state';
 import {
   childElement,
   childElementByTag,
@@ -342,10 +343,10 @@ export class AmpStory extends AMP.BaseElement {
 
     /**
      * Store the current paused state, to make sure the story does not play on
-     * resume if it was previously paused.
-     * @private {boolean}
+     * resume if it was previously paused. null when nothing to restore.
+     * @private {?boolean}
      */
-    this.pausedStateToRestore_ = false;
+    this.pausedStateToRestore_ = null;
 
     /** @private {?Element} */
     this.sidebar_ = null;
@@ -467,13 +468,22 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   pause_() {
-    this.pausedStateToRestore_ = !!this.storeService_.get(
-      StateProperty.PAUSED_STATE
-    );
+    // Preserve if previously set. This method can be called several times when
+    // setting the visibilitystate to paused and then inactive.
+    if (this.pausedStateToRestore_ === null) {
+      this.pausedStateToRestore_ = !!this.storeService_.get(
+        StateProperty.PAUSED_STATE
+      );
+    }
     this.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
     if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
       this.pauseBackgroundAudio_();
     }
+    // If viewer has navigated to the next document, reset the active page.
+    if (this.getAmpDoc().getVisibilityState() === VisibilityState.INACTIVE) {
+      this.activePage_.setState(PageState.NOT_ACTIVE);
+      this.activePage_.element.setAttribute('active', '');
+    }
   }
 
   /**
@@ -486,6 +496,7 @@ export class AmpStory extends AMP.BaseElement {
       Action.TOGGLE_PAUSED,
       this.pausedStateToRestore_
     );
+    this.pausedStateToRestore_ = null;
     if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
       this.playBackgroundAudio_();
     }
@@ -1812,6 +1823,7 @@ export class AmpStory extends AMP.BaseElement {
           Action.TOGGLE_PAUSED,
           this.pausedStateToRestore_
         );
+        this.pausedStateToRestore_ = null;
         this.storeService_.dispatch(Action.TOGGLE_VIEWPORT_WARNING, false);
       }
     });
@@ -2109,6 +2121,7 @@ export class AmpStory extends AMP.BaseElement {
             Action.TOGGLE_PAUSED,
             this.pausedStateToRestore_
           );
+          this.pausedStateToRestore_ = null;
           this.mutateElement(() => {
             this.unsupportedBrowserLayer_.removeLayer();
           });

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

@@ -729,6 +729,17 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
+      it('should rewind the story page when viewer becomes inactive', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = window.sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
+        expect(setStateStub.getCall(1)).to.have.been.calledWithExactly(
+          PageState.NOT_ACTIVE
+        );
+      });
+
       it('should pause the story when viewer becomes hidden', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
@@ -737,6 +748,17 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
+      it('should pause the story page when viewer becomes hidden', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = window.sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.HIDDEN);
+        expect(setStateStub).to.have.been.calledOnceWithExactly(
+          PageState.PAUSED
+        );
+      });
+
       it('should pause the story when viewer becomes paused', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
@@ -756,7 +778,7 @@ describes.realWin(
         );
       });
 
-      it('should play the story when viewer becomes active', async () => {
+      it('should play the story when viewer becomes active after paused', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
@@ -765,14 +787,33 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.false;
       });
 
-      it('should play the story page when viewer becomes active', async () => {
+      it('should play the story page when viewer becomes active after paused', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = window.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 play the story page when viewer becomes active after paused + inactive', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
         const setStateStub = window.sandbox.stub(story.activePage_, 'setState');
         story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
         story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
+        expect(setStateStub.getCall(0)).to.have.been.calledWithExactly(
+          PageState.PAUSED
+        );
         expect(setStateStub.getCall(1)).to.have.been.calledWithExactly(
+          PageState.NOT_ACTIVE
+        );
+        expect(setStateStub.getCall(2)).to.have.been.calledWithExactly(
           PageState.PLAYING
         );
       });
@@ -788,6 +829,18 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
+      it('should keep the story paused on resume when previously paused + inactive', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        story.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
+
+        await story.layoutCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
+        expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
+      });
+
       describe('amp-story continue anyway', () => {
         it('should not display layout', async () => {
           await createStoryWithPages(2, ['cover', 'page-4']);