Click to play fix, poster fix, iOS controls fixes

1 files changed, 86 insertions, 23 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index ab1f7866..b4c54ca8 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -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)) {