Permalink
Browse files

fix: Don't remove vjs-waiting until time changes (#5533)

Sometimes the vjs-waiting class is removed prematurely after the player gets into a waiting state. This removes the graphic waiting spinner while the player is still waiting. Instead, we should make sure that the currentTime has updated before removing the spinner.
  • Loading branch information...
gesinger authored and gkatsev committed Nov 2, 2018
1 parent 2e70450 commit 0060747d5a6977e3827b96b10b3f169778e0f423
Showing with 28 additions and 4 deletions.
  1. +12 −1 src/js/player.js
  2. +16 −3 test/unit/player.test.js
@@ -1604,7 +1604,18 @@ class Player extends Component {
* @type {EventTarget~Event}
*/
this.trigger('waiting');
this.one('timeupdate', () => this.removeClass('vjs-waiting'));

// Browsers may emit a timeupdate event after a waiting event. In order to prevent
// premature removal of the waiting class, wait for the time to change.
const timeWhenWaiting = this.currentTime();
const timeUpdateListener = () => {
if (timeWhenWaiting !== this.currentTime()) {
this.removeClass('vjs-waiting');
this.off('timeupdate', timeUpdateListener);
}
};

this.on('timeupdate', timeUpdateListener);
}

/**
@@ -1460,13 +1460,26 @@ QUnit.test('player#reset loads the first item in the techOrder and then techCall
assert.equal(techCallMethod, 'reset', 'we then reset the tech');
});

QUnit.test('Remove waiting class on timeupdate after tech waiting', function(assert) {
QUnit.test('Remove waiting class after tech waiting when timeupdate shows a time change', function(assert) {
const player = TestHelpers.makePlayer();

player.currentTime = () => 1;
player.tech_.trigger('waiting');
assert.ok(/vjs-waiting/.test(player.el().className), 'vjs-waiting is added to the player el on tech waiting');
assert.ok(
/vjs-waiting/.test(player.el().className),
'vjs-waiting is added to the player el on tech waiting'
);
player.trigger('timeupdate');
assert.ok(
/vjs-waiting/.test(player.el().className),
'vjs-waiting still exists on the player el when time hasn\'t changed on timeupdate'
);
player.currentTime = () => 2;
player.trigger('timeupdate');
assert.ok(!(/vjs-waiting/).test(player.el().className), 'vjs-waiting is removed from the player el on timeupdate');
assert.notOk(
(/vjs-waiting/).test(player.el().className),
'vjs-waiting removed from the player el when time has changed on timeupdate'
);
player.dispose();
});

0 comments on commit 0060747

Please sign in to comment.