diff options
Diffstat (limited to 'dist/plyr.js')
| -rw-r--r-- | dist/plyr.js | 93 |
1 files changed, 37 insertions, 56 deletions
diff --git a/dist/plyr.js b/dist/plyr.js index 0c5dde21..07cf966f 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1096,31 +1096,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++) { @@ -2040,9 +2015,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)); @@ -2064,19 +2036,26 @@ var controls = { this.elements.buttons[type] = button; } + // Toggle classname when pressed property is set + var className = this.config.classNames.controlPressed; + Object.defineProperty(button, 'pressed', { + enumerable: true, + get: function get$$1() { + return utils.hasClass(button, className); + }, + set: function set$$1() { + var pressed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + + utils.toggleClass(button, className, pressed); + } + }); + return button; }, // Create an <input type='range'> createRange: function createRange(type, attributes) { - // Seek label - var label = utils.createElement('label', { - for: attributes.id, - id: attributes.id + '-label', - class: this.config.classNames.hidden - }, i18n.get(type, this.config)); - // Seek input var input = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs[type]), { type: 'range', @@ -2087,7 +2066,7 @@ var 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 @@ -2098,10 +2077,7 @@ var controls = { // Set the fill for webkit now controls.updateRangeFill.call(this, input); - return { - label: label, - input: input - }; + return input; }, @@ -2224,7 +2200,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; } }, @@ -2928,11 +2904,9 @@ var controls = { var progress = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.progress)); // Seek range slider - var 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')); @@ -2982,11 +2956,9 @@ var controls = { }; // Create the volume range slider - var range = controls.createRange.call(this, 'volume', utils.extend(attributes, { + 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; @@ -3570,6 +3542,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, @@ -3825,6 +3801,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', @@ -3895,7 +3872,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 @@ -4318,13 +4295,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') { @@ -4338,7 +4319,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); @@ -4348,10 +4329,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); }, @@ -7301,7 +7282,7 @@ var Plyr = function () { var active = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active); // Toggle state - utils.toggleState(this.elements.buttons.captions, active); + this.elements.buttons.captions.pressed = active; // Add class hook utils.toggleClass(this.elements.container, this.config.classNames.captions.active, active); |