From 6438fb816097f65d17865540fe6e5e67d3064b99 Mon Sep 17 00:00:00 2001
From: Andy Niccolai <aniccolai@qualvu.com>
Date: Fri, 28 Jun 2013 12:22:05 -0600
Subject: [PATCH 1/8] Prevent control bar from attatching event listeners when
 disabled. Fixes #556

---
 src/js/control-bar/control-bar.js | 78 +++++++++++++++++--------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js
index 20510cd832..9e7e12fb86 100644
--- a/src/js/control-bar/control-bar.js
+++ b/src/js/control-bar/control-bar.js
@@ -9,50 +9,60 @@ vjs.ControlBar = vjs.Component.extend({
   init: function(player, options){
     vjs.Component.call(this, player, options);
 
-    if (!player.controls()) {
+    // Controls are always off
+    if (player.controls() === false) {
       this.disable();
+    // Controls are always on
+    } else if (player.controls() === true) {
+      this.setup();
+    // Controls fade when not in use
+    } else {
+      this.disable();
+      this.setup();
     }
+  }
+});
 
-    player.one('play', vjs.bind(this, function(){
-      var touchstart,
-        fadeIn = vjs.bind(this, this.fadeIn),
-        fadeOut = vjs.bind(this, this.fadeOut);
+vjs.ControlBar.prototype.setup = function(){
+  this.player_.one('play', vjs.bind(this, function(){
+    var touchstart,
+      fadeIn = vjs.bind(this, this.fadeIn),
+      fadeOut = vjs.bind(this, this.fadeOut);
 
-      this.fadeIn();
+    this.fadeIn();
 
-      if ( !('ontouchstart' in window) ) {
-        this.player_.on('mouseover', fadeIn);
-        this.player_.on('mouseout', fadeOut);
-        this.player_.on('pause', vjs.bind(this, this.lockShowing));
-        this.player_.on('play', vjs.bind(this, this.unlockShowing));
-      }
+    if ( !('ontouchstart' in window) ) {
+      this.player_.on('mouseover', fadeIn);
+      this.player_.on('mouseout', fadeOut);
+      this.player_.on('pause', vjs.bind(this, this.lockShowing));
+      this.player_.on('play', vjs.bind(this, this.unlockShowing));
+    }
 
+    touchstart = false;
+    this.player_.on('touchstart', function() {
+      touchstart = true;
+    });
+    this.player_.on('touchmove', function() {
       touchstart = false;
-      this.player_.on('touchstart', function() {
-        touchstart = true;
-      });
-      this.player_.on('touchmove', function() {
-        touchstart = false;
-      });
-      this.player_.on('touchend', vjs.bind(this, function(event) {
-        var idx;
-        if (touchstart) {
-          idx = this.el().className.search('fade-in');
-          if (idx !== -1) {
-            this.fadeOut();
-          } else {
-            this.fadeIn();
-          }
+    });
+    this.player_.on('touchend', vjs.bind(this, function(event) {
+      var idx;
+      if (touchstart) {
+        idx = this.el().className.search('fade-in');
+        if (idx !== -1) {
+          this.fadeOut();
+        } else {
+          this.fadeIn();
         }
-        touchstart = false;
+      }
+      touchstart = false;
 
-        if (!this.player_.paused()) {
-          event.preventDefault();
-        }
-      }));
+      if (!this.player_.paused()) {
+        event.preventDefault();
+      }
     }));
-  }
-});
+  }));
+}
 
 vjs.ControlBar.prototype.options_ = {
   loadEvent: 'play',

From a9d87b433fa3a4bbf402dc31d2a2d0eae97f6518 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Fri, 19 Jul 2013 20:19:50 -0700
Subject: [PATCH 2/8] Created user state events to aid in control bar hiding

---
 src/js/control-bar/control-bar.js |   6 +-
 src/js/player.js                  | 144 ++++++++++++++++++++++++++++++
 test/unit/control-bar.js          |   0
 3 files changed, 147 insertions(+), 3 deletions(-)
 create mode 100644 test/unit/control-bar.js

diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js
index 9e7e12fb86..c55f2db408 100644
--- a/src/js/control-bar/control-bar.js
+++ b/src/js/control-bar/control-bar.js
@@ -26,8 +26,8 @@ vjs.ControlBar = vjs.Component.extend({
 vjs.ControlBar.prototype.setup = function(){
   this.player_.one('play', vjs.bind(this, function(){
     var touchstart,
-      fadeIn = vjs.bind(this, this.fadeIn),
-      fadeOut = vjs.bind(this, this.fadeOut);
+        fadeIn = vjs.bind(this, this.fadeIn),
+        fadeOut = vjs.bind(this, this.fadeOut);
 
     this.fadeIn();
 
@@ -94,4 +94,4 @@ vjs.ControlBar.prototype.fadeIn = function(){
 vjs.ControlBar.prototype.fadeOut = function(){
   vjs.Component.prototype.fadeOut.call(this);
   this.player_.trigger('controlshidden');
-};
\ No newline at end of file
+};
diff --git a/src/js/player.js b/src/js/player.js
index 57ae3448a8..358212da2d 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -71,6 +71,8 @@ vjs.Player = vjs.Component.extend({
         this[key](val);
       }, this);
     }
+
+    this.listenForUserActivity();
   }
 });
 
@@ -861,6 +863,146 @@ vjs.Player.prototype.controls = function(controls){
 vjs.Player.prototype.error = function(){ return this.techGet('error'); };
 vjs.Player.prototype.ended = function(){ return this.techGet('ended'); };
 
+vjs.Player.prototype.userActive_ = false;
+vjs.Player.prototype.userActive = function(bool){
+  if (bool !== undefined) {
+    bool = !!bool;
+    if (bool !== this.userActive_) {
+      this.userActive_ = bool;
+      if (bool) {
+        this.removeClass('vjs-user-passive');
+        this.addClass('vjs-user-active');
+        this.trigger('useractive');
+        console.log('useractive');
+      } else {
+        this.removeClass('vjs-user-active');
+        this.addClass('vjs-user-passive');
+        this.trigger('userpassive');
+        console.log('userpassive');
+      }
+    }
+    return this;
+  }
+  return this.userActive_;
+};
+
+vjs.Player.prototype.listenForUserActivity = function(){
+  var activity, onActivity, activityCheck, inactivityTimeout,
+      touchstart, touchmove, touchtime, touchActiveInterval;
+
+  // When the player is first initialized, trigger activity so components
+  // like the control bar show themselves
+  activity = true;
+
+  // Anything considered deliberate user activity should set activity to true
+  onActivity = function(){
+    activity = true;
+  };
+
+  // When not on touch devices, any mouse movement will be considered
+  // user activity
+  if (!('ontouchstart' in window)) {
+    this.on('mousedown', onActivity);
+    this.on('mousemove', onActivity);
+  }
+
+  // On touch devices user activity gets a little more complicated.
+  // A tap can signal that a user has become active, or has become passive
+  // e.g. a quick tap on an iPhone movie should reveal the controls. Another
+  // quick tap should hide them again (signaling the user is in a passive
+  // viewing state)
+  //
+  // In addition to this, we still want the user to be considered passive after
+  // a few seconds of inactivity
+  touchstart = 0;
+  this.on('touchstart', function() {
+    // Record start time so we can detect a "touch and hold" vs. an immediate
+    // release. Touch and holds do not count as an active/passive toggle.
+    touchstart = new Date().getTime();
+
+    // If a user is already active, we want to continue to consider them active.
+    // If they're passive, we want to wait and see if this is a fast tap
+    // before considering them active again. (same as iOS behavior)
+    if (this.userActive_) {
+      activity = true;
+      // For as long as the they are touching the device, we consider them acitve
+      // even if they're not moving their finger. So we want to continue ot update
+      // that they are active
+      clearInterval(touchActiveInterval);
+      touchActiveInterval = setInterval(function(){
+        // Check for touchstart to make sure this insn't called after touchend
+        if (touchstart > 0) {
+          activity = true;
+        }
+      // Setting activity=true now and setting the interval to the same time
+      // as the activityCheck interval should ensure we never miss the
+      // next activityCheck
+      }, 250);
+    }
+  });
+
+  // When the touch ends, determine how we should update the user state
+  this.on('touchend', vjs.bind(this, function(event) {
+    // Measure how long the touch lasted
+    touchtime = new Date().getTime() - touchstart;
+    // Stop the interval that maintains activity if it's running
+    clearInterval(touchActiveInterval);
+    // Reset touchstart so we know a touch is no longer in process
+    touchstart = 0;
+    // If the user is already active we want this event to count towards their
+    // activity, no matter if this is a tap, touch and hold, or touch + move
+    if (this.userActive_) {
+      activity = true;
+    }
+
+    // The touch needs to be quick in order to consider it a tap (?). Otherwise
+    // it's a touch and hold which should not toggle the user active state
+    if (touchtime < 250) {
+      if (this.userActive_) {
+        // We're switching the state to passive manually, so erase any other
+        // activity
+        activity = false;
+        this.userActive(false);
+      } else {
+        // If the user was inactive and is now active we want to reset the
+        // inactivity timer
+        activity = true;
+        this.userActive(true);
+      }
+    }
+
+    // if (!this.paused()) {
+    //   event.preventDefault();
+    // }
+  }));
+
+  // Run an interval every 250 milliseconds instead of stuffing everything into
+  // the mousemove function itself, to prevent performance degradation.
+  // http://ejohn.org/blog/learning-from-twitter/
+  activityCheck = setInterval(vjs.bind(this, function() {
+    // Check to see if the mouse has been moved
+    if (activity) {
+      // Reset the activity tracker
+      activity = false;
+
+      // If the user state was passive, set the state to active
+      if (!this.userActive_) {
+        this.userActive(true);
+      }
+
+      // Clear any existing inactivity timeout to start the timer over
+      clearTimeout(inactivityTimeout);
+
+      // In X seconds, if no more activity has occurred (resetting this timer)
+      // the user will be considered passive
+      inactivityTimeout = setTimeout(vjs.bind(this, function() {
+        this.userActive(false);
+      }), 2000);
+      console.log('inactivityTimeout')
+    }
+  }), 250);
+};
+
 // Methods to add support for
 // networkState: function(){ return this.techCall('networkState'); },
 // readyState: function(){ return this.techCall('readyState'); },
@@ -928,3 +1070,5 @@ vjs.Player.prototype.ended = function(){ return this.techGet('ended'); };
   }
 
 })();
+
+
diff --git a/test/unit/control-bar.js b/test/unit/control-bar.js
new file mode 100644
index 0000000000..e69de29bb2

From ccabf6079c7d35e6fd2954d9607e102d2cd66d96 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Mon, 29 Jul 2013 14:55:16 -0700
Subject: [PATCH 3/8] Control bar overhaul to fix multiple issues. #556, #500,
 #374, #281, #403, #561, #441, #193

---
 src/css/video-js.less             | 136 +++++++++++++------
 src/js/big-play-button.js         |  10 +-
 src/js/button.js                  |   3 +-
 src/js/component.js               |  48 +++++++
 src/js/control-bar/control-bar.js |  63 ++-------
 src/js/lib.js                     |   1 +
 src/js/media/flash.js             |   2 +-
 src/js/media/html5.js             |  14 +-
 src/js/media/media.js             | 147 ++++++++++++++++----
 src/js/player.js                  | 216 +++++++++++++++---------------
 test/unit/component.js            |  18 +++
 test/unit/media.html5.js          |   6 +-
 test/unit/player.js               |  21 ++-
 13 files changed, 447 insertions(+), 238 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index d3cf525220..deac25116d 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -4,11 +4,11 @@ Version GENERATED_AT_BUILD
 Create your own skin at http://designer.videojs.com
 */
 
-// To customize the player skin, change the values of the variables or edit the 
+// To customize the player skin, change the values of the variables or edit the
 // CSS below.
 // (This file uses LESS. Learn more at http://lesscss.org/)
 
-// The base font size controls the size of everything, not just text. All 
+// The base font size controls the size of everything, not just text. All
 // diminensions use em-based sizes so that the scale along with the font size.
 // Try increasing it to 20px and see what happens.
 @base-font-size: 10px;
@@ -16,8 +16,8 @@ Create your own skin at http://designer.videojs.com
 // The main font color controls the color of the text and the icons (font icons)
 @main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff
 
-// The default color of control backgrounds is mostly black but with a little 
-// bit of blue so it can still be seen on all black video frames, which are 
+// The default color of control backgrounds is mostly black but with a little
+// bit of blue so it can still be seen on all black video frames, which are
 // common.
 @control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff
 @control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity
@@ -32,12 +32,12 @@ Create your own skin at http://designer.videojs.com
 @slider-background-color: #333333;
 @slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity
 
-// The "Big Play Button" is the play button that shows before the video plays. 
-// To center it set the align values to center and middle. The typical location 
+// The "Big Play Button" is the play button that shows before the video plays.
+// To center it set the align values to center and middle. The typical location
 // of the button is the center, but there is trend towards moving it to a corner
 // where it gets out of the way of valuable content in the poster image.
 @big-play-align: left; // left, center, or right
-@big-play-vertical-align: top; // top, middle, or bottom 
+@big-play-vertical-align: top; // top, middle, or bottom
 // The button colors match the control colors by default but you can customize
 // them by replace the variables (@control-bg-color) with your own color values.
 @big-play-bg-color: @control-bg-color;
@@ -58,9 +58,9 @@ Create your own skin at http://designer.videojs.com
 
 /* SKIN
 ================================================================================
-The main class name for all skin-specific styles. To make your own skin, 
-replace all occurances of 'vjs-default-skin' with a new name. Then add your new 
-skin name to your video tag instead of the default skin. 
+The main class name for all skin-specific styles. To make your own skin,
+replace all occurances of 'vjs-default-skin' with a new name. Then add your new
+skin name to your video tag instead of the default skin.
 e.g. <video class="video-js my-skin-name">
 */
 .vjs-default-skin {
@@ -98,7 +98,7 @@ The control icons are from a custom font. Each icon corresponds to a character
 @captions-icon: "\e008";
 
 /* Base UI Component Classes
--------------------------------------------------------------------------------- 
+--------------------------------------------------------------------------------
 */
 
 /* Slider - used for Volume bar and Seek bar */
@@ -141,13 +141,13 @@ The control icons are from a custom font. Each icon corresponds to a character
 
 /* Control Bar
 --------------------------------------------------------------------------------
-The default control bar that is a container for most of the controls. 
+The default control bar that is a container for most of the controls.
 */
 .vjs-default-skin .vjs-control-bar {
   /* Start hidden *///
   display: none;
   position: absolute;
-  /* Place control bar at the bottom of the player box/video. 
+  /* Place control bar at the bottom of the player box/video.
      If you want more margin below the control bar, add more height. *///
   bottom: 0;
   /* Use left/right to stretch to 100% width of player div *///
@@ -159,6 +159,34 @@ The default control bar that is a container for most of the controls.
   .background-color-with-alpha(@control-bg-color, @control-bg-alpha);
 }
 
+/* Show the control bar only once the video has started playing */
+.vjs-default-skin.vjs-has-started .vjs-control-bar {
+  display: block;
+  /* Visibility needed to make sure things hide in older browsers too. */
+  visibility: visible;
+  opacity: 1;
+
+  @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
+  .transition(@trans);
+}
+
+/* Hide the control bar when the video is playing and the user is passive  */
+.vjs-default-skin.vjs-has-started.vjs-user-passive.vjs-playing .vjs-control-bar {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+
+  @trans: visibility 1.5s, opacity 1.5s;
+  .transition(@trans);
+  /* Wait a moment before fading out the control bar */
+  // .transition-delay(2s);
+}
+
+.vjs-default-skin.vjs-native-controls .vjs-control-bar {
+  display: none;
+}
+
+
 /* General styles for individual controls. *///
 .vjs-default-skin .vjs-control {
   outline: none;
@@ -191,15 +219,15 @@ The default control bar that is a container for most of the controls.
   text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
 }
 
-.vjs-default-skin .vjs-control:focus { 
+.vjs-default-skin .vjs-control:focus {
   /*  outline: 0; *///
   /* keyboard-only users cannot see the focus on several of the UI elements when
   this is set to 0 */
 }
 
 /* Hide control text visually, but have it available for screenreaders */
-.vjs-default-skin .vjs-control-text { 
-  .hide-visually; 
+.vjs-default-skin .vjs-control-text {
+  .hide-visually;
 }
 
 /* Play/Pause
@@ -388,7 +416,7 @@ The default control bar that is a container for most of the controls.
 
 /* Big Play Button (play button at start)
 --------------------------------------------------------------------------------
-Positioning of the play button in the center or other corners can be done more 
+Positioning of the play button in the center or other corners can be done more
 easily in the skin designer. http://designer.videojs.com/
 */
 .vjs-default-skin .vjs-big-play-button {
@@ -420,6 +448,20 @@ easily in the skin designer. http://designer.videojs.com/
   .transition(all 0.4s);
 }
 
+/* Hide if controls are disabled */
+.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
+  display: none;
+}
+/* Hide when video starts playing */
+.vjs-default-skin.vjs-has-started .vjs-big-play-button {
+  display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.vjs-default-skin.vjs-native-controls .vjs-big-play-button {
+  display: none;
+}
+
 .vjs-default-skin:hover .vjs-big-play-button,
 .vjs-default-skin .vjs-big-play-button:focus {
   outline: 0;
@@ -609,18 +651,18 @@ REQUIRED STYLES (be careful overriding)
 ================================================================================
 When loading the player, the video tag is replaced with a DIV,
 that will hold the video tag or object tag for other playback methods.
-The div contains the video playback element (Flash or HTML5) and controls, 
+The div contains the video playback element (Flash or HTML5) and controls,
 and sets the width and height of the video.
 
-** If you want to add some kind of border/padding (e.g. a frame), or special 
-positioning, use another containing element. Otherwise you risk messing up 
+** If you want to add some kind of border/padding (e.g. a frame), or special
+positioning, use another containing element. Otherwise you risk messing up
 control positioning and full window mode. **
 */
 .video-js {
   background-color: #000;
   position: relative;
   padding: 0;
-  /* Start with 10px for base font size so other dimensions can be em based and 
+  /* Start with 10px for base font size so other dimensions can be em based and
      easily calculable. */
   font-size: @base-font-size;
   /* Allow poster to be vertially aligned. */
@@ -649,7 +691,7 @@ control positioning and full window mode. **
   height: 100%;
 }
 
-/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when 
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
    checking fullScreenEnabled. */
 .video-js:-moz-full-screen { position: absolute; }
 
@@ -675,9 +717,12 @@ body.vjs-full-window {
   _position: absolute;
 }
 .video-js:-webkit-full-screen {
-  width: 100% !important; 
+  width: 100% !important;
   height: 100% !important;
 }
+.video-js.vjs-fullscreen.vjs-user-passive {
+  cursor: none;
+}
 
 /* Poster Styles */
 .vjs-poster {
@@ -699,6 +744,11 @@ body.vjs-full-window {
   width: 100%;
 }
 
+/* Hide the poster when native controls are used otherwise it covers them */
+.video-js.vjs-native-controls .vjs-poster {
+  display: none;
+}
+
 /* Text Track Styles */
 /* Overall track holder for both captions and subtitles */
 .video-js .vjs-text-track-display {
@@ -751,9 +801,9 @@ body.vjs-full-window {
   visibility: visible;
 }
 
-// MIXINS 
+// MIXINS
 // =============================================================================
-// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules 
+// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
 // when needed.
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
@@ -813,7 +863,7 @@ body.vjs-full-window {
 .user-select (@string: none) {
   /* user-select *///
   -webkit-user-select: @string;
-     -moz-user-select: @string;  
+     -moz-user-select: @string;
       -ms-user-select: @string;
           user-select: @string;
 }
@@ -822,14 +872,14 @@ body.vjs-full-window {
 // http://h5bp.com/v
 .hide-visually () {
   /* hide-visually *///
-  border: 0; 
-  clip: rect(0 0 0 0); 
-  height: 1px; 
-  margin: -1px; 
-  overflow: hidden; 
-  padding: 0; 
-  position: 
-  absolute; 
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position:
+  absolute;
   width: 1px;
 }
 
@@ -882,27 +932,27 @@ body.vjs-full-window {
 // * We want this file to continue to be accessible by people who don't know
 //   LESS but know CSS. This means finding the balance between using the most
 //   valuable LESS features (e.g. variables) and keeping it looking like CSS.
-//   So it's best to avoid advanced LESS features like conditional statements. 
-//   (we're using one for the big play button position because that's a hot 
+//   So it's best to avoid advanced LESS features like conditional statements.
+//   (we're using one for the big play button position because that's a hot
 //   topic)
-// 
+//
 // * We care about the readability of the CSS output of LESS, which means we
 //   have to be careful about what features of LESS we use. (if you're building
 //   your own skin this may not apply)
-//     1. Comments inside of rules (strangely) have an extra line added after 
-//        them in the CSS output. To avoid this we can add a LESS comment after 
+//     1. Comments inside of rules (strangely) have an extra line added after
+//        them in the CSS output. To avoid this we can add a LESS comment after
 //        the CSS comment.
 //          /* comment *///
-// 
+//
 //     2. In a rule with nested rules, any comments outside of a rule are moved
 //        to the top of the parent rule. i.e. it might look like:
 //          /* title of rule 1 */
 //          /* title of rule 2 */
 //          .rule1 {}
 //          .rule2 {}
-//        This is why we aren't using nested rules inside of the 
+//        This is why we aren't using nested rules inside of the
 //        vjs-default-skin class.
 
-/* ----------------------------------------------------------------------------- 
-The original source of this file lives at 
+/* -----------------------------------------------------------------------------
+The original source of this file lives at
 https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js
index 5e4b3cf48c..2b86e095ea 100644
--- a/src/js/big-play-button.js
+++ b/src/js/big-play-button.js
@@ -11,11 +11,13 @@ vjs.BigPlayButton = vjs.Button.extend({
   init: function(player, options){
     vjs.Button.call(this, player, options);
 
-    if (!player.controls()) {
-      this.hide();
-    }
+    // Moving display state to CSS
 
-    player.on('play', vjs.bind(this, this.hide));
+    // if (!player.controls()) {
+    //   this.hide();
+    // }
+
+    // player.on('play', vjs.bind(this, this.hide));
     // player.on('ended', vjs.bind(this, this.show));
   }
 });
diff --git a/src/js/button.js b/src/js/button.js
index a4fc268345..7ce2d4d0ab 100644
--- a/src/js/button.js
+++ b/src/js/button.js
@@ -21,10 +21,11 @@ vjs.Button = vjs.Component.extend({
     var self = this;
     this.on('touchend', function(event) {
       if (touchstart) {
+        // TODO: make sure this clicks arent triggered anyway, makeing this called
+        // twice
         self.onClick(event);
       }
       event.preventDefault();
-      event.stopPropagation();
     });
 
     this.on('click', this.onClick);
diff --git a/src/js/component.js b/src/js/component.js
index f008db8c51..2be31548b3 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -693,3 +693,51 @@ vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
     // }
   }
 };
+
+/**
+ * Emit 'tap' events when touch events are supported. We're requireing them to
+ * be enabled because otherwise every component would have this extra overhead
+ * unnecessarily, on mobile devices where extra overhead is especially bad.
+ *
+ * This is being implemented so we can support taps on the video element
+ * toggling the controls.
+ */
+vjs.Component.prototype.emitTapEvents = function(){
+  var touchStart, touchTime, couldBeTap, noTap;
+
+  if ('ontouchstart' in window) {
+    // Track the start time so we can determine how long the touch lasted
+    touchStart = 0;
+
+    this.on('touchstart', function() {
+      // Record start time so we can detect a tap vs. "touch and hold"
+      touchStart = new Date().getTime();
+      // Reset couldBeTap tracking
+      couldBeTap = true;
+    });
+
+    noTap = function(){
+      couldBeTap = false;
+    };
+    this.on('touchmove', noTap);
+    this.on('touchleave', noTap);
+    this.on('touchcancel', noTap);
+
+    // When the touch ends, measure how long it took and trigger the appropriate
+    // event
+    this.on('touchend', function() {
+      // Proceed only if the touchmove/leave/cancel event didn't happen
+      if (couldBeTap === true) {
+        // Measure how long the touch lasted
+        touchTime = new Date().getTime() - touchStart;
+        // The touch needs to be quick in order to consider it a tap
+        if (touchTime < 250) {
+          this.trigger('tap');
+          // It may be good to copy the touchend event object and change the
+          // type to tap, if the other event properties aren't exact after
+          // vjs.fixEvent runs (e.g. event.target)
+        }
+      }
+    });
+  }
+};
diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js
index c55f2db408..2947e9fdcf 100644
--- a/src/js/control-bar/control-bar.js
+++ b/src/js/control-bar/control-bar.js
@@ -9,61 +9,20 @@ vjs.ControlBar = vjs.Component.extend({
   init: function(player, options){
     vjs.Component.call(this, player, options);
 
-    // Controls are always off
-    if (player.controls() === false) {
-      this.disable();
-    // Controls are always on
-    } else if (player.controls() === true) {
-      this.setup();
-    // Controls fade when not in use
-    } else {
-      this.disable();
-      this.setup();
-    }
+    // // Controls are always off
+    // if (player.controls() === false) {
+    //   this.disable();
+    // // Controls are always on
+    // } else if (player.controls() === true) {
+    //   this.setup();
+    // // Controls fade when not in use
+    // } else {
+    //   this.disable();
+    //   this.setup();
+    // }
   }
 });
 
-vjs.ControlBar.prototype.setup = function(){
-  this.player_.one('play', vjs.bind(this, function(){
-    var touchstart,
-        fadeIn = vjs.bind(this, this.fadeIn),
-        fadeOut = vjs.bind(this, this.fadeOut);
-
-    this.fadeIn();
-
-    if ( !('ontouchstart' in window) ) {
-      this.player_.on('mouseover', fadeIn);
-      this.player_.on('mouseout', fadeOut);
-      this.player_.on('pause', vjs.bind(this, this.lockShowing));
-      this.player_.on('play', vjs.bind(this, this.unlockShowing));
-    }
-
-    touchstart = false;
-    this.player_.on('touchstart', function() {
-      touchstart = true;
-    });
-    this.player_.on('touchmove', function() {
-      touchstart = false;
-    });
-    this.player_.on('touchend', vjs.bind(this, function(event) {
-      var idx;
-      if (touchstart) {
-        idx = this.el().className.search('fade-in');
-        if (idx !== -1) {
-          this.fadeOut();
-        } else {
-          this.fadeIn();
-        }
-      }
-      touchstart = false;
-
-      if (!this.player_.paused()) {
-        event.preventDefault();
-      }
-    }));
-  }));
-}
-
 vjs.ControlBar.prototype.options_ = {
   loadEvent: 'play',
   children: {
diff --git a/src/js/lib.js b/src/js/lib.js
index fde276e1b9..40393aed57 100644
--- a/src/js/lib.js
+++ b/src/js/lib.js
@@ -343,6 +343,7 @@ vjs.IS_OLD_ANDROID = vjs.IS_ANDROID && (/webkit/i).test(vjs.USER_AGENT) && vjs.A
 vjs.IS_FIREFOX = (/Firefox/i).test(vjs.USER_AGENT);
 vjs.IS_CHROME = (/Chrome/i).test(vjs.USER_AGENT);
 
+vjs.TOUCH_ENABLED = ('ontouchstart' in window);
 
 /**
  * Get an element's attribute values, as defined on the HTML tag
diff --git a/src/js/media/flash.js b/src/js/media/flash.js
index 4d0e5c017c..8e9a6808c4 100644
--- a/src/js/media/flash.js
+++ b/src/js/media/flash.js
@@ -183,7 +183,7 @@ vjs.Flash = vjs.MediaTechController.extend({
           tech.el_ = el;
 
           // Now that the element is ready, make a click on the swf play the video
-          vjs.on(el, 'click', tech.bind(tech.onClick));
+          // vjs.on(el, 'click', tech.bind(tech.onClick));
 
           // Make sure swf is actually ready. Sometimes the API isn't actually yet.
           vjs.Flash.checkReady(tech);
diff --git a/src/js/media/html5.js b/src/js/media/html5.js
index d9461c25d3..c6ed4e682b 100644
--- a/src/js/media/html5.js
+++ b/src/js/media/html5.js
@@ -46,8 +46,6 @@ vjs.Html5 = vjs.MediaTechController.extend({
       }
     });
 
-    this.on('click', this.onClick);
-
     this.setupTriggers();
 
     this.triggerReady();
@@ -96,6 +94,15 @@ vjs.Html5.prototype.createEl = function(){
     }
   }
 
+  if (vjs.TOUCH_ENABLED
+      && this.player().options()['nativeControlsForTouch'] !== false
+      && this.features.nativeControls) {
+
+    var controls = this.player().controls();
+    el.controls = controls;
+    this.player().nativeControls(controls);
+  }
+
   return el;
   // jenniisawesome = true;
 };
@@ -204,6 +211,9 @@ vjs.Html5.prototype.ended = function(){ return this.el_.ended; };
   // controller: function(){ return this.el_.controller; },
 vjs.Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; };
 
+vjs.Html5.prototype.controls = function(){ return this.el_.controls; }
+vjs.Html5.prototype.setControls = function(val){ this.el_.controls = !!val; }
+
 /* HTML5 Support Testing ---------------------------------------------------- */
 
 vjs.Html5.isSupported = function(){
diff --git a/src/js/media/media.js b/src/js/media/media.js
index e5dadc50aa..a0727d6d8b 100644
--- a/src/js/media/media.js
+++ b/src/js/media/media.js
@@ -1,5 +1,6 @@
 /**
- * @fileoverview Media Technology Controller - Base class for media playback technology controllers like Flash and HTML5
+ * @fileoverview Media Technology Controller - Base class for media playback
+ * technology controllers like Flash and HTML5
  */
 
 /**
@@ -13,37 +14,133 @@ vjs.MediaTechController = vjs.Component.extend({
   init: function(player, options, ready){
     vjs.Component.call(this, player, options, ready);
 
-    // Make playback element clickable
-    // this.addEvent('click', this.proxy(this.onClick));
+    var controlsListener = function(){
+      if (this.player().controls() && !this.player().nativeControls()) {
+        this.initListeners();
+      }
+    };
 
-    // player.triggerEvent('techready');
+    // Set up event listeners once the tech is ready and has an element to apply
+    // listeners to
+    this.ready(controlsListener);
+    this.on('controlsenabled', controlsListener);
+    this.on('controlsdisabled', this.removeListeners);
   }
 });
 
-// destroy: function(){},
-// createElement: function(){},
+/**
+ * Determine whether or not controls should be enabled on the video element
+ * Use native controls for iOS and Android by default until controls are more
+ * stable on those devices
+ *
+ * @return {Boolean} Controls enabled
+ * @private
+ */
+vjs.MediaTechController.prototype.usingNativeControls = function(){
+  var controls = false;
+  if (vjs.TOUCH_ENABLED
+      && this.nativeControlsAvailable !== false
+      && this.player().options()['nativeControlsForTouch'] !== false) {
+    controls = this.player().controls();
+  }
+  return controls;
+};
 
 /**
- * Handle a click on the media element. By default will play the media.
+ * Set up click and touch listeners for the playback element
+ * On desktops, a click on the video itself will toggle playback,
+ * on a mobile device a click on the video toggles controls.
+ * (toggling controls is done by toggling the user state between active and
+ * passive)
+ *
+ * A tap can signal that a user has become active, or has become passive
+ * e.g. a quick tap on an iPhone movie should reveal the controls. Another
+ * quick tap should hide them again (signaling the user is in a passive
+ * viewing state)
  *
- * On android browsers, having this toggle play state interferes with being
- * able to toggle the controls and toggling play state with the play button
+ * In addition to this, we still want the user to be considered passive after
+ * a few seconds of inactivity.
+ *
+ * Note: the only part of iOS interaction we can't mimic with this setup
+ * is a touch and hold on the video element counting as activity in order to
+ * keep the controls showing, but that shouldn't be an issue. A tap and hold on
+ * any controls will still keep the user active
  */
-vjs.MediaTechController.prototype.onClick = (function(){
-  if (vjs.IS_ANDROID) {
-    return function () {};
-  } else {
-    return function () {
-      if (this.player_.controls()) {
-        if (this.player_.paused()) {
-          this.player_.play();
-        } else {
-          this.player_.pause();
-        }
+vjs.MediaTechController.prototype.initListeners = function(){
+  var preventBubble, userWasActive;
+
+  if ('ontouchstart' in window) {
+    // Turn on component tap events
+    this.emitTapEvents();
+
+    this.on('tap', function(){
+      if (this.player_.userActive()) {
+        this.player_.userActive(false);
+      } else {
+        this.player_.userActive(true);
+      }
+    });
+
+    // We need to block touch events on the video element from bubbling up,
+    // otherwise they'll signal activity prematurely. The specific use case is
+    // when the video is playing and the controls have faded out. In this case
+    // only a tap (fast touch) should toggle the user active state and turn the
+    // controls back on. A touch and move or touch and hold should not trigger
+    // the controls (per iOS as an example at least)
+    //
+    // We always want to stop propagation on touchstart because touchstart
+    // at the player level starts the touchInProgress interval. We can still
+    // report activity on the other events, but won't let them bubble for
+    // consistency. We don't want to bubble a touchend without a touchstart.
+    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);
+  } else {
+    this.on('click', this.onClick);
+  }
+};
+
+vjs.MediaTechController.prototype.removeListeners = function(){
+  this.off('tap');
+  this.off('touchstart');
+  this.off('touchmove');
+  this.off('touchleave');
+  this.off('touchcancel');
+  this.off('touchend');
+  this.off('click');
+};
+
+/**
+ * Handle a click on the media element. By default will play the media.
+ */
+vjs.MediaTechController.prototype.onClick = function(){
+  // When controls are disabled a click should not toggle playback because
+  // the click is considered a control
+  if (this.player_.controls()) {
+    if (this.player_.paused()) {
+      this.player_.play();
+    } else {
+      this.player_.pause();
+    }
   }
-})();
+};
 
 vjs.MediaTechController.prototype.features = {
   volumeControl: true,
@@ -54,7 +151,11 @@ vjs.MediaTechController.prototype.features = {
   // Optional events that we can manually mimic with timers
   // currently not triggered by video-js-swf
   progressEvents: false,
-  timeupdateEvents: false
+  timeupdateEvents: false,
+
+  // Assume techs have native controls that can be used if
+  // needed. This won't be true for the video.js swf.
+  nativeControls: true
 };
 
 vjs.media = {};
@@ -63,7 +164,7 @@ vjs.media = {};
  * List of default API methods for any MediaTechController
  * @type {String}
  */
-vjs.media.ApiMethods = 'play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted'.split(',');
+vjs.media.ApiMethods = 'play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted,nativeControls'.split(',');
 // Create placeholder methods for each that warn when a method isn't supported by the current playback technology
 
 function createMethod(methodName){
diff --git a/src/js/player.js b/src/js/player.js
index 358212da2d..f7fe5c7534 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -24,22 +24,28 @@ vjs.Player = vjs.Component.extend({
     this.poster_ = options['poster'];
     // Set controls
     this.controls_ = options['controls'];
-    // Use native controls for iOS and Android by default
-    //  until controls are more stable on those devices.
-    if (options['customControlsOnMobile'] !== true && (vjs.IS_IOS || vjs.IS_ANDROID)) {
-      tag.controls = options['controls'];
-      this.controls_ = false;
-    } else {
-      // Original tag settings stored in options
-      // now remove immediately so native controls don't flash.
-      tag.controls = false;
-    }
+    // Original tag settings stored in options
+    // now remove immediately so native controls don't flash.
+    // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+    tag.controls = false;
 
     // Run base component initializing with new options.
     // Builds the element through createEl()
     // Inits and embeds any child components in opts
     vjs.Component.call(this, this, options, ready);
 
+    // Update controls className. Can't do this when the controls are initially
+    // set because the element doesn't exist yet.
+    if (this.controls()) {
+      this.addClass('vjs-controls-enabled');
+    } else {
+      this.addClass('vjs-controls-disabled');
+    }
+
+    if (vjs.TOUCH_ENABLED) {
+      this.addClass('vjs-touch-enabled');
+    }
+
     // Firstplay event implimentation. Not sold on the event yet.
     // Could probably just check currentTime==0?
     this.one('play', function(e){
@@ -379,6 +385,8 @@ vjs.Player.prototype.onFirstPlay = function(){
     if(this.options_['starttime']){
       this.currentTime(this.options_['starttime']);
     }
+
+    this.addClass('vjs-has-started');
 };
 
 vjs.Player.prototype.onPause = function(){
@@ -849,32 +857,84 @@ vjs.Player.prototype.controls_;
  * @param  {Boolean} controls Set controls to showing or not
  * @return {Boolean}    Controls are showing
  */
-vjs.Player.prototype.controls = function(controls){
-  if (controls !== undefined) {
+vjs.Player.prototype.controls = function(bool){
+  if (bool !== undefined) {
+    bool = !!bool; // force boolean
     // Don't trigger a change event unless it actually changed
-    if (this.controls_ !== controls) {
-      this.controls_ = !!controls; // force boolean
-      this.trigger('controlschange');
+    if (this.controls_ !== bool) {
+      this.controls_ = bool;
+      if (bool) {
+        this.removeClass('vjs-controls-disabled');
+        this.addClass('vjs-controls-enabled');
+        this.trigger('controlsenabled');
+      } else {
+        this.removeClass('vjs-controls-enabled');
+        this.addClass('vjs-controls-disabled');
+        this.trigger('controlsdisabled');
+      }
     }
   }
   return this.controls_;
 };
 
+vjs.Player.prototype.nativeControls_;
+vjs.Player.prototype.nativeControls = function(bool){
+  if (bool !== undefined) {
+    bool = !!bool; // force boolean
+    // Don't trigger a change event unless it actually changed
+    if (this.nativeControls_ !== bool) {
+      this.nativeControls_ = bool;
+      if (bool) {
+        this.addClass('vjs-native-controls');
+      } else {
+        this.removeClass('vjs-native-controls');
+      }
+    }
+  }
+  return this.nativeControls_;
+};
+
 vjs.Player.prototype.error = function(){ return this.techGet('error'); };
 vjs.Player.prototype.ended = function(){ return this.techGet('ended'); };
 
-vjs.Player.prototype.userActive_ = false;
+// When the player is first initialized, trigger activity so components
+// like the control bar show themselves if needed
+vjs.Player.prototype.userActivity_ = true;
+vjs.Player.prototype.reportUserActivity = function(event){
+  this.userActivity_ = true;
+};
+
+vjs.Player.prototype.userActive_ = true;
 vjs.Player.prototype.userActive = function(bool){
   if (bool !== undefined) {
     bool = !!bool;
     if (bool !== this.userActive_) {
       this.userActive_ = bool;
       if (bool) {
+        // If the user was inactive and is now active we want to reset the
+        // inactivity timer
+        this.userActivity_ = true;
         this.removeClass('vjs-user-passive');
         this.addClass('vjs-user-active');
         this.trigger('useractive');
         console.log('useractive');
       } else {
+        // We're switching the state to passive manually, so erase any other
+        // activity
+        this.userActivity_ = false;
+
+        // Chrome/Safari/IE have bugs where when you change the cursor it can
+        // trigger a mousemove event. This causes an issue when you're hiding
+        // the cursor when the user is inactive, and a mousemove signals user
+        // activity. Making it impossible to go into passive mode. Specifically
+        // this happens in fullscreen when we really need to hide the cursor.
+        //
+        // When this gets resolved in ALL browsers it can be removed
+        // https://code.google.com/p/chromium/issues/detail?id=103041
+        this.tech.one('mousemove', function(e){
+          e.stopPropagation();
+          e.preventDefault();
+        });
         this.removeClass('vjs-user-active');
         this.addClass('vjs-user-passive');
         this.trigger('userpassive');
@@ -887,106 +947,53 @@ vjs.Player.prototype.userActive = function(bool){
 };
 
 vjs.Player.prototype.listenForUserActivity = function(){
-  var activity, onActivity, activityCheck, inactivityTimeout,
-      touchstart, touchmove, touchtime, touchActiveInterval;
-
-  // When the player is first initialized, trigger activity so components
-  // like the control bar show themselves
-  activity = true;
-
-  // Anything considered deliberate user activity should set activity to true
-  onActivity = function(){
-    activity = true;
-  };
-
-  // When not on touch devices, any mouse movement will be considered
-  // user activity
-  if (!('ontouchstart' in window)) {
-    this.on('mousedown', onActivity);
-    this.on('mousemove', onActivity);
-  }
-
-  // On touch devices user activity gets a little more complicated.
-  // A tap can signal that a user has become active, or has become passive
-  // e.g. a quick tap on an iPhone movie should reveal the controls. Another
-  // quick tap should hide them again (signaling the user is in a passive
-  // viewing state)
-  //
-  // In addition to this, we still want the user to be considered passive after
-  // a few seconds of inactivity
-  touchstart = 0;
-  this.on('touchstart', function() {
-    // Record start time so we can detect a "touch and hold" vs. an immediate
-    // release. Touch and holds do not count as an active/passive toggle.
-    touchstart = new Date().getTime();
-
-    // If a user is already active, we want to continue to consider them active.
-    // If they're passive, we want to wait and see if this is a fast tap
-    // before considering them active again. (same as iOS behavior)
-    if (this.userActive_) {
-      activity = true;
-      // For as long as the they are touching the device, we consider them acitve
-      // even if they're not moving their finger. So we want to continue ot update
-      // that they are active
-      clearInterval(touchActiveInterval);
-      touchActiveInterval = setInterval(function(){
-        // Check for touchstart to make sure this insn't called after touchend
-        if (touchstart > 0) {
-          activity = true;
-        }
-      // Setting activity=true now and setting the interval to the same time
-      // as the activityCheck interval should ensure we never miss the
+  var activityCheck, inactivityTimeout, touchInProgress;
+
+  // Consider touch events that bubble up to be activity
+  if ('ontouchstart' in window) {
+    this.on('touchstart', function() {
+      this.reportUserActivity();
+      // For as long as the they are touching the device, we consider them
+      // active even if they're not moving their finger. So we want to
+      // continue to update that they are active
+      clearInterval(touchInProgress);
+      // Setting userActivity=true now and setting the interval to the same time
+      // as the activityCheck interval (250) should ensure we never miss the
       // next activityCheck
-      }, 250);
-    }
-  });
+      touchInProgress = setInterval(vjs.bind(this, function(){
+        this.reportUserActivity();
+      }), 250);
+      // touchInProgress = setInterval(vjs.bind(this, this.reportUserActivity), 250);
+    });
 
-  // When the touch ends, determine how we should update the user state
-  this.on('touchend', vjs.bind(this, function(event) {
-    // Measure how long the touch lasted
-    touchtime = new Date().getTime() - touchstart;
-    // Stop the interval that maintains activity if it's running
-    clearInterval(touchActiveInterval);
-    // Reset touchstart so we know a touch is no longer in process
-    touchstart = 0;
-    // If the user is already active we want this event to count towards their
-    // activity, no matter if this is a tap, touch and hold, or touch + move
-    if (this.userActive_) {
-      activity = true;
-    }
+    this.on('touchmove', this.reportUserActivity);
 
-    // The touch needs to be quick in order to consider it a tap (?). Otherwise
-    // it's a touch and hold which should not toggle the user active state
-    if (touchtime < 250) {
-      if (this.userActive_) {
-        // We're switching the state to passive manually, so erase any other
-        // activity
-        activity = false;
-        this.userActive(false);
-      } else {
-        // If the user was inactive and is now active we want to reset the
-        // inactivity timer
-        activity = true;
-        this.userActive(true);
-      }
-    }
-
-    // if (!this.paused()) {
-    //   event.preventDefault();
-    // }
-  }));
+    this.on('touchend', function(event) {
+      // Stop the interval that maintains activity if it's running
+      clearInterval(touchInProgress);
+      this.reportUserActivity();
+    });
+  } else {
+    // When not on touch devices, any mouse movement will be considered
+    // user activity
+    this.on('mousedown', this.reportUserActivity);
+    this.on('mousemove', this.reportUserActivity);
+    // Listen for keyboard navigation
+    this.on('keydown', this.reportUserActivity);
+    this.on('keyup', this.reportUserActivity);
+  }
 
   // Run an interval every 250 milliseconds instead of stuffing everything into
   // the mousemove function itself, to prevent performance degradation.
   // http://ejohn.org/blog/learning-from-twitter/
   activityCheck = setInterval(vjs.bind(this, function() {
     // Check to see if the mouse has been moved
-    if (activity) {
+    if (this.userActivity_) {
       // Reset the activity tracker
-      activity = false;
+      this.userActivity_ = false;
 
       // If the user state was passive, set the state to active
-      if (!this.userActive_) {
+      if (!this.userActive()) {
         this.userActive(true);
       }
 
@@ -998,7 +1005,6 @@ vjs.Player.prototype.listenForUserActivity = function(){
       inactivityTimeout = setTimeout(vjs.bind(this, function() {
         this.userActive(false);
       }), 2000);
-      console.log('inactivityTimeout')
     }
   }), 250);
 };
diff --git a/test/unit/component.js b/test/unit/component.js
index ef536805c2..b6ea782281 100644
--- a/test/unit/component.js
+++ b/test/unit/component.js
@@ -221,3 +221,21 @@ test('should use a defined content el for appending children', function(){
   ok(comp.el().childNodes[0]['id'] === 'contentEl', 'Content El should still exist');
   ok(comp.el().childNodes[0].childNodes[0] !== child.el(), 'Child el should be removed.');
 });
+
+test('should emit a tap event', function(){
+  expect(1);
+  var comp = new vjs.Component(getFakePlayer(), {});
+
+  comp.emitTapEvents();
+  comp.on('tap', function(){
+    ok(true, 'Tap event emitted');
+  });
+  comp.trigger('touchstart');
+  comp.trigger('touchend');
+
+  // This second test should not trigger another tap event because
+  // a touchmove is happening
+  comp.trigger('touchstart');
+  comp.trigger('touchmove');
+  comp.trigger('touchend');
+});
diff --git a/test/unit/media.html5.js b/test/unit/media.html5.js
index 07c6e6a31b..c70853f08c 100644
--- a/test/unit/media.html5.js
+++ b/test/unit/media.html5.js
@@ -21,10 +21,14 @@ test('should re-link the player if the tech is moved', function(){
   var player, tech, el;
   el = document.createElement('div');
   el.innerHTML = '<div />';
+
   player = {
     id: function(){ return 'id'; },
     el: function(){ return el; },
     options_: {},
+    options: function(){ return {}; },
+    controls: function(){ return false; },
+    nativeControls: function(){ return false; },
     ready: function(){}
   };
   tech = new vjs.Html5(player, {});
@@ -32,4 +36,4 @@ test('should re-link the player if the tech is moved', function(){
   tech.createEl();
 
   strictEqual(player, tech.el()['player']);
-});
\ No newline at end of file
+});
diff --git a/test/unit/player.js b/test/unit/player.js
index 18fb8d0e26..9c259c4eda 100644
--- a/test/unit/player.js
+++ b/test/unit/player.js
@@ -211,20 +211,29 @@ test('should be able to initialize player twice on the same tag using string ref
   player.dispose();
 });
 
-test('should set controls and trigger event', function() {
-  expect(3);
+test('should set controls and trigger events', function() {
+  expect(6);
 
   var player = PlayerTest.makePlayer({ 'controls': false });
   ok(player.controls() === false, 'controls set through options');
+  var hasDisabledClass = player.el().className.indexOf('vjs-controls-disabled');
+  ok(hasDisabledClass !== -1, 'Disabled class added to player');
+
   player.controls(true);
   ok(player.controls() === true, 'controls updated');
+  var hasEnabledClass = player.el().className.indexOf('vjs-controls-enabled');
+  ok(hasEnabledClass !== -1, 'Disabled class added to player');
 
-  player.on('controlschange', function(){
-    ok(true, 'controlschange fired once');
+  player.on('controlsenabled', function(){
+    ok(true, 'enabled fired once');
+  });
+  player.on('controlsdisabled', function(){
+    ok(true, 'disabled fired once');
   });
   player.controls(false);
-  // Check for unnecessary controlschange events
-  player.controls(false);
+  player.controls(true);
+  // Check for unnecessary events
+  player.controls(true);
 
   player.dispose();
 });

From 5de13b680ee9b75b703ed912cbc8eeb93ce7a5c8 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Tue, 30 Jul 2013 17:54:22 -0700
Subject: [PATCH 4/8] Control bar updates to fix #561 and fix #281

---
 src/css/video-js.less    | 19 +++++++++++------
 src/js/media/html5.js    | 26 ++++++++++++++++--------
 src/js/media/media.js    | 42 +++++++++++++++++++-------------------
 src/js/player.js         | 44 +++++++++++++++++++++++++++++-----------
 src/js/poster.js         |  5 ++++-
 test/unit/media.html5.js |  3 ++-
 6 files changed, 89 insertions(+), 50 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index deac25116d..3f2d248ceb 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -12,6 +12,7 @@ Create your own skin at http://designer.videojs.com
 // diminensions use em-based sizes so that the scale along with the font size.
 // Try increasing it to 20px and see what happens.
 @base-font-size: 10px;
+@touch-device-font-size: 15px;
 
 // The main font color controls the color of the text and the icons (font icons)
 @main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff
@@ -176,13 +177,15 @@ The default control bar that is a container for most of the controls.
   visibility: hidden;
   opacity: 0;
 
-  @trans: visibility 1.5s, opacity 1.5s;
+  @trans: visibility 1.0s, opacity 1.0s;
   .transition(@trans);
-  /* Wait a moment before fading out the control bar */
-  // .transition-delay(2s);
 }
 
-.vjs-default-skin.vjs-native-controls .vjs-control-bar {
+.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
+  display: none;
+}
+
+.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
   display: none;
 }
 
@@ -458,7 +461,7 @@ easily in the skin designer. http://designer.videojs.com/
 }
 /* Hide on mobile devices. Remove when we stop using native controls
     by default on mobile  */
-.vjs-default-skin.vjs-native-controls .vjs-big-play-button {
+.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
   display: none;
 }
 
@@ -681,6 +684,10 @@ control positioning and full window mode. **
   .user-select(none);
 }
 
+.video-js.vjs-touch-enabled {
+  font-size: 15px;
+}
+
 /* Playback technology elements expand to the width/height of the containing div
     <video> or <object> */
 .video-js .vjs-tech {
@@ -745,7 +752,7 @@ body.vjs-full-window {
 }
 
 /* Hide the poster when native controls are used otherwise it covers them */
-.video-js.vjs-native-controls .vjs-poster {
+.video-js.vjs-using-native-controls .vjs-poster {
   display: none;
 }
 
diff --git a/src/js/media/html5.js b/src/js/media/html5.js
index c6ed4e682b..b9fd8f3705 100644
--- a/src/js/media/html5.js
+++ b/src/js/media/html5.js
@@ -35,6 +35,23 @@ vjs.Html5 = vjs.MediaTechController.extend({
       this.el_.src = source.src;
     }
 
+    // Determine if native controls should be used
+    if (vjs.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] !== false) {
+      // If the player controls are enabled turn on the native controls
+      this.setControls(this.player().controls());
+
+      // Update the native controls when player controls state is updated
+      player.on('controlsenabled', vjs.bind(this, function(){
+        this.setControls(true);
+      }));
+      player.on('controlsdisabled', vjs.bind(this, function(){
+        this.setControls(false);
+      }));
+
+      // Update the state of the player to using native controls
+      this.player().useNativeControls(true);
+    }
+
     // Chrome and Safari both have issues with autoplay.
     // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
     // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
@@ -94,15 +111,6 @@ vjs.Html5.prototype.createEl = function(){
     }
   }
 
-  if (vjs.TOUCH_ENABLED
-      && this.player().options()['nativeControlsForTouch'] !== false
-      && this.features.nativeControls) {
-
-    var controls = this.player().controls();
-    el.controls = controls;
-    this.player().nativeControls(controls);
-  }
-
   return el;
   // jenniisawesome = true;
 };
diff --git a/src/js/media/media.js b/src/js/media/media.js
index a0727d6d8b..964ed6292e 100644
--- a/src/js/media/media.js
+++ b/src/js/media/media.js
@@ -15,7 +15,7 @@ vjs.MediaTechController = vjs.Component.extend({
     vjs.Component.call(this, player, options, ready);
 
     var controlsListener = function(){
-      if (this.player().controls() && !this.player().nativeControls()) {
+      if (this.player().controls() && !this.player().useNativeControls()) {
         this.initListeners();
       }
     };
@@ -23,8 +23,8 @@ vjs.MediaTechController = vjs.Component.extend({
     // Set up event listeners once the tech is ready and has an element to apply
     // listeners to
     this.ready(controlsListener);
-    this.on('controlsenabled', controlsListener);
-    this.on('controlsdisabled', this.removeListeners);
+    this.player().on('controlsenabled', vjs.bind(this, controlsListener));
+    this.player().on('controlsdisabled', vjs.bind(this, this.removeListeners));
   }
 });
 
@@ -63,24 +63,13 @@ vjs.MediaTechController.prototype.usingNativeControls = function(){
  *
  * Note: the only part of iOS interaction we can't mimic with this setup
  * is a touch and hold on the video element counting as activity in order to
- * keep the controls showing, but that shouldn't be an issue. A tap and hold on
+ * keep the controls showing, but that shouldn't be an issue. A touch and hold on
  * any controls will still keep the user active
  */
 vjs.MediaTechController.prototype.initListeners = function(){
   var preventBubble, userWasActive;
 
   if ('ontouchstart' in window) {
-    // Turn on component tap events
-    this.emitTapEvents();
-
-    this.on('tap', function(){
-      if (this.player_.userActive()) {
-        this.player_.userActive(false);
-      } else {
-        this.player_.userActive(true);
-      }
-    });
-
     // We need to block touch events on the video element from bubbling up,
     // otherwise they'll signal activity prematurely. The specific use case is
     // when the video is playing and the controls have faded out. In this case
@@ -112,12 +101,26 @@ vjs.MediaTechController.prototype.initListeners = function(){
     this.on('touchleave', preventBubble);
     this.on('touchcancel', preventBubble);
     this.on('touchend', preventBubble);
+
+    // Turn on component tap events
+    this.emitTapEvents();
+
+    // The tap listener needs to come after the touchend listener because the tap
+    // listener cancels out any reportedUserActivity when setting userActive(false)
+    this.on('tap', function(){
+      if (this.player_.userActive()) {
+        this.player_.userActive(false);
+      } else {
+        this.player_.userActive(true);
+      }
+    });
   } else {
     this.on('click', this.onClick);
   }
 };
 
 vjs.MediaTechController.prototype.removeListeners = function(){
+  console.log('removeListeners');
   this.off('tap');
   this.off('touchstart');
   this.off('touchmove');
@@ -131,6 +134,7 @@ vjs.MediaTechController.prototype.removeListeners = function(){
  * Handle a click on the media element. By default will play the media.
  */
 vjs.MediaTechController.prototype.onClick = function(){
+  console.log('onClick');
   // When controls are disabled a click should not toggle playback because
   // the click is considered a control
   if (this.player_.controls()) {
@@ -151,11 +155,7 @@ vjs.MediaTechController.prototype.features = {
   // Optional events that we can manually mimic with timers
   // currently not triggered by video-js-swf
   progressEvents: false,
-  timeupdateEvents: false,
-
-  // Assume techs have native controls that can be used if
-  // needed. This won't be true for the video.js swf.
-  nativeControls: true
+  timeupdateEvents: false
 };
 
 vjs.media = {};
@@ -164,7 +164,7 @@ vjs.media = {};
  * List of default API methods for any MediaTechController
  * @type {String}
  */
-vjs.media.ApiMethods = 'play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted,nativeControls'.split(',');
+vjs.media.ApiMethods = 'play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted'.split(',');
 // Create placeholder methods for each that warn when a method isn't supported by the current playback technology
 
 function createMethod(methodName){
diff --git a/src/js/player.js b/src/js/player.js
index f7fe5c7534..29a92b5ece 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -109,6 +109,8 @@ vjs.Player.prototype.dispose = function(){
 
   if (this.tech) { this.tech.dispose(); }
 
+  clearInterval(this.activityCheck);
+
   // Component dispose
   vjs.Component.prototype.dispose.call(this);
 };
@@ -873,25 +875,41 @@ vjs.Player.prototype.controls = function(bool){
         this.trigger('controlsdisabled');
       }
     }
+    return this;
   }
   return this.controls_;
 };
 
-vjs.Player.prototype.nativeControls_;
-vjs.Player.prototype.nativeControls = function(bool){
+vjs.Player.prototype.useNativeControls_;
+
+/**
+ * Toggle native controls on/off. Native controls are the controls built into
+ * devices (e.g. default iPhone controls), Flash, or other techs
+ * (e.g. Vimeo Controls)
+ *
+ * **This should only be set by the current tech, because only the tech knows
+ * if it can support native controls**
+ *
+ * @param  {Boolean} bool    True signals that native controls are on
+ * @return {vjs.Player}      Returns the player
+ */
+vjs.Player.prototype.useNativeControls = function(bool){
   if (bool !== undefined) {
     bool = !!bool; // force boolean
     // Don't trigger a change event unless it actually changed
-    if (this.nativeControls_ !== bool) {
-      this.nativeControls_ = bool;
+    if (this.useNativeControls_ !== bool) {
+      this.useNativeControls_ = bool;
       if (bool) {
-        this.addClass('vjs-native-controls');
+        this.addClass('vjs-using-native-controls');
+        this.trigger('usingnativecontrols');
       } else {
-        this.removeClass('vjs-native-controls');
+        this.removeClass('vjs-using-native-controls');
+        this.trigger('usingcustomcontrols');
       }
     }
+    return this;
   }
-  return this.nativeControls_;
+  return this.useNativeControls_;
 };
 
 vjs.Player.prototype.error = function(){ return this.techGet('error'); };
@@ -917,7 +935,6 @@ vjs.Player.prototype.userActive = function(bool){
         this.removeClass('vjs-user-passive');
         this.addClass('vjs-user-active');
         this.trigger('useractive');
-        console.log('useractive');
       } else {
         // We're switching the state to passive manually, so erase any other
         // activity
@@ -938,7 +955,6 @@ vjs.Player.prototype.userActive = function(bool){
         this.removeClass('vjs-user-active');
         this.addClass('vjs-user-passive');
         this.trigger('userpassive');
-        console.log('userpassive');
       }
     }
     return this;
@@ -947,7 +963,7 @@ vjs.Player.prototype.userActive = function(bool){
 };
 
 vjs.Player.prototype.listenForUserActivity = function(){
-  var activityCheck, inactivityTimeout, touchInProgress;
+  var inactivityTimeout, touchInProgress;
 
   // Consider touch events that bubble up to be activity
   if ('ontouchstart' in window) {
@@ -986,7 +1002,7 @@ vjs.Player.prototype.listenForUserActivity = function(){
   // Run an interval every 250 milliseconds instead of stuffing everything into
   // the mousemove function itself, to prevent performance degradation.
   // http://ejohn.org/blog/learning-from-twitter/
-  activityCheck = setInterval(vjs.bind(this, function() {
+  this.activityCheck = setInterval(vjs.bind(this, function() {
     // Check to see if the mouse has been moved
     if (this.userActivity_) {
       // Reset the activity tracker
@@ -1003,7 +1019,11 @@ vjs.Player.prototype.listenForUserActivity = function(){
       // In X seconds, if no more activity has occurred (resetting this timer)
       // the user will be considered passive
       inactivityTimeout = setTimeout(vjs.bind(this, function() {
-        this.userActive(false);
+        // Protect against the case where the inactivity timeout can trigger
+        // before the next user activity is picked up by the activityCheck loop.
+        if (!this.userActivity_) {
+          this.userActive(false);
+        }
       }), 2000);
     }
   }), 250);
diff --git a/src/js/poster.js b/src/js/poster.js
index 761ddc0d4c..1b8d6d6567 100644
--- a/src/js/poster.js
+++ b/src/js/poster.js
@@ -40,5 +40,8 @@ vjs.PosterImage.prototype.createEl = function(){
 };
 
 vjs.PosterImage.prototype.onClick = function(){
-  this.player_.play();
+  // Only accept clicks when controls are enabled
+  if (this.player().controls()) {
+    this.player_.play();
+  }
 };
diff --git a/test/unit/media.html5.js b/test/unit/media.html5.js
index c70853f08c..f1b59d02a6 100644
--- a/test/unit/media.html5.js
+++ b/test/unit/media.html5.js
@@ -28,7 +28,8 @@ test('should re-link the player if the tech is moved', function(){
     options_: {},
     options: function(){ return {}; },
     controls: function(){ return false; },
-    nativeControls: function(){ return false; },
+    useNativeControls: function(){ return false; },
+    on: function(){ return this; },
     ready: function(){}
   };
   tech = new vjs.Html5(player, {});

From a95cd8b4d497e9311605b791f68649a0050fc2cc Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Wed, 31 Jul 2013 13:57:29 -0700
Subject: [PATCH 5/8] Fixed the tap event test for non-touch browsers

---
 src/js/component.js    | 2 +-
 src/js/media/media.js  | 4 +---
 src/js/player.js       | 2 +-
 test/unit/component.js | 8 ++++++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/js/component.js b/src/js/component.js
index 2be31548b3..73870d49d6 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -705,7 +705,7 @@ vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
 vjs.Component.prototype.emitTapEvents = function(){
   var touchStart, touchTime, couldBeTap, noTap;
 
-  if ('ontouchstart' in window) {
+  if (vjs.TOUCH_ENABLED) {
     // Track the start time so we can determine how long the touch lasted
     touchStart = 0;
 
diff --git a/src/js/media/media.js b/src/js/media/media.js
index 964ed6292e..b99cea2130 100644
--- a/src/js/media/media.js
+++ b/src/js/media/media.js
@@ -69,7 +69,7 @@ vjs.MediaTechController.prototype.usingNativeControls = function(){
 vjs.MediaTechController.prototype.initListeners = function(){
   var preventBubble, userWasActive;
 
-  if ('ontouchstart' in window) {
+  if (vjs.TOUCH_ENABLED) {
     // We need to block touch events on the video element from bubbling up,
     // otherwise they'll signal activity prematurely. The specific use case is
     // when the video is playing and the controls have faded out. In this case
@@ -120,7 +120,6 @@ vjs.MediaTechController.prototype.initListeners = function(){
 };
 
 vjs.MediaTechController.prototype.removeListeners = function(){
-  console.log('removeListeners');
   this.off('tap');
   this.off('touchstart');
   this.off('touchmove');
@@ -134,7 +133,6 @@ vjs.MediaTechController.prototype.removeListeners = function(){
  * Handle a click on the media element. By default will play the media.
  */
 vjs.MediaTechController.prototype.onClick = function(){
-  console.log('onClick');
   // When controls are disabled a click should not toggle playback because
   // the click is considered a control
   if (this.player_.controls()) {
diff --git a/src/js/player.js b/src/js/player.js
index 29a92b5ece..5cc0b351e9 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -966,7 +966,7 @@ vjs.Player.prototype.listenForUserActivity = function(){
   var inactivityTimeout, touchInProgress;
 
   // Consider touch events that bubble up to be activity
-  if ('ontouchstart' in window) {
+  if (vjs.TOUCH_ENABLED) {
     this.on('touchstart', function() {
       this.reportUserActivity();
       // For as long as the they are touching the device, we consider them
diff --git a/test/unit/component.js b/test/unit/component.js
index b6ea782281..ff88ae4a5a 100644
--- a/test/unit/component.js
+++ b/test/unit/component.js
@@ -224,6 +224,11 @@ test('should use a defined content el for appending children', function(){
 
 test('should emit a tap event', function(){
   expect(1);
+
+  // Fake touch support. Real touch support isn't needed for this test.
+  var origTouch = vjs.TOUCH_ENABLED;
+  vjs.TOUCH_ENABLED = true;
+
   var comp = new vjs.Component(getFakePlayer(), {});
 
   comp.emitTapEvents();
@@ -238,4 +243,7 @@ test('should emit a tap event', function(){
   comp.trigger('touchstart');
   comp.trigger('touchmove');
   comp.trigger('touchend');
+
+  // Reset to orignial value
+  vjs.TOUCH_ENABLED = origTouch;
 });

From ceea01f9ea7ccdb8fa686549429dc9be828693a5 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Thu, 1 Aug 2013 12:49:11 -0700
Subject: [PATCH 6/8] Cleaned up unneeded code and wrote tests for new
 additions

---
 src/css/video-js.less             | 20 ---------
 src/js/big-play-button.js         | 24 ++--------
 src/js/button.js                  |  6 +--
 src/js/component.js               | 27 ------------
 src/js/control-bar/control-bar.js | 29 +-----------
 src/js/exports.js                 |  3 +-
 src/js/media/flash.js             |  6 ---
 src/js/media/html5.js             | 69 +++++++++++++++--------------
 src/js/media/media.js             | 45 +++++++++++++------
 src/js/player.js                  | 10 ++---
 test/unit/api.js                  |  3 +-
 test/unit/media.html5.js          |  2 +-
 test/unit/player.js               | 73 +++++++++++++++++++++++++++++++
 13 files changed, 158 insertions(+), 159 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 3f2d248ceb..4f8f22cad4 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -779,26 +779,6 @@ body.vjs-full-window {
 .video-js .vjs-captions { color: #fc6 /* Captions are yellow */; }
 .vjs-tt-cue { display: block; }
 
-/* Fading sytles, used to fade control bar. */
-.vjs-fade-in {
-  display: block !important;
-  /* Visibility needed to make sure things hide in older browsers too. */
-  visibility: visible;
-  opacity: 1;
-
-  @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
-  .transition(@trans);
-}
-.vjs-fade-out {
-  display: block !important;
-  visibility: hidden;
-  opacity: 0;
-
-  @trans: visibility 1.5s, opacity 1.5s;
-  .transition(@trans);
-  /* Wait a moment before fading out the control bar */
-  .transition-delay(2s);
-}
 /* Hide disabled or unsupported controls */
 .vjs-default-skin .vjs-hidden { display: none; }
 
diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js
index 2b86e095ea..caa086cf13 100644
--- a/src/js/big-play-button.js
+++ b/src/js/big-play-button.js
@@ -1,26 +1,13 @@
 /* Big Play Button
 ================================================================================ */
 /**
- * Initial play button. Shows before the video has played.
+ * Initial play button. Shows before the video has played. The hiding of the
+ * big play button is done via CSS and player states.
  * @param {vjs.Player|Object} player
  * @param {Object=} options
  * @constructor
  */
-vjs.BigPlayButton = vjs.Button.extend({
-  /** @constructor */
-  init: function(player, options){
-    vjs.Button.call(this, player, options);
-
-    // Moving display state to CSS
-
-    // if (!player.controls()) {
-    //   this.hide();
-    // }
-
-    // player.on('play', vjs.bind(this, this.hide));
-    // player.on('ended', vjs.bind(this, this.show));
-  }
-});
+vjs.BigPlayButton = vjs.Button.extend();
 
 vjs.BigPlayButton.prototype.createEl = function(){
   return vjs.Button.prototype.createEl.call(this, 'div', {
@@ -31,10 +18,5 @@ vjs.BigPlayButton.prototype.createEl = function(){
 };
 
 vjs.BigPlayButton.prototype.onClick = function(){
-  // Go back to the beginning if big play button is showing at the end.
-  // Have to check for current time otherwise it might throw a 'not ready' error.
-  //if(this.player_.currentTime()) {
-    //this.player_.currentTime(0);
-  //}
   this.player_.play();
 };
diff --git a/src/js/button.js b/src/js/button.js
index 7ce2d4d0ab..1cf168eccc 100644
--- a/src/js/button.js
+++ b/src/js/button.js
@@ -12,7 +12,9 @@ vjs.Button = vjs.Component.extend({
     vjs.Component.call(this, player, options);
 
     var touchstart = false;
-    this.on('touchstart', function() {
+    this.on('touchstart', function(event) {
+      // Stop click and other mouse events from triggering also
+      event.preventDefault();
       touchstart = true;
     });
     this.on('touchmove', function() {
@@ -21,8 +23,6 @@ vjs.Button = vjs.Component.extend({
     var self = this;
     this.on('touchend', function(event) {
       if (touchstart) {
-        // TODO: make sure this clicks arent triggered anyway, makeing this called
-        // twice
         self.onClick(event);
       }
       event.preventDefault();
diff --git a/src/js/component.js b/src/js/component.js
index 73870d49d6..2cb8419afe 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -539,26 +539,6 @@ vjs.Component.prototype.hide = function(){
   return this;
 };
 
-/**
- * Fade a component in using CSS
- * @return {vjs.Component}
- */
-vjs.Component.prototype.fadeIn = function(){
-  this.removeClass('vjs-fade-out');
-  this.addClass('vjs-fade-in');
-  return this;
-};
-
-/**
- * Fade a component out using CSS
- * @return {vjs.Component}
- */
-vjs.Component.prototype.fadeOut = function(){
-  this.removeClass('vjs-fade-in');
-  this.addClass('vjs-fade-out');
-  return this;
-};
-
 /**
  * Lock an item in its visible state. To be used with fadeIn/fadeOut.
  * @return {vjs.Component}
@@ -583,15 +563,8 @@ vjs.Component.prototype.unlockShowing = function(){
 vjs.Component.prototype.disable = function(){
   this.hide();
   this.show = function(){};
-  this.fadeIn = function(){};
 };
 
-// TODO: Get enable working
-// vjs.Component.prototype.enable = function(){
-//   this.fadeIn = vjs.Component.prototype.fadeIn;
-//   this.show = vjs.Component.prototype.show;
-// };
-
 /**
  * If a value is provided it will change the width of the player to that value
  * otherwise the width is returned
diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js
index 2947e9fdcf..ac8b60ea58 100644
--- a/src/js/control-bar/control-bar.js
+++ b/src/js/control-bar/control-bar.js
@@ -4,24 +4,7 @@
  * @param {Object=} options
  * @constructor
  */
-vjs.ControlBar = vjs.Component.extend({
-  /** @constructor */
-  init: function(player, options){
-    vjs.Component.call(this, player, options);
-
-    // // Controls are always off
-    // if (player.controls() === false) {
-    //   this.disable();
-    // // Controls are always on
-    // } else if (player.controls() === true) {
-    //   this.setup();
-    // // Controls fade when not in use
-    // } else {
-    //   this.disable();
-    //   this.setup();
-    // }
-  }
-});
+vjs.ControlBar = vjs.Component.extend();
 
 vjs.ControlBar.prototype.options_ = {
   loadEvent: 'play',
@@ -44,13 +27,3 @@ vjs.ControlBar.prototype.createEl = function(){
     className: 'vjs-control-bar'
   });
 };
-
-vjs.ControlBar.prototype.fadeIn = function(){
-  vjs.Component.prototype.fadeIn.call(this);
-  this.player_.trigger('controlsvisible');
-};
-
-vjs.ControlBar.prototype.fadeOut = function(){
-  vjs.Component.prototype.fadeOut.call(this);
-  this.player_.trigger('controlshidden');
-};
diff --git a/src/js/exports.js b/src/js/exports.js
index 33c2958737..cf3fb532ad 100644
--- a/src/js/exports.js
+++ b/src/js/exports.js
@@ -55,14 +55,13 @@ goog.exportProperty(vjs.Component.prototype, 'width', vjs.Component.prototype.wi
 goog.exportProperty(vjs.Component.prototype, 'height', vjs.Component.prototype.height);
 goog.exportProperty(vjs.Component.prototype, 'dimensions', vjs.Component.prototype.dimensions);
 goog.exportProperty(vjs.Component.prototype, 'ready', vjs.Component.prototype.ready);
-goog.exportProperty(vjs.Component.prototype, 'fadeIn', vjs.Component.prototype.fadeIn);
-goog.exportProperty(vjs.Component.prototype, 'fadeOut', vjs.Component.prototype.fadeOut);
 
 goog.exportSymbol('videojs.Player', vjs.Player);
 goog.exportProperty(vjs.Player.prototype, 'dispose', vjs.Player.prototype.dispose);
 goog.exportProperty(vjs.Player.prototype, 'requestFullScreen', vjs.Player.prototype.requestFullScreen);
 goog.exportProperty(vjs.Player.prototype, 'cancelFullScreen', vjs.Player.prototype.cancelFullScreen);
 goog.exportProperty(vjs.Player.prototype, 'bufferedPercent', vjs.Player.prototype.bufferedPercent);
+goog.exportProperty(vjs.Player.prototype, 'usingNativeControls', vjs.Player.prototype.usingNativeControls);
 
 goog.exportSymbol('videojs.MediaLoader', vjs.MediaLoader);
 goog.exportSymbol('videojs.TextTrackDisplay', vjs.TextTrackDisplay);
diff --git a/src/js/media/flash.js b/src/js/media/flash.js
index 8e9a6808c4..e278b3c860 100644
--- a/src/js/media/flash.js
+++ b/src/js/media/flash.js
@@ -182,9 +182,6 @@ vjs.Flash = vjs.MediaTechController.extend({
           // Update reference to playback technology element
           tech.el_ = el;
 
-          // Now that the element is ready, make a click on the swf play the video
-          // vjs.on(el, 'click', tech.bind(tech.onClick));
-
           // Make sure swf is actually ready. Sometimes the API isn't actually yet.
           vjs.Flash.checkReady(tech);
         });
@@ -328,9 +325,6 @@ vjs.Flash['onReady'] = function(currSwf){
   // Update reference to playback technology element
   tech.el_ = el;
 
-  // Now that the element is ready, make a click on the swf play the video
-  tech.on('click', tech.onClick);
-
   vjs.Flash.checkReady(tech);
 };
 
diff --git a/src/js/media/html5.js b/src/js/media/html5.js
index b9fd8f3705..b707248cfd 100644
--- a/src/js/media/html5.js
+++ b/src/js/media/html5.js
@@ -37,19 +37,7 @@ vjs.Html5 = vjs.MediaTechController.extend({
 
     // Determine if native controls should be used
     if (vjs.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] !== false) {
-      // If the player controls are enabled turn on the native controls
-      this.setControls(this.player().controls());
-
-      // Update the native controls when player controls state is updated
-      player.on('controlsenabled', vjs.bind(this, function(){
-        this.setControls(true);
-      }));
-      player.on('controlsdisabled', vjs.bind(this, function(){
-        this.setControls(false);
-      }));
-
-      // Update the state of the player to using native controls
-      this.player().useNativeControls(true);
+      this.useNativeControls();
     }
 
     // Chrome and Safari both have issues with autoplay.
@@ -64,7 +52,6 @@ vjs.Html5 = vjs.MediaTechController.extend({
     });
 
     this.setupTriggers();
-
     this.triggerReady();
   }
 });
@@ -131,6 +118,37 @@ vjs.Html5.prototype.eventHandler = function(e){
   e.stopPropagation();
 };
 
+vjs.Html5.prototype.useNativeControls = function(){
+  var tech, player, controlsOn, controlsOff, cleanUp;
+
+  tech = this;
+  player = this.player();
+
+  // If the player controls are enabled turn on the native controls
+  tech.setControls(player.controls());
+
+  // Update the native controls when player controls state is updated
+  controlsOn = function(){
+    tech.setControls(true);
+  };
+  controlsOff = function(){
+    tech.setControls(false);
+  };
+  player.on('controlsenabled', controlsOn);
+  player.on('controlsdisabled', controlsOff);
+
+  // Clean up when not using native controls anymore
+  cleanUp = function(){
+    player.off('controlsenabled', controlsOn);
+    player.off('controlsdisabled', controlsOff);
+  };
+  tech.on('dispose', cleanUp);
+  player.on('usingcustomcontrols', cleanUp);
+
+  // Update the state of the player to using native controls
+  player.usingNativeControls(true);
+};
+
 
 vjs.Html5.prototype.play = function(){ this.el_.play(); };
 vjs.Html5.prototype.pause = function(){ this.el_.pause(); };
@@ -194,34 +212,21 @@ vjs.Html5.prototype.currentSrc = function(){ return this.el_.currentSrc; };
 
 vjs.Html5.prototype.preload = function(){ return this.el_.preload; };
 vjs.Html5.prototype.setPreload = function(val){ this.el_.preload = val; };
+
 vjs.Html5.prototype.autoplay = function(){ return this.el_.autoplay; };
 vjs.Html5.prototype.setAutoplay = function(val){ this.el_.autoplay = val; };
+
+vjs.Html5.prototype.controls = function(){ return this.el_.controls; }
+vjs.Html5.prototype.setControls = function(val){ this.el_.controls = !!val; }
+
 vjs.Html5.prototype.loop = function(){ return this.el_.loop; };
 vjs.Html5.prototype.setLoop = function(val){ this.el_.loop = val; };
 
 vjs.Html5.prototype.error = function(){ return this.el_.error; };
-  // networkState: function(){ return this.el_.networkState; },
-  // readyState: function(){ return this.el_.readyState; },
 vjs.Html5.prototype.seeking = function(){ return this.el_.seeking; };
-  // initialTime: function(){ return this.el_.initialTime; },
-  // startOffsetTime: function(){ return this.el_.startOffsetTime; },
-  // played: function(){ return this.el_.played; },
-  // seekable: function(){ return this.el_.seekable; },
 vjs.Html5.prototype.ended = function(){ return this.el_.ended; };
-  // videoTracks: function(){ return this.el_.videoTracks; },
-  // audioTracks: function(){ return this.el_.audioTracks; },
-  // videoWidth: function(){ return this.el_.videoWidth; },
-  // videoHeight: function(){ return this.el_.videoHeight; },
-  // textTracks: function(){ return this.el_.textTracks; },
-  // defaultPlaybackRate: function(){ return this.el_.defaultPlaybackRate; },
-  // playbackRate: function(){ return this.el_.playbackRate; },
-  // mediaGroup: function(){ return this.el_.mediaGroup; },
-  // controller: function(){ return this.el_.controller; },
 vjs.Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; };
 
-vjs.Html5.prototype.controls = function(){ return this.el_.controls; }
-vjs.Html5.prototype.setControls = function(val){ this.el_.controls = !!val; }
-
 /* HTML5 Support Testing ---------------------------------------------------- */
 
 vjs.Html5.isSupported = function(){
diff --git a/src/js/media/media.js b/src/js/media/media.js
index b99cea2130..69914552de 100644
--- a/src/js/media/media.js
+++ b/src/js/media/media.js
@@ -14,17 +14,7 @@ vjs.MediaTechController = vjs.Component.extend({
   init: function(player, options, ready){
     vjs.Component.call(this, player, options, ready);
 
-    var controlsListener = function(){
-      if (this.player().controls() && !this.player().useNativeControls()) {
-        this.initListeners();
-      }
-    };
-
-    // Set up event listeners once the tech is ready and has an element to apply
-    // listeners to
-    this.ready(controlsListener);
-    this.player().on('controlsenabled', vjs.bind(this, controlsListener));
-    this.player().on('controlsdisabled', vjs.bind(this, this.removeListeners));
+    this.initListeners();
   }
 });
 
@@ -67,6 +57,27 @@ vjs.MediaTechController.prototype.usingNativeControls = function(){
  * any controls will still keep the user active
  */
 vjs.MediaTechController.prototype.initListeners = function(){
+  var player, tech, activateControls, deactivateControls;
+
+  tech = this;
+  player = this.player();
+
+  var activateControls = function(){
+    if (player.controls() && !player.usingNativeControls()) {
+      tech.addListeners();
+    }
+  };
+
+  deactivateControls = vjs.bind(tech, tech.removeListeners);
+
+  // Set up event listeners once the tech is ready and has an element to apply
+  // listeners to
+  this.ready(activateControls);
+  player.on('controlsenabled', activateControls);
+  player.on('controlsdisabled', deactivateControls);
+};
+
+vjs.MediaTechController.prototype.addListeners = function(){
   var preventBubble, userWasActive;
 
   if (vjs.TOUCH_ENABLED) {
@@ -115,7 +126,10 @@ vjs.MediaTechController.prototype.initListeners = function(){
       }
     });
   } else {
-    this.on('click', this.onClick);
+    // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do
+    // trigger mousedown/up.
+    // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
+    this.on('mousedown', this.onClick);
   }
 };
 
@@ -127,12 +141,17 @@ vjs.MediaTechController.prototype.removeListeners = function(){
   this.off('touchcancel');
   this.off('touchend');
   this.off('click');
+  this.off('mousedown');
 };
 
 /**
  * Handle a click on the media element. By default will play the media.
  */
-vjs.MediaTechController.prototype.onClick = function(){
+vjs.MediaTechController.prototype.onClick = function(event){
+  // We're using mousedown to detect clicks thanks to Flash, but mousedown
+  // will also be triggered with right-clicks, so we need to prevent that
+  if (event.button !== 0) return;
+
   // When controls are disabled a click should not toggle playback because
   // the click is considered a control
   if (this.player_.controls()) {
diff --git a/src/js/player.js b/src/js/player.js
index fde067558a..bf6ab5c813 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -881,7 +881,7 @@ vjs.Player.prototype.controls = function(bool){
   return this.controls_;
 };
 
-vjs.Player.prototype.useNativeControls_;
+vjs.Player.prototype.usingNativeControls_;
 
 /**
  * Toggle native controls on/off. Native controls are the controls built into
@@ -894,12 +894,12 @@ vjs.Player.prototype.useNativeControls_;
  * @param  {Boolean} bool    True signals that native controls are on
  * @return {vjs.Player}      Returns the player
  */
-vjs.Player.prototype.useNativeControls = function(bool){
+vjs.Player.prototype.usingNativeControls = function(bool){
   if (bool !== undefined) {
     bool = !!bool; // force boolean
     // Don't trigger a change event unless it actually changed
-    if (this.useNativeControls_ !== bool) {
-      this.useNativeControls_ = bool;
+    if (this.usingNativeControls_ !== bool) {
+      this.usingNativeControls_ = bool;
       if (bool) {
         this.addClass('vjs-using-native-controls');
         this.trigger('usingnativecontrols');
@@ -910,7 +910,7 @@ vjs.Player.prototype.useNativeControls = function(bool){
     }
     return this;
   }
-  return this.useNativeControls_;
+  return this.usingNativeControls_;
 };
 
 vjs.Player.prototype.error = function(){ return this.techGet('error'); };
diff --git a/test/unit/api.js b/test/unit/api.js
index 98970dc9aa..a3a13fb667 100644
--- a/test/unit/api.js
+++ b/test/unit/api.js
@@ -25,6 +25,7 @@ test('should be able to access expected player API methods', function() {
   ok(player.one, 'one exists');
   ok(player.bufferedPercent, 'bufferedPercent exists');
   ok(player.dimensions, 'dimensions exists');
+  ok(player.usingNativeControls, 'usingNativeControls exists');
 
   player.dispose();
 });
@@ -66,7 +67,7 @@ test('videojs.players should be availble after minification', function() {
   fixture.appendChild(videoTag);
 
   var player = videojs(id);
-  equal(videojs.players[id], player, 'videojs.players is available');
+  ok(videojs.players[id] === player, 'videojs.players is available');
 
   player.dispose();
 });
diff --git a/test/unit/media.html5.js b/test/unit/media.html5.js
index f1b59d02a6..e38777ea0c 100644
--- a/test/unit/media.html5.js
+++ b/test/unit/media.html5.js
@@ -28,7 +28,7 @@ test('should re-link the player if the tech is moved', function(){
     options_: {},
     options: function(){ return {}; },
     controls: function(){ return false; },
-    useNativeControls: function(){ return false; },
+    usingNativeControls: function(){ return false; },
     on: function(){ return this; },
     ready: function(){}
   };
diff --git a/test/unit/player.js b/test/unit/player.js
index 9c259c4eda..9cb595550a 100644
--- a/test/unit/player.js
+++ b/test/unit/player.js
@@ -256,3 +256,76 @@ test('should set controls and trigger events', function() {
 //   player.requestFullScreen();
 // });
 
+test('should toggle user the user state between active and passive', function(){
+  var player = PlayerTest.makePlayer({});
+
+  expect(9);
+
+  ok(player.userActive(), 'User should be active at player init');
+
+  player.on('userpassive', function(){
+    ok(true, 'userpassive event triggered');
+  });
+
+  player.on('useractive', function(){
+    ok(true, 'useractive event triggered');
+  });
+
+  player.userActive(false);
+  ok(player.userActive() === false, 'Player state changed to passive');
+  ok(player.el().className.indexOf('vjs-user-active') === -1, 'Active class removed');
+  ok(player.el().className.indexOf('vjs-user-passive') !== -1, 'Passive class added');
+
+  player.userActive(true);
+  ok(player.userActive() === true, 'Player state changed to active');
+  ok(player.el().className.indexOf('vjs-user-passive') === -1, 'Passive class removed');
+  ok(player.el().className.indexOf('vjs-user-active') !== -1, 'Active class added');
+
+  player.dispose();
+});
+
+test('should add a touch-enabled classname when touch is supported', function(){
+  var player;
+
+  expect(1);
+
+  // Fake touch support. Real touch support isn't needed for this test.
+  var origTouch = vjs.TOUCH_ENABLED;
+  vjs.TOUCH_ENABLED = true;
+
+  player = PlayerTest.makePlayer({});
+
+  ok(player.el().className.indexOf('vjs-touch-enabled'), 'touch-enabled classname added');
+
+
+  vjs.TOUCH_ENABLED = origTouch;
+  player.dispose();
+});
+
+test('should allow for tracking when native controls are used', function(){
+  var player = PlayerTest.makePlayer({});
+
+  expect(6);
+
+  // Make sure native controls is false before starting test
+  player.usingNativeControls(false);
+
+  player.on('usingnativecontrols', function(){
+    ok(true, 'usingnativecontrols event triggered');
+  });
+
+  player.on('usingcustomcontrols', function(){
+    ok(true, 'usingcustomcontrols event triggered');
+  });
+
+  player.usingNativeControls(true);
+  ok(player.usingNativeControls() === true, 'Using native controls is true');
+  ok(player.el().className.indexOf('vjs-using-native-controls') !== -1, 'Native controls class added');
+
+  player.usingNativeControls(false);
+  ok(player.usingNativeControls() === false, 'Using native controls is false');
+  ok(player.el().className.indexOf('vjs-using-native-controls') === -1, 'Native controls class removed');
+
+  player.dispose();
+});
+

From 2b69b4303c2bb4d10424bd6d67b9c4dfb276846b Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Wed, 7 Aug 2013 15:10:28 -0700
Subject: [PATCH 7/8] Changed 'passive' to 'inactive' in user activity tracking
 classnames and events

---
 src/css/video-js.less |  6 +++---
 src/js/media/media.js | 14 +++++---------
 src/js/player.js      | 14 +++++++-------
 test/unit/player.js   | 12 ++++++------
 4 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 4f8f22cad4..3e3bcca9a9 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -171,8 +171,8 @@ The default control bar that is a container for most of the controls.
   .transition(@trans);
 }
 
-/* Hide the control bar when the video is playing and the user is passive  */
-.vjs-default-skin.vjs-has-started.vjs-user-passive.vjs-playing .vjs-control-bar {
+/* Hide the control bar when the video is playing and the user is inactive  */
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   display: block;
   visibility: hidden;
   opacity: 0;
@@ -727,7 +727,7 @@ body.vjs-full-window {
   width: 100% !important;
   height: 100% !important;
 }
-.video-js.vjs-fullscreen.vjs-user-passive {
+.video-js.vjs-fullscreen.vjs-user-inactive {
   cursor: none;
 }
 
diff --git a/src/js/media/media.js b/src/js/media/media.js
index 69914552de..89f16b546f 100644
--- a/src/js/media/media.js
+++ b/src/js/media/media.js
@@ -41,14 +41,14 @@ vjs.MediaTechController.prototype.usingNativeControls = function(){
  * On desktops, a click on the video itself will toggle playback,
  * on a mobile device a click on the video toggles controls.
  * (toggling controls is done by toggling the user state between active and
- * passive)
+ * inactive)
  *
- * A tap can signal that a user has become active, or has become passive
+ * A tap can signal that a user has become active, or has become inactive
  * e.g. a quick tap on an iPhone movie should reveal the controls. Another
- * quick tap should hide them again (signaling the user is in a passive
+ * quick tap should hide them again (signaling the user is in an inactive
  * viewing state)
  *
- * In addition to this, we still want the user to be considered passive after
+ * In addition to this, we still want the user to be considered inactive after
  * a few seconds of inactivity.
  *
  * Note: the only part of iOS interaction we can't mimic with this setup
@@ -119,11 +119,7 @@ vjs.MediaTechController.prototype.addListeners = function(){
     // The tap listener needs to come after the touchend listener because the tap
     // listener cancels out any reportedUserActivity when setting userActive(false)
     this.on('tap', function(){
-      if (this.player_.userActive()) {
-        this.player_.userActive(false);
-      } else {
-        this.player_.userActive(true);
-      }
+      this.player_.userActive(!this.player_.userActive());
     });
   } else {
     // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do
diff --git a/src/js/player.js b/src/js/player.js
index bf6ab5c813..8b2d27f640 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -933,18 +933,18 @@ vjs.Player.prototype.userActive = function(bool){
         // If the user was inactive and is now active we want to reset the
         // inactivity timer
         this.userActivity_ = true;
-        this.removeClass('vjs-user-passive');
+        this.removeClass('vjs-user-inactive');
         this.addClass('vjs-user-active');
         this.trigger('useractive');
       } else {
-        // We're switching the state to passive manually, so erase any other
+        // We're switching the state to inactive manually, so erase any other
         // activity
         this.userActivity_ = false;
 
         // Chrome/Safari/IE have bugs where when you change the cursor it can
         // trigger a mousemove event. This causes an issue when you're hiding
         // the cursor when the user is inactive, and a mousemove signals user
-        // activity. Making it impossible to go into passive mode. Specifically
+        // activity. Making it impossible to go into inactive mode. Specifically
         // this happens in fullscreen when we really need to hide the cursor.
         //
         // When this gets resolved in ALL browsers it can be removed
@@ -954,8 +954,8 @@ vjs.Player.prototype.userActive = function(bool){
           e.preventDefault();
         });
         this.removeClass('vjs-user-active');
-        this.addClass('vjs-user-passive');
-        this.trigger('userpassive');
+        this.addClass('vjs-user-inactive');
+        this.trigger('userinactive');
       }
     }
     return this;
@@ -1009,7 +1009,7 @@ vjs.Player.prototype.listenForUserActivity = function(){
       // Reset the activity tracker
       this.userActivity_ = false;
 
-      // If the user state was passive, set the state to active
+      // If the user state was inactive, set the state to active
       if (!this.userActive()) {
         this.userActive(true);
       }
@@ -1018,7 +1018,7 @@ vjs.Player.prototype.listenForUserActivity = function(){
       clearTimeout(inactivityTimeout);
 
       // In X seconds, if no more activity has occurred (resetting this timer)
-      // the user will be considered passive
+      // the user will be considered inactive
       inactivityTimeout = setTimeout(vjs.bind(this, function() {
         // Protect against the case where the inactivity timeout can trigger
         // before the next user activity is picked up by the activityCheck loop.
diff --git a/test/unit/player.js b/test/unit/player.js
index 9cb595550a..7e18f884c2 100644
--- a/test/unit/player.js
+++ b/test/unit/player.js
@@ -256,15 +256,15 @@ test('should set controls and trigger events', function() {
 //   player.requestFullScreen();
 // });
 
-test('should toggle user the user state between active and passive', function(){
+test('should toggle user the user state between active and inactive', function(){
   var player = PlayerTest.makePlayer({});
 
   expect(9);
 
   ok(player.userActive(), 'User should be active at player init');
 
-  player.on('userpassive', function(){
-    ok(true, 'userpassive event triggered');
+  player.on('userinactive', function(){
+    ok(true, 'userinactive event triggered');
   });
 
   player.on('useractive', function(){
@@ -272,13 +272,13 @@ test('should toggle user the user state between active and passive', function(){
   });
 
   player.userActive(false);
-  ok(player.userActive() === false, 'Player state changed to passive');
+  ok(player.userActive() === false, 'Player state changed to inactive');
   ok(player.el().className.indexOf('vjs-user-active') === -1, 'Active class removed');
-  ok(player.el().className.indexOf('vjs-user-passive') !== -1, 'Passive class added');
+  ok(player.el().className.indexOf('vjs-user-inactive') !== -1, 'Inactive class added');
 
   player.userActive(true);
   ok(player.userActive() === true, 'Player state changed to active');
-  ok(player.el().className.indexOf('vjs-user-passive') === -1, 'Passive class removed');
+  ok(player.el().className.indexOf('vjs-user-inactive') === -1, 'Inactive class removed');
   ok(player.el().className.indexOf('vjs-user-active') !== -1, 'Active class added');
 
   player.dispose();

From c94a34acf73d2ab8cfc8bf1671f60d3a96bfd279 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@zencoder.com>
Date: Thu, 8 Aug 2013 16:25:38 -0700
Subject: [PATCH 8/8] Removed checks for touch enabled in order to support both
 touch and mouse

Also cleaned up some of the user activity watching code, adding support for
tracking when the mouse continues to be down without any movement
---
 src/css/video-js.less |   4 --
 src/js/component.js   |  67 ++++++++++---------
 src/js/media/html5.js |   3 +
 src/js/media/media.js | 146 ++++++++++++++++++++----------------------
 src/js/player.js      | 108 +++++++++++++++++--------------
 5 files changed, 166 insertions(+), 162 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 3e3bcca9a9..b61a49cc90 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -684,10 +684,6 @@ control positioning and full window mode. **
   .user-select(none);
 }
 
-.video-js.vjs-touch-enabled {
-  font-size: 15px;
-}
-
 /* Playback technology elements expand to the width/height of the containing div
     <video> or <object> */
 .video-js .vjs-tech {
diff --git a/src/js/component.js b/src/js/component.js
index 2cb8419afe..701c7d724b 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -678,39 +678,38 @@ vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
 vjs.Component.prototype.emitTapEvents = function(){
   var touchStart, touchTime, couldBeTap, noTap;
 
-  if (vjs.TOUCH_ENABLED) {
-    // Track the start time so we can determine how long the touch lasted
-    touchStart = 0;
-
-    this.on('touchstart', function() {
-      // Record start time so we can detect a tap vs. "touch and hold"
-      touchStart = new Date().getTime();
-      // Reset couldBeTap tracking
-      couldBeTap = true;
-    });
-
-    noTap = function(){
-      couldBeTap = false;
-    };
-    this.on('touchmove', noTap);
-    this.on('touchleave', noTap);
-    this.on('touchcancel', noTap);
-
-    // When the touch ends, measure how long it took and trigger the appropriate
-    // event
-    this.on('touchend', function() {
-      // Proceed only if the touchmove/leave/cancel event didn't happen
-      if (couldBeTap === true) {
-        // Measure how long the touch lasted
-        touchTime = new Date().getTime() - touchStart;
-        // The touch needs to be quick in order to consider it a tap
-        if (touchTime < 250) {
-          this.trigger('tap');
-          // It may be good to copy the touchend event object and change the
-          // type to tap, if the other event properties aren't exact after
-          // vjs.fixEvent runs (e.g. event.target)
-        }
+  // Track the start time so we can determine how long the touch lasted
+  touchStart = 0;
+
+  this.on('touchstart', function(event) {
+    // Record start time so we can detect a tap vs. "touch and hold"
+    touchStart = new Date().getTime();
+    // Reset couldBeTap tracking
+    couldBeTap = true;
+  });
+
+  noTap = function(){
+    couldBeTap = false;
+  };
+  // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+  this.on('touchmove', noTap);
+  this.on('touchleave', noTap);
+  this.on('touchcancel', noTap);
+
+  // When the touch ends, measure how long it took and trigger the appropriate
+  // event
+  this.on('touchend', function() {
+    // Proceed only if the touchmove/leave/cancel event didn't happen
+    if (couldBeTap === true) {
+      // Measure how long the touch lasted
+      touchTime = new Date().getTime() - touchStart;
+      // The touch needs to be quick in order to consider it a tap
+      if (touchTime < 250) {
+        this.trigger('tap');
+        // It may be good to copy the touchend event object and change the
+        // type to tap, if the other event properties aren't exact after
+        // vjs.fixEvent runs (e.g. event.target)
       }
-    });
-  }
+    }
+  });
 };
diff --git a/src/js/media/html5.js b/src/js/media/html5.js
index b707248cfd..b128702810 100644
--- a/src/js/media/html5.js
+++ b/src/js/media/html5.js
@@ -36,6 +36,9 @@ vjs.Html5 = vjs.MediaTechController.extend({
     }
 
     // Determine if native controls should be used
+    // Our goal should be to get the custom controls on mobile solid everywhere
+    // so we can remove this all together. Right now this will block custom
+    // controls on touch enabled laptops like the Chrome Pixel
     if (vjs.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] !== false) {
       this.useNativeControls();
     }
diff --git a/src/js/media/media.js b/src/js/media/media.js
index 89f16b546f..3715769526 100644
--- a/src/js/media/media.js
+++ b/src/js/media/media.js
@@ -14,28 +14,10 @@ vjs.MediaTechController = vjs.Component.extend({
   init: function(player, options, ready){
     vjs.Component.call(this, player, options, ready);
 
-    this.initListeners();
+    this.initControlsListeners();
   }
 });
 
-/**
- * Determine whether or not controls should be enabled on the video element
- * Use native controls for iOS and Android by default until controls are more
- * stable on those devices
- *
- * @return {Boolean} Controls enabled
- * @private
- */
-vjs.MediaTechController.prototype.usingNativeControls = function(){
-  var controls = false;
-  if (vjs.TOUCH_ENABLED
-      && this.nativeControlsAvailable !== false
-      && this.player().options()['nativeControlsForTouch'] !== false) {
-    controls = this.player().controls();
-  }
-  return controls;
-};
-
 /**
  * Set up click and touch listeners for the playback element
  * On desktops, a click on the video itself will toggle playback,
@@ -56,7 +38,7 @@ vjs.MediaTechController.prototype.usingNativeControls = function(){
  * keep the controls showing, but that shouldn't be an issue. A touch and hold on
  * any controls will still keep the user active
  */
-vjs.MediaTechController.prototype.initListeners = function(){
+vjs.MediaTechController.prototype.initControlsListeners = function(){
   var player, tech, activateControls, deactivateControls;
 
   tech = this;
@@ -64,11 +46,11 @@ vjs.MediaTechController.prototype.initListeners = function(){
 
   var activateControls = function(){
     if (player.controls() && !player.usingNativeControls()) {
-      tech.addListeners();
+      tech.addControlsListeners();
     }
   };
 
-  deactivateControls = vjs.bind(tech, tech.removeListeners);
+  deactivateControls = vjs.bind(tech, tech.removeControlsListeners);
 
   // Set up event listeners once the tech is ready and has an element to apply
   // listeners to
@@ -77,59 +59,62 @@ vjs.MediaTechController.prototype.initListeners = function(){
   player.on('controlsdisabled', deactivateControls);
 };
 
-vjs.MediaTechController.prototype.addListeners = function(){
+vjs.MediaTechController.prototype.addControlsListeners = function(){
   var preventBubble, userWasActive;
 
-  if (vjs.TOUCH_ENABLED) {
-    // We need to block touch events on the video element from bubbling up,
-    // otherwise they'll signal activity prematurely. The specific use case is
-    // when the video is playing and the controls have faded out. In this case
-    // only a tap (fast touch) should toggle the user active state and turn the
-    // controls back on. A touch and move or touch and hold should not trigger
-    // the controls (per iOS as an example at least)
-    //
-    // We always want to stop propagation on touchstart because touchstart
-    // at the player level starts the touchInProgress interval. We can still
-    // report activity on the other events, but won't let them bubble for
-    // consistency. We don't want to bubble a touchend without a touchstart.
-    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();
-
-    // The tap listener needs to come after the touchend listener because the tap
-    // listener cancels out any reportedUserActivity when setting userActive(false)
-    this.on('tap', function(){
-      this.player_.userActive(!this.player_.userActive());
-    });
-  } else {
-    // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do
-    // trigger mousedown/up.
-    // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
-    this.on('mousedown', this.onClick);
-  }
+  // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do
+  // trigger mousedown/up.
+  // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
+  // Any touch events are set to block the mousedown event from happening
+  this.on('mousedown', this.onClick);
+
+  // We need to block touch events on the video element from bubbling up,
+  // otherwise they'll signal activity prematurely. The specific use case is
+  // when the video is playing and the controls have faded out. In this case
+  // only a tap (fast touch) should toggle the user active state and turn the
+  // controls back on. A touch and move or touch and hold should not trigger
+  // the controls (per iOS as an example at least)
+  //
+  // We always want to stop propagation on touchstart because touchstart
+  // at the player level starts the touchInProgress interval. We can still
+  // report activity on the other events, but won't let them bubble for
+  // consistency. We don't want to bubble a touchend without a touchstart.
+  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();
+
+  // The tap listener needs to come after the touchend listener because the tap
+  // listener cancels out any reportedUserActivity when setting userActive(false)
+  this.on('tap', this.onTap);
 };
 
-vjs.MediaTechController.prototype.removeListeners = function(){
+/**
+ * Remove the listeners used for click and tap controls. This is needed for
+ * toggling to controls disabled, where a tap/touch should do nothing.
+ */
+vjs.MediaTechController.prototype.removeControlsListeners = function(){
+  // We don't want to just use `this.off()` because there might be other needed
+  // listeners added by techs that extend this.
   this.off('tap');
   this.off('touchstart');
   this.off('touchmove');
@@ -141,7 +126,7 @@ vjs.MediaTechController.prototype.removeListeners = function(){
 };
 
 /**
- * Handle a click on the media element. By default will play the media.
+ * Handle a click on the media element. By default will play/pause the media.
  */
 vjs.MediaTechController.prototype.onClick = function(event){
   // We're using mousedown to detect clicks thanks to Flash, but mousedown
@@ -150,15 +135,24 @@ vjs.MediaTechController.prototype.onClick = function(event){
 
   // When controls are disabled a click should not toggle playback because
   // the click is considered a control
-  if (this.player_.controls()) {
-    if (this.player_.paused()) {
-      this.player_.play();
+  if (this.player().controls()) {
+    if (this.player().paused()) {
+      this.player().play();
     } else {
-      this.player_.pause();
+      this.player().pause();
     }
   }
 };
 
+/**
+ * Handle a tap on the media element. By default it will toggle the user
+ * activity state, which hides and shows the controls.
+ */
+
+vjs.MediaTechController.prototype.onTap = function(){
+  this.player().userActive(!this.player().userActive());
+};
+
 vjs.MediaTechController.prototype.features = {
   volumeControl: true,
 
diff --git a/src/js/player.js b/src/js/player.js
index 8b2d27f640..d3283d6401 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -42,9 +42,11 @@ vjs.Player = vjs.Component.extend({
       this.addClass('vjs-controls-disabled');
     }
 
-    if (vjs.TOUCH_ENABLED) {
-      this.addClass('vjs-touch-enabled');
-    }
+    // TODO: Make this smarter. Toggle user state between touching/mousing
+    // using events, since devices can have both touch and mouse events.
+    // if (vjs.TOUCH_ENABLED) {
+    //   this.addClass('vjs-touch-enabled');
+    // }
 
     // Firstplay event implimentation. Not sold on the event yet.
     // Could probably just check currentTime==0?
@@ -109,8 +111,6 @@ vjs.Player.prototype.dispose = function(){
 
   if (this.tech) { this.tech.dispose(); }
 
-  clearInterval(this.activityCheck);
-
   // Component dispose
   vjs.Component.prototype.dispose.call(this);
 };
@@ -964,70 +964,82 @@ vjs.Player.prototype.userActive = function(bool){
 };
 
 vjs.Player.prototype.listenForUserActivity = function(){
-  var inactivityTimeout, touchInProgress;
-
-  // Consider touch events that bubble up to be activity
-  if (vjs.TOUCH_ENABLED) {
-    this.on('touchstart', function() {
-      this.reportUserActivity();
-      // For as long as the they are touching the device, we consider them
-      // active even if they're not moving their finger. So we want to
-      // continue to update that they are active
-      clearInterval(touchInProgress);
-      // Setting userActivity=true now and setting the interval to the same time
-      // as the activityCheck interval (250) should ensure we never miss the
-      // next activityCheck
-      touchInProgress = setInterval(vjs.bind(this, function(){
-        this.reportUserActivity();
-      }), 250);
-      // touchInProgress = setInterval(vjs.bind(this, this.reportUserActivity), 250);
-    });
+  var onMouseActivity, onMouseDown, mouseInProgress, onMouseUp,
+      activityCheck, inactivityTimeout;
+
+  onMouseActivity = this.reportUserActivity;
+
+  onMouseDown = function() {
+    onMouseActivity();
+    // For as long as the they are touching the device or have their mouse down,
+    // we consider them active even if they're not moving their finger or mouse.
+    // So we want to continue to update that they are active
+    clearInterval(mouseInProgress);
+    // Setting userActivity=true now and setting the interval to the same time
+    // as the activityCheck interval (250) should ensure we never miss the
+    // next activityCheck
+    mouseInProgress = setInterval(vjs.bind(this, onMouseActivity), 250);
+  };
 
-    this.on('touchmove', this.reportUserActivity);
+  onMouseUp = function(event) {
+    onMouseActivity();
+    // Stop the interval that maintains activity if the mouse/touch is down
+    clearInterval(mouseInProgress);
+  };
 
-    this.on('touchend', function(event) {
-      // Stop the interval that maintains activity if it's running
-      clearInterval(touchInProgress);
-      this.reportUserActivity();
-    });
-  } else {
-    // When not on touch devices, any mouse movement will be considered
-    // user activity
-    this.on('mousedown', this.reportUserActivity);
-    this.on('mousemove', this.reportUserActivity);
-    // Listen for keyboard navigation
-    this.on('keydown', this.reportUserActivity);
-    this.on('keyup', this.reportUserActivity);
-  }
+  // Any mouse movement will be considered user activity
+  this.on('mousedown', onMouseDown);
+  this.on('mousemove', onMouseActivity);
+  this.on('mouseup', onMouseUp);
+
+  // Listen for keyboard navigation
+  // Shouldn't need to use inProgress interval because of key repeat
+  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 function itself, to prevent performance degradation.
+  // the mousemove/touchmove function itself, to prevent performance degradation.
+  // `this.reportUserActivity` simply sets this.userActivity_ to true, which
+  // then gets picked up by this loop
   // http://ejohn.org/blog/learning-from-twitter/
-  this.activityCheck = setInterval(vjs.bind(this, function() {
-    // Check to see if the mouse has been moved
+  activityCheck = setInterval(vjs.bind(this, function() {
+    // Check to see if mouse/touch activity has happened
     if (this.userActivity_) {
       // Reset the activity tracker
       this.userActivity_ = false;
 
       // If the user state was inactive, set the state to active
-      if (!this.userActive()) {
-        this.userActive(true);
-      }
+      this.userActive(true);
 
       // Clear any existing inactivity timeout to start the timer over
       clearTimeout(inactivityTimeout);
 
-      // In X seconds, if no more activity has occurred (resetting this timer)
-      // the user will be considered inactive
+      // In X seconds, if no more activity has occurred the user will be
+      // considered inactive
       inactivityTimeout = setTimeout(vjs.bind(this, function() {
-        // Protect against the case where the inactivity timeout can trigger
-        // before the next user activity is picked up by the activityCheck loop.
+        // Protect against the case where the inactivityTimeout can trigger just
+        // before the next user activity is picked up by the activityCheck loop
+        // causing a flicker
         if (!this.userActivity_) {
           this.userActive(false);
         }
       }), 2000);
     }
   }), 250);
+
+  // Clean up the intervals when we kill the player
+  this.on('dispose', function(){
+    clearInterval(activityCheck);
+    clearTimeout(inactivityTimeout);
+  });
 };
 
 // Methods to add support for