Permalink
Browse files

feat: set the play progress seek bar to 100% on ended (#4648)

  • Loading branch information...
BrandonOCasey authored and gkatsev committed Oct 31, 2017
1 parent 45a6b30 commit 5e9655f4a0b24bc1f57f5761e115f85d4afa1e65
Showing with 59 additions and 21 deletions.
  1. +59 −21 src/js/control-bar/progress-control/seek-bar.js
@@ -34,8 +34,11 @@ class SeekBar extends Slider {
*/
constructor(player, options) {
super(player, options);
this.update = Fn.throttle(Fn.bind(this, this.update), 50);
this.on(player, ['timeupdate', 'ended'], this.update);
this.on(player, 'timeupdate', this.update);
this.on(player, 'ended', this.handleEnded);
}
/**
@@ -53,53 +56,88 @@ class SeekBar extends Slider {
}
/**
* Update the seek bar's UI.
* This function updates the play progress bar and accessiblity
* attributes to whatever is passed in.
*
* @param {EventTarget~Event} [event]
* The `timeupdate` or `ended` event that caused this to run.
* @param {number} currentTime
* The currentTime value that should be used for accessiblity
*
* @listens Player#timeupdate
* @listens Player#ended
* @param {number} percent
* The percentage as a decimal that the bar should be filled from 0-1.
*
* @private
*/
update() {
const percent = super.update();
update_(currentTime, percent) {
const duration = this.player_.duration();
// Allows for smooth scrubbing, when player can't keep up.
const time = (this.player_.scrubbing()) ?
this.player_.getCache().currentTime :
this.player_.currentTime();
// machine readable value of progress bar (percentage complete)
this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
// human readable value of progress bar (time complete)
this.el_.setAttribute('aria-valuetext',
this.localize('progress bar timing: currentTime={1} duration={2}',
[formatTime(time, duration),
[formatTime(currentTime, duration),
formatTime(duration, duration)],
'{1} of {2}'));
// Update the `PlayProgressBar`.
this.bar.update(Dom.getBoundingClientRect(this.el_), percent);
}
/**
* Update the seek bar's UI.
*
* @param {EventTarget~Event} [event]
* The `timeupdate` or `ended` event that caused this to run.
*
* @listens Player#timeupdate
*
* @returns {number}
* The current percent at a number from 0-1
*/
update(event) {
const percent = super.update();
this.update_(this.getCurrentTime_(), percent);
return percent;
}
/**
* Get the percentage of media played so far.
* Get the value of current time but allows for smooth scrubbing,
* when player can't keep up.
*
* @return {number}
* The percentage of media played so far (0 to 1).
* The current time value to display
*
* @private
*/
getPercent() {
// Allows for smooth scrubbing, when player can't keep up.
const time = (this.player_.scrubbing()) ?
getCurrentTime_() {
return (this.player_.scrubbing()) ?
this.player_.getCache().currentTime :
this.player_.currentTime();
}
const percent = time / this.player_.duration();
/**
* We want the seek bar to be full on ended
* no matter what the actual internal values are. so we force it.
*
* @param {EventTarget~Event} [event]
* The `timeupdate` or `ended` event that caused this to run.
*
* @listens Player#ended
*/
handleEnded(event) {
this.update_(this.player_.duration(), 1);
}
/**
* Get the percentage of media played so far.
*
* @return {number}
* The percentage of media played so far (0 to 1).
*/
getPercent() {
const percent = this.getCurrentTime_() / this.player_.duration();
return percent >= 1 ? 1 : percent;
}

0 comments on commit 5e9655f

Please sign in to comment.