silence all internal play promises

src/js/fullscreen.js

@@ -8,6 +8,7 @@ import browser from './utils/browser';
 import { getElements, hasClass, toggleClass } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 
 class Fullscreen {
     constructor(player) {
@@ -268,7 +269,7 @@ class Fullscreen {
         // iOS native fullscreen
         if (browser.isIos && this.player.config.fullscreen.iosNative) {
             this.target.webkitExitFullscreen();
-            this.player.play();
+            silencePromise(this.player.play());
         } else if (!Fullscreen.native || this.forceFallback) {
             this.toggleFallback(false);
         } else if (!this.prefix) {

src/js/html5.js

@@ -6,6 +6,7 @@ import support from './support';
 import { removeElement } from './utils/elements';
 import { triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 import { setAspectRatio } from './utils/style';
 
 const html5 = {
@@ -101,7 +102,7 @@ const html5 = {
 
                             // Resume playing
                             if (!paused) {
-                                player.play();
+                                silencePromise(player.play());
                             }
                         });
 

src/js/listeners.js

@@ -9,6 +9,7 @@ import browser from './utils/browser';
 import { getElement, getElements, matches, toggleClass } from './utils/elements';
 import { off, on, once, toggleListener, triggerEvent } from './utils/events';
 import is from './utils/is';
+import { silencePromise } from './utils/promise';
 import { getAspectRatio, setAspectRatio } from './utils/style';
 
 class Listeners {
@@ -99,7 +100,7 @@ class Listeners {
                 case 75:
                     // Space and K key
                     if (!repeat) {
-                        player.togglePlay();
+                        silencePromise(player.togglePlay());
                     }
                     break;
 
@@ -431,9 +432,9 @@ class Listeners {
 
                 if (player.ended) {
                     this.proxy(event, player.restart, 'restart');
-                    this.proxy(event, player.play, 'play');
+                    this.proxy(event, () => { silencePromise(player.play()) }, 'play');
                 } else {
-                    this.proxy(event, player.togglePlay, 'play');
+                    this.proxy(event, () => { silencePromise(player.togglePlay()) }, 'play');
                 }
             });
         }
@@ -539,7 +540,7 @@ class Listeners {
         // Play/pause toggle
         if (elements.buttons.play) {
             Array.from(elements.buttons.play).forEach(button => {
-                this.bind(button, 'click', player.togglePlay, 'play');
+                this.bind(button, 'click', () => { silencePromise(player.togglePlay()) }, 'play');
             });
         }
 
@@ -681,7 +682,7 @@ class Listeners {
             // If we're done seeking and it was playing, resume playback
             if (play && done) {
                 seek.removeAttribute(attribute);
-                player.play();
+                silencePromise(player.play());
             } else if (!done && player.playing) {
                 seek.setAttribute(attribute, '');
                 player.pause();

src/js/plugins/ads.js

@@ -11,6 +11,7 @@ import { triggerEvent } from '../utils/events';
 import i18n from '../utils/i18n';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
+import { silencePromise } from '../utils/promise';
 import { formatTime } from '../utils/time';
 import { buildUrlParams } from '../utils/urls';
 
@@ -510,7 +511,7 @@ class Ads {
         this.playing = false;
 
         // Play video
-        this.player.media.play();
+        silencePromise(this.player.media.play());
     }
 
     /**

src/js/plyr.js

@@ -27,6 +27,7 @@ import is from './utils/is';
 import loadSprite from './utils/load-sprite';
 import { clamp } from './utils/numbers';
 import { cloneDeep, extend } from './utils/objects';
+import { silencePromise } from './utils/promise';
 import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateRatio } from './utils/style';
 import { parseUrl } from './utils/urls';
 
@@ -303,7 +304,7 @@ class Plyr {
 
         // Autoplay if required
         if (this.isHTML5 && this.config.autoplay) {
-            setTimeout(() => this.play(), 10);
+            setTimeout(() => silencePromise(this.play()), 10);
         }
 
         // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -356,7 +357,7 @@ class Plyr {
 
         // Intecept play with ads
         if (this.ads && this.ads.enabled) {
-            this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
+            this.ads.managerPromise.then(() => this.ads.play()).catch(() => silencePromise(this.media.play()));
         }
 
         // Return the promise (for HTML5)

src/js/utils/promise.js

@@ -0,0 +1,27 @@
+/**
+ * Returns whether an object is `Promise`-like (i.e. has a `then` method).
+ *
+ * @param  {Object}  value
+ *         An object that may or may not be `Promise`-like.
+ *
+ * @return {boolean}
+ *         Whether or not the object is `Promise`-like.
+ */
+export function isPromise(value) {
+    return value !== undefined && value !== null && typeof value.then === 'function';
+}
+
+/**
+ * Silence a Promise-like object.
+ *
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ *
+ * @param  {Object} value
+ *         An object that may or may not be `Promise`-like.
+ */
+export function silencePromise(value) {
+    if (isPromise(value)) {
+        value.then(null, () => {});
+    }
+}