Linting
This commit is contained in:
Sam Potts
@ -2,5 +2,6 @@
|
||||
"useTabs": false,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120
|
||||
}
|
||||
|
||||
@ -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 – “It All Began With A Burst”',
|
||||
title: 'Kishi Bashi – “It All Began With A Burst”',
|
||||
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');
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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();
|
||||
|
||||
395
src/js/controls.js
vendored
395
src/js/controls.js
vendored
@ -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}×`;
|
||||
return value === 1 ? i18n.get('normal', this.config) : `${value}×`;
|
||||
|
||||
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 => {
|
||||
|
||||
@ -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];
|
||||
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;
|
||||
}
|
||||
// Ignore if click if not container or in video wrapper
|
||||
if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
// 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();
|
||||
}
|
||||
},
|
||||
);
|
||||
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';
|
||||
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);
|
||||
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,
|
||||
);
|
||||
// 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();
|
||||
}
|
||||
},
|
||||
);
|
||||
// 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();
|
||||
}
|
||||
},
|
||||
|
||||
@ -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)) {
|
||||
|
||||
@ -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;
|
||||
|
||||
82
src/js/ui.js
82
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));
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -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(() => {});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user