ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Sam Potts
2018-05-28 10:19:07 +10:00
parent cd51788b98
commit 90c5735904
19 changed files with 123 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/captions.js
View File

@ -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
View File

@ -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;

5
src/js/defaults.js
View File

@ -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',

2
src/js/fullscreen.js
View File

@ -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

2
src/js/plyr.js
View File

@ -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
View File

@ -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') {

22
src/js/utils.js
View File

@ -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)) {

8
src/sass/components/control.scss
View File

@ -34,10 +34,10 @@
}
// Change icons on state change
.plyr__control[aria-pressed='false'] .icon--pressed,
.plyr__control[aria-pressed='true'] .icon--not-pressed,
.plyr__control[aria-pressed='false'] .label--pressed,
.plyr__control[aria-pressed='true'] .label--not-pressed {
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}