aboutsummaryrefslogtreecommitdiffstats
path: root/dist/plyr.polyfilled.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/plyr.polyfilled.js')
-rw-r--r--dist/plyr.polyfilled.js148
1 files changed, 77 insertions, 71 deletions
diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js
index fa2e8b7b..6751f5e2 100644
--- a/dist/plyr.polyfilled.js
+++ b/dist/plyr.polyfilled.js
@@ -6481,31 +6481,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++) {
@@ -7207,7 +7182,6 @@ var i18n = {
var browser = utils.getBrowser();
var controls = {
-
// Get icon URL
getIconUrl: function getIconUrl() {
var url = new URL(this.config.iconUrl, window.location);
@@ -7433,9 +7407,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));
@@ -7457,19 +7428,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() {
+ return utils.hasClass(button, className);
+ },
+ set: function set() {
+ 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',
@@ -7480,7 +7458,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
@@ -7491,10 +7469,7 @@ var controls = {
// Set the fill for webkit now
controls.updateRangeFill.call(this, input);
- return {
- label: label,
- input: input
- };
+ return input;
},
@@ -7591,6 +7566,23 @@ var controls = {
},
+ // Format a time for display
+ formatTime: function formatTime() {
+ var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+ var inverted = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+ // Bail if the value isn't a number
+ if (!utils.is.number(time)) {
+ return time;
+ }
+
+ // Always display hours if duration is over an hour
+ var forceHours = utils.getHours(this.duration) > 0;
+
+ return utils.formatTime(time, forceHours, inverted);
+ },
+
+
// Update the displayed time
updateTimeDisplay: function updateTimeDisplay() {
var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -7602,11 +7594,8 @@ var controls = {
return;
}
- // Always display hours if duration is over an hour
- var forceHours = utils.getHours(this.duration) > 0;
-
// eslint-disable-next-line no-param-reassign
- target.innerText = utils.formatTime(time, forceHours, inverted);
+ target.innerText = controls.formatTime(time, inverted);
},
@@ -7623,7 +7612,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;
}
},
@@ -7709,8 +7698,20 @@ var controls = {
return;
}
- // Set aria value for https://github.com/sampotts/plyr/issues/905
- range.setAttribute('aria-valuenow', range.value);
+ // Set aria values for https://github.com/sampotts/plyr/issues/905
+ if (utils.matches(range, this.config.selectors.inputs.seek)) {
+ range.setAttribute('aria-valuenow', this.currentTime);
+ var currentTime = controls.formatTime(this.currentTime);
+ var duration = controls.formatTime(this.duration);
+ var format = i18n.get('seekLabel', this.config);
+ range.setAttribute('aria-valuetext', format.replace('{currentTime}', currentTime).replace('{duration}', duration));
+ } else if (utils.matches(range, this.config.selectors.inputs.volume)) {
+ var percent = range.value * 100;
+ range.setAttribute('aria-valuenow', percent);
+ range.setAttribute('aria-valuetext', percent + '%');
+ } else {
+ range.setAttribute('aria-valuenow', range.value);
+ }
// WebKit only
if (!browser.isWebkit) {
@@ -7796,11 +7797,16 @@ var controls = {
// Show the duration on metadataloaded or durationchange events
durationUpdate: function durationUpdate() {
- // Bail if no ui or durationchange event triggered after playing/seek when invertTime is false
+ // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false
if (!this.supported.ui || !this.config.invertTime && this.currentTime) {
return;
}
+ // Update ARIA values
+ if (utils.is.element(this.elements.inputs.seek)) {
+ this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);
+ }
+
// If there's a spot to display duration
var hasDuration = utils.is.element(this.elements.display.duration);
@@ -8330,11 +8336,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'));
@@ -8384,11 +8388,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;
@@ -8648,7 +8650,6 @@ var controls = {
Array.from(labels).forEach(function (label) {
utils.toggleClass(label, _this7.config.classNames.hidden, false);
utils.toggleClass(label, _this7.config.classNames.tooltip, true);
- label.setAttribute('role', 'tooltip');
});
}
}
@@ -9029,6 +9030,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,
@@ -9142,6 +9147,7 @@ var defaults$1 = {
pause: 'Pause',
fastForward: 'Forward {seektime}s',
seek: 'Seek',
+ seekLabel: '{currentTime} of {duration}',
played: 'Played',
buffered: 'Buffered',
currentTime: 'Current time',
@@ -9156,6 +9162,7 @@ var defaults$1 = {
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
+ menuBack: 'Go back to previous menu',
speed: 'Speed',
normal: 'Normal',
quality: 'Quality',
@@ -9285,6 +9292,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',
@@ -9355,7 +9363,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
@@ -9706,9 +9714,6 @@ var ui = {
// If there's a media title set, use that for the label
if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) {
label += ', ' + this.config.title;
-
- // Set container label
- this.elements.container.setAttribute('aria-label', this.config.title);
}
// If there's a play button, set label
@@ -9778,13 +9783,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') {
@@ -9798,7 +9807,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);
@@ -9808,10 +9817,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);
},
@@ -12576,9 +12585,6 @@ var Plyr = function () {
utils.wrap(this.media, this.elements.container);
}
- // Allow focus to be captured
- this.elements.container.setAttribute('tabindex', 0);
-
// Add style hook
ui.addStyleHook.call(this);
@@ -12778,7 +12784,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);
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-13 17:02:24 +0000