This commit is contained in:
Sam Potts
2018-06-11 16:19:11 +10:00
parent 7c6d4666e9
commit 38f10d4cc6
9 changed files with 112 additions and 59 deletions

55
dist/plyr.js vendored
View File

@ -1789,7 +1789,6 @@ var i18n = {
var browser = utils.getBrowser();
var controls = {
// Get icon URL
getIconUrl: function getIconUrl() {
var url = new URL(this.config.iconUrl, window.location);
@ -2168,6 +2167,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;
@ -2179,11 +2195,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);
},
@ -2286,8 +2299,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) {
@ -2373,11 +2398,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);
@ -3218,7 +3248,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');
});
}
}
@ -3659,6 +3688,7 @@ var defaults$1 = {
pause: 'Pause',
fastForward: 'Forward {seektime}s',
seek: 'Seek',
seekLabel: '{currentTime} of {duration}',
played: 'Played',
buffered: 'Buffered',
currentTime: 'Current time',
@ -3673,6 +3703,7 @@ var defaults$1 = {
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
menuBack: 'Go back to previous menu',
speed: 'Speed',
normal: 'Normal',
quality: 'Quality',
@ -4223,9 +4254,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
@ -7080,9 +7108,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);