ARIA and Vimeo fixes

This commit is contained in:
Sam Potts
2018-04-18 18:29:43 +10:00
parent 88d766aeae
commit a97b08e8ea
17 changed files with 1934 additions and 846 deletions

20
src/js/controls.js vendored
View File

@ -15,10 +15,7 @@ const browser = utils.getBrowser();
const controls = {
// Webkit polyfill for lower fill range
updateRangeFill(target) {
// WebKit only
if (!browser.isWebkit) {
return;
}
// Get range from event if event passed
const range = utils.is.event(target) ? target.target : target;
@ -28,6 +25,14 @@ const controls = {
return;
}
// Set aria value for https://github.com/sampotts/plyr/issues/905
range.setAttribute('aria-valuenow', range.value);
// WebKit only
if (!browser.isWebkit) {
return;
}
// Set CSS custom property
range.style.setProperty('--value', `${range.value / range.max * 100}%`);
},
@ -238,6 +243,7 @@ const controls = {
'label',
{
for: attributes.id,
id: `${attributes.id}-label`,
class: this.config.classNames.hidden,
},
i18n.get(type, this.config),
@ -255,6 +261,12 @@ const controls = {
step: 0.01,
value: 0,
autocomplete: 'off',
// A11y fixes for https://github.com/sampotts/plyr/issues/905
role: 'slider',
'aria-labelledby': `${attributes.id}-label`,
'aria-valuemin': 0,
'aria-valuemax': 100,
'aria-valuenow': 0,
},
attributes,
),

View File

@ -134,7 +134,9 @@ const vimeo = {
utils.dispatchEvent.call(player, player.media, 'seeking');
// Seek after events
player.embed.setCurrentTime(time);
player.embed.setCurrentTime(time).catch(() => {
// Do nothing
});
// Restore pause state
if (paused) {
@ -320,6 +322,15 @@ const vimeo = {
if (parseInt(data.percent, 10) === 1) {
utils.dispatchEvent.call(player, player.media, 'canplaythrough');
}
// Get duration as if we do it before load, it gives an incorrect value
// https://github.com/sampotts/plyr/issues/891
player.embed.getDuration().then(value => {
if (value !== player.media.duration) {
player.media.duration = value;
utils.dispatchEvent.call(player, player.media, 'durationchange');
}
});
});
player.embed.on('seeked', () => {

View File

@ -452,7 +452,7 @@ class Plyr {
}
// Set
this.media.currentTime = parseFloat(targetTime.toFixed(4));
this.media.currentTime = targetTime;
// Logging
this.debug.log(`Seeking to ${this.currentTime} seconds`);
@ -498,7 +498,7 @@ class Plyr {
*/
get duration() {
// Faux duration set via config
const fauxDuration = parseInt(this.config.duration, 10);
const fauxDuration = parseFloat(this.config.duration);
// True duration
const realDuration = this.media ? Number(this.media.duration) : 0;