3q-player: implement async pause

ampproject · Mar 17, 2021 · 9c9ee0c · 9c9ee0c
1 parent d54e611
commit 9c9ee0c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 16 deletions.
diff --git a/examples/3q-player.amp.html b/examples/3q-player.amp.html
@@ -20,22 +20,12 @@ <h2>3Q Player AMP Examples</h2>
 
   <h3>Responsive</h3>
 
-  <amp-3q-player id="myVideo" data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
-  layout="responsive" height="360" width="640">
-  </amp-3q-player>
-
-  <h3>Actions</h3>
-  <button on="tap:myVideo.play">Play</button>
-  <button on="tap:myVideo.pause">Pause</button>
-  <button on="tap:myVideo.mute">Mute</button>
-  <button on="tap:myVideo.unmute">Unmute</button>
-  <button on="tap:myVideo.fullscreen">Fullscreen</button>
-
-  <h2>Autoplay</h2>
-  <amp-3q-player autoplay id="video" data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
+  <details open>
+    <summary>Video</summary>
+    <amp-3q-player id="myVideo" data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
     layout="responsive" height="360" width="640">
-  </amp-3q-player>
-  <div class="spacer"></div>
+    </amp-3q-player>
+  </details>
 
 </body>
 </html>
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) {
+    console.log('QQQ: updateIsPlaying_:', isPlaying);
+    this.isPlaying_ = isPlaying;
+    if (isPlaying) {
+      console.log('QQQ: -- observe');
+      observeContentSize(this.element, this.pauseWhenNoSize_);
+    } else {
+      console.log('QQQ: -- unobserve');
+      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,29 @@ class Amp3QPlayer extends AMP.BaseElement {
 
     const eventType = data['data'];
 
+    if (['ready', 'playing', 'paused', 'complete'].includes(eventType)) {
+      console.log('QQQ: event: ', eventType, data);
+    }
+
     if (eventType == 'ready') {
       this.playerReadyResolver_();
     }
 
+    switch (eventType) {
+      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 +268,9 @@ class Amp3QPlayer extends AMP.BaseElement {
 
   /** @override */
   pause() {
+    if (!this.iframe_) {
+      return;
+    }
     this.sdnPostMessage_('pause');
   }