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

89
dist/plyr.polyfilled.js vendored
View File

@ -6504,31 +6504,6 @@ var utils = {
},
// Toggle aria-pressed state on a toggle button
// http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
toggleState: function toggleState(element, input) {
// If multiple elements passed
if (utils.is.array(element) || utils.is.nodeList(element)) {
Array.from(element).forEach(function (target) {
return utils.toggleState(target, input);
});
return;
}
// Bail if no target
if (!utils.is.element(element)) {
return;
}
// Get state
var pressed = element.getAttribute('aria-pressed') === 'true';
var state = utils.is.boolean(input) ? input : !pressed;
// Set the attribute on target
element.setAttribute('aria-pressed', state);
},
// Format string
format: function format(input) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@ -7432,9 +7407,6 @@ var 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));
@ -7456,6 +7428,40 @@ var controls = {
this.elements.buttons[type] = button;
}
/* // 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.classList.contains(this.config.className;
const state = utils.is.boolean(input) ? input : !pressed;
// Set the attribute on target
element.setAttribute('aria-pressed', state);
}, */
var className = this.config.classNames.controlPressed;
Object.defineProperty(button, 'pressed', {
enumerable: true,
configurable: true,
get: function get() {
return utils.hasClass(button, className);
},
set: function set() {
var pressed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
utils.toggleClass(button, className, pressed);
}
});
return button;
},
@ -7616,7 +7622,7 @@ var 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;
}
},
@ -8931,7 +8937,7 @@ var 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;
}
}
};
@ -8996,6 +9002,10 @@ var defaults$1 = {
// 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,
@ -9241,6 +9251,7 @@ var defaults$1 = {
posterEnabled: 'plyr__poster-enabled',
ads: 'plyr__ads',
control: 'plyr__control',
controlPressed: 'plyr__control--pressed',
playing: 'plyr--playing',
paused: 'plyr--paused',
stopped: 'plyr--stopped',
@ -9311,7 +9322,7 @@ function onChange() {
// Update toggle button
var button = this.player.elements.buttons.fullscreen;
if (utils.is.element(button)) {
utils.toggleState(button, this.active);
button.pressed = this.active;
}
// Trigger an event
@ -9726,13 +9737,17 @@ var ui = {
// Check playing state
checkPlaying: function checkPlaying(event) {
var _this3 = this;
// Class hooks
utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
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(function (target) {
target.pressed = _this3.playing;
});
// Only update controls on non timeupdate events
if (utils.is.event(event) && event.type === 'timeupdate') {
@ -9746,7 +9761,7 @@ var ui = {
// Check if media is loading
checkLoading: function checkLoading(event) {
var _this3 = this;
var _this4 = this;
this.loading = ['stalled', 'waiting'].includes(event.type);
@ -9756,10 +9771,10 @@ var ui = {
// Timer to prevent flicker when seeking
this.timers.loading = setTimeout(function () {
// Update progress bar loading class state
utils.toggleClass(_this3.elements.container, _this3.config.classNames.loading, _this3.loading);
utils.toggleClass(_this4.elements.container, _this4.config.classNames.loading, _this4.loading);
// Update controls visibility
ui.toggleControls.call(_this3);
ui.toggleControls.call(_this4);
}, this.loading ? 250 : 0);
},
@ -12711,7 +12726,7 @@ var Plyr = function () {
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);