aboutsummaryrefslogtreecommitdiffstats
path: root/dist/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/plyr.js')
-rw-r--r--dist/plyr.js148
1 files changed, 77 insertions, 71 deletions
diff --git a/dist/plyr.js b/dist/plyr.js
index 4dc8a6e2..14939c62 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -1098,31 +1098,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++) {
@@ -1824,7 +1799,6 @@ var i18n = {
var browser = utils.getBrowser();
var controls = {
-
// Get icon URL
getIconUrl: function getIconUrl() {
var url = new URL(this.config.iconUrl, window.location);
@@ -2050,9 +2024,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));
@@ -2074,19 +2045,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$$1() {
+ return utils.hasClass(button, className);
+ },
+ set: function set$$1() {
+ 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',
@@ -2097,7 +2075,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
@@ -2108,10 +2086,7 @@ var controls = {
// Set the fill for webkit now
controls.updateRangeFill.call(this, input);
- return {
- label: label,
- input: input
- };
+ return input;
},
@@ -2208,6 +2183,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;
@@ -2219,11 +2211,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);
},
@@ -2240,7 +2229,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;
}
},
@@ -2326,8 +2315,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) {
@@ -2413,11 +2414,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);
@@ -2947,11 +2953,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'));
@@ -3001,11 +3005,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;
@@ -3265,7 +3267,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');
});
}
}
@@ -3646,6 +3647,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,
@@ -3759,6 +3764,7 @@ var defaults$1 = {
pause: 'Pause',
fastForward: 'Forward {seektime}s',
seek: 'Seek',
+ seekLabel: '{currentTime} of {duration}',
played: 'Played',
buffered: 'Buffered',
currentTime: 'Current time',
@@ -3773,6 +3779,7 @@ var defaults$1 = {
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
+ menuBack: 'Go back to previous menu',
speed: 'Speed',
normal: 'Normal',
quality: 'Quality',
@@ -3902,6 +3909,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',
@@ -3972,7 +3980,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
@@ -4323,9 +4331,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
@@ -4395,13 +4400,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') {
@@ -4415,7 +4424,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);
@@ -4425,10 +4434,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);
},
@@ -7193,9 +7202,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);
@@ -7395,7 +7401,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 16:38:12 +0000