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

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;
   }