From 1bc452c349bf5e8f40a3d129d9eaa5029b91c332 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 11 Jun 2018 16:54:35 +1000 Subject: [PATCH] Merge --- dist/plyr.polyfilled.js | 55 ++++++++++++++++++++++++++++++----------- 1 file changed, 40 insertions(+), 15 deletions(-) diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js index 68b195d1..b23cc540 100644 --- a/dist/plyr.polyfilled.js +++ b/dist/plyr.polyfilled.js @@ -7182,7 +7182,6 @@ var i18n = { var browser = utils.getBrowser(); var controls = { - // Get icon URL getIconUrl: function getIconUrl() { var url = new URL(this.config.iconUrl, window.location); @@ -7567,6 +7566,23 @@ var controls = { }, + // Format a time for display + formatTime: function formatTime() { + var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var inverted = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + // Bail if the value isn't a number + if (!utils.is.number(time)) { + return time; + } + + // Always display hours if duration is over an hour + var forceHours = utils.getHours(this.duration) > 0; + + return utils.formatTime(time, forceHours, inverted); + }, + + // Update the displayed time updateTimeDisplay: function updateTimeDisplay() { var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; @@ -7578,11 +7594,8 @@ var controls = { return; } - // Always display hours if duration is over an hour - var forceHours = utils.getHours(this.duration) > 0; - // eslint-disable-next-line no-param-reassign - target.innerText = utils.formatTime(time, forceHours, inverted); + target.innerText = controls.formatTime(time, inverted); }, @@ -7685,8 +7698,20 @@ var controls = { return; } - // Set aria value for https://github.com/sampotts/plyr/issues/905 - range.setAttribute('aria-valuenow', range.value); + // Set aria values for https://github.com/sampotts/plyr/issues/905 + if (utils.matches(range, this.config.selectors.inputs.seek)) { + range.setAttribute('aria-valuenow', this.currentTime); + var currentTime = controls.formatTime(this.currentTime); + var duration = controls.formatTime(this.duration); + var format = i18n.get('seekLabel', this.config); + range.setAttribute('aria-valuetext', format.replace('{currentTime}', currentTime).replace('{duration}', duration)); + } else if (utils.matches(range, this.config.selectors.inputs.volume)) { + var percent = range.value * 100; + range.setAttribute('aria-valuenow', percent); + range.setAttribute('aria-valuetext', percent + '%'); + } else { + range.setAttribute('aria-valuenow', range.value); + } // WebKit only if (!browser.isWebkit) { @@ -7772,11 +7797,16 @@ var controls = { // Show the duration on metadataloaded or durationchange events durationUpdate: function durationUpdate() { - // Bail if no ui or durationchange event triggered after playing/seek when invertTime is false + // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false if (!this.supported.ui || !this.config.invertTime && this.currentTime) { return; } + // Update ARIA values + if (utils.is.element(this.elements.inputs.seek)) { + this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration); + } + // If there's a spot to display duration var hasDuration = utils.is.element(this.elements.display.duration); @@ -8620,7 +8650,6 @@ var controls = { Array.from(labels).forEach(function (label) { utils.toggleClass(label, _this7.config.classNames.hidden, false); utils.toggleClass(label, _this7.config.classNames.tooltip, true); - label.setAttribute('role', 'tooltip'); }); } } @@ -9118,6 +9147,7 @@ var defaults$1 = { pause: 'Pause', fastForward: 'Forward {seektime}s', seek: 'Seek', + seekLabel: '{currentTime} of {duration}', played: 'Played', buffered: 'Buffered', currentTime: 'Current time', @@ -9132,6 +9162,7 @@ var defaults$1 = { frameTitle: 'Player for {title}', captions: 'Captions', settings: 'Settings', + menuBack: 'Go back to previous menu', speed: 'Speed', normal: 'Normal', quality: 'Quality', @@ -9683,9 +9714,6 @@ var ui = { // If there's a media title set, use that for the label if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) { label += ', ' + this.config.title; - - // Set container label - this.elements.container.setAttribute('aria-label', this.config.title); } // If there's a play button, set label @@ -12557,9 +12585,6 @@ var Plyr = function () { utils.wrap(this.media, this.elements.container); } - // Allow focus to be captured - this.elements.container.setAttribute('tabindex', 0); - // Add style hook ui.addStyleHook.call(this);