Fix touch events.

Make components listen to touch events themselves.
Components can have a "listenToTouchMove" property that would report
user activity on touch moves.
Currently, the only problem left is that the MediaTechController emits
tap events to show/hide the controlbar but that causes the control bar
to not be hidden via a tap.

src/js/component.js

@@ -65,6 +65,23 @@ vjs.Component = vjs.CoreObject.extend({
     this.ready(ready);
     // Don't want to trigger ready here or it will before init is actually
     // finished for all children that run this constructor
+
+
+    var touchmove = false;
+    this.on('touchstart', function() {
+      touchmove = false;
+    });
+    this.on('touchmove', vjs.bind(this, function() {
+      if (this.listenToTouchMove) {
+        this.player_.reportUserActivity();
+      }
+      touchmove = true;
+    }));
+    this.on('touchend', vjs.bind(this, function(event) {
+      if (!touchmove && !didSomething) {
+        this.player_.reportUserActivity();
+      }
+    }));
   }
 });
 

src/js/control-bar/control-bar.js

@@ -24,6 +24,8 @@ vjs.ControlBar.prototype.options_ = {
   }
 };
 
+vjs.ControlBar.prototype.listenToTouchMove = true;
+
 vjs.ControlBar.prototype.createEl = function(){
   return vjs.createEl('div', {
     className: 'vjs-control-bar'

src/js/control-bar/progress-control.js

@@ -19,6 +19,8 @@ vjs.ProgressControl.prototype.options_ = {
   }
 };
 
+vjs.ProgressControl.prototype.listenToTouchMove = true;
+
 vjs.ProgressControl.prototype.createEl = function(){
   return vjs.Component.prototype.createEl.call(this, 'div', {
     className: 'vjs-progress-control vjs-control'

src/js/media/media.js

@@ -82,24 +82,8 @@ vjs.MediaTechController.prototype.addControlsListeners = function(){
   this.on('touchstart', function(event) {
     // Stop the mouse events from also happening
     event.preventDefault();
-    event.stopPropagation();
-    // Record if the user was active now so we don't have to keep polling it
-    userWasActive = this.player_.userActive();
   });
 
-  preventBubble = function(event){
-    event.stopPropagation();
-    if (userWasActive) {
-      this.player_.reportUserActivity();
-    }
-  };
-
-  // Treat all touch events the same for consistency
-  this.on('touchmove', preventBubble);
-  this.on('touchleave', preventBubble);
-  this.on('touchcancel', preventBubble);
-  this.on('touchend', preventBubble);
-
   // Turn on component tap events
   this.emitTapEvents();
 

src/js/player.js

@@ -1316,14 +1316,6 @@ vjs.Player.prototype.listenForUserActivity = function(){
   this.on('keydown', onMouseActivity);
   this.on('keyup', onMouseActivity);
 
-  // Consider any touch events that bubble up to be activity
-  // Certain touches on the tech will be blocked from bubbling because they
-  // toggle controls
-  this.on('touchstart', onMouseDown);
-  this.on('touchmove', onMouseActivity);
-  this.on('touchend', onMouseUp);
-  this.on('touchcancel', onMouseUp);
-
   // Run an interval every 250 milliseconds instead of stuffing everything into
   // the mousemove/touchmove function itself, to prevent performance degradation.
   // `this.reportUserActivity` simply sets this.userActivity_ to true, which

src/js/slider.js

@@ -50,6 +50,8 @@ vjs.Slider.prototype.createEl = function(type, props) {
   return vjs.Component.prototype.createEl.call(this, type, props);
 };
 
+vjs.Slider.prototype.listenToTouchMove = true;
+
 vjs.Slider.prototype.onMouseDown = function(event){
   event.preventDefault();
   vjs.blockTextSelection();
@@ -230,3 +232,5 @@ vjs.SliderHandle.prototype.createEl = function(type, props) {
 
   return vjs.Component.prototype.createEl.call(this, 'div', props);
 };
+
+vjs.SliderHandle.prototype.listenToTouchMove = true;