aboutsummaryrefslogtreecommitdiffstats
path: root/dist/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/plyr.js')
-rw-r--r--dist/plyr.js153
1 files changed, 84 insertions, 69 deletions
diff --git a/dist/plyr.js b/dist/plyr.js
index 8cc596f8..a6842ffd 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -77,7 +77,7 @@ var 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.3/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -1101,6 +1101,26 @@ var utils = {
},
+ // Toggle hidden
+ toggleHidden: function toggleHidden(element, hidden) {
+ if (!utils.is.element(element)) {
+ return;
+ }
+
+ var 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: function toggleClass(element, className, toggle) {
if (utils.is.element(element)) {
@@ -1121,20 +1141,6 @@ var utils = {
},
- // Toggle hidden attribute on an element
- toggleHidden: function toggleHidden(element, toggle) {
- if (!utils.is.element(element)) {
- return;
- }
-
- if (toggle) {
- element.setAttribute('hidden', '');
- } else {
- element.removeAttribute('hidden');
- }
- },
-
-
// Element matches selector
matches: function matches(element, selector) {
var prototype = { Element: Element };
@@ -1194,8 +1200,8 @@ var 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)
+ currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime),
+ duration: utils.getElement.call(this, this.config.selectors.display.duration)
};
// Seek tooltip
@@ -1952,7 +1958,7 @@ var Fullscreen = function () {
// Get prefix
this.prefix = Fullscreen.prefix;
- this.name = Fullscreen.name;
+ this.property = Fullscreen.property;
// Scroll position
this.scrollPosition = { x: 0, y: 0 };
@@ -1967,7 +1973,7 @@ var Fullscreen = function () {
// Fullscreen toggle on double click
utils.on(this.player.elements.container, 'dblclick', function (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;
}
@@ -2016,7 +2022,7 @@ var Fullscreen = function () {
} 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]();
}
}
@@ -2039,7 +2045,7 @@ var Fullscreen = function () {
(document.cancelFullScreen || document.exitFullscreen).call(document);
} else if (!utils.is.empty(this.prefix)) {
var action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
- document['' + this.prefix + action + this.name]();
+ document['' + this.prefix + action + this.property]();
}
}
@@ -2077,7 +2083,7 @@ var Fullscreen = function () {
return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
}
- var element = !this.prefix ? document.fullscreenElement : document['' + this.prefix + this.name + 'Element'];
+ var element = !this.prefix ? document.fullscreenElement : document['' + this.prefix + this.property + 'Element'];
return element === this.target;
}
@@ -2121,7 +2127,7 @@ var Fullscreen = function () {
return value;
}
}, {
- key: 'name',
+ key: 'property',
get: function get$$1() {
return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
}
@@ -2480,11 +2486,6 @@ var 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);
@@ -2725,10 +2726,10 @@ var ui = {
}
// Always display hours if duration is over an hour
- var displayHours = utils.getHours(this.duration) > 0;
+ var 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);
},
@@ -2935,7 +2936,6 @@ var browser$1 = utils.getBrowser();
var controls = {
// Webkit polyfill for lower fill range
updateRangeFill: function updateRangeFill(target) {
-
// Get range from event if event passed
var range = utils.is.event(target) ? target.target : target;
@@ -3127,7 +3127,6 @@ var 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));
@@ -3229,16 +3228,14 @@ var controls = {
// Create time display
createTime: function createTime(type) {
- var container = utils.createElement('div', {
- class: 'plyr__time'
- });
-
- container.appendChild(utils.createElement('span', {
- class: this.config.classNames.hidden
- }, i18n.get(type, this.config)));
+ var attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]);
- container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
+ var 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;
@@ -3264,7 +3261,7 @@ var controls = {
class: 'plyr__sr-only'
}));
- var faux = utils.createElement('span', { 'aria-hidden': true });
+ var faux = utils.createElement('span', { hidden: '' });
label.appendChild(radio);
label.appendChild(faux);
@@ -3335,11 +3332,7 @@ var controls = {
// Hide/show a tab
toggleTab: function toggleTab(setting, toggle) {
- var tab = this.elements.settings.tabs[setting];
- var pane = this.elements.settings.panes[setting];
-
- utils.toggleHidden(tab, !toggle);
- utils.toggleHidden(pane, !toggle);
+ utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
},
@@ -3551,7 +3544,6 @@ var controls = {
// Get current selected caption language
// TODO: rework this to user the getter in the API?
-
// Set a list of available captions languages
setCaptionsMenu: function setCaptionsMenu() {
var _this3 = this;
@@ -3646,10 +3638,6 @@ var controls = {
// Get the list to populate
var 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);
@@ -3686,7 +3674,7 @@ var controls = {
return;
}
- var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+ var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
if (utils.is.event(event)) {
var isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -3711,7 +3699,7 @@ var 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) {
@@ -3728,7 +3716,7 @@ var controls = {
var 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(function (input) {
@@ -3774,7 +3762,7 @@ var controls = {
// Hide all other tabs
// Get other tabs
- var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+ var current = menu.querySelector('[role="tabpanel"]:not([hidden])');
var container = current.parentNode;
// Set other toggles to be expanded false
@@ -3815,11 +3803,11 @@ var 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');
@@ -3954,7 +3942,7 @@ var controls = {
var 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
@@ -3964,7 +3952,6 @@ var controls = {
var home = utils.createElement('div', {
id: 'plyr-settings-' + data.id + '-home',
- 'aria-hidden': false,
'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
role: 'tabpanel'
});
@@ -4011,11 +3998,10 @@ var controls = {
this.config.settings.forEach(function (type) {
var 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: ''
+ tabindex: -1
});
var back = utils.createElement('button', {
@@ -4097,17 +4083,21 @@ var controls = {
var container = null;
this.elements.controls = null;
- // HTML or Element passed as the option
+ // Set template properties
+ var props = {
+ id: this.id,
+ seektime: this.config.seekTime,
+ title: this.config.title
+ };
+ var 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, {
@@ -4119,6 +4109,31 @@ var controls = {
// TODO: Looping
// loop: 'None',
});
+ update = false;
+ }
+
+ // Replace props with their value
+ var replace = function replace(input) {
+ var result = input;
+
+ Object.entries(props).forEach(function (_ref) {
+ var _ref2 = slicedToArray(_ref, 2),
+ key = _ref2[0],
+ value = _ref2[1];
+
+ 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
@@ -4420,7 +4435,7 @@ var Listeners = function () {
});
// Display duration
- utils.on(this.player.media, 'durationchange loadedmetadata', function (event) {
+ utils.on(this.player.media, 'durationchange loadeddata loadedmetadata', function (event) {
return ui.durationUpdate.call(_this3.player, event);
});
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 11:52:22 +0000