3q-player: implement async pause (#33332)

* 3q-player: implement async pause * restore an example page
ampproject · Mar 18, 2021 · 3f1bc68 · 3f1bc68
1 parent 9c00326
commit 3f1bc68
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 3 deletions.
diff --git a/extensions/amp-3q-player/0.1/amp-3q-player.js b/extensions/amp-3q-player/0.1/amp-3q-player.js
@@ -33,6 +33,10 @@ import {
 import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
 
 const TAG = 'amp-3q-player';
 
@@ -55,6 +59,11 @@ class Amp3QPlayer extends AMP.BaseElement {
     this.playerReadyResolver_ = null;
 
     this.dataId = null;
+
+    /** @private {boolean} */
+    this.isPlaying_ = false;
+
+    this.pauseWhenNoSize_ = this.pauseWhenNoSize_.bind(this);
   }
 
   /**
@@ -152,6 +161,8 @@ class Amp3QPlayer extends AMP.BaseElement {
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
 
+    this.updateIsPlaying_(false);
+
     return true;
   }
 
@@ -162,7 +173,29 @@ class Amp3QPlayer extends AMP.BaseElement {
 
   /** @override */
   pauseCallback() {
-    if (this.iframe_) {
+    this.pause();
+  }
+
+  /** @private */
+  updateIsPlaying_(isPlaying) {
+    if (isPlaying === this.isPlaying_) {
+      return;
+    }
+    this.isPlaying_ = isPlaying;
+    if (isPlaying) {
+      observeContentSize(this.element, this.pauseWhenNoSize_);
+    } else {
+      unobserveContentSize(this.element, this.pauseWhenNoSize_);
+    }
+  }
+
+  /**
+   * @param {!../../../src/layout-rect.LayoutSizeDef} size
+   * @private
+   */
+  pauseWhenNoSize_({width, height}) {
+    const hasSize = width > 0 && height > 0;
+    if (!hasSize) {
       this.pause();
     }
   }
@@ -186,14 +219,24 @@ class Amp3QPlayer extends AMP.BaseElement {
 
     const eventType = data['data'];
 
-    if (eventType == 'ready') {
-      this.playerReadyResolver_();
+    switch (eventType) {
+      case 'ready':
+        this.playerReadyResolver_();
+        break;
+      case 'playing':
+        this.updateIsPlaying_(true);
+        break;
+      case 'paused':
+      case 'complete':
+        this.updateIsPlaying_(false);
+        break;
     }
 
     redispatch(this.element, eventType, {
       'ready': VideoEvents.LOAD,
       'playing': VideoEvents.PLAYING,
       'paused': VideoEvents.PAUSE,
+      'complete': VideoEvents.ENDED,
       'muted': VideoEvents.MUTED,
       'unmuted': VideoEvents.UNMUTED,
     });
@@ -220,6 +263,9 @@ class Amp3QPlayer extends AMP.BaseElement {
 
   /** @override */
   pause() {
+    if (!this.iframe_) {
+      return;
+    }
     this.sdnPostMessage_('pause');
   }
 

diff --git a/extensions/amp-3q-player/0.1/test/test-amp-3q-player.js b/extensions/amp-3q-player/0.1/test/test-amp-3q-player.js
@@ -19,6 +19,7 @@ import * as dom from '../../../../src/dom';
 import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
 import {createElementWithAttributes} from '../../../../src/dom';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {listenOncePromise} from '../../../../src/event-helper';
 
 describes.realWin(
@@ -32,11 +33,13 @@ describes.realWin(
     let win;
     let doc;
     let timer;
+    let resizeObserverStub;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
       timer = Services.timerFor(win);
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
     });
 
     async function get3QElement(playoutId) {
@@ -59,6 +62,37 @@ describes.realWin(
       return player;
     }
 
+    describe('pause', () => {
+      let player, impl, iframe;
+      let postMessageSpy;
+
+      beforeEach(async () => {
+        player = await get3QElement('c8dbe7f4-7f7f-11e6-a407-0cc47a188158');
+        impl = await player.getImpl();
+        iframe = player.querySelector('iframe');
+        postMessageSpy = env.sandbox.spy(impl, 'sdnPostMessage_');
+      });
+
+      it('should auto-pause when playing and no size', async () => {
+        sendFakeMessage(impl, iframe, 'playing');
+        resizeObserverStub.notifySync({
+          target: player,
+          contentRect: {width: 0, height: 0},
+        });
+        expect(postMessageSpy).to.be.calledWith('pause');
+      });
+
+      it('should NOT auto-pause when not playing', async () => {
+        sendFakeMessage(impl, iframe, 'playing');
+        sendFakeMessage(impl, iframe, 'paused');
+        resizeObserverStub.notifySync({
+          target: player,
+          contentRect: {width: 0, height: 0},
+        });
+        expect(postMessageSpy).to.not.be.calledWith('pause');
+      });
+    });
+
     describe('rendering', async () => {
       it('renders', async () => {
         const player = await get3QElement(