diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index ad0f452ed2..d27eac1760 100644 --- 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 index ddad47931e..fcbc0be3e3 100644 --- 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);