web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-04-11 11:42:08 +02:00
Code Releases Activity

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

Browse Source
This commit is contained in:
Brandon Casey 2017-10-31 16:02:53 +00:00 committed by Gary Katsevman
parent 45a6b3010d
commit 5e9655f4a0
1 changed files with 59 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/js/control-bar/progress-control/seek-bar.js
View File

@ -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,39 +56,80 @@ 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 value of current time but allows for smooth scrubbing,
* when player can't keep up.
*
* @return {number}
* The current time value to display
*
* @private
*/
getCurrentTime_() {
return (this.player_.scrubbing()) ?
this.player_.getCache().currentTime :
this.player_.currentTime();
}
/**
* 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.
*
@ -93,13 +137,7 @@ class SeekBar extends Slider {
* The percentage of media played so far (0 to 1).
*/
getPercent() {
// Allows for smooth scrubbing, when player can't keep up.
const time = (this.player_.scrubbing()) ?
this.player_.getCache().currentTime :
this.player_.currentTime();
const percent = time / this.player_.duration();
const percent = this.getCurrentTime_() / this.player_.duration();
return percent >= 1 ? 1 : percent;
}