Override hover styles when there are touch events.

When the user touches the demo controls (e.g. on a phone), the controls
will get the :hover pseudo-class.  However, this style doesn't get
removed until the user "clicks" somewhere else.  This causes the
controls to remain visible forever.

When we are getting touch events, we should override the :hover style
and hide the controls.  However, we should only do this so long as the
clicks are from touch events.  For touchscreen laptops (that have both
touch events and a mouse), we should still allow hovering over the
controls if they used the mouse.

Closes #663

Change-Id: I2705aa8fa9e59657b6fe3603c1826125ccce950a

demo/controls.js

@@ -95,6 +95,9 @@ function ShakaControls() {
 
   /** @private {?number} */
   this.mouseStillTimeoutId_ = null;
+
+  /** @private {?number} */
+  this.lastTouchEventTime_ = null;
 }
 
 
@@ -182,6 +185,10 @@ ShakaControls.prototype.init = function(castProxy, onError, notifyCastStatus) {
 
   this.videoContainer_.addEventListener(
       'mousemove', this.onMouseMove_.bind(this));
+  this.videoContainer_.addEventListener(
+      'touchmove', this.onMouseMove_.bind(this));
+  this.videoContainer_.addEventListener(
+      'touchend', this.onMouseMove_.bind(this));
   this.videoContainer_.addEventListener(
       'mouseout', this.onMouseOut_.bind(this));
 
@@ -232,9 +239,19 @@ ShakaControls.prototype.loadComplete = function() {
  * Hiding the cursor when the mouse stops moving seems to be the only decent UX
  * in fullscreen mode.  Since we can't use pure CSS for that, we use events both
  * in and out of fullscreen mode.
+ * @param {!Event} event
  * @private
  */
-ShakaControls.prototype.onMouseMove_ = function() {
+ShakaControls.prototype.onMouseMove_ = function(event) {
+  if (event.type == 'touchstart' || event.type == 'touchmove' ||
+      event.type == 'touchend') {
+    this.lastTouchEventTime_ = Date.now();
+  } else if (this.lastTouchEventTime_ + 1000 < Date.now()) {
+    // It has been a while since the last touch event, this is probably a real
+    // mouse moving, so treat it like a mouse.
+    this.lastTouchEventTime_ = null;
+  }
+
   // Use the cursor specified in the CSS file.
   this.videoContainer_.style.cursor = '';
   // Show the controls.
@@ -246,8 +263,12 @@ ShakaControls.prototype.onMouseMove_ = function() {
     // Reset the timer.
     window.clearTimeout(this.mouseStillTimeoutId_);
   }
-  this.mouseStillTimeoutId_ = window.setTimeout(
-      this.onMouseStill_.bind(this), 3000);
+
+  // Only start a timeout on 'touchend' or for 'mousemove' with no touch events.
+  if (event.type == 'touchend' || !this.lastTouchEventTime_) {
+    this.mouseStillTimeoutId_ = window.setTimeout(
+        this.onMouseStill_.bind(this), 3000);
+  }
 };
 
 
@@ -271,8 +292,9 @@ ShakaControls.prototype.onMouseStill_ = function() {
   // Hide the cursor.  (NOTE: not supported on IE)
   this.videoContainer_.style.cursor = 'none';
   // Revert opacity control to CSS.  Hovering directly over the controls will
-  // keep them showing, even in fullscreen mode.
-  this.controls_.style.opacity = '';
+  // keep them showing, even in fullscreen mode. Unless there were touch events,
+  // then override the hover and hide the controls.
+  this.controls_.style.opacity = this.lastTouchEventTime_ ? '0' : '';
 };
 
 
@@ -287,11 +309,12 @@ ShakaControls.prototype.onContainerTouch_ = function(event) {
   }
 
   if (this.controls_.style.opacity == 1) {
+    this.lastTouchEventTime_ = Date.now();
     // The controls are showing.
     // Let this event continue and become a click.
   } else {
     // The controls are hidden, so show them.
-    this.onMouseMove_();
+    this.onMouseMove_(event);
     // Stop this event from becoming a click event.
     event.preventDefault();
   }