diff --git a/src/js/components/QualitySelector.js b/src/js/components/QualitySelector.js index 72e6ac8..a0a2b0c 100644 --- a/src/js/components/QualitySelector.js +++ b/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) { - this.setSelectedSource(source); + // Update interface instantly so the user's change is acknowledged + 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 diff --git a/src/js/index.js b/src/js/index.js index 0004740..478999b 100644 --- a/src/js/index.js +++ b/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; diff --git a/src/js/middleware/SourceInterceptor.js b/src/js/middleware/SourceInterceptor.js index d2223ca..19bff90 100644 --- a/src/js/middleware/SourceInterceptor.js +++ b/src/js/middleware/SourceInterceptor.js @@ -1,39 +1,11 @@ 'use strict'; -var _ = require('underscore'), - events = require('../events'), - QUALITY_CHANGE_CLASS = 'vjs-quality-changing'; +var _ = require('underscore'); 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) {