Controls cleanup, work on captions bug, click to invert time

1 files changed, 73 insertions, 66 deletions

diff --git a/src/js/ui.js b/src/js/ui.js
index b9328888..fe8fac0f 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -15,7 +15,7 @@ const ui = {
     },
 
     // Toggle native HTML5 media controls
-    toggleNativeControls(toggle) {
+    toggleNativeControls(toggle = false) {
         if (toggle && this.isHTML5) {
             this.media.setAttribute('controls', '');
         } else {
@@ -100,26 +100,6 @@ const ui = {
         ui.setTitle.call(this);
     },
 
-    // Show the duration on metadataloaded
-    displayDuration() {
-        if (!this.supported.ui) {
-            return;
-        }
-
-        // If there's only one time display, display duration there
-        if (!this.elements.display.duration && this.config.displayDuration && this.paused) {
-            ui.updateTimeDisplay.call(this, this.duration, this.elements.display.currentTime);
-        }
-
-        // If there's a duration element, update content
-        if (this.elements.display.duration) {
-            ui.updateTimeDisplay.call(this, this.duration, this.elements.display.duration);
-        }
-
-        // Update the tooltip (if visible)
-        controls.updateSeekTooltip.call(this);
-    },
-
     // Setup aria attribute for play and iframe title
     setTitle() {
         // Find the current text
@@ -165,23 +145,6 @@ const ui = {
         this.toggleControls(this.paused);
     },
 
-    // Update volume UI and storage
-    updateVolume() {
-        if (!this.supported.ui) {
-            return;
-        }
-
-        // Update range
-        if (utils.is.htmlElement(this.elements.inputs.volume)) {
-            ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
-        }
-
-        // Update checkbox for mute state
-        if (utils.is.htmlElement(this.elements.buttons.mute)) {
-            utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
-        }
-    },
-
     // Check if media is loading
     checkLoading(event) {
         this.loading = event.type === 'waiting';
@@ -199,8 +162,25 @@ const ui = {
         }, this.loading ? 250 : 0);
     },
 
+    // Update volume UI and storage
+    updateVolume() {
+        if (!this.supported.ui) {
+            return;
+        }
+
+        // Update range
+        if (utils.is.htmlElement(this.elements.inputs.volume)) {
+            ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
+        }
+
+        // Update checkbox for mute state
+        if (utils.is.htmlElement(this.elements.buttons.mute)) {
+            utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
+        }
+    },
+
     // Update seek value and lower fill
-    setRange(target, value) {
+    setRange(target, value = 0) {
         if (!utils.is.htmlElement(target)) {
             return;
         }
@@ -214,9 +194,8 @@ const ui = {
 
     // Set <progress> value
     setProgress(target, input) {
-        // Default to 0
-        const value = !utils.is.undefined(input) ? input : 0;
-        const progress = !utils.is.undefined(target) ? target : this.elements.display.buffer;
+        const value = utils.is.number(input) ? input : 0;
+        const progress = utils.is.htmlElement(target) ? target : this.elements.display.buffer;
 
         // Update value and label
         if (utils.is.htmlElement(progress)) {
@@ -232,7 +211,7 @@ const ui = {
 
     // Update <progress> elements
     updateProgress(event) {
-        if (!this.supported.ui) {
+        if (!this.supported.ui || !utils.is.event(event)) {
             return;
         }
 
@@ -280,41 +259,49 @@ const ui = {
     },
 
     // Update the displayed time
-    updateTimeDisplay(value, element) {
-        // Bail if there's no duration display
-        if (!utils.is.htmlElement(element)) {
-            return null;
+    updateTimeDisplay(target = null, time = 0, inverted = false) {
+        // Bail if there's no element to display or the value isn't a number
+        if (!utils.is.htmlElement(target) || !utils.is.number(time)) {
+            return;
         }
 
-        // Fallback to 0
-        const time = !Number.isNaN(value) ? value : 0;
+        // Format time component to add leading zero
+        const format = value => `0${value}`.slice(-2);
 
-        let secs = parseInt(time % 60, 10);
-        let mins = parseInt((time / 60) % 60, 10);
-        const hours = parseInt((time / 60 / 60) % 60, 10);
+        // Helpers
+        const getHours = value => parseInt((value / 60 / 60) % 60, 10);
+        const getMinutes = value => parseInt((value / 60) % 60, 10);
+        const getSeconds = value => parseInt(value % 60, 10);
 
-        // Do we need to display hours?
-        const displayHours = parseInt((this.duration / 60 / 60) % 60, 10) > 0;
+        // Breakdown to hours, mins, secs
+        let hours = getHours(time);
+        const mins = getMinutes(time);
+        const secs = getSeconds(time);
 
-        // Ensure it's two digits. For example, 03 rather than 3.
-        secs = `0${secs}`.slice(-2);
-        mins = `0${mins}`.slice(-2);
-
-        // Generate display
-        const display = `${(displayHours ? `${hours}:` : '') + mins}:${secs}`;
+        // Do we need to display hours?
+        if (getHours(this.duration) > 0) {
+            hours = `${hours}:`;
+        } else {
+            hours = '';
+        }
 
         // Render
-        // eslint-disable-next-line
-        element.textContent = display;
-
-        // Return for looping
-        return display;
+        // eslint-disable-next-line no-param-reassign
+        target.textContent = `${inverted ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
     },
 
     // Handle time change event
     timeUpdate(event) {
+        // Only invert if only one time element is displayed and used for both duration and currentTime
+        const invert = !utils.is.htmlElement(this.elements.display.duration) && this.config.invertTime;
+
         // Duration
-        ui.updateTimeDisplay.call(this, this.currentTime, this.elements.display.currentTime);
+        ui.updateTimeDisplay.call(
+            this,
+            this.elements.display.currentTime,
+            invert ? this.duration - this.currentTime : this.currentTime,
+            invert
+        );
 
         // Ignore updates while seeking
         if (event && event.type === 'timeupdate' && this.media.seeking) {
@@ -324,6 +311,26 @@ const ui = {
         // Playing progress
         ui.updateProgress.call(this, event);
     },
+
+    // Show the duration on metadataloaded
+    durationUpdate() {
+        if (!this.supported.ui) {
+            return;
+        }
+
+        // If there's only one time display, display duration there
+        if (!utils.is.htmlElement(this.elements.display.duration) && this.config.displayDuration && this.paused) {
+            ui.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration);
+        }
+
+        // If there's a duration element, update content
+        if (utils.is.htmlElement(this.elements.display.duration)) {
+            ui.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);
+        }
+
+        // Update the tooltip (if visible)
+        controls.updateSeekTooltip.call(this);
+    },
 };
 
 export default ui;