New feature : 50% mobile visiblity

EXTENSIONS_CSS_MAP

@@ -0,0 +1 @@
+{"amp-3d-gltf-0.1":{"name":"amp-3d-gltf","version":"0.1","hasCss":false},"amp-3q-player-0.1":{"name":"amp-3q-player","version":"0.1","hasCss":false},"amp-access-0.1":{"name":"amp-access","version":"0.1","hasCss":true},"amp-access-laterpay-0.1":{"name":"amp-access-laterpay","version":"0.1","hasCss":true},"amp-access-laterpay-0.2":{"name":"amp-access-laterpay","version":"0.2","hasCss":true},"amp-access-scroll-0.1":{"name":"amp-access-scroll","version":"0.1","hasCss":true},"amp-accordion-0.1":{"name":"amp-accordion","version":"0.1","hasCss":false},"amp-ad-0.1":{"name":"amp-ad","version":"0.1","hasCss":true},"amp-ad-network-adsense-impl-0.1":{"name":"amp-ad-network-adsense-impl","version":"0.1","hasCss":false},"amp-ad-network-adzerk-impl-0.1":{"name":"amp-ad-network-adzerk-impl","version":"0.1","hasCss":false},"amp-ad-network-doubleclick-impl-0.1":{"name":"amp-ad-network-doubleclick-impl","version":"0.1","hasCss":false},"amp-ad-network-fake-impl-0.1":{"name":"amp-ad-network-fake-impl","version":"0.1","hasCss":false},"amp-ad-network-triplelift-impl-0.1":{"name":"amp-ad-network-triplelift-impl","version":"0.1","hasCss":false},"amp-ad-network-cloudflare-impl-0.1":{"name":"amp-ad-network-cloudflare-impl","version":"0.1","hasCss":false},"amp-ad-network-gmossp-impl-0.1":{"name":"amp-ad-network-gmossp-impl","version":"0.1","hasCss":false},"amp-ad-exit-0.1":{"name":"amp-ad-exit","version":"0.1","hasCss":false},"amp-addthis-0.1":{"name":"amp-addthis","version":"0.1","hasCss":false},"amp-analytics-0.1":{"name":"amp-analytics","version":"0.1","hasCss":false},"amp-anim-0.1":{"name":"amp-anim","version":"0.1","hasCss":false},"amp-animation-0.1":{"name":"amp-animation","version":"0.1","hasCss":false},"amp-apester-media-0.1":{"name":"amp-apester-media","version":"0.1","hasCss":true},"amp-app-banner-0.1":{"name":"amp-app-banner","version":"0.1","hasCss":true},"amp-audio-0.1":{"name":"amp-audio","version":"0.1","hasCss":false},"amp-auto-ads-0.1":{"name":"amp-auto-ads","version":"0.1","hasCss":false},"amp-beopinion-0.1":{"name":"amp-beopinion","version":"0.1","hasCss":false},"amp-bind-0.1":{"name":"amp-bind","version":"0.1","hasCss":false},"amp-bodymovin-animation-0.1":{"name":"amp-bodymovin-animation","version":"0.1","hasCss":false},"amp-brid-player-0.1":{"name":"amp-brid-player","version":"0.1","hasCss":false},"amp-brightcove-0.1":{"name":"amp-brightcove","version":"0.1","hasCss":false},"amp-byside-content-0.1":{"name":"amp-byside-content","version":"0.1","hasCss":true},"amp-kaltura-player-0.1":{"name":"amp-kaltura-player","version":"0.1","hasCss":false},"amp-call-tracking-0.1":{"name":"amp-call-tracking","version":"0.1","hasCss":false},"amp-carousel-0.1":{"name":"amp-carousel","version":"0.1","hasCss":true},"amp-compare-slider-0.1":{"name":"amp-compare-slider","version":"0.1","hasCss":false},"amp-consent-0.1":{"name":"amp-consent","version":"0.1","hasCss":true},"amp-crypto-polyfill-0.1":{"name":"amp-crypto-polyfill","version":"0.1","hasCss":false},"amp-dailymotion-0.1":{"name":"amp-dailymotion","version":"0.1","hasCss":false},"amp-date-countdown-0.1":{"name":"amp-date-countdown","version":"0.1","hasCss":false},"amp-google-document-embed-0.1":{"name":"amp-google-document-embed","version":"0.1","hasCss":false},"amp-dynamic-css-classes-0.1":{"name":"amp-dynamic-css-classes","version":"0.1","hasCss":false},"amp-embedly-card-0.1":{"name":"amp-embedly-card","version":"0.1","hasCss":false},"amp-experiment-0.1":{"name":"amp-experiment","version":"0.1","hasCss":false},"amp-facebook-0.1":{"name":"amp-facebook","version":"0.1","hasCss":false},"amp-facebook-comments-0.1":{"name":"amp-facebook-comments","version":"0.1","hasCss":false},"amp-facebook-like-0.1":{"name":"amp-facebook-like","version":"0.1","hasCss":false},"amp-facebook-page-0.1":{"name":"amp-facebook-page","version":"0.1","hasCss":false},"amp-fit-text-0.1":{"name":"amp-fit-text","version":"0.1","hasCss":true},"amp-font-0.1":{"name":"amp-font","version":"0.1","hasCss":false},"amp-form-0.1":{"name":"amp-form","version":"0.1","hasCss":true},"amp-fx-collection-0.1":{"name":"amp-fx-collection","version":"0.1","hasCss":false},"amp-fx-flying-carpet-0.1":{"name":"amp-fx-flying-carpet","version":"0.1","hasCss":true},"amp-geo-0.1":{"name":"amp-geo","version":"0.1","hasCss":false},"amp-gfycat-0.1":{"name":"amp-gfycat","version":"0.1","hasCss":false},"amp-gist-0.1":{"name":"amp-gist","version":"0.1","hasCss":false},"amp-gwd-animation-0.1":{"name":"amp-gwd-animation","version":"0.1","hasCss":true},"amp-hulu-0.1":{"name":"amp-hulu","version":"0.1","hasCss":false},"amp-iframe-0.1":{"name":"amp-iframe","version":"0.1","hasCss":false},"amp-ima-video-0.1":{"name":"amp-ima-video","version":"0.1","hasCss":false},"amp-image-lightbox-0.1":{"name":"amp-image-lightbox","version":"0.1","hasCss":true},"amp-imgur-0.1":{"name":"amp-imgur","version":"0.1","hasCss":false},"amp-instagram-0.1":{"name":"amp-instagram","version":"0.1","hasCss":true},"amp-install-serviceworker-0.1":{"name":"amp-install-serviceworker","version":"0.1","hasCss":false},"amp-izlesene-0.1":{"name":"amp-izlesene","version":"0.1","hasCss":false},"amp-jwplayer-0.1":{"name":"amp-jwplayer","version":"0.1","hasCss":false},"amp-lightbox-0.1":{"name":"amp-lightbox","version":"0.1","hasCss":true},"amp-lightbox-gallery-0.1":{"name":"amp-lightbox-gallery","version":"0.1","hasCss":true},"amp-list-0.1":{"name":"amp-list","version":"0.1","hasCss":false},"amp-live-list-0.1":{"name":"amp-live-list","version":"0.1","hasCss":true},"amp-mathml-0.1":{"name":"amp-mathml","version":"0.1","hasCss":true},"amp-mustache-0.1":{"name":"amp-mustache","version":"0.1","hasCss":false},"amp-mustache-0.2":{"name":"amp-mustache","version":"0.2","hasCss":false},"amp-next-page-0.1":{"name":"amp-next-page","version":"0.1","hasCss":true},"amp-nexxtv-player-0.1":{"name":"amp-nexxtv-player","version":"0.1","hasCss":false},"amp-o2-player-0.1":{"name":"amp-o2-player","version":"0.1","hasCss":false},"amp-ooyala-player-0.1":{"name":"amp-ooyala-player","version":"0.1","hasCss":false},"amp-pinterest-0.1":{"name":"amp-pinterest","version":"0.1","hasCss":true},"amp-playbuzz-0.1":{"name":"amp-playbuzz","version":"0.1","hasCss":true},"amp-reach-player-0.1":{"name":"amp-reach-player","version":"0.1","hasCss":false},"amp-reddit-0.1":{"name":"amp-reddit","version":"0.1","hasCss":false},"amp-riddle-quiz-0.1":{"name":"amp-riddle-quiz","version":"0.1","hasCss":false},"amp-share-tracking-0.1":{"name":"amp-share-tracking","version":"0.1","hasCss":false},"amp-sidebar-0.1":{"name":"amp-sidebar","version":"0.1","hasCss":true},"amp-soundcloud-0.1":{"name":"amp-soundcloud","version":"0.1","hasCss":false},"amp-springboard-player-0.1":{"name":"amp-springboard-player","version":"0.1","hasCss":false},"amp-sticky-ad-1.0":{"name":"amp-sticky-ad","version":"1.0","hasCss":true},"amp-story-0.1":{"name":"amp-story","version":"0.1","hasCss":true,"cssBinaries":["amp-story-bookend","amp-story-consent","amp-story-hint","amp-story-unsupported-browser-layer","amp-story-viewport-warning-layer","amp-story-info-dialog","amp-story-share","amp-story-share-menu","amp-story-system-layer"]},"amp-story-1.0":{"name":"amp-story","version":"1.0","hasCss":true,"cssBinaries":["amp-story-bookend","amp-story-consent","amp-story-hint","amp-story-unsupported-browser-layer","amp-story-viewport-warning-layer","amp-story-info-dialog","amp-story-share","amp-story-share-menu","amp-story-system-layer"]},"amp-story-auto-ads-0.1":{"name":"amp-story-auto-ads","version":"0.1","hasCss":true},"amp-selector-0.1":{"name":"amp-selector","version":"0.1","hasCss":true},"amp-web-push-0.1":{"name":"amp-web-push","version":"0.1","hasCss":true},"amp-wistia-player-0.1":{"name":"amp-wistia-player","version":"0.1","hasCss":false},"amp-position-observer-0.1":{"name":"amp-position-observer","version":"0.1","hasCss":false},"amp-orientation-observer-0.1":{"name":"amp-orientation-observer","version":"0.1","hasCss":false},"amp-date-picker-0.1":{"name":"amp-date-picker","version":"0.1","hasCss":true},"amp-image-viewer-0.1":{"name":"amp-image-viewer","version":"0.1","hasCss":true},"amp-subscriptions-0.1":{"name":"amp-subscriptions","version":"0.1","hasCss":true},"amp-subscriptions-google-0.1":{"name":"amp-subscriptions-google","version":"0.1","hasCss":true},"amp-pan-zoom-0.1":{"name":"amp-pan-zoom","version":"0.1","hasCss":true},"amp-slides-0.1":{"name":"amp-slides","version":"0.1","hasCss":false},"amp-social-share-0.1":{"name":"amp-social-share","version":"0.1","hasCss":true},"amp-timeago-0.1":{"name":"amp-timeago","version":"0.1","hasCss":false},"amp-twitter-0.1":{"name":"amp-twitter","version":"0.1","hasCss":false},"amp-user-notification-0.1":{"name":"amp-user-notification","version":"0.1","hasCss":true},"amp-vimeo-0.1":{"name":"amp-vimeo","version":"0.1","hasCss":false},"amp-vine-0.1":{"name":"amp-vine","version":"0.1","hasCss":false},"amp-viz-vega-0.1":{"name":"amp-viz-vega","version":"0.1","hasCss":true},"amp-google-vrview-image-0.1":{"name":"amp-google-vrview-image","version":"0.1","hasCss":false},"amp-viewer-integration-0.1":{"name":"amp-viewer-integration","version":"0.1","hasCss":false,"loadPriority":"high"},"amp-video-0.1":{"name":"amp-video","version":"0.1","hasCss":false},"amp-video-iframe-0.1":{"name":"amp-video-iframe","version":"0.1","hasCss":false},"amp-video-service-0.1":{"name":"amp-video-service","version":"0.1","hasCss":false,"loadPriority":"high"},"amp-vk-0.1":{"name":"amp-vk","version":"0.1","hasCss":false},"amp-yotpo-0.1":{"name":"amp-yotpo","version":"0.1","hasCss":false},"amp-youtube-0.1":{"name":"amp-youtube","version":"0.1","hasCss":false}}

examples/amp-mowplayer.amp.html

@@ -12,18 +12,15 @@
     }
   </style>
   <script async custom-element="amp-mowplayer" src="https://cdn.ampproject.org/v0/amp-mowplayer-0.1.js"></script>
+<!--  <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>-->
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
-<body>
-  <h2>MowPlayer AMP Examples</h2>
-  <h3>Responsive single video</h3>
-
-	<amp-mowplayer data-mediaid="v-m1ec4tl7dvn" layout="responsive" width="16" height="9"></amp-mowplayer>
-
- <h3>Responsive with a playlis t</h3>
-	<amp-mowplayer  data-mediaid="p-mmzhwcu9mbu" layout="responsive" width="16" height="9"></amp-mowplayer>
-
-  <h3>Responsive with a video article</h3>
-
+<div data-amp-auto-lightbox-disable>
+  <h2 >MowPlayer AMP Examples</h2>
+  <h3>Responsive Player</h3>
+  <div style="width: 800px; margin: 0 auto">
+	  <amp-mowplayer  data-mediaid="p-muie6kenkmn" layout="responsive" width="16" height="9" ></amp-mowplayer>
+    </div>
+  <div style="width:100%;height:800px"></div>
 </body>
 </html>

extensions/amp-mowplayer/0.1/amp-mowplayer.js

@@ -56,12 +56,12 @@ class AmpMowplayer extends AMP.BaseElement {
   constructor(element) {
     super(element);
 
+    /** @private {?../../../src/service/viewport/viewport-interface.ViewportInterface} */
+    this.viewport_ = null;
+
     /** @private {?string}  */
     this.mediaid_ = '';
 
-    /** @private {?boolean}  */
-    this.muted_ = false;
-
     /** @private {?Element} */
     this.iframe_ = null;
 
@@ -76,6 +76,9 @@ class AmpMowplayer extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.unlistenMessage_ = null;
+
+    /** @private {?boolean}  */
+    this.muted_ = false;
   }
 
   /**
@@ -101,6 +104,8 @@ class AmpMowplayer extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.viewport_ = this.getViewport();
+
     this.mediaid_ = userAssert(
       this.element.getAttribute('data-mediaid'),
       '/The data-mediaid attribute is required for <amp-mowplayer> %s',
@@ -116,6 +121,7 @@ class AmpMowplayer extends AMP.BaseElement {
   }
 
   /**
+   * Get iframe src url
    * @return {string}
    * @private
    */
@@ -125,7 +131,7 @@ class AmpMowplayer extends AMP.BaseElement {
     }
 
     return (this.videoIframeSrc_ =
-      'https://mowplayer.com/watch/' + this.mediaid_);
+      'https://mowplayer.com/watch/' + this.mediaid_ + '?script=1');
   }
 
   /** @override */
@@ -139,7 +145,6 @@ class AmpMowplayer extends AMP.BaseElement {
     );
     const loaded = this.loadPromise(this.iframe_).then(() => {
       // Tell mowplayer that we want to receive messages
-      this.listenToFrame_();
       this.element.dispatchCustomEvent(VideoEvents.LOAD);
     });
     this.playerReadyResolver_(loaded);
@@ -168,31 +173,21 @@ class AmpMowplayer extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  mutatedAttributesCallback(mutations) {
-    if (mutations['data-mediaid'] == null) {
-      return;
-    }
-    if (!this.iframe_) {
-      return;
-    }
-    this.sendCommand_('loadVideoById', [this.mediaid_]);
-  }
-
   /**
-   * Sends a command to the player through postMessage.
-   * @param {string} command
-   * @param {Array=} opt_args
+   * Sends a message to the player through postMessage.
+   * @param {string} type
+   * @param {Object=} data
    * @private
    */
-  sendCommand_(command, opt_args) {
+  sendMessage_(type, data) {
     this.playerReadyPromise_.then(() => {
       if (this.iframe_ && this.iframe_.contentWindow) {
         const message = JSON.stringify(
           dict({
-            'event': 'command',
-            'func': command,
-            'args': opt_args || '',
+            'mowplayer': {
+              'type': type,
+              'data': data,
+            },
           })
         );
         this.iframe_.contentWindow./*OK*/ postMessage(
@@ -204,6 +199,7 @@ class AmpMowplayer extends AMP.BaseElement {
   }
 
   /**
+   * Receive messages from player
    * @param {!Event} event
    * @private
    */
@@ -223,17 +219,28 @@ class AmpMowplayer extends AMP.BaseElement {
       return; // We only process valid JSON.
     }
 
-    const eventType = data['event'];
-    const info = data['info'] || {};
+    if (data['mowplayer'] === undefined) {
+      return;
+    }
+
+    const eventType = data['mowplayer']['type'];
+    const info = getData(data['mowplayer']) || {};
 
     const {element} = this;
 
-    if (eventType === 'set_aspect_ratio') {
-      this.attemptChangeHeight(info['new_height']).catch(() => {});
+    if (eventType === 'handshake') {
+      this.sendMessage_('handshake_done', {});
+    } else if (eventType === 'visibility_observer') {
+      this.onVisibilityObserver_();
+    } else if (eventType === 'pause') {
+      this.pause();
+    } else if (eventType === 'play') {
+      this.play();
     }
 
     const playerState = info['playerState'];
-    if (eventType == 'infoDelivery' && playerState != null) {
+
+    if (eventType == 'infoDelivery' && playerState !== undefined) {
       redispatch(element, playerState.toString(), {
         [PlayerStates.PLAYING]: VideoEvents.PLAYING,
         [PlayerStates.PAUSED]: VideoEvents.PAUSE,
@@ -244,7 +251,8 @@ class AmpMowplayer extends AMP.BaseElement {
     }
 
     const muted = info['muted'];
-    if (eventType == 'infoDelivery' && info && muted != null) {
+
+    if (eventType == 'infoDelivery' && muted !== undefined) {
       if (this.muted_ == muted) {
         return;
       }
@@ -255,20 +263,19 @@ class AmpMowplayer extends AMP.BaseElement {
   }
 
   /**
-   * Sends 'listening' message to the Mowplayer iframe to listen for events.
+   * Check player is visible or not based on breakpoint and send message to player
    * @private
    */
-  listenToFrame_() {
-    if (!this.iframe_) {
-      return;
-    }
+  onVisibilityObserver_() {
+    const worker = () => {
+      const {intersectionRatio} = this.element.getIntersectionChangeEntry();
+      const visible = intersectionRatio > 0.5 ? true : false;
+      this.sendMessage_('visibility_observer_visibility', {'visible': visible});
+    };
 
-    this.sendCommand_('listening', [
-      'amp',
-      window.location.href,
-      window.location.origin,
-      true,
-    ]);
+    this.viewport_.onChanged(worker);
+
+    worker();
   }
 
   /** @override */
@@ -282,24 +289,16 @@ class AmpMowplayer extends AMP.BaseElement {
   }
 
   /** @override */
-  play(unusedIsAutoplay) {
-    this.sendCommand_('playVideo');
-  }
+  play() {}
 
   /** @override */
-  pause() {
-    this.sendCommand_('pauseVideo');
-  }
+  pause() {}
 
   /** @override */
-  mute() {
-    this.sendCommand_('mute');
-  }
+  mute() {}
 
   /** @override */
-  unmute() {
-    this.sendCommand_('unMute');
-  }
+  unmute() {}
 
   /** @override */
   showControls() {

extensions/amp-mowplayer/0.1/test/test-amp-mowplayer.js

@@ -19,8 +19,9 @@ import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
 import {listenOncePromise} from '../../../../src/event-helper';
 
-const EXAMPLE_VIDEOID = 'v-myfwarfx4tb';
-const EXAMPLE_VIDEOID_URL = 'https://mowplayer.com/watch/v-myfwarfx4tb';
+const EXAMPLE_VIDEOID = 'v-h-_ED0btjZs';
+const EXAMPLE_VIDEOID_URL =
+  'https://mowplayer.com/watch/v-h-_ED0btjZs?script=1';
 
 describes.realWin(
   'amp-mowplayer',
@@ -30,7 +31,7 @@ describes.realWin(
     },
   },
   function (env) {
-    this.timeout(5000);
+    this.timeout(20000);
     let win, doc;
     let timer;
 
@@ -40,7 +41,7 @@ describes.realWin(
       timer = Services.timerFor(win);
     });
 
-    function getMowPlayer(
+    async function getMowPlayer(
       attributes,
       opt_responsive,
       opt_beforeLayoutCallback
@@ -55,23 +56,9 @@ describes.realWin(
         mp.setAttribute('layout', 'responsive');
       }
       doc.body.appendChild(mp);
-      return mp
-        .build()
-        .then(() => {
-          if (opt_beforeLayoutCallback) {
-            opt_beforeLayoutCallback(mp);
-          }
-          return mp.layoutCallback();
-        })
-        .then(() => {
-          const mpIframe = mp.querySelector('iframe');
-          mp.implementation_.handleMowMessage_({
-            origin: 'https://mowplayer.com',
-            source: mpIframe.contentWindow,
-            data: JSON.stringify({event: 'onReady'}),
-          });
-        })
-        .then(() => mp);
+      await mp.build();
+      await mp.layoutCallback();
+      return mp;
     }
 
     describe('with data-mediaid', function () {
@@ -88,7 +75,6 @@ describes.realWin(
         return getMowPlayer({'data-mediaid': EXAMPLE_VIDEOID}, true).then(
           (mp) => {
             const iframe = mp.querySelector('iframe');
-            expect(iframe).to.not.be.null;
             expect(iframe.tagName).to.equal('IFRAME');
             expect(iframe.src).to.equal(EXAMPLE_VIDEOID_URL);
           }
@@ -152,8 +138,10 @@ describes.realWin(
         origin: 'https://mowplayer.com',
         source: iframe.contentWindow,
         data: JSON.stringify({
-          event: 'infoDelivery',
-          info,
+          mowplayer: {
+            type: 'infoDelivery',
+            data: info,
+          },
         }),
       });
     }