🐛[story-ads] Pause the progress bar when paused. (ampproject#34046)

* react to pause * tests
rochapablo · Aug 30, 2021 · 44632f6 · 44632f6
1 parent 897e3e4
commit 44632f6
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css
@@ -51,6 +51,10 @@
   animation: grow linear;
 }
 
+[paused] .i-amphtml-story-ad-progress-bar {
+  animation-play-state: paused;
+}
+
 @keyframes grow {
   from {
     width: 0%;

diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js
@@ -61,6 +61,7 @@ export const Attributes = {
   AD_SHOWING: 'ad-showing',
   DESKTOP_PANELS: 'desktop-panels',
   DIR: 'dir',
+  PAUSED: 'paused',
 };
 
 export class AmpStoryAutoAds extends AMP.BaseElement {
@@ -377,6 +378,26 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     this.progressBarBackground_.appendChild(progressBar);
     createShadowRootWithStyle(host, this.progressBarBackground_, progessBarCSS);
     this.ampStory_.element.appendChild(host);
+
+    // TODO(#33969) move this to init listeners when no longer conditional.
+    this.storeService_.subscribe(StateProperty.PAUSED_STATE, (isPaused) => {
+      this.onPauseStateUpdate_(isPaused);
+    });
+  }
+
+  /**
+   * If video is paused and ad is showing pause the progress bar.
+   * @param {boolean} isPaused
+   */
+  onPauseStateUpdate_(isPaused) {
+    const adShowing = this.storeService_.get(StateProperty.AD_STATE);
+    if (!adShowing) {
+      return;
+    }
+
+    isPaused
+      ? this.progressBarBackground_.setAttribute(Attributes.PAUSED, '')
+      : this.progressBarBackground_.removeAttribute(Attributes.PAUSED);
   }
 
   /**

diff --git a/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js
@@ -334,6 +334,30 @@ describes.realWin(
         storeService.dispatch(Action.TOGGLE_RTL, true);
         expect(adBadgeContainer).to.have.attribute(Attributes.DIR, 'rtl');
       });
+
+      it('should propagate the pause state if ad showing', () => {
+        const progressBackground = doc.querySelector(
+          '.i-amphtml-story-ad-progress-background'
+        );
+        storeService.dispatch(Action.TOGGLE_AD, true);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, true);
+        expect(progressBackground).to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, false);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+      });
+
+      it('should not propagate the pause state if no ad showing', () => {
+        const progressBackground = doc.querySelector(
+          '.i-amphtml-story-ad-progress-background'
+        );
+        storeService.dispatch(Action.TOGGLE_AD, false);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, true);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, false);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+      });
     });
 
     describe('analytics triggers', () => {