Listen to messages before iframe append (#8981)

ampproject · Apr 27, 2017 · accc3c0 · accc3c0
1 parent 9d75a79
commit accc3c0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 49 deletions.
diff --git a/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js b/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
@@ -122,19 +122,19 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
     iframe.setAttribute('frameborder', '0');
     iframe.setAttribute('allowfullscreen', 'true');
     iframe.src = this.getVideoIframeSrc_();
-    this.element.appendChild(iframe);
 
     this.iframe_ = iframe;
 
-    this.unlistenMessage_ = listen(this.win,'message', event => {
+    this.unlistenMessage_ = listen(this.win, 'message', event => {
       this.handleNexxMessages_(event);
     });
 
-    return this.loadPromise(this.iframe_)
-      .then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.LOAD);
-        this.playerReadyResolver_(this.iframe_);
-      });
+    this.element.appendChild(this.iframe_);
+    const loaded = this.loadPromise(this.iframe_).then(() => {
+      this.element.dispatchCustomEvent(VideoEvents.LOAD);
+    });
+    this.playerReadyResolver_(loaded);
+    return loaded;
   }
 
   pauseCallback() {

diff --git a/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js b/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
@@ -22,6 +22,7 @@ import {
   installVideoManagerForDoc,
 } from '../../../src/service/video-manager-impl';
 import {isObject} from '../../../src/types';
+import {listen} from '../../../src/event-helper';
 import {VideoEvents} from '../../../src/video-interface';
 import {videoManagerForDoc} from '../../../src/services';
 
@@ -42,6 +43,9 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.playerReadyResolver_ = null;
+
+    /** @private {?Function} */
+    this.unlistenMessage_ = null;
   }
 
   /**
@@ -58,16 +62,6 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
       this.playerReadyResolver_ = resolve;
     });
 
-    const iframe = this.element.ownerDocument.createElement('iframe');
-    this.iframe_ = iframe;
-
-    this.forwardEvents([VideoEvents.PLAY, VideoEvents.PAUSE], iframe);
-    this.applyFillContent(iframe, true);
-    this.element.appendChild(iframe);
-
-    iframe.setAttribute('frameborder', '0');
-    iframe.setAttribute('allowfullscreen', 'true');
-
     installVideoManagerForDoc(this.element);
     videoManagerForDoc(this.element).register(this);
   }
@@ -100,16 +94,25 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
 
     src += '&ec=' + encodeURIComponent(embedCode) +
       '&pbid=' + encodeURIComponent(playerId);
-    this.iframe_.src = src;
 
-    window.addEventListener('message',
-                            event => this.handleOoyalaMessages_(event));
+    const iframe = this.element.ownerDocument.createElement('iframe');
+    this.applyFillContent(iframe, true);
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('allowfullscreen', 'true');
+    iframe.src = src;
+
+    this.iframe_ = iframe;
 
-    return this.loadPromise(this.iframe_)
-      .then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.LOAD);
-        this.playerReadyResolver_(this.iframe_);
-      });
+    this.unlistenMessage_ = listen(this.win, 'message', event => {
+      this.handleOoyalaMessages_(event);
+    });
+
+    this.element.appendChild(this.iframe_);
+    const loaded = this.loadPromise(this.iframe_).then(() => {
+      this.element.dispatchCustomEvent(VideoEvents.LOAD);
+    });
+    this.playerReadyResolver_(loaded);
+    return loaded;
   }
 
   /** @override */
@@ -118,6 +121,15 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
       removeElement(this.iframe_);
       this.iframe_ = null;
     }
+
+    if (this.unlistenMessage_) {
+      this.unlistenMessage_();
+    }
+
+    this.playerReadyPromise_ = new Promise(resolve => {
+      this.playerReadyResolver_ = resolve;
+    });
+
     return true;
   }
 
@@ -158,34 +170,39 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Sends a command to the player through postMessage.
+   * @param {string} command
+   * @private
+   */
+  sendCommand_(command) {
+    this.playerReadyPromise_.then(() => {
+      if (this.iframe_ && this.iframe_.contentWindow) {
+        this.iframe_.contentWindow./*OK*/postMessage(command, '*');
+      }
+    });
+  }
+
   // VideoInterface Implementation. See ../src/video-interface.VideoInterface
 
   /** @override */
   play(unusedIsAutoplay) {
-    this.playerReadyPromise_.then(() => {
-      this.iframe_.contentWindow./*OK*/postMessage('play', '*');
-    });
+    this.sendCommand_('play');
   }
 
   /** @override */
   pause() {
-    this.playerReadyPromise_.then(() => {
-      this.iframe_.contentWindow./*OK*/postMessage('pause', '*');
-    });
+    this.sendCommand_('pause');
   }
 
   /** @override */
   mute() {
-    this.playerReadyPromise_.then(() => {
-      this.iframe_.contentWindow./*OK*/postMessage('mute', '*');
-    });
+    this.sendCommand_('mute');
   }
 
   /** @override */
   unmute() {
-    this.playerReadyPromise_.then(() => {
-      this.iframe_.contentWindow./*OK*/postMessage('unmute', '*');
-    });
+    this.sendCommand_('unmute');
   }
 
   /** @override */

diff --git a/extensions/amp-youtube/0.1/amp-youtube.js b/extensions/amp-youtube/0.1/amp-youtube.js
@@ -188,7 +188,6 @@ class AmpYoutube extends AMP.BaseElement {
     iframe.setAttribute('allowfullscreen', 'true');
     iframe.src = src;
     this.applyFillContent(iframe);
-    this.element.appendChild(iframe);
 
     this.iframe_ = iframe;
 
@@ -198,16 +197,14 @@ class AmpYoutube extends AMP.BaseElement {
       this.handleYoutubeMessages_.bind(this)
     );
 
-    this.win.addEventListener(
-      'message', event => this.handleYoutubeMessages_(event)
-    );
-
-    return this.loadPromise(iframe)
-        .then(() => this.listenToFrame_())
-        .then(() => {
-          this.element.dispatchCustomEvent(VideoEvents.LOAD);
-          this.playerReadyResolver_(this.iframe_);
-        });
+    this.element.appendChild(this.iframe_);
+    const loaded = this.loadPromise(this.iframe_).then(() => {
+      // Tell YT that we want to receive messages
+      this.listenToFrame_();
+      this.element.dispatchCustomEvent(VideoEvents.LOAD);
+    });
+    this.playerReadyResolver_(loaded);
+    return loaded;
   }
 
   /** @override */
@@ -264,7 +261,7 @@ class AmpYoutube extends AMP.BaseElement {
    * @param {string} command
    * @param {Array=} opt_args
    * @private
-   * */
+   */
   sendCommand_(command, opt_args) {
     this.playerReadyPromise_.then(() => {
       if (this.iframe_ && this.iframe_.contentWindow) {