Permalink
Browse files

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.
  • Loading branch information...
vhmth authored and gkatsev committed Nov 7, 2017
1 parent c7ad7b3 commit acc641a8a213f1396ac3ed72688b23358f72624b
Showing with 24 additions and 1 deletion.
  1. +24 −1 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);
}
/**

0 comments on commit acc641a

Please sign in to comment.