aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/controls.js94
-rw-r--r--src/js/defaults.js2
-rw-r--r--src/js/fullscreen.js12
-rw-r--r--src/js/listeners.js2
-rw-r--r--src/js/plyr.js2
-rw-r--r--src/js/plyr.polyfilled.js2
-rw-r--r--src/js/ui.js9
-rw-r--r--src/js/utils.js36
-rw-r--r--src/sass/components/volume.scss9
-rw-r--r--src/sass/utils/hidden.scss9
10 files changed, 90 insertions, 87 deletions
diff --git a/src/js/controls.js b/src/js/controls.js
index 615da39e..4404da65 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -15,8 +15,6 @@ const browser = utils.getBrowser();
const controls = {
// Webkit polyfill for lower fill range
updateRangeFill(target) {
-
-
// Get range from event if event passed
const range = utils.is.event(target) ? target.target : target;
@@ -212,7 +210,6 @@ const controls = {
// Add aria attributes
attributes['aria-pressed'] = false;
- attributes['aria-label'] = i18n.get(label, this.config);
} else {
button.appendChild(controls.createIcon.call(this, icon));
button.appendChild(controls.createLabel.call(this, label));
@@ -329,22 +326,14 @@ const controls = {
// Create time display
createTime(type) {
- const container = utils.createElement('div', {
- class: 'plyr__time',
- });
+ const attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]);
- container.appendChild(
- utils.createElement(
- 'span',
- {
- class: this.config.classNames.hidden,
- },
- i18n.get(type, this.config),
- ),
- );
-
- container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
+ const container = utils.createElement('div', utils.extend(attributes, {
+ class: `plyr__time ${attributes.class}`,
+ 'aria-label': i18n.get(type, this.config),
+ }), '0:00');
+ // Reference for updates
this.elements.display[type] = container;
return container;
@@ -369,7 +358,7 @@ const controls = {
}),
);
- const faux = utils.createElement('span', { 'aria-hidden': true });
+ const faux = utils.createElement('span', { hidden: '' });
label.appendChild(radio);
label.appendChild(faux);
@@ -444,11 +433,7 @@ const controls = {
// Hide/show a tab
toggleTab(setting, toggle) {
- const tab = this.elements.settings.tabs[setting];
- const pane = this.elements.settings.panes[setting];
-
- utils.toggleHidden(tab, !toggle);
- utils.toggleHidden(pane, !toggle);
+ utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
},
// Set the quality menu
@@ -660,7 +645,6 @@ const controls = {
// Get current selected caption language
// TODO: rework this to user the getter in the API?
-
// Set a list of available captions languages
setCaptionsMenu() {
// TODO: Captions or language? Currently it's mixed
@@ -760,10 +744,6 @@ const controls = {
// Get the list to populate
const list = this.elements.settings.panes.speed.querySelector('ul');
- // Show the pane and tab
- utils.toggleHidden(this.elements.settings.tabs.speed, false);
- utils.toggleHidden(this.elements.settings.panes.speed, false);
-
// Empty the menu
utils.emptyElement(list);
@@ -794,7 +774,7 @@ const controls = {
return;
}
- const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+ const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
if (utils.is.event(event)) {
const isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -819,7 +799,7 @@ const controls = {
}
if (utils.is.element(form)) {
- form.setAttribute('aria-hidden', !show);
+ utils.toggleHidden(form, !show);
utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show);
if (show) {
@@ -835,7 +815,7 @@ const controls = {
const clone = tab.cloneNode(true);
clone.style.position = 'absolute';
clone.style.opacity = 0;
- clone.setAttribute('aria-hidden', false);
+ clone.removeAttribute('hidden');
// Prevent input's being unchecked due to the name being identical
Array.from(clone.querySelectorAll('input[name]')).forEach(input => {
@@ -879,7 +859,7 @@ const controls = {
// Hide all other tabs
// Get other tabs
- const current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+ const current = menu.querySelector('[role="tabpanel"]:not([hidden])');
const container = current.parentNode;
// Set other toggles to be expanded false
@@ -923,11 +903,11 @@ const controls = {
}
// Set attributes on current tab
- current.setAttribute('aria-hidden', true);
+ utils.toggleHidden(current, true);
current.setAttribute('tabindex', -1);
// Set attributes on target
- pane.setAttribute('aria-hidden', !show);
+ utils.toggleHidden(pane, !show);
tab.setAttribute('aria-expanded', show);
pane.removeAttribute('tabindex');
@@ -1069,7 +1049,7 @@ const controls = {
const form = utils.createElement('form', {
class: 'plyr__menu__container',
id: `plyr-settings-${data.id}`,
- 'aria-hidden': true,
+ hidden: '',
'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
role: 'tablist',
tabindex: -1,
@@ -1079,7 +1059,6 @@ const controls = {
const home = utils.createElement('div', {
id: `plyr-settings-${data.id}-home`,
- 'aria-hidden': false,
'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
role: 'tabpanel',
});
@@ -1130,11 +1109,10 @@ const controls = {
this.config.settings.forEach(type => {
const pane = utils.createElement('div', {
id: `plyr-settings-${data.id}-${type}`,
- 'aria-hidden': true,
+ hidden: '',
'aria-labelled-by': `plyr-settings-${data.id}-${type}-tab`,
role: 'tabpanel',
tabindex: -1,
- hidden: '',
});
const back = utils.createElement(
@@ -1217,17 +1195,21 @@ const controls = {
let container = null;
this.elements.controls = null;
- // HTML or Element passed as the option
+ // Set template properties
+ const props = {
+ id: this.id,
+ seektime: this.config.seekTime,
+ title: this.config.title,
+ };
+ let update = true;
+
if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) {
+ // String or HTMLElement passed as the option
container = this.config.controls;
} else if (utils.is.function(this.config.controls)) {
// A custom function to build controls
// The function can return a HTMLElement or String
- container = this.config.controls({
- id: this.id,
- seektime: this.config.seekTime,
- title: this.config.title,
- });
+ container = this.config.controls.call(this, props);
} else {
// Create controls
container = controls.create.call(this, {
@@ -1239,6 +1221,30 @@ const controls = {
// TODO: Looping
// loop: 'None',
});
+ update = false;
+ }
+
+ // Replace props with their value
+ const replace = input => {
+ let result = input;
+
+ Object.entries(props).forEach(([
+ key,
+ value,
+ ]) => {
+ result = utils.replaceAll(result, `{${key}}`, value);
+ });
+
+ return result;
+ };
+
+ // Update markup
+ if (update) {
+ if (utils.is.string(this.config.controls)) {
+ container = replace(container);
+ } else if (utils.is.element(container)) {
+ container.innerHTML = replace(container.innerHTML);
+ }
}
// Controls container
diff --git a/src/js/defaults.js b/src/js/defaults.js
index e96587f7..418b60ae 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -56,7 +56,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/3.2.1/plyr.svg',
+ iconUrl: 'https://cdn.plyr.io/3.2.4/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index 8795f460..cd2d8ac6 100644
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -55,7 +55,7 @@ class Fullscreen {
// Get prefix
this.prefix = Fullscreen.prefix;
- this.name = Fullscreen.name;
+ this.property = Fullscreen.property;
// Scroll position
this.scrollPosition = { x: 0, y: 0 };
@@ -70,7 +70,7 @@ class Fullscreen {
// Fullscreen toggle on double click
utils.on(this.player.elements.container, 'dblclick', event => {
// Ignore double click in controls
- if (this.player.elements.controls.contains(event.target)) {
+ if (utils.is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {
return;
}
@@ -113,7 +113,7 @@ class Fullscreen {
return value;
}
- static get name() {
+ static get property() {
return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
}
@@ -138,7 +138,7 @@ class Fullscreen {
return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
}
- const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.name}Element`];
+ const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
return element === this.target;
}
@@ -176,7 +176,7 @@ class Fullscreen {
} else if (!this.prefix) {
this.target.requestFullscreen();
} else if (!utils.is.empty(this.prefix)) {
- this.target[`${this.prefix}Request${this.name}`]();
+ this.target[`${this.prefix}Request${this.property}`]();
}
}
@@ -196,7 +196,7 @@ class Fullscreen {
(document.cancelFullScreen || document.exitFullscreen).call(document);
} else if (!utils.is.empty(this.prefix)) {
const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
- document[`${this.prefix}${action}${this.name}`]();
+ document[`${this.prefix}${action}${this.property}`]();
}
}
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 5887c3ab..2664e827 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -253,7 +253,7 @@ class Listeners {
utils.on(this.player.media, 'timeupdate seeking', event => ui.timeUpdate.call(this.player, event));
// Display duration
- utils.on(this.player.media, 'durationchange loadedmetadata', event => ui.durationUpdate.call(this.player, event));
+ utils.on(this.player.media, 'durationchange loadeddata loadedmetadata', event => ui.durationUpdate.call(this.player, event));
// Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 2e64aa1a..36b05082 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v3.2.1
+// plyr.js v3.2.4
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js
index 10da2f83..a4fd7afa 100644
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
-// plyr.js v3.2.1
+// plyr.js v3.2.4
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
diff --git a/src/js/ui.js b/src/js/ui.js
index 1d671577..ee77a2dd 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -48,11 +48,6 @@ const ui = {
this.listeners.controls();
}
- // If there's no controls, bail
- if (!utils.is.element(this.elements.controls)) {
- return;
- }
-
// Remove native controls
ui.toggleNativeControls.call(this);
@@ -277,10 +272,10 @@ const ui = {
}
// Always display hours if duration is over an hour
- const displayHours = utils.getHours(this.duration) > 0;
+ const forceHours = utils.getHours(this.duration) > 0;
// eslint-disable-next-line no-param-reassign
- target.textContent = utils.formatTime(time, displayHours, inverted);
+ target.textContent = utils.formatTime(time, forceHours, inverted);
},
// Handle time change event
diff --git a/src/js/utils.js b/src/js/utils.js
index 2ec57a50..fca40f53 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -375,6 +375,25 @@ const utils = {
return attributes;
},
+ // Toggle hidden
+ toggleHidden(element, hidden) {
+ if (!utils.is.element(element)) {
+ return;
+ }
+
+ let hide = hidden;
+
+ if (!utils.is.boolean(hide)) {
+ hide = !element.hasAttribute('hidden');
+ }
+
+ if (hide) {
+ element.setAttribute('hidden', '');
+ } else {
+ element.removeAttribute('hidden');
+ }
+ },
+
// Toggle class on an element
toggleClass(element, className, toggle) {
if (utils.is.element(element)) {
@@ -393,19 +412,6 @@ const utils = {
return utils.is.element(element) && element.classList.contains(className);
},
- // Toggle hidden attribute on an element
- toggleHidden(element, toggle) {
- if (!utils.is.element(element)) {
- return;
- }
-
- if (toggle) {
- element.setAttribute('hidden', '');
- } else {
- element.removeAttribute('hidden');
- }
- },
-
// Element matches selector
matches(element, selector) {
const prototype = { Element };
@@ -462,8 +468,8 @@ const utils = {
// Display
this.elements.display = {
buffer: utils.getElement.call(this, this.config.selectors.display.buffer),
- duration: utils.getElement.call(this, this.config.selectors.display.duration),
currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime),
+ duration: utils.getElement.call(this, this.config.selectors.display.duration),
};
// Seek tooltip
@@ -752,7 +758,7 @@ const utils = {
return null;
}
- return array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+ return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
},
// Get the provider for a given URL
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index e12dc675..d22b7cba 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -23,7 +23,12 @@
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios .plyr__volume {
+ display: none !important;
+}
+
+// Vimeo has no toggle mute method so hide mute button
+// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183
+.plyr--is-ios.plyr--vimeo [data-plyr='mute'] {
display: none !important;
}
diff --git a/src/sass/utils/hidden.scss b/src/sass/utils/hidden.scss
index f3b46147..e4fa0aec 100644
--- a/src/sass/utils/hidden.scss
+++ b/src/sass/utils/hidden.scss
@@ -2,15 +2,6 @@
// Hiding content nicely
// --------------------------------------------------------------
-// Attributes
-.plyr--full-ui [hidden] {
- display: none;
-}
-
-.plyr--full-ui [aria-hidden='true'] {
- display: none;
-}
-
// Screen reader only elements
.plyr__sr-only {
clip: rect(1px, 1px, 1px, 1px);
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 07:50:48 +0000