Fixes #5 Only bind to QUALITY_SELECTED once

As things turn out, the middleware constructor is called every time `setSource`
is called [1]. This was causing a new listener to get bound to
`QUALITY_SELECTED` on each change by the quality selector. :( This change makes
it so the listener is only bound on the initial creation of the player.

[1] 03529163b6/src/js/tech/middleware.js (L66)

src/js/components/QualitySelector.js

@@ -2,7 +2,8 @@
 
 var _ = require('underscore'),
     events = require('../events'),
-    qualityOptionFactory = require('./QualityOption');
+    qualityOptionFactory = require('./QualityOption'),
+    QUALITY_CHANGE_CLASS = 'vjs-quality-changing';
 
 module.exports = function(videojs) {
    var MenuButton = videojs.getComponent('MenuButton'),
@@ -23,8 +24,14 @@ module.exports = function(videojs) {
       constructor: function(player, options) {
          MenuButton.call(this, player, options);
 
-         player.on(events.QUALITY_SELECTED, function(event, source) {
+         // Update interface instantly so the user's change is acknowledged
-            this.setSelectedSource(source);
+         player.on(events.QUALITY_SELECTED, function(event, newSource) {
+            this.setSelectedSource(newSource);
+            player.addClass(QUALITY_CHANGE_CLASS);
+
+            player.one('loadeddata', function() {
+               player.removeClass(QUALITY_CHANGE_CLASS);
+            });
          }.bind(this));
 
          // Since it's possible for the player to get a source before the selector is

src/js/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var events = require('./events'),
+var _ = require('underscore'),
+    events = require('./events'),
     qualitySelectorFactory = require('./components/QualitySelector'),
     sourceInterceptorFactory = require('./middleware/SourceInterceptor');
 
@@ -9,6 +10,31 @@ module.exports = function(videojs) {
 
    qualitySelectorFactory(videojs);
    sourceInterceptorFactory(videojs);
+
+   videojs.hook('setup', function(player) {
+      // Add handler to switch sources when the user requests a change
+      player.on(events.QUALITY_SELECTED, function(event, newSource) {
+         var sources = player.currentSources(),
+             currentTime = player.currentTime(),
+             isPaused = player.paused(),
+             selectedSource;
+
+         sources = _.map(sources, _.partial(_.omit, _, 'selected'));
+         selectedSource = _.findWhere(sources, { src: newSource.src });
+         // Note: `_.findWhere` returns a reference to an object. Thus the
+         // following updates the original object in `sources`.
+         selectedSource.selected = true;
+
+         player.src(sources);
+
+         player.one('loadeddata', function() {
+            player.currentTime(currentTime);
+            if (!isPaused) {
+               player.play();
+            }
+         });
+      });
+   });
 };
 
 module.exports.EVENTS = events;

src/js/middleware/SourceInterceptor.js

@@ -1,39 +1,11 @@
 'use strict';
 
-var _ = require('underscore'),
+var _ = require('underscore');
-    events = require('../events'),
-    QUALITY_CHANGE_CLASS = 'vjs-quality-changing';
 
 module.exports = function(videojs) {
 
    videojs.use('*', function(player) {
 
-      player.on(events.QUALITY_SELECTED, function(event, newSource) {
-         var sources = player.currentSources(),
-             currentTime = player.currentTime(),
-             isPaused = player.paused(),
-             selectedSource;
-
-         player.addClass(QUALITY_CHANGE_CLASS);
-
-         // Find and set the new selected source
-         sources = _.map(sources, _.partial(_.omit, _, 'selected'));
-         selectedSource = _.findWhere(sources, { src: newSource.src });
-         // Note: `_.findWhere` returns a reference to an object. Thus the
-         // following updates the original object in `sources`.
-         selectedSource.selected = true;
-
-         player.src(sources);
-
-         player.one('loadeddata', function() {
-            player.removeClass(QUALITY_CHANGE_CLASS);
-            player.currentTime(currentTime);
-            if (!isPaused) {
-               player.play();
-            }
-         });
-      });
-
       return {
 
          setSource: function(playerSelectedSource, next) {