Added vjs-waiting and vjs-seeking css classnames and updated the spinner to use them

closes #1351, closes #1225, closes #684, closes #518

Split up seeking and waiting styles. Updated loading spinner to use them.

src/css/video-js.less

@@ -635,8 +635,11 @@ easily in the skin designer. http://designer.videojs.com/
 /* Loading Spinner
 --------------------------------------------------------------------------------
 */
+
 .vjs-loading-spinner {
+  /* Should be hidden by default *///
   display: none;
+
   position: absolute;
   top: 50%;
   left: 50%;
@@ -651,19 +654,22 @@ easily in the skin designer. http://designer.videojs.com/
   margin-top: -0.5em;
 
   opacity: 0.75;
+}
 
+/* Show the spinner when waiting for data and seeking to a new time */
+.vjs-waiting .vjs-loading-spinner,
+.vjs-seeking .vjs-loading-spinner {
+  display: block;
+
+  /* only animate when showing because it can be processor heavy *///
   .animation(spin 1.5s infinite linear);
 }
 
-/* Errors are unrecoverable without user interaction,
-   so hide the spinner in the case of an error */
-.video-js.vjs-error .vjs-loading-spinner {
-  /* using !important flag because currently the loading spinner
-     uses hide()/show() instead of classes. The !important can be
-     removed when that's updated */
-  display: none !important;
+/* Errors are unrecoverable without user interaction so hide the spinner */
+.vjs-error .vjs-loading-spinner {
+  display: none;
 
-  /* ensure animation doesn't continue while hidden */
+  /* ensure animation doesn't continue while hidden *///
   .animation(none);
 }
 

src/js/loading-spinner.js

@@ -12,23 +12,25 @@ vjs.LoadingSpinner = vjs.Component.extend({
   init: function(player, options){
     vjs.Component.call(this, player, options);
 
-    player.on('canplay', vjs.bind(this, this.hide));
-    player.on('canplaythrough', vjs.bind(this, this.hide));
-    player.on('playing', vjs.bind(this, this.hide));
-    player.on('seeking', vjs.bind(this, this.show));
+    // MOVING DISPLAY HANDLING TO CSS
+
+    // player.on('canplay', vjs.bind(this, this.hide));
+    // player.on('canplaythrough', vjs.bind(this, this.hide));
+    // player.on('playing', vjs.bind(this, this.hide));
+    // player.on('seeking', vjs.bind(this, this.show));
 
     // in some browsers seeking does not trigger the 'playing' event,
     // so we also need to trap 'seeked' if we are going to set a
     // 'seeking' event
-    player.on('seeked', vjs.bind(this, this.hide));
+    // player.on('seeked', vjs.bind(this, this.hide));
 
-    player.on('ended', vjs.bind(this, this.hide));
+    // player.on('ended', vjs.bind(this, this.hide));
 
     // Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
     // Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
     // player.on('stalled', vjs.bind(this, this.show));
 
-    player.on('waiting', vjs.bind(this, this.show));
+    // player.on('waiting', vjs.bind(this, this.show));
   }
 });
 

src/js/player.js

@@ -228,6 +228,10 @@ vjs.Player.prototype.createEl = function(){
   // adding children
   this.el_ = el;
   this.on('loadstart', this.onLoadStart);
+  this.on('waiting', this.onWaiting);
+  this.on(['canplay', 'canplaythrough', 'playing', 'ended'], this.onWaitEnd);
+  this.on('seeking', this.onSeeking);
+  this.on('seeked', this.onSeeked);
   this.on('ended', this.onEnded);
   this.on('play', this.onPlay);
   this.on('firstplay', this.onFirstPlay);
@@ -482,8 +486,40 @@ vjs.Player.prototype.onLoadedAllData;
  * @event play
  */
 vjs.Player.prototype.onPlay = function(){
-  vjs.removeClass(this.el_, 'vjs-paused');
-  vjs.addClass(this.el_, 'vjs-playing');
+  this.removeClass('vjs-paused');
+  this.addClass('vjs-playing');
+};
+
+/**
+ * Fired whenever the media begins wating
+ * @event waiting
+ */
+vjs.Player.prototype.onWaiting = function(){
+  this.addClass('vjs-waiting');
+};
+
+/**
+ * A handler for events that signal that waiting has eneded
+ * which is not consistent between browsers. See #1351
+ */
+vjs.Player.prototype.onWaitEnd = function(){
+  this.removeClass('vjs-waiting');
+};
+
+/**
+ * Fired whenever the player is jumping to a new time
+ * @event seeking
+ */
+vjs.Player.prototype.onSeeking = function(){
+  this.addClass('vjs-seeking');
+};
+
+/**
+ * Fired when the player has finished jumping to a new time
+ * @event seeked
+ */
+vjs.Player.prototype.onSeeked = function(){
+  this.removeClass('vjs-seeking');
 };
 
 /**
@@ -510,8 +546,8 @@ vjs.Player.prototype.onFirstPlay = function(){
  * @event pause
  */
 vjs.Player.prototype.onPause = function(){
-  vjs.removeClass(this.el_, 'vjs-playing');
-  vjs.addClass(this.el_, 'vjs-paused');
+  this.removeClass('vjs-playing');
+  this.addClass('vjs-paused');
 };
 
 /**