diff --git a/src/js/components/QualityOption.js b/src/js/components/QualityOption.js index 92bd497..7b64bd6 100644 --- a/src/js/components/QualityOption.js +++ b/src/js/components/QualityOption.js @@ -39,7 +39,7 @@ module.exports = function(videojs) { */ handleClick: function(event) { MenuItem.prototype.handleClick.call(this, event); - this.player().trigger(events.QUALITY_SELECTED, this.source); + this.player().trigger(events.QUALITY_REQUESTED, this.source); }, }); diff --git a/src/js/components/QualitySelector.js b/src/js/components/QualitySelector.js index 8b66df1..16c3398 100644 --- a/src/js/components/QualitySelector.js +++ b/src/js/components/QualitySelector.js @@ -25,7 +25,7 @@ module.exports = function(videojs) { MenuButton.call(this, player, options); // Update interface instantly so the user's change is acknowledged - player.on(events.QUALITY_SELECTED, function(event, newSource) { + player.on(events.QUALITY_REQUESTED, function(event, newSource) { this.setSelectedSource(newSource); player.addClass(QUALITY_CHANGE_CLASS); @@ -34,6 +34,11 @@ module.exports = function(videojs) { }); }.bind(this)); + player.on(events.QUALITY_SELECTED, function(event, newSource) { + // Update the selected source with the source that was actually selected + this.setSelectedSource(newSource); + }.bind(this)); + // Since it's possible for the player to get a source before the selector is // created, make sure to update once we get a "ready" signal. player.one('ready', function() { @@ -50,8 +55,12 @@ module.exports = function(videojs) { * @param source {object} player source to display as selected */ setSelectedSource: function(source) { - this.selectedSrc = source ? source.src : undefined; - this.update(); + var src = (source ? source.src : undefined); + + if (this.selectedSrc !== src) { + this.selectedSrc = src; + this.update(); + } }, /** diff --git a/src/js/events.js b/src/js/events.js index 2301e92..fb25fdf 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -2,6 +2,7 @@ module.exports = { + QUALITY_REQUESTED: 'qualityRequested', QUALITY_SELECTED: 'qualitySelected', }; diff --git a/src/js/index.js b/src/js/index.js index 8155d0c..d1de183 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -13,7 +13,7 @@ module.exports = function(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) { + player.on(events.QUALITY_REQUESTED, function(event, newSource) { var sources = player.currentSources(), currentTime = player.currentTime(), isPaused = player.paused(), diff --git a/src/js/middleware/SourceInterceptor.js b/src/js/middleware/SourceInterceptor.js index 19bff90..f302f22 100644 --- a/src/js/middleware/SourceInterceptor.js +++ b/src/js/middleware/SourceInterceptor.js @@ -1,6 +1,7 @@ 'use strict'; -var _ = require('underscore'); +var _ = require('underscore'), + events = require('../events'); module.exports = function(videojs) { @@ -10,8 +11,7 @@ module.exports = function(videojs) { setSource: function(playerSelectedSource, next) { var sources = player.currentSources(), - userSelectedSource, chosenSource, - qualitySelector; + userSelectedSource, chosenSource; // There are generally two source options, the one that videojs // auto-selects and the one that a "user" of this plugin has @@ -28,11 +28,7 @@ module.exports = function(videojs) { chosenSource = userSelectedSource || playerSelectedSource; - // Update the quality selector with the new source - qualitySelector = player.controlBar.getChild('qualitySelector'); - if (qualitySelector) { - qualitySelector.setSelectedSource(chosenSource); - } + player.trigger(events.QUALITY_SELECTED, chosenSource); // Pass along the chosen source next(null, chosenSource);