WIP
This commit is contained in:
Sam Potts
@ -262,7 +262,7 @@ const captions = {
|
||||
|
||||
if (active) {
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.active, true);
|
||||
utils.toggleState(this.elements.buttons.captions, true);
|
||||
this.elements.buttons.captions.pressed = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
47
src/js/controls.js
vendored
47
src/js/controls.js
vendored
@ -243,9 +243,6 @@ const controls = {
|
||||
// Label/Tooltip
|
||||
button.appendChild(controls.createLabel.call(this, labelPressed, { class: 'label--pressed' }));
|
||||
button.appendChild(controls.createLabel.call(this, label, { class: 'label--not-pressed' }));
|
||||
|
||||
// Add aria attributes
|
||||
attributes['aria-pressed'] = false;
|
||||
} else {
|
||||
button.appendChild(controls.createIcon.call(this, icon));
|
||||
button.appendChild(controls.createLabel.call(this, label));
|
||||
@ -267,22 +264,23 @@ const controls = {
|
||||
this.elements.buttons[type] = button;
|
||||
}
|
||||
|
||||
// Toggle classname when pressed property is set
|
||||
const className = this.config.classNames.controlPressed;
|
||||
Object.defineProperty(button, 'pressed', {
|
||||
enumerable: true,
|
||||
get() {
|
||||
return utils.hasClass(button, className);
|
||||
},
|
||||
set(pressed = false) {
|
||||
utils.toggleClass(button, className, pressed);
|
||||
},
|
||||
});
|
||||
|
||||
return button;
|
||||
},
|
||||
|
||||
// Create an <input type='range'>
|
||||
createRange(type, attributes) {
|
||||
// Seek label
|
||||
const label = utils.createElement(
|
||||
'label',
|
||||
{
|
||||
for: attributes.id,
|
||||
id: `${attributes.id}-label`,
|
||||
class: this.config.classNames.hidden,
|
||||
},
|
||||
i18n.get(type, this.config),
|
||||
);
|
||||
|
||||
// Seek input
|
||||
const input = utils.createElement(
|
||||
'input',
|
||||
@ -297,7 +295,7 @@ const controls = {
|
||||
autocomplete: 'off',
|
||||
// A11y fixes for https://github.com/sampotts/plyr/issues/905
|
||||
role: 'slider',
|
||||
'aria-labelledby': `${attributes.id}-label`,
|
||||
'aria-label': i18n.get(type, this.config),
|
||||
'aria-valuemin': 0,
|
||||
'aria-valuemax': 100,
|
||||
'aria-valuenow': 0,
|
||||
@ -311,10 +309,7 @@ const controls = {
|
||||
// Set the fill for webkit now
|
||||
controls.updateRangeFill.call(this, input);
|
||||
|
||||
return {
|
||||
label,
|
||||
input,
|
||||
};
|
||||
return input;
|
||||
},
|
||||
|
||||
// Create a <progress>
|
||||
@ -435,7 +430,7 @@ const controls = {
|
||||
|
||||
// Update mute state
|
||||
if (utils.is.element(this.elements.buttons.mute)) {
|
||||
utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
|
||||
this.elements.buttons.mute.pressed = this.muted || this.volume === 0;
|
||||
}
|
||||
},
|
||||
|
||||
@ -1149,11 +1144,9 @@ const controls = {
|
||||
const progress = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.progress));
|
||||
|
||||
// Seek range slider
|
||||
const seek = controls.createRange.call(this, 'seek', {
|
||||
progress.appendChild(controls.createRange.call(this, 'seek', {
|
||||
id: `plyr-seek-${data.id}`,
|
||||
});
|
||||
progress.appendChild(seek.label);
|
||||
progress.appendChild(seek.input);
|
||||
}));
|
||||
|
||||
// Buffer progress
|
||||
progress.appendChild(controls.createProgress.call(this, 'buffer'));
|
||||
@ -1207,15 +1200,13 @@ const controls = {
|
||||
};
|
||||
|
||||
// Create the volume range slider
|
||||
const range = controls.createRange.call(
|
||||
volume.appendChild(controls.createRange.call(
|
||||
this,
|
||||
'volume',
|
||||
utils.extend(attributes, {
|
||||
id: `plyr-volume-${data.id}`,
|
||||
}),
|
||||
);
|
||||
volume.appendChild(range.label);
|
||||
volume.appendChild(range.input);
|
||||
));
|
||||
|
||||
this.elements.volume = volume;
|
||||
|
||||
|
||||
@ -18,6 +18,10 @@ const defaults = {
|
||||
// Only allow one media playing at once (vimeo only)
|
||||
autopause: true,
|
||||
|
||||
// Allow inline playback on iOS (this effects YouTube/Vimeo - HTML5 requires the attribute present)
|
||||
// TODO: Remove iosNative fullscreen option in favour of this (logic needs work)
|
||||
playsinline: true,
|
||||
|
||||
// Default time to skip when rewind/fast forward
|
||||
seekTime: 10,
|
||||
|
||||
@ -334,6 +338,7 @@ const defaults = {
|
||||
posterEnabled: 'plyr__poster-enabled',
|
||||
ads: 'plyr__ads',
|
||||
control: 'plyr__control',
|
||||
controlPressed: 'plyr__control--pressed',
|
||||
playing: 'plyr--playing',
|
||||
paused: 'plyr--paused',
|
||||
stopped: 'plyr--stopped',
|
||||
|
||||
@ -15,7 +15,7 @@ function onChange() {
|
||||
// Update toggle button
|
||||
const button = this.player.elements.buttons.fullscreen;
|
||||
if (utils.is.element(button)) {
|
||||
utils.toggleState(button, this.active);
|
||||
button.pressed = this.active;
|
||||
}
|
||||
|
||||
// Trigger an event
|
||||
|
||||
@ -854,7 +854,7 @@ class Plyr {
|
||||
this.captions.active = show;
|
||||
|
||||
// Toggle state
|
||||
utils.toggleState(this.elements.buttons.captions, this.captions.active);
|
||||
this.elements.buttons.captions.pressed = this.captions.active;
|
||||
|
||||
// Add class hook
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.captions.active);
|
||||
|
||||
25
src/js/ui.js
25
src/js/ui.js
@ -164,17 +164,16 @@ const ui = {
|
||||
}
|
||||
|
||||
// Load the image, and set poster if successful
|
||||
const loadPromise = utils.loadImage(poster)
|
||||
.then(() => {
|
||||
this.elements.poster.style.backgroundImage = `url('${poster}')`;
|
||||
Object.assign(this.elements.poster.style, {
|
||||
backgroundImage: `url('${poster}')`,
|
||||
// Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
|
||||
backgroundSize: '',
|
||||
});
|
||||
ui.togglePoster.call(this, true);
|
||||
return poster;
|
||||
const loadPromise = utils.loadImage(poster).then(() => {
|
||||
this.elements.poster.style.backgroundImage = `url('${poster}')`;
|
||||
Object.assign(this.elements.poster.style, {
|
||||
backgroundImage: `url('${poster}')`,
|
||||
// Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
|
||||
backgroundSize: '',
|
||||
});
|
||||
ui.togglePoster.call(this, true);
|
||||
return poster;
|
||||
});
|
||||
|
||||
// Hide the element if the poster can't be loaded (otherwise it will just be a black element covering the video)
|
||||
loadPromise.catch(() => ui.togglePoster.call(this, false));
|
||||
@ -190,8 +189,10 @@ const ui = {
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
|
||||
|
||||
// Set ARIA state
|
||||
utils.toggleState(this.elements.buttons.play, this.playing);
|
||||
// Set state
|
||||
Array.from(this.elements.buttons.play).forEach(target => {
|
||||
target.pressed = this.playing;
|
||||
});
|
||||
|
||||
// Only update controls on non timeupdate events
|
||||
if (utils.is.event(event) && event.type === 'timeupdate') {
|
||||
|
||||
@ -572,28 +572,6 @@ const utils = {
|
||||
element.dispatchEvent(event);
|
||||
},
|
||||
|
||||
// Toggle aria-pressed state on a toggle button
|
||||
// http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
|
||||
toggleState(element, input) {
|
||||
// If multiple elements passed
|
||||
if (utils.is.array(element) || utils.is.nodeList(element)) {
|
||||
Array.from(element).forEach(target => utils.toggleState(target, input));
|
||||
return;
|
||||
}
|
||||
|
||||
// Bail if no target
|
||||
if (!utils.is.element(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get state
|
||||
const pressed = element.getAttribute('aria-pressed') === 'true';
|
||||
const state = utils.is.boolean(input) ? input : !pressed;
|
||||
|
||||
// Set the attribute on target
|
||||
element.setAttribute('aria-pressed', state);
|
||||
},
|
||||
|
||||
// Format string
|
||||
format(input, ...args) {
|
||||
if (utils.is.empty(input)) {
|
||||
|
||||
Reference in New Issue
Block a user