aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/captions.js2
-rw-r--r--src/js/controls.js47
-rw-r--r--src/js/defaults.js5
-rw-r--r--src/js/fullscreen.js2
-rw-r--r--src/js/plyr.js2
-rw-r--r--src/js/ui.js25
-rw-r--r--src/js/utils.js22
-rw-r--r--src/sass/components/control.scss8
8 files changed, 44 insertions, 69 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)) {
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 52716805..cfef1b3a 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 14:44:05 +0000