fix: Make sure time displays use correctly-formatted time. (#4643)

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

@@ -35,6 +35,21 @@ class RemainingTimeDisplay extends TimeDisplay {
     return 'vjs-remaining-time';
   }
 
+  /**
+   * The remaining time display prefixes numbers with a "minus" character.
+   *
+   * @param  {number} time
+   *         A numeric time, in seconds.
+   *
+   * @return {string}
+   *         A formatted time
+   *
+   * @private
+   */
+  formatTime_(time) {
+    return '-' + super.formatTime_(time);
+  }
+
   /**
    * Update remaining time display.
    *

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

@@ -66,10 +66,25 @@ class TimeDisplay extends Component {
     if (this.textNode_) {
       this.contentEl_.removeChild(this.textNode_);
     }
-    this.textNode_ = document.createTextNode(` -${this.formattedTime_ || '0:00'}`);
+    this.textNode_ = document.createTextNode(this.formattedTime_ || '0:00');
     this.contentEl_.appendChild(this.textNode_);
   }
 
+  /**
+   * Generates a formatted time for this component to use in display.
+   *
+   * @param  {number} time
+   *         A numeric time, in seconds.
+   *
+   * @return {string}
+   *         A formatted time
+   *
+   * @private
+   */
+  formatTime_(time) {
+    return formatTime(time);
+  }
+
   /**
    * Updates the time display text node if it has what was passed in changed
    * the formatted time.
@@ -80,7 +95,7 @@ class TimeDisplay extends Component {
    * @private
    */
   updateFormattedTime_(time) {
-    const formattedTime = formatTime(time);
+    const formattedTime = this.formatTime_(time);
 
     if (formattedTime === this.formattedTime_) {
       return;