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)
This commit is contained in:
Ethan Smith 2017-10-18 11:54:37 -04:00
parent dedaf8e9be
commit 9dd9ca108b
3 changed files with 38 additions and 33 deletions

View File

@ -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

View File

@ -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;

View File

@ -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) {