web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-02 06:32:07 +02:00
Code Releases Activity

fix: progress bar sometimes is not filled on 100% (#8633)

Browse Source 
* fix: the seek bar shouldn't throttle the update function on the ended event.

* test: add unit test
This commit is contained in:
Grzegorz Blaszczyk 2024-05-03 13:57:32 +02:00 committed by GitHub
parent cb76a24bd5
commit 3e697e942f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/control-bar/progress-control/seek-bar.js
View File

@ -52,7 +52,8 @@ class SeekBar extends Slider {
this.update_ = Fn.bind_(this, this.update);
this.update = Fn.throttle(this.update_, Fn.UPDATE_REFRESH_INTERVAL);
this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
this.on(this.player_, ['durationchange', 'timeupdate'], this.update);
this.on(this.player_, ['ended'], this.update_);
if (this.player_.liveTracker) {
this.on(this.player_.liveTracker, 'liveedgechange', this.update);
}
@ -478,7 +479,8 @@ class SeekBar extends Slider {
dispose() {
this.disableInterval_();
this.off(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
this.off(this.player_, ['durationchange', 'timeupdate'], this.update);
this.off(this.player_, ['ended'], this.update_);
if (this.player_.liveTracker) {
this.off(this.player_.liveTracker, 'liveedgechange', this.update);
}

47
test/unit/controls.test.js
View File

@ -176,6 +176,53 @@ QUnit.test("SeekBar doesn't set scrubbing on mouse down, only on mouse move", fu
player.dispose();
});
QUnit.test('SeekBar should be filled on 100% when the video/audio ends', function(assert) {
const player = TestHelpers.makePlayer();
const seekBar = player.controlBar.progressControl.seekBar;
const oldRAF = window.requestAnimationFrame;
const oldCAF = window.cancelAnimationFrame;
window.requestAnimationFrame = (fn) => window.setTimeout(fn, 1);
window.cancelAnimationFrame = (id) => window.clearTimeout(id);
player.triggerReady();
player.duration(1.5);
this.clock.tick(30);
player.trigger('timeupdate');
this.clock.tick(1);
assert.equal(seekBar.duration_, 1.5, 'SeekBar duration should equal player duration');
assert.equal(seekBar.currentTime_, 0, 'SeekBar current time should be zero on start');
assert.equal(seekBar.getPercent(), 0, 'SeekBar percent should be zero on start');
this.clock.tick(30);
player.currentTime(0.75);
player.trigger('timeupdate');
this.clock.tick(1);
assert.equal(seekBar.currentTime_, 0.75, 'SeekBar currentTime should equal player currentTime');
assert.equal(seekBar.getPercent(), 0.5, 'SeekBar percent equal to 50%');
this.clock.tick(30);
player.currentTime(1.495);
player.trigger('timeupdate');
this.clock.tick(1);
player.currentTime(1.5);
// The following 'timeupdate' should be wiped out by the throttle function!
player.trigger('timeupdate');
// The following 'ended' shouldn't be wiped out by the throttle function!
player.trigger('ended');
this.clock.tick(1);
assert.equal(seekBar.currentTime_, 1.5, 'SeekBar currentTime should equal player currentTime');
assert.equal(seekBar.getPercent(), 1, 'SeekBar percent equal to 100%');
player.dispose();
window.requestAnimationFrame = oldRAF;
window.cancelAnimationFrame = oldCAF;
});
QUnit.test('playback rate button is hidden by default', function(assert) {
assert.expect(1);