diff options
Diffstat (limited to 'src/js/ui.js')
| -rw-r--r-- | src/js/ui.js | 139 |
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; |