Skip to content

Commit

Permalink
fix: Don't remove vjs-waiting until time changes (#5533)
Browse files Browse the repository at this point in the history
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 0060747
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 4 deletions.
13 changes: 12 additions & 1 deletion src/js/player.js
Expand Up @@ -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);
}

/**
Expand Down
19 changes: 16 additions & 3 deletions test/unit/player.test.js
Expand Up @@ -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();
});

Expand Down

0 comments on commit 0060747

Please sign in to comment.