From 20f7fe991f709d6d62b464440caf7523e8ac19ba Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 3 Oct 2017 12:52:58 -0400
Subject: [PATCH] fix: Make sure time displays use correctly-formatted time.
 (#4643)

---
 .../time-controls/remaining-time-display.js   | 15 +++++++++++++++
 .../control-bar/time-controls/time-display.js | 19 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/js/control-bar/time-controls/remaining-time-display.js b/src/js/control-bar/time-controls/remaining-time-display.js
index a1f88fcad..79ec5e9d2 100644
--- a/src/js/control-bar/time-controls/remaining-time-display.js
+++ b/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.
    *
diff --git a/src/js/control-bar/time-controls/time-display.js b/src/js/control-bar/time-controls/time-display.js
index 9e5d5d4ee..c90dbc7ae 100644
--- a/src/js/control-bar/time-controls/time-display.js
+++ b/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;