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

* fix: the seek bar shouldn't throttle the update function on the ended event. * test: add unit test
videojs · May 3, 2024 · 3e697e9 · 3e697e9
1 parent cb76a24
commit 3e697e9
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
@@ -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);
     }

diff --git a/test/unit/controls.test.js b/test/unit/controls.test.js
@@ -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);