feat: display currentTime as duration and remainingTime as 0 on ended (…

…#4634)

src/js/control-bar/time-controls/current-time-display.js

@@ -11,6 +11,20 @@ import Component from '../../component.js';
  */
 class CurrentTimeDisplay extends TimeDisplay {
 
+  /**
+   * Creates an instance of this class.
+   *
+   * @param {Player} player
+   *        The `Player` that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, 'ended', this.handleEnded);
+  }
+
   /**
    * Builds the default DOM `className`.
    *
@@ -36,6 +50,23 @@ class CurrentTimeDisplay extends TimeDisplay {
     this.updateFormattedTime_(time);
   }
 
+  /**
+   * When the player fires ended there should be no time left. Sadly
+   * this is not always the case, lets make it seem like that is the case
+   * for users.
+   *
+   * @param {EventTarget~Event} [event]
+   *        The `ended` event that caused this to run.
+   *
+   * @listens Player#ended
+   */
+  handleEnded(event) {
+    if (!this.player_.duration()) {
+      return;
+    }
+    this.updateFormattedTime_(this.player.duration());
+  }
+
 }
 
 /**

src/js/control-bar/time-controls/remaining-time-display.js

@@ -22,6 +22,7 @@ class RemainingTimeDisplay extends TimeDisplay {
   constructor(player, options) {
     super(player, options);
     this.on(player, 'durationchange', this.throttledUpdateContent);
+    this.on(player, 'ended', this.handleEnded);
   }
 
   /**
@@ -50,6 +51,23 @@ class RemainingTimeDisplay extends TimeDisplay {
 
     this.updateFormattedTime_(this.player_.remainingTime());
   }
+
+  /**
+   * When the player fires ended there should be no time left. Sadly
+   * this is not always the case, lets make it seem like that is the case
+   * for users.
+   *
+   * @param {EventTarget~Event} [event]
+   *        The `ended` event that caused this to run.
+   *
+   * @listens Player#ended
+   */
+  handleEnded(event) {
+    if (!this.player_.duration()) {
+      return;
+    }
+    this.updateFormattedTime_(0);
+  }
 }
 
 /**