Refs #13 Support quality selector buttons anywhere in the player's component hierarchy

Previously, the SourceInterceptor made the assumption that the QualitySelector button component
is a direct child of the controlBar component. That may not always be true. Video.js allows you
to specify a nested hierarchy of components, and so when plugin users choose to move the
QualitySelector button elsewhere, the plugin does not work properly.

This commit introduces a new event type called QUALITY_REQUESTED to signal when the user is
requesting a quality change. The old QUALITY_SELECTED event is now used to denote when the
plugin actually uses a new quality source. This dichotomy eliminates the need for the
SourceInterceptor to have a reference to the QualitySelector button component.
This commit is contained in:
Matt Luedke 2017-12-01 18:25:45 -05:00 committed by Jeremy Thomerson
parent ec9e06196f
commit a682125480
5 changed files with 19 additions and 13 deletions

View file

@ -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();
}
},
/**