aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2018-08-01 00:56:44 +1000
committerSam Potts <sam@potts.es>2018-08-01 00:56:44 +1000
commit2371619486dbbbfdb0350923684e53963141a7af (patch)
treee6f765521fa43e4fb4b7cf0a0b10f502346b12c0
parent13a54b5dbec03bffb8e4114074d987edd7f0079f (diff)
downloadplyr-2371619486dbbbfdb0350923684e53963141a7af.tar.lz
plyr-2371619486dbbbfdb0350923684e53963141a7af.tar.xz
plyr-2371619486dbbbfdb0350923684e53963141a7af.zip
Linting
Diffstat
-rw-r--r--.prettierrc3
-rw-r--r--demo/src/js/demo.js69
-rw-r--r--package.json2
-rw-r--r--src/js/captions.js4
-rw-r--r--src/js/controls.js395
-rw-r--r--src/js/listeners.js378
-rw-r--r--src/js/plyr.js94
-rw-r--r--src/js/support.js20
-rw-r--r--src/js/ui.js82
-rw-r--r--src/js/utils/events.js81
10 files changed, 256 insertions, 872 deletions
diff --git a/.prettierrc b/.prettierrc
index e68122c4..cee783d4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
"useTabs": false,
"tabWidth": 4,
"singleQuote": true,
- "trailingComma": "all"
+ "trailingComma": "all",
+ "printWidth": 120
}
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index ec18afaa..8b00d82d 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -12,9 +12,7 @@ import Raven from 'raven-js';
// Raven / Sentry
// For demo site (https://plyr.io) only
if (isLive) {
- Raven.config(
- 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
- ).install();
+ Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
}
document.addEventListener('DOMContentLoaded', () => {
@@ -130,7 +128,7 @@ import Raven from 'raven-js';
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
},
ads: {
- // enabled: true,
+ enabled: true,
publisherId: '918848828995742',
},
});
@@ -174,47 +172,40 @@ import Raven from 'raven-js';
title: 'View From A Blue Moon',
sources: [
{
- src:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
type: 'video/mp4',
size: 576,
},
{
- src:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
type: 'video/mp4',
size: 720,
},
{
- src:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
type: 'video/mp4',
size: 1080,
},
{
- src:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
type: 'video/mp4',
size: 1440,
},
],
- poster:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+ poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
tracks: [
{
kind: 'captions',
label: 'English',
srclang: 'en',
- src:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
default: true,
},
{
kind: 'captions',
label: 'French',
srclang: 'fr',
- src:
- 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
},
],
};
@@ -224,17 +215,14 @@ import Raven from 'raven-js';
case types.audio:
player.source = {
type: 'audio',
- title:
- 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',
+ title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',
sources: [
{
- src:
- 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+ src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
type: 'audio/mp3',
},
{
- src:
- 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+ src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
type: 'audio/ogg',
},
],
@@ -247,8 +235,7 @@ import Raven from 'raven-js';
type: 'video',
sources: [
{
- src:
- 'https://youtube.com/watch?v=bTqVqk7FSmY',
+ src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
provider: 'youtube',
},
],
@@ -277,26 +264,16 @@ import Raven from 'raven-js';
currentType = type;
// Remove active classes
- Array.from(buttons).forEach(button =>
- toggleClass(button.parentElement, 'active', false),
- );
+ Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
// Set active on parent
- toggleClass(
- document.querySelector(`[data-source="${type}"]`),
- 'active',
- true,
- );
+ toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
// Show cite
- Array.from(document.querySelectorAll('.plyr__cite')).forEach(
- cite => {
- cite.setAttribute('hidden', '');
- },
- );
- document
- .querySelector(`.plyr__cite--${type}`)
- .removeAttribute('hidden');
+ Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+ cite.setAttribute('hidden', '');
+ });
+ document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
}
// Bind to each button
@@ -364,13 +341,7 @@ import Raven from 'raven-js';
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
- })(
- window,
- document,
- 'script',
- 'https://www.google-analytics.com/analytics.js',
- 'ga',
- );
+ })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
window.ga('create', 'UA-40881672-11', 'auto');
window.ga('send', 'pageview');
}
diff --git a/package.json b/package.json
index 26303924..3e527e40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "plyr",
- "version": "3.3.23",
+ "version": "3.4.0-beta.1",
"description":
"A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",
diff --git a/src/js/captions.js b/src/js/captions.js
index 14f77a2e..4ad2a956 100644
--- a/src/js/captions.js
+++ b/src/js/captions.js
@@ -84,7 +84,9 @@ const captions = {
// * toggled: The real captions state
const languages = dedupe(
- Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(language => language.split('-')[0]),
+ Array.from(navigator.languages || navigator.language || navigator.userLanguage).map(
+ language => language.split('-')[0],
+ ),
);
let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
diff --git a/src/js/controls.js b/src/js/controls.js
index d0e6874d..e7779c71 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -23,9 +23,7 @@ const controls = {
// Get icon URL
getIconUrl() {
const url = new URL(this.config.iconUrl, window.location);
- const cors =
- url.host !== window.location.host ||
- (browser.isIE && !window.svg4everybody);
+ const cors = url.host !== window.location.host || (browser.isIE && !window.svg4everybody);
return {
url: this.config.iconUrl,
@@ -36,82 +34,37 @@ const controls = {
// Find the UI controls
findElements() {
try {
- this.elements.controls = getElement.call(
- this,
- this.config.selectors.controls.wrapper,
- );
+ this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper);
// Buttons
this.elements.buttons = {
- play: getElements.call(
- this,
- this.config.selectors.buttons.play,
- ),
- pause: getElement.call(
- this,
- this.config.selectors.buttons.pause,
- ),
- restart: getElement.call(
- this,
- this.config.selectors.buttons.restart,
- ),
- rewind: getElement.call(
- this,
- this.config.selectors.buttons.rewind,
- ),
- fastForward: getElement.call(
- this,
- this.config.selectors.buttons.fastForward,
- ),
+ play: getElements.call(this, this.config.selectors.buttons.play),
+ pause: getElement.call(this, this.config.selectors.buttons.pause),
+ restart: getElement.call(this, this.config.selectors.buttons.restart),
+ rewind: getElement.call(this, this.config.selectors.buttons.rewind),
+ fastForward: getElement.call(this, this.config.selectors.buttons.fastForward),
mute: getElement.call(this, this.config.selectors.buttons.mute),
pip: getElement.call(this, this.config.selectors.buttons.pip),
- airplay: getElement.call(
- this,
- this.config.selectors.buttons.airplay,
- ),
- settings: getElement.call(
- this,
- this.config.selectors.buttons.settings,
- ),
- captions: getElement.call(
- this,
- this.config.selectors.buttons.captions,
- ),
- fullscreen: getElement.call(
- this,
- this.config.selectors.buttons.fullscreen,
- ),
+ airplay: getElement.call(this, this.config.selectors.buttons.airplay),
+ settings: getElement.call(this, this.config.selectors.buttons.settings),
+ captions: getElement.call(this, this.config.selectors.buttons.captions),
+ fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen),
};
// Progress
- this.elements.progress = getElement.call(
- this,
- this.config.selectors.progress,
- );
+ this.elements.progress = getElement.call(this, this.config.selectors.progress);
// Inputs
this.elements.inputs = {
seek: getElement.call(this, this.config.selectors.inputs.seek),
- volume: getElement.call(
- this,
- this.config.selectors.inputs.volume,
- ),
+ volume: getElement.call(this, this.config.selectors.inputs.volume),
};
// Display
this.elements.display = {
- buffer: getElement.call(
- this,
- this.config.selectors.display.buffer,
- ),
- currentTime: getElement.call(
- this,
- this.config.selectors.display.currentTime,
- ),
- duration: getElement.call(
- this,
- this.config.selectors.display.duration,
- ),
+ buffer: getElement.call(this, this.config.selectors.display.buffer),
+ currentTime: getElement.call(this, this.config.selectors.display.currentTime),
+ duration: getElement.call(this, this.config.selectors.display.duration),
};
// Seek tooltip
@@ -124,10 +77,7 @@ const controls = {
return true;
} catch (error) {
// Log it
- this.debug.warn(
- 'It looks like there is a problem with your custom controls HTML',
- error,
- );
+ this.debug.warn('It looks like there is a problem with your custom controls HTML', error);
// Restore native video controls
this.toggleNativeControls(true);
@@ -140,9 +90,7 @@ const controls = {
createIcon(type, attributes) {
const namespace = 'http://www.w3.org/2000/svg';
const iconUrl = controls.getIconUrl.call(this);
- const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${
- this.config.iconPrefix
- }`;
+ const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;
// Create <svg>
const icon = document.createElementNS(namespace, 'svg');
@@ -164,11 +112,7 @@ const controls = {
if ('href' in use) {
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
} else {
- use.setAttributeNS(
- 'http://www.w3.org/1999/xlink',
- 'xlink:href',
- path,
- );
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);
}
// Add <use> to <svg>
@@ -187,9 +131,7 @@ const controls = {
const text = universals[type] || i18n.get(type, this.config);
const attributes = Object.assign({}, attr, {
- class: [attr.class, this.config.classNames.hidden]
- .filter(Boolean)
- .join(' '),
+ class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' '),
});
return createElement('span', attributes, text);
},
@@ -276,9 +218,7 @@ const controls = {
break;
case 'play-large':
- attributes.class += ` ${
- this.config.classNames.control
- }--overlaid`;
+ attributes.class += ` ${this.config.classNames.control}--overlaid`;
type = 'play';
label = 'play';
icon = 'play';
@@ -320,13 +260,7 @@ const controls = {
}
// Merge attributes
- extend(
- attributes,
- getAttributesFromSelector(
- this.config.selectors.buttons[type],
- attributes,
- ),
- );
+ extend(attributes, getAttributesFromSelector(this.config.selectors.buttons[type], attributes));
setAttributes(button, attributes);
@@ -426,16 +360,12 @@ const controls = {
// Create time display
createTime(type) {
- const attributes = getAttributesFromSelector(
- this.config.selectors.display[type],
- );
+ const attributes = getAttributesFromSelector(this.config.selectors.display[type]);
const container = createElement(
'div',
extend(attributes, {
- class: `${this.config.classNames.display.time} ${
- attributes.class ? attributes.class : ''
- }`.trim(),
+ class: `${this.config.classNames.display.time} ${attributes.class ? attributes.class : ''}`.trim(),
'aria-label': i18n.get(type, this.config),
}),
'00:00',
@@ -470,10 +400,7 @@ const controls = {
return;
}
- const isRadioButton = matches(
- menuItem,
- '[role="menuitemradio"]',
- );
+ const isRadioButton = matches(menuItem, '[role="menuitemradio"]');
// Show the respective menu
if (!isRadioButton && [32, 39].includes(event.which)) {
@@ -482,10 +409,7 @@ const controls = {
let target;
if (event.which !== 32) {
- if (
- event.which === 40 ||
- (isRadioButton && event.which === 39)
- ) {
+ if (event.which === 40 || (isRadioButton && event.which === 39)) {
target = menuItem.nextElementSibling;
if (!is.element(target)) {
@@ -508,26 +432,15 @@ const controls = {
},
// Create a settings menu item
- createMenuItem({
- value,
- list,
- type,
- title,
- badge = null,
- checked = false,
- }) {
- const attributes = getAttributesFromSelector(
- this.config.selectors.inputs[type],
- );
+ createMenuItem({ value, list, type, title, badge = null, checked = false }) {
+ const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]);
const menuItem = createElement(
'button',
extend(attributes, {
type: 'button',
role: 'menuitemradio',
- class: `${this.config.classNames.control} ${
- attributes.class ? attributes.class : ''
- }`.trim(),
+ class: `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(),
'aria-checked': checked,
value,
}),
@@ -555,15 +468,10 @@ const controls = {
if (checked) {
Array.from(menuItem.parentNode.children)
.filter(node => matches(node, '[role="menuitemradio"]'))
- .forEach(node =>
- node.setAttribute('aria-checked', 'false'),
- );
+ .forEach(node => node.setAttribute('aria-checked', 'false'));
}
- menuItem.setAttribute(
- 'aria-checked',
- checked ? 'true' : 'false',
- );
+ menuItem.setAttribute('aria-checked', checked ? 'true' : 'false');
},
});
@@ -597,11 +505,7 @@ const controls = {
break;
}
- controls.showMenuPanel.call(
- this,
- 'home',
- event.type === 'keyup',
- );
+ controls.showMenuPanel.call(this, 'home', event.type === 'keyup');
},
type,
false,
@@ -644,17 +548,12 @@ const controls = {
// Update range
if (is.element(this.elements.inputs.volume)) {
- controls.setRange.call(
- this,
- this.elements.inputs.volume,
- this.muted ? 0 : this.volume,
- );
+ controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
}
// Update mute state
if (is.element(this.elements.buttons.mute)) {
- this.elements.buttons.mute.pressed =
- this.muted || this.volume === 0;
+ this.elements.buttons.mute.pressed = this.muted || this.volume === 0;
}
},
@@ -681,9 +580,7 @@ const controls = {
const setProgress = (target, input) => {
const value = is.number(input) ? input : 0;
- const progress = is.element(target)
- ? target
- : this.elements.display.buffer;
+ const progress = is.element(target) ? target : this.elements.display.buffer;
// Update value and label
if (is.element(progress)) {
@@ -707,11 +604,7 @@ const controls = {
// Set seek range value only if it's a 'natural' time event
if (event.type === 'timeupdate') {
- controls.setRange.call(
- this,
- this.elements.inputs.seek,
- value,
- );
+ controls.setRange.call(this, this.elements.inputs.seek, value);
}
break;
@@ -719,10 +612,7 @@ const controls = {
// Check buffer status
case 'playing':
case 'progress':
- setProgress(
- this.elements.display.buffer,
- this.buffered * 100,
- );
+ setProgress(this.elements.display.buffer, this.buffered * 100);
break;
@@ -750,9 +640,7 @@ const controls = {
const format = i18n.get('seekLabel', this.config);
range.setAttribute(
'aria-valuetext',
- format
- .replace('{currentTime}', currentTime)
- .replace('{duration}', duration),
+ format.replace('{currentTime}', currentTime).replace('{duration}', duration),
);
} else if (matches(range, this.config.selectors.inputs.volume)) {
const percent = range.value * 100;
@@ -802,10 +690,7 @@ const controls = {
if (is.event(event)) {
percent = 100 / clientRect.width * (event.pageX - clientRect.left);
} else if (hasClass(this.elements.display.seekTooltip, visible)) {
- percent = parseFloat(
- this.elements.display.seekTooltip.style.left,
- 10,
- );
+ percent = parseFloat(this.elements.display.seekTooltip.style.left, 10);
} else {
return;
}
@@ -818,21 +703,14 @@ const controls = {
}
// Display the time a click would seek to
- controls.updateTimeDisplay.call(
- this,
- this.elements.display.seekTooltip,
- this.duration / 100 * percent,
- );
+ controls.updateTimeDisplay.call(this, this.elements.display.seekTooltip, this.duration / 100 * percent);
// Set position
this.elements.display.seekTooltip.style.left = `${percent}%`;
// Show/hide the tooltip
// If the event is a moues in/out and percentage is inside bounds
- if (
- is.event(event) &&
- ['mouseenter', 'mouseleave'].includes(event.type)
- ) {
+ if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
toggle(event.type === 'mouseenter');
}
},
@@ -840,9 +718,7 @@ const controls = {
// Handle time change event
timeUpdate(event) {
// Only invert if only one time element is displayed and used for both duration and currentTime
- const invert =
- !is.element(this.elements.display.duration) &&
- this.config.invertTime;
+ const invert = !is.element(this.elements.display.duration) && this.config.invertTime;
// Duration
controls.updateTimeDisplay.call(
@@ -864,10 +740,7 @@ const controls = {
// Show the duration on metadataloaded or durationchange events
durationUpdate() {
// Bail if no UI or durationchange event triggered after playing/seek when invertTime is false
- if (
- !this.supported.ui ||
- (!this.config.invertTime && this.currentTime)
- ) {
+ if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) {
return;
}
@@ -883,10 +756,7 @@ const controls = {
// Update ARIA values
if (is.element(this.elements.inputs.seek)) {
- this.elements.inputs.seek.setAttribute(
- 'aria-valuemax',
- this.duration,
- );
+ this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);
}
// If there's a spot to display duration
@@ -894,20 +764,12 @@ const controls = {
// If there's only one time display, display duration there
if (!hasDuration && this.config.displayDuration && this.paused) {
- controls.updateTimeDisplay.call(
- this,
- this.elements.display.currentTime,
- this.duration,
- );
+ controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration);
}
// If there's a duration element, update content
if (hasDuration) {
- controls.updateTimeDisplay.call(
- this,
- this.elements.display.duration,
- this.duration,
- );
+ controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);
}
// Update the tooltip (if visible)
@@ -936,13 +798,8 @@ const controls = {
}
// Unsupported value
- if (
- !is.empty(this.options[setting]) &&
- !this.options[setting].includes(value)
- ) {
- this.debug.warn(
- `Unsupported value of '${value}' for ${setting}`,
- );
+ if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {
+ this.debug.warn(`Unsupported value of '${value}' for ${setting}`);
return;
}
@@ -964,9 +821,7 @@ const controls = {
}
// Update the label
- const label = this.elements.settings.buttons[setting].querySelector(
- `.${this.config.classNames.menu.value}`,
- );
+ const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`);
label.innerHTML = controls.getLabel.call(this, setting, value);
// Find the radio option and check it
@@ -981,16 +836,11 @@ const controls = {
getLabel(setting, value) {
switch (setting) {
case 'speed':
- return value === 1
- ? i18n.get('normal', this.config)
- : `${value}&times;`;
+ return value === 1 ? i18n.get('normal', this.config) : `${value}&times;`;
case 'quality':
if (is.number(value)) {
- const label = i18n.get(
- `qualityLabel.${value}`,
- this.config,
- );
+ const label = i18n.get(`qualityLabel.${value}`, this.config);
if (!label.length) {
return `${value}p`;
@@ -1017,20 +867,15 @@ const controls = {
}
const type = 'quality';
- const list = this.elements.settings.panels.quality.querySelector(
- '[role="menu"]',
- );
+ const list = this.elements.settings.panels.quality.querySelector('[role="menu"]');
// Set options if passed and filter based on uniqueness and config
if (is.array(options)) {
- this.options.quality = dedupe(options).filter(quality =>
- this.config.quality.options.includes(quality),
- );
+ this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));
}
// Toggle the pane and tab
- const toggle =
- !is.empty(this.options.quality) && this.options.quality.length > 1;
+ const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;
controls.toggleMenuButton.call(this, type, toggle);
// Empty the menu
@@ -1130,9 +975,7 @@ const controls = {
// TODO: Captions or language? Currently it's mixed
const type = 'captions';
- const list = this.elements.settings.panels.captions.querySelector(
- '[role="menu"]',
- );
+ const list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
const tracks = captions.getTracks.call(this);
const toggle = Boolean(tracks.length);
@@ -1155,9 +998,7 @@ const controls = {
value,
checked: this.captions.toggled && this.currentTrack === value,
title: captions.getLabel.call(this, track),
- badge:
- track.language &&
- controls.createBadge.call(this, track.language.toUpperCase()),
+ badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),
list,
type: 'language',
}));
@@ -1185,9 +1026,7 @@ const controls = {
}
const type = 'speed';
- const list = this.elements.settings.panels.speed.querySelector(
- '[role="menu"]',
- );
+ const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
// Set the speed options
if (is.array(options)) {
@@ -1197,13 +1036,10 @@ const controls = {
}
// Set options if passed and filter based on config
- this.options.speed = this.options.speed.filter(speed =>
- this.config.speed.options.includes(speed),
- );
+ this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed));
// Toggle the pane and tab
- const toggle =
- !is.empty(this.options.speed) && this.options.speed.length > 1;
+ const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
controls.toggleMenuButton.call(this, type, toggle);
// Empty the menu
@@ -1233,9 +1069,7 @@ const controls = {
// Check if we need to hide/show the settings menu
checkMenu() {
const { buttons } = this.elements.settings;
- const visible =
- !is.empty(buttons) &&
- Object.values(buttons).some(button => !button.hidden);
+ const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);
toggleHidden(this.elements.settings.menu, !visible);
},
@@ -1250,13 +1084,10 @@ const controls = {
return;
}
- const show = is.boolean(input)
- ? input
- : is.element(popup) && popup.hasAttribute('hidden');
+ const show = is.boolean(input) ? input : is.element(popup) && popup.hasAttribute('hidden');
if (is.event(input)) {
- const isMenuItem =
- is.element(popup) && popup.contains(input.target);
+ const isMenuItem = is.element(popup) && popup.contains(input.target);
const isButton = input.target === this.elements.buttons.settings;
// If the click was inside the form or if the click
@@ -1281,17 +1112,11 @@ const controls = {
if (is.element(popup)) {
toggleHidden(popup, !show);
- toggleClass(
- this.elements.container,
- this.config.classNames.menu.open,
- show,
- );
+ toggleClass(this.elements.container, this.config.classNames.menu.open, show);
// Focus the first item if key interaction
if (show && is.event(input) && input.type === 'keyup') {
- const pane = Object.values(this.elements.settings.panels).find(
- pane => !pane.hidden,
- );
+ const pane = Object.values(this.elements.settings.panels).find(pane => !pane.hidden);
const firstItem = pane.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, true);
@@ -1324,9 +1149,7 @@ const controls = {
// Show a panel in the menu
showMenuPanel(type = '', tabFocus = false) {
- const target = document.getElementById(
- `plyr-settings-${this.id}-${type}`,
- );
+ const target = document.getElementById(`plyr-settings-${this.id}-${type}`);
// Nothing to show, bail
if (!is.element(target)) {
@@ -1335,9 +1158,7 @@ const controls = {
// Hide all other panels
const container = target.parentNode;
- const current = Array.from(container.children).find(
- node => !node.hidden,
- );
+ const current = Array.from(container.children).find(node => !node.hidden);
// If we can do fancy animations, we'll animate the height/width
if (support.transitions && !support.reducedMotion) {
@@ -1351,10 +1172,7 @@ const controls = {
// Restore auto height/width
const restore = event => {
// We're only bothered about height and width on the container
- if (
- event.target !== container ||
- !['width', 'height'].includes(event.propertyName)
- ) {
+ if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {
return;
}
@@ -1389,10 +1207,7 @@ const controls = {
// TODO: Set order based on order in the config.controls array?
create(data) {
// Create the container
- const container = createElement(
- 'div',
- getAttributesFromSelector(this.config.selectors.controls.wrapper),
- );
+ const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
// Restart button
if (this.config.controls.includes('restart')) {
@@ -1411,17 +1226,12 @@ const controls = {
// Fast forward button
if (this.config.controls.includes('fast-forward')) {
- container.appendChild(
- controls.createButton.call(this, 'fast-forward'),
- );
+ container.appendChild(controls.createButton.call(this, 'fast-forward'));
}
// Progress
if (this.config.controls.includes('progress')) {
- const progress = createElement(
- 'div',
- getAttributesFromSelector(this.config.selectors.progress),
- );
+ const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));
// Seek range slider
progress.appendChild(
@@ -1455,9 +1265,7 @@ const controls = {
// Media current time display
if (this.config.controls.includes('current-time')) {
- container.appendChild(
- controls.createTime.call(this, 'currentTime'),
- );
+ container.appendChild(controls.createTime.call(this, 'currentTime'));
}
// Media duration display
@@ -1505,10 +1313,7 @@ const controls = {
}
// Settings button / menu
- if (
- this.config.controls.includes('settings') &&
- !is.empty(this.config.settings)
- ) {
+ if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
const control = createElement('div', {
class: 'plyr__menu',
hidden: '',
@@ -1550,20 +1355,13 @@ const controls = {
// TODO: bundle this with the createMenuItem helper and bindings
const menuItem = createElement(
'button',
- extend(
- getAttributesFromSelector(
- this.config.selectors.buttons.settings,
- ),
- {
- type: 'button',
- class: `${this.config.classNames.control} ${
- this.config.classNames.control
- }--forward`,
- role: 'menuitem',
- 'aria-haspopup': true,
- hidden: '',
- },
- ),
+ extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {
+ type: 'button',
+ class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`,
+ role: 'menuitem',
+ 'aria-haspopup': true,
+ hidden: '',
+ }),
);
// Bind menu shortcuts for keyboard users
@@ -1574,11 +1372,7 @@ const controls = {
controls.showMenuPanel.call(this, type, false);
});
- const flex = createElement(
- 'span',
- null,
- i18n.get(type, this.config),
- );
+ const flex = createElement('span', null, i18n.get(type, this.config));
const value = createElement('span', {
class: this.config.classNames.menu.value,
@@ -1600,9 +1394,7 @@ const controls = {
// Back button
const backButton = createElement('button', {
type: 'button',
- class: `${this.config.classNames.control} ${
- this.config.classNames.control
- }--back`,
+ class: `${this.config.classNames.control} ${this.config.classNames.control}--back`,
});
// Visible label
@@ -1688,25 +1480,18 @@ const controls = {
// Toggle fullscreen button
if (this.config.controls.includes('fullscreen')) {
- container.appendChild(
- controls.createButton.call(this, 'fullscreen'),
- );
+ container.appendChild(controls.createButton.call(this, 'fullscreen'));
}
// Larger overlaid play button
if (this.config.controls.includes('play-large')) {
- this.elements.container.appendChild(
- controls.createButton.call(this, 'play-large'),
- );
+ this.elements.container.appendChild(controls.createButton.call(this, 'play-large'));
}
this.elements.controls = container;
if (this.isHTML5) {
- controls.setQualityMenu.call(
- this,
- html5.getQualityOptions.call(this),
- );
+ controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
}
controls.setSpeedMenu.call(this);
@@ -1793,9 +1578,7 @@ const controls = {
// Inject to custom location
if (is.string(this.config.selectors.controls.container)) {
- target = document.querySelector(
- this.config.selectors.controls.container,
- );
+ target = document.querySelector(this.config.selectors.controls.container);
}
// Inject into the container by default
@@ -1804,9 +1587,7 @@ const controls = {
}
// Inject controls HTML (needs to be before captions, hence "afterbegin")
- const insertMethod = is.element(container)
- ? 'insertAdjacentElement'
- : 'insertAdjacentHTML';
+ const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';
target[insertMethod]('afterbegin', container);
// Find the elements if need be
@@ -1822,9 +1603,7 @@ const controls = {
// Setup tooltips
if (this.config.tooltips.controls) {
const { classNames, selectors } = this.config;
- const selector = `${selectors.controls.wrapper} ${
- selectors.labels
- } .${classNames.hidden}`;
+ const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;
const labels = getElements.call(this, selector);
Array.from(labels).forEach(label => {
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 881393ba..c1305bcd 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -6,14 +6,7 @@ import controls from './controls';
import ui from './ui';
import { repaint } from './utils/animation';
import browser from './utils/browser';
-import {
- getElement,
- getElements,
- hasClass,
- matches,
- toggleClass,
- toggleHidden,
-} from './utils/elements';
+import { getElement, getElements, hasClass, matches, toggleClass, toggleHidden } from './utils/elements';
import { on, once, toggleListener, triggerEvent } from './utils/events';
import is from './utils/is';
@@ -69,38 +62,13 @@ class Listeners {
return;
}
- if (
- event.which === 32 &&
- matches(focused, 'button, [role^="menuitem"]')
- ) {
+ if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) {
return;
}
}
// Which keycodes should we prevent default
- const preventDefault = [
- 32,
- 37,
- 38,
- 39,
- 40,
- 48,
- 49,
- 50,
- 51,
- 52,
- 53,
- 54,
- 56,
- 57,
- 67,
- 70,
- 73,
- 75,
- 76,
- 77,
- 79,
- ];
+ const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
// If the code is found prevent default (e.g. prevent scrolling for arrows)
if (preventDefault.includes(code)) {
@@ -195,11 +163,7 @@ class Listeners {
// Escape is handle natively when in full screen
// So we only need to worry about non native
- if (
- !player.fullscreen.enabled &&
- player.fullscreen.active &&
- code === 27
- ) {
+ if (!player.fullscreen.enabled && player.fullscreen.active && code === 27) {
player.fullscreen.toggle();
}
@@ -222,11 +186,7 @@ class Listeners {
player.touch = true;
// Add touch class
- toggleClass(
- player.elements.container,
- player.config.classNames.isTouch,
- true,
- );
+ toggleClass(player.elements.container, player.config.classNames.isTouch, true);
}
setTabFocus(event) {
@@ -272,11 +232,7 @@ class Listeners {
return;
}
- toggleClass(
- document.activeElement,
- player.config.classNames.tabFocus,
- true,
- );
+ toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
}, 10);
}
@@ -286,38 +242,17 @@ class Listeners {
// Keyboard shortcuts
if (player.config.keyboard.global) {
- toggleListener.call(
- player,
- window,
- 'keydown keyup',
- this.handleKey,
- toggle,
- false,
- );
+ toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false);
}
// Click anywhere closes menu
- toggleListener.call(
- player,
- document.body,
- 'click',
- this.toggleMenu,
- toggle,
- );
+ toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle);
// Detect touch by events
once.call(player, document.body, 'touchstart', this.firstTouch);
// Tab focus detection
- toggleListener.call(
- player,
- document.body,
- 'keydown focus blur',
- this.setTabFocus,
- toggle,
- false,
- true,
- );
+ toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
}
// Container listeners
@@ -326,13 +261,7 @@ class Listeners {
// Keyboard shortcuts
if (!player.config.keyboard.global && player.config.keyboard.focused) {
- on.call(
- player,
- player.elements.container,
- 'keydown keyup',
- this.handleKey,
- false,
- );
+ on.call(player, player.elements.container, 'keydown keyup', this.handleKey, false);
}
// Toggle controls on mouse events and entering fullscreen
@@ -350,9 +279,7 @@ class Listeners {
}
// Show, then hide after a timeout unless another control event occurs
- const show = ['touchstart', 'touchmove', 'mousemove'].includes(
- event.type,
- );
+ const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
let delay = 0;
@@ -366,10 +293,7 @@ class Listeners {
clearTimeout(player.timers.controls);
// Set new timer to prevent flicker when seeking
- player.timers.controls = setTimeout(
- () => ui.toggleControls.call(player, false),
- delay,
- );
+ player.timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
},
);
}
@@ -379,16 +303,11 @@ class Listeners {
const { player } = this;
// Time change on media
- on.call(player, player.media, 'timeupdate seeking seeked', event =>
- controls.timeUpdate.call(player, event),
- );
+ on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));
// Display duration
- on.call(
- player,
- player.media,
- 'durationchange loadeddata loadedmetadata',
- event => controls.durationUpdate.call(player, event),
+ on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>
+ controls.durationUpdate.call(player, event),
);
// Check for audio tracks on load
@@ -408,30 +327,20 @@ class Listeners {
});
// Check for buffer progress
- on.call(
- player,
- player.media,
- 'progress playing seeking seeked',
- event => controls.updateProgress.call(player, event),
+ on.call(player, player.media, 'progress playing seeking seeked', event =>
+ controls.updateProgress.call(player, event),
);
// Handle volume changes
- on.call(player, player.media, 'volumechange', event =>
- controls.updateVolume.call(player, event),
- );
+ on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));
// Handle play/pause
- on.call(
- player,
- player.media,
- 'playing play pause ended emptied timeupdate',
- event => ui.checkPlaying.call(player, event),
+ on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>
+ ui.checkPlaying.call(player, event),
);
// Loading state
- on.call(player, player.media, 'waiting canplay seeked playing', event =>
- ui.checkLoading.call(player, event),
- );
+ on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
// If autoplay, then load advertisement if required
// TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
@@ -443,23 +352,14 @@ class Listeners {
// If ads are enabled, wait for them first
if (player.ads.enabled && !player.ads.initialized) {
// Wait for manager response
- player.ads.managerPromise
- .then(() => player.ads.play())
- .catch(() => player.play());
+ player.ads.managerPromise.then(() => player.ads.play()).catch(() => player.play());
}
});
// Click video
- if (
- player.supported.ui &&
- player.config.clickToPlay &&
- !player.isAudio
- ) {
+ if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
// Re-fetch the wrapper
- const wrapper = getElement.call(
- player,
- `.${player.config.classNames.video}`,
- );
+ const wrapper = getElement.call(player, `.${player.config.classNames.video}`);
// Bail if there's no wrapper (this should never happen)
if (!is.element(wrapper)) {
@@ -467,42 +367,31 @@ class Listeners {
}
// On click play, pause ore restart
- on.call(
- player,
- player.elements.container,
- 'click touchstart',
- event => {
- const targets = [player.elements.container, wrapper];
-
- // Ignore if click if not container or in video wrapper
- if (
- !targets.includes(event.target) &&
- !wrapper.contains(event.target)
- ) {
- return;
- }
+ on.call(player, player.elements.container, 'click touchstart', event => {
+ const targets = [player.elements.container, wrapper];
- // First touch on touch devices will just show controls (if we're hiding controls)
- // If controls are shown then it'll toggle like a pointer device
- if (
- player.config.hideControls &&
- player.touch &&
- hasClass(
- player.elements.container,
- player.config.classNames.hideControls,
- )
- ) {
- return;
- }
+ // Ignore if click if not container or in video wrapper
+ if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
+ return;
+ }
- if (player.ended) {
- player.restart();
- player.play();
- } else {
- player.togglePlay();
- }
- },
- );
+ // First touch on touch devices will just show controls (if we're hiding controls)
+ // If controls are shown then it'll toggle like a pointer device
+ if (
+ player.config.hideControls &&
+ player.touch &&
+ hasClass(player.elements.container, player.config.classNames.hideControls)
+ ) {
+ return;
+ }
+
+ if (player.ended) {
+ player.restart();
+ player.play();
+ } else {
+ player.togglePlay();
+ }
+ });
}
// Disable right click
@@ -545,19 +434,12 @@ class Listeners {
// Quality change
on.call(player, player.media, 'qualitychange', event => {
// Update UI
- controls.updateSetting.call(
- player,
- 'quality',
- null,
- event.detail.quality,
- );
+ controls.updateSetting.call(player, 'quality', null, event.detail.quality);
});
// Proxy events to container
// Bubble up key events for Edge
- const proxyEvents = player.config.events
- .concat(['keyup', 'keydown'])
- .join(' ');
+ const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');
on.call(player, player.media, proxyEvents, event => {
let { detail = {} } = event;
@@ -567,13 +449,7 @@ class Listeners {
detail = player.media.error;
}
- triggerEvent.call(
- player,
- player.elements.container,
- event.type,
- true,
- detail,
- );
+ triggerEvent.call(player, player.elements.container, event.type, true, detail);
});
}
@@ -625,28 +501,13 @@ class Listeners {
}
// Pause
- this.bind(
- player.elements.buttons.restart,
- 'click',
- player.restart,
- 'restart',
- );
+ this.bind(player.elements.buttons.restart, 'click', player.restart, 'restart');
// Rewind
- this.bind(
- player.elements.buttons.rewind,
- 'click',
- player.rewind,
- 'rewind',
- );
+ this.bind(player.elements.buttons.rewind, 'click', player.rewind, 'rewind');
// Rewind
- this.bind(
- player.elements.buttons.fastForward,
- 'click',
- player.forward,
- 'fastForward',
- );
+ this.bind(player.elements.buttons.fastForward, 'click', player.forward, 'fastForward');
// Mute toggle
this.bind(
@@ -659,9 +520,7 @@ class Listeners {
);
// Captions toggle
- this.bind(player.elements.buttons.captions, 'click', () =>
- player.toggleCaptions(),
- );
+ this.bind(player.elements.buttons.captions, 'click', () => player.toggleCaptions());
// Fullscreen toggle
this.bind(
@@ -684,12 +543,7 @@ class Listeners {
);
// Airplay
- this.bind(
- player.elements.buttons.airplay,
- 'click',
- player.airplay,
- 'airplay',
- );
+ this.bind(player.elements.buttons.airplay, 'click', player.airplay, 'airplay');
// Settings menu - click toggle
this.bind(player.elements.buttons.settings, 'click', event => {
@@ -731,39 +585,30 @@ class Listeners {
});
// Pause while seeking
- this.bind(
- player.elements.inputs.seek,
- 'mousedown mouseup keydown keyup touchstart touchend',
- event => {
- const seek = event.currentTarget;
- const code = event.keyCode ? event.keyCode : event.which;
- const eventType = event.type;
- const attribute = 'play-on-seeked';
-
- if (
- (eventType === 'keydown' || eventType === 'keyup') &&
- (code !== 39 && code !== 37)
- ) {
- return;
- }
- // Was playing before?
- const play = seek.hasAttribute(attribute);
-
- // Done seeking
- const done = ['mouseup', 'touchend', 'keyup'].includes(
- event.type,
- );
+ this.bind(player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
+ const seek = event.currentTarget;
+ const code = event.keyCode ? event.keyCode : event.which;
+ const eventType = event.type;
+ const attribute = 'play-on-seeked';
- // If we're done seeking and it was playing, resume playback
- if (play && done) {
- seek.removeAttribute(attribute);
- player.play();
- } else if (!done && player.playing) {
- seek.setAttribute(attribute, '');
- player.pause();
- }
- },
- );
+ if ((eventType === 'keydown' || eventType === 'keyup') && (code !== 39 && code !== 37)) {
+ return;
+ }
+ // Was playing before?
+ const play = seek.hasAttribute(attribute);
+
+ // Done seeking
+ const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);
+
+ // If we're done seeking and it was playing, resume playback
+ if (play && done) {
+ seek.removeAttribute(attribute);
+ player.play();
+ } else if (!done && player.playing) {
+ seek.setAttribute(attribute, '');
+ player.pause();
+ }
+ });
// Fix range inputs on iOS
// Super weird iOS bug where after you interact with an <input type="range">,
@@ -771,9 +616,7 @@ class Listeners {
if (browser.isIos) {
const inputs = getElements.call(player, 'input[type="range"]');
- Array.from(inputs).forEach(input =>
- this.bind(input, inputEvent, event => repaint(event.target)),
- );
+ Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));
}
// Seek
@@ -799,10 +642,7 @@ class Listeners {
// Current time invert
// Only if one time element is used for both currentTime and duration
- if (
- player.config.toggleInvert &&
- !is.element(player.elements.display.duration)
- ) {
+ if (player.config.toggleInvert && !is.element(player.elements.display.duration)) {
this.bind(player.elements.display.currentTime, 'click', () => {
// Do nothing if we're at the start
if (player.currentTime === 0) {
@@ -827,39 +667,25 @@ class Listeners {
// Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
- Array.from(getElements.call(player, 'input[type="range"]')).forEach(
- element => {
- this.bind(element, 'input', event =>
- controls.updateRangeFill.call(player, event.target),
- );
- },
- );
+ Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
+ this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+ });
}
// Seek tooltip
- this.bind(
- player.elements.progress,
- 'mouseenter mouseleave mousemove',
- event => controls.updateSeekTooltip.call(player, event),
+ this.bind(player.elements.progress, 'mouseenter mouseleave mousemove', event =>
+ controls.updateSeekTooltip.call(player, event),
);
// Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
this.bind(player.elements.controls, 'mouseenter mouseleave', event => {
- player.elements.controls.hover =
- !player.touch && event.type === 'mouseenter';
+ player.elements.controls.hover = !player.touch && event.type === 'mouseenter';
});
// Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
- this.bind(
- player.elements.controls,
- 'mousedown mouseup touchstart touchend touchcancel',
- event => {
- player.elements.controls.pressed = [
- 'mousedown',
- 'touchstart',
- ].includes(event.type);
- },
- );
+ this.bind(player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+ player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
+ });
// Focus in/out on controls
this.bind(player.elements.controls, 'focusin focusout', event => {
@@ -867,11 +693,7 @@ class Listeners {
const isFocusIn = event.type === 'focusin';
// Skip transition to prevent focus from scrolling the parent element
- toggleClass(
- elements.controls,
- config.classNames.noTransition,
- isFocusIn,
- );
+ toggleClass(elements.controls, config.classNames.noTransition, isFocusIn);
// Toggle
ui.toggleControls.call(player, isFocusIn);
@@ -880,11 +702,7 @@ class Listeners {
if (isFocusIn) {
// Restore transition
setTimeout(() => {
- toggleClass(
- elements.controls,
- config.classNames.noTransition,
- false,
- );
+ toggleClass(elements.controls, config.classNames.noTransition, false);
}, 0);
// Delay a little more for keyboard users
@@ -894,10 +712,7 @@ class Listeners {
clearTimeout(timers.controls);
// Hide
- timers.controls = setTimeout(
- () => ui.toggleControls.call(player, false),
- delay,
- );
+ timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
}
});
@@ -911,9 +726,7 @@ class Listeners {
const inverted = event.webkitDirectionInvertedFromDevice;
// Get delta from event. Invert if `inverted` is true
- const [x, y] = [event.deltaX, -event.deltaY].map(
- value => (inverted ? -value : value),
- );
+ const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
// Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
@@ -923,10 +736,7 @@ class Listeners {
// Don't break page scrolling at max and min
const { volume } = player.media;
- if (
- (direction === 1 && volume < 1) ||
- (direction === -1 && volume > 0)
- ) {
+ if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {
event.preventDefault();
}
},
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 9437cdbe..b99df2ff 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -52,11 +52,7 @@ class Plyr {
}
// jQuery, NodeList or Array passed, use first element
- if (
- (window.jQuery && this.media instanceof jQuery) ||
- is.nodeList(this.media) ||
- is.array(this.media)
- ) {
+ if ((window.jQuery && this.media instanceof jQuery) || is.nodeList(this.media) || is.array(this.media)) {
// eslint-disable-next-line
this.media = this.media[0];
}
@@ -69,9 +65,7 @@ class Plyr {
options || {},
(() => {
try {
- return JSON.parse(
- this.media.getAttribute('data-plyr-config'),
- );
+ return JSON.parse(this.media.getAttribute('data-plyr-config'));
} catch (e) {
return {};
}
@@ -199,21 +193,14 @@ class Plyr {
}
} else {
// <div> with attributes
- this.provider = this.media.getAttribute(
- this.config.attributes.embed.provider,
- );
+ this.provider = this.media.getAttribute(this.config.attributes.embed.provider);
// Remove attribute
- this.media.removeAttribute(
- this.config.attributes.embed.provider,
- );
+ this.media.removeAttribute(this.config.attributes.embed.provider);
}
// Unsupported or missing provider
- if (
- is.empty(this.provider) ||
- !Object.keys(providers).includes(this.provider)
- ) {
+ if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
this.debug.error('Setup failed: Invalid provider');
return;
}
@@ -235,10 +222,7 @@ class Plyr {
if (this.media.hasAttribute('autoplay')) {
this.config.autoplay = true;
}
- if (
- this.media.hasAttribute('playsinline') ||
- this.media.hasAttribute('webkit-playsinline')
- ) {
+ if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) {
this.config.playsinline = true;
}
if (this.media.hasAttribute('muted')) {
@@ -256,11 +240,7 @@ class Plyr {
}
// Check for support again but with type
- this.supported = support.check(
- this.type,
- this.provider,
- this.config.playsinline,
- );
+ this.supported = support.check(this.type, this.provider, this.config.playsinline);
// If no support for even API, bail
if (!this.supported.api) {
@@ -293,14 +273,9 @@ class Plyr {
// Listen for events if debugging
if (this.config.debug) {
- on.call(
- this,
- this.elements.container,
- this.config.events.join(' '),
- event => {
- this.debug.log(`event: ${event.type}`);
- },
- );
+ on.call(this, this.elements.container, this.config.events.join(' '), event => {
+ this.debug.log(`event: ${event.type}`);
+ });
}
// Setup interface
@@ -450,9 +425,7 @@ class Plyr {
* @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
*/
rewind(seekTime) {
- this.currentTime =
- this.currentTime -
- (is.number(seekTime) ? seekTime : this.config.seekTime);
+ this.currentTime = this.currentTime - (is.number(seekTime) ? seekTime : this.config.seekTime);
}
/**
@@ -460,9 +433,7 @@ class Plyr {
* @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
*/
forward(seekTime) {
- this.currentTime =
- this.currentTime +
- (is.number(seekTime) ? seekTime : this.config.seekTime);
+ this.currentTime = this.currentTime + (is.number(seekTime) ? seekTime : this.config.seekTime);
}
/**
@@ -479,9 +450,7 @@ class Plyr {
const inputIsValid = is.number(input) && input > 0;
// Set
- this.media.currentTime = inputIsValid
- ? Math.min(input, this.duration)
- : 0;
+ this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0;
// Logging
this.debug.log(`Seeking to ${this.currentTime} seconds`);
@@ -531,10 +500,7 @@ class Plyr {
// Media duration can be NaN or Infinity before the media has loaded
const realDuration = (this.media || {}).duration;
- const duration =
- !is.number(realDuration) || realDuration === Infinity
- ? 0
- : realDuration;
+ const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
// If config duration is funky, use regular duration
return fauxDuration || duration;
@@ -728,9 +694,7 @@ class Plyr {
if (!options.includes(quality)) {
const value = closest(options, quality);
- this.debug.warn(
- `Unsupported quality option: ${quality}, using ${value} instead`,
- );
+ this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
quality = value;
}
@@ -929,9 +893,7 @@ class Plyr {
const toggle = is.boolean(input) ? input : this.pip === states.inline;
// Toggle based on current state
- this.media.webkitSetPresentationMode(
- toggle ? states.pip : states.inline,
- );
+ this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
}
/**
@@ -964,27 +926,16 @@ class Plyr {
// Don't toggle if missing UI support or if it's audio
if (this.supported.ui && !this.isAudio) {
// Get state before change
- const isHidden = hasClass(
- this.elements.container,
- this.config.classNames.hideControls,
- );
+ const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls);
// Negate the argument if not undefined since adding the class to hides the controls
const force = typeof toggle === 'undefined' ? undefined : !toggle;
// Apply and get updated state
- const hiding = toggleClass(
- this.elements.container,
- this.config.classNames.hideControls,
- force,
- );
+ const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
// Close menu
- if (
- hiding &&
- this.config.controls.includes('settings') &&
- !is.empty(this.config.settings)
- ) {
+ if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
controls.toggleMenu.call(this, false);
}
@@ -1074,12 +1025,7 @@ class Plyr {
replaceElement(this.elements.original, this.elements.container);
// Event
- triggerEvent.call(
- this,
- this.elements.original,
- 'destroyed',
- true,
- );
+ triggerEvent.call(this, this.elements.original, 'destroyed', true);
// Callback
if (is.function(callback)) {
diff --git a/src/js/support.js b/src/js/support.js
index 4681f5c7..6395293f 100644
--- a/src/js/support.js
+++ b/src/js/support.js
@@ -25,13 +25,9 @@ const support = {
// Check for support
// Basic functionality vs full UI
check(type, provider, playsinline) {
- const canPlayInline =
- browser.isIPhone && playsinline && support.playsinline;
+ const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
const api = support[type] || provider !== 'html5';
- const ui =
- api &&
- support.rangeInput &&
- (type !== 'video' || !browser.isIPhone || canPlayInline);
+ const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
return {
api,
@@ -41,9 +37,7 @@ const support = {
// Picture-in-picture support
// Safari only currently
- pip: (() =>
- !browser.isIPhone &&
- is.function(createElement('video').webkitSetPresentationMode))(),
+ pip: (() => !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode))(),
// Airplay support
// Safari only currently
@@ -75,9 +69,7 @@ const support = {
}
try {
- return Boolean(
- type && this.media.canPlayType(type).replace(/no/, ''),
- );
+ return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
} catch (err) {
return false;
}
@@ -102,9 +94,7 @@ const support = {
// Reduced motion iOS & MacOS setting
// https://webkit.org/blog/7551/responsive-design-for-motion/
- reducedMotion:
- 'matchMedia' in window &&
- window.matchMedia('(prefers-reduced-motion)').matches,
+ reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,
};
export default support;
diff --git a/src/js/ui.js b/src/js/ui.js
index 8c61d805..34fe7e82 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -14,16 +14,8 @@ import loadImage from './utils/loadImage';
const ui = {
addStyleHook() {
- toggleClass(
- this.elements.container,
- this.config.selectors.container.replace('.', ''),
- true,
- );
- toggleClass(
- this.elements.container,
- this.config.classNames.uiSupported,
- this.supported.ui,
- );
+ toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
+ toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);
},
// Toggle native HTML5 media controls
@@ -43,9 +35,7 @@ const ui = {
// Don't setup interface if no support
if (!this.supported.ui) {
- this.debug.warn(
- `Basic support only for ${this.provider} ${this.type}`,
- );
+ this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
// Restore native controls
ui.toggleNativeControls.call(this, true);
@@ -103,25 +93,13 @@ const ui = {
);
// Check for airplay support
- toggleClass(
- this.elements.container,
- this.config.classNames.airplay.supported,
- support.airplay && this.isHTML5,
- );
+ toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
// Add iOS class
- toggleClass(
- this.elements.container,
- this.config.classNames.isIos,
- browser.isIos,
- );
+ toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
// Add touch class
- toggleClass(
- this.elements.container,
- this.config.classNames.isTouch,
- this.touch,
- );
+ toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
// Ready for API calls
this.ready = true;
@@ -171,9 +149,7 @@ const ui = {
}
// Default to media type
- const title = !is.empty(this.config.title)
- ? this.config.title
- : 'video';
+ const title = !is.empty(this.config.title) ? this.config.title : 'video';
const format = i18n.get('frameTitle', this.config);
iframe.setAttribute('title', format.replace('{title}', title));
@@ -182,11 +158,7 @@ const ui = {
// Toggle poster
togglePoster(enable) {
- toggleClass(
- this.elements.container,
- this.config.classNames.posterEnabled,
- enable,
- );
+ toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
},
// Set the poster image (async)
@@ -217,9 +189,7 @@ const ui = {
.then(() => {
// Prevent race conditions
if (poster !== this.poster) {
- throw new Error(
- 'setPoster cancelled by later call to setPoster',
- );
+ throw new Error('setPoster cancelled by later call to setPoster');
}
})
.then(() => {
@@ -237,21 +207,9 @@ const ui = {
// Check playing state
checkPlaying(event) {
// Class hooks
- toggleClass(
- this.elements.container,
- this.config.classNames.playing,
- this.playing,
- );
- toggleClass(
- this.elements.container,
- this.config.classNames.paused,
- this.paused,
- );
- toggleClass(
- this.elements.container,
- this.config.classNames.stopped,
- this.stopped,
- );
+ toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
+ toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
+ toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
// Set state
Array.from(this.elements.buttons.play || []).forEach(target => {
@@ -277,11 +235,7 @@ const ui = {
// Timer to prevent flicker when seeking
this.timers.loading = setTimeout(() => {
// Update progress bar loading class state
- toggleClass(
- this.elements.container,
- this.config.classNames.loading,
- this.loading,
- );
+ toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
// Update controls visibility
ui.toggleControls.call(this);
@@ -294,15 +248,7 @@ const ui = {
if (controls && this.config.hideControls) {
// Show controls if force, loading, paused, or button interaction, otherwise hide
- this.toggleControls(
- Boolean(
- force ||
- this.loading ||
- this.paused ||
- controls.pressed ||
- controls.hover,
- ),
- );
+ this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover));
}
},
};
diff --git a/src/js/utils/events.js b/src/js/utils/events.js
index 9820fcae..9f734f04 100644
--- a/src/js/utils/events.js
+++ b/src/js/utils/events.js
@@ -27,21 +27,9 @@ const supportsPassiveListeners = (() => {
})();
// Toggle event listener
-export function toggleListener(
- element,
- event,
- callback,
- toggle = false,
- passive = true,
- capture = false,
-) {
+export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) {
// Bail if no element, event, or callback
- if (
- !element ||
- !('addEventListener' in element) ||
- is.empty(event) ||
- !is.function(callback)
- ) {
+ if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) {
return;
}
@@ -69,74 +57,28 @@ export function toggleListener(
this.eventListeners.push({ element, type, callback, options });
}
- element[toggle ? 'addEventListener' : 'removeEventListener'](
- type,
- callback,
- options,
- );
+ element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);
});
}
// Bind event handler
-export function on(
- element,
- events = '',
- callback,
- passive = true,
- capture = false,
-) {
- toggleListener.call(
- this,
- element,
- events,
- callback,
- true,
- passive,
- capture,
- );
+export function on(element, events = '', callback, passive = true, capture = false) {
+ toggleListener.call(this, element, events, callback, true, passive, capture);
}
// Unbind event handler
-export function off(
- element,
- events = '',
- callback,
- passive = true,
- capture = false,
-) {
- toggleListener.call(
- this,
- element,
- events,
- callback,
- false,
- passive,
- capture,
- );
+export function off(element, events = '', callback, passive = true, capture = false) {
+ toggleListener.call(this, element, events, callback, false, passive, capture);
}
// Bind once-only event handler
-export function once(
- element,
- events = '',
- callback,
- passive = true,
- capture = false,
-) {
+export function once(element, events = '', callback, passive = true, capture = false) {
function onceCallback(...args) {
off(element, events, onceCallback, passive, capture);
callback.apply(this, args);
}
- toggleListener.call(
- this,
- element,
- events,
- onceCallback,
- true,
- passive,
- capture,
- );
+ toggleListener.call(this, element, events, onceCallback, true, passive, capture);
}
// Trigger event
@@ -173,9 +115,6 @@ export function unbindListeners() {
// Run method when / if player is ready
export function ready() {
return new Promise(
- resolve =>
- this.ready
- ? setTimeout(resolve, 0)
- : on.call(this, this.elements.container, 'ready', resolve),
+ resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)),
).then(() => {});
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 15:24:47 +0000