Implemented minified controls

ampproject · Aug 1, 2017 · 1440784 · 1440784
1 parent 53c48ce
commit 1440784
Show file tree

Hide file tree

Showing 5 changed files with 405 additions and 94 deletions.
diff --git a/css/amp.css b/css/amp.css
@@ -708,14 +708,106 @@ i-amphtml-video-mask, i-amp-video-mask {
   margin: initial !important;
 }
 
+i-amphtml-dragging-mask {
+  position: fixed;
+  z-index: 17;
+  background: transparent;
+  border-radius: 6px;
+}
+
+i-amphtml-dockable-video-controls{
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.7);
+  align-items: center;
+  text-align: center;
+  border-radius: 6px;
+  display: none;
+  opacity: 0;
+}
+
 i-amphtml-dockable-video-control-btn {
   flex-grow: 1;
   font-size: 40px;
   color: white;
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 65%;
+}
+
+i-amphtml-dockable-video-control-btn:first-child {
+  background-position: 75% center !important;
+}
+
+i-amphtml-dockable-video-control-btn:last-child {
+  background-position: 25% center !important;
 }
 
 i-amphtml-dockable-video-control-btn.play {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="100%" height="100%" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
+}
+
+i-amphtml-dockable-video-control-btn.pause {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="100%" height="100%" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
+}
 
+i-amphtml-dockable-video-control-btn.mute {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="100%" height="100%" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
+}
+
+i-amphtml-dockable-video-control-btn.unmute {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="100%" height="100%" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
+}
+
+i-amphtml-dockable-video-control-btn.enterfullscreen {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="100%" height="100%" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>');
+}
+
+progress.i-amphtml-dockable-video-progress {
+  /* Reset the default appearance */
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  bottom: 0px;
+  border: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+progress.i-amphtml-dockable-video-progress::-webkit-progress-bar {
+  border: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+}
+progress.i-amphtml-dockable-video-progress::-webkit-progress-value {
+  background: rgba(255, 255, 255, 1.0);
+  border: 0;
+  border-bottom-left-radius: 10px;
+}
+
+progress.i-amphtml-dockable-video-progress[value="100"]::-webkit-progress-value {
+  border-bottom-right-radius: 10px;
+}
+
+i-amphtml-dockable-video-close {
+  display: block;
+  width: 48px;
+  height: 48px;
+  background-color: rgba(255,255,255,.98);
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg fill="#000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+  border-radius: 50%;
+  color: white;
+  position: absolute;
+  top: -16px;
+  right: -16px;
+  box-shadow: -1px 3px 14px 2px rgba(0,0,0,.3);
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 /**

diff --git a/extensions/amp-video/0.1/amp-video.js b/extensions/amp-video/0.1/amp-video.js
@@ -27,7 +27,7 @@ import {dev} from '../../../src/log';
 import {
   installVideoManagerForDoc,
 } from '../../../src/service/video-manager-impl';
-import {VideoEvents} from '../../../src/video-interface';
+import {VideoEvents, VideoAnalyticsEvents} from '../../../src/video-interface';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
 
@@ -203,6 +203,9 @@ class AmpVideo extends AMP.BaseElement {
     listen(video, 'ended', () => {
       this.element.dispatchCustomEvent(VideoEvents.PAUSE);
     });
+    listen(video, 'timeupdate', () => {
+      this.element.dispatchCustomEvent(VideoAnalyticsEvents.SECONDS_PLAYED);
+    });
   }
 
   /** @override */

diff --git a/src/event-helper-listen.js b/src/event-helper-listen.js
@@ -25,10 +25,11 @@
  * @param {string} eventType
  * @param {function(!Event)} listener
  * @param {boolean=} opt_capture
+ * @param {boolean=} opt_passive
  * @return {!UnlistenDef}
  */
 export function internalListenImplementation(element, eventType, listener,
-    opt_capture) {
+    opt_capture, opt_passive) {
   let localElement = element;
   let localListener = listener;
   /** @type {?Function}  */
@@ -41,11 +42,34 @@ export function internalListenImplementation(element, eventType, listener,
       throw e;
     }
   };
+
+  // Test whether browser supports the passive option or not
+  let passiveSupported = false;
+  try {
+    const options = Object.defineProperty({}, 'passive', {
+      get: function() {
+        passiveSupported = true;
+      },
+    });
+    self.addEventListener('test-passive', null, options);
+  } catch (err) {
+    // Passive is not supported
+  }
+
   const capture = opt_capture || false;
-  localElement.addEventListener(eventType, wrapped, capture);
+  const passive = opt_passive || false;
+  localElement.addEventListener(
+      eventType,
+      wrapped,
+      passiveSupported ? {'capture': capture, 'passive': passive} : capture
+  );
   return () => {
     if (localElement) {
-      localElement.removeEventListener(eventType, wrapped, capture);
+      localElement.removeEventListener(
+          eventType,
+          wrapped,
+          passiveSupported ? {'capture': capture, 'passive': passive} : capture
+      );
     }
     // Ensure these are GC'd
     localListener = null;

diff --git a/src/event-helper.js b/src/event-helper.js
@@ -50,11 +50,12 @@ export function createCustomEvent(win, type, detail, opt_eventInit) {
  * @param {string} eventType
  * @param {function(!Event)} listener
  * @param {boolean=} opt_capture
+ * @param {boolean=} opt_passive
  * @return {!UnlistenDef}
  */
-export function listen(element, eventType, listener, opt_capture) {
+export function listen(element, eventType, listener, opt_capture, opt_passive) {
   return internalListenImplementation(
-      element, eventType, listener, opt_capture);
+      element, eventType, listener, opt_capture, opt_passive);
 }
 
 /**
@@ -73,9 +74,11 @@ export function getData(event) {
  * @param {string} eventType
  * @param {function(!Event)} listener
  * @param {boolean=} opt_capture
+ * @param {boolean=} opt_passive
  * @return {!UnlistenDef}
  */
-export function listenOnce(element, eventType, listener, opt_capture) {
+export function listenOnce(element, eventType, listener,
+  opt_capture, opt_passive) {
   let localListener = listener;
   const unlisten = internalListenImplementation(element, eventType, event => {
     try {
@@ -85,7 +88,7 @@ export function listenOnce(element, eventType, listener, opt_capture) {
       localListener = null;
       unlisten();
     }
-  }, opt_capture);
+  }, opt_capture, opt_passive);
   return unlisten;
 }