From acc641a8a213f1396ac3ed72688b23358f72624b Mon Sep 17 00:00:00 2001 From: Vinay Date: Tue, 7 Nov 2017 12:43:50 -0800 Subject: [PATCH] fix: make the progress bar progress smoothly (#4591) Update the position of the seek bar in a 30ms interval and then redraw inside of a requestAnimationFrame. --- .../control-bar/progress-control/seek-bar.js | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index db16f4b63c..952a0e6f7d 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -15,6 +15,9 @@ import './mouse-time-display.js'; // The number of seconds the `step*` functions move the timeline. const STEP_SECONDS = 5; +// The interval at which the bar should update as it progresses. +const UPDATE_REFRESH_INTERVAL = 30; + /** * Seek bar and container for the progress bars. Uses {@link PlayProgressBar} * as its `bar`. @@ -35,10 +38,30 @@ class SeekBar extends Slider { constructor(player, options) { super(player, options); - this.update = Fn.throttle(Fn.bind(this, this.update), 50); + this.update = Fn.throttle(Fn.bind(this, this.update), UPDATE_REFRESH_INTERVAL); + this.on(player, 'timeupdate', this.update); this.on(player, 'ended', this.handleEnded); + // when playing, let's ensure we smoothly update the play progress bar + // via an interval + this.updateInterval = null; + + this.on(player, ['playing'], () => { + this.clearInterval(this.updateInterval); + + this.updateInterval = this.setInterval(() =>{ + this.requestAnimationFrame(() => { + this.update(); + }); + }, UPDATE_REFRESH_INTERVAL); + }); + + this.on(player, ['ended', 'pause', 'waiting'], () => { + this.clearInterval(this.updateInterval); + }); + + this.on(player, ['timeupdate', 'ended'], this.update); } /**