diff options
Diffstat (limited to 'src/js')
| -rw-r--r-- | src/js/captions.js | 2 | ||||
| -rw-r--r-- | src/js/controls.js | 47 | ||||
| -rw-r--r-- | src/js/defaults.js | 5 | ||||
| -rw-r--r-- | src/js/fullscreen.js | 2 | ||||
| -rw-r--r-- | src/js/plyr.js | 2 | ||||
| -rw-r--r-- | src/js/ui.js | 25 | ||||
| -rw-r--r-- | src/js/utils.js | 22 |
7 files changed, 40 insertions, 65 deletions
diff --git a/src/js/captions.js b/src/js/captions.js index df717351..fadab43f 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -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; } }, }; diff --git a/src/js/controls.js b/src/js/controls.js index c76bd66b..fc000b52 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -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; diff --git a/src/js/defaults.js b/src/js/defaults.js index 5b1a4dd3..54c19f94 100644 --- a/src/js/defaults.js +++ b/src/js/defaults.js @@ -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', diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 000ba706..cc91d1a4 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -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 diff --git a/src/js/plyr.js b/src/js/plyr.js index 4c984fd7..2cf5d58d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -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); diff --git a/src/js/ui.js b/src/js/ui.js index 3a8f2d05..5b14e2fe 100644 --- a/src/js/ui.js +++ b/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') { diff --git a/src/js/utils.js b/src/js/utils.js index 0c5a28d7..201c06c8 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -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)) { |