ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Click to play fix, poster fix, iOS controls fixes

Browse Source
This commit is contained in:
Sam Potts
2018-07-30 01:13:12 +10:00
parent 3a8332bdb3
commit 599b33e55f
26 changed files with 854 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/js/plyr.js
View File

@ -52,7 +52,11 @@ 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];
}
@ -65,7 +69,9 @@ 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 {};
}
@ -185,21 +191,30 @@ class Plyr {
// TODO: replace fullscreen.iosNative with this playsinline config option
// YouTube requires the playsinline in the URL
if (this.isYouTube) {
this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
this.config.playsinline = truthy.includes(
url.searchParams.get('playsinline'),
);
} else {
this.config.playsinline = true;
}
}
} 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;
}
@ -221,7 +236,10 @@ class Plyr {
if (this.media.hasAttribute('autoplay')) {
this.config.autoplay = true;
}
if (this.media.hasAttribute('playsinline')) {
if (
this.media.hasAttribute('playsinline') ||
this.media.hasAttribute('webkit-playsinline')
) {
this.config.playsinline = true;
}
if (this.media.hasAttribute('muted')) {
@ -239,7 +257,11 @@ 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) {
@ -272,9 +294,14 @@ 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
@ -293,7 +320,9 @@ class Plyr {
this.fullscreen = new Fullscreen(this);
// Setup ads if provided
this.ads = new Ads(this);
if (this.config.ads.enabled) {
this.ads = new Ads(this);
}
// Autoplay if required
if (this.config.autoplay) {
@ -422,7 +451,9 @@ 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);
}
/**
@ -430,7 +461,9 @@ 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);
}
/**
@ -447,7 +480,9 @@ 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`);
@ -497,7 +532,10 @@ 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;
@ -691,12 +729,16 @@ 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;
}
// Trigger request event
triggerEvent.call(this, this.media, 'qualityrequested', false, { quality });
triggerEvent.call(this, this.media, 'qualityrequested', false, {
quality,
});
// Update config
config.selected = quality;
@ -888,7 +930,9 @@ 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,
);
}
/**
@ -921,25 +965,39 @@ 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);
}
// Trigger event on change
if (hiding !== isHidden) {
const eventName = hiding ? 'controlshidden' : 'controlsshown';
triggerEvent.call(this, this.media, eventName);
}
return !hiding;
}
return false;
}
@ -1017,7 +1075,12 @@ 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)) {