Merge pull request #772 from sampotts/fix/ads-blocked

Fix: ads blocked and media playing before ad plays

package.json

@@ -28,12 +28,12 @@
         "gulp-s3": "^0.11.0",
         "gulp-sass": "^3.1.0",
         "gulp-size": "^3.0.0",
-        "gulp-sourcemaps": "^1.12.1",
+        "gulp-sourcemaps": "^2.6.4",
         "gulp-svgmin": "^1.2.4",
         "gulp-svgstore": "^6.1.1",
         "gulp-util": "^3.0.8",
         "rollup-plugin-babel": "^3.0.3",
-        "rollup-plugin-commonjs": "^8.2.6",
+        "rollup-plugin-commonjs": "^8.3.0",
         "rollup-plugin-node-resolve": "^3.0.2",
         "rollup-plugin-uglify": "^3.0.0",
         "run-sequence": "^2.2.1",
@@ -44,7 +44,7 @@
         "stylelint-order": "^0.8.0",
         "stylelint-scss": "^2.2.0",
         "stylelint-selector-bem-pattern": "^2.0.0",
-        "uglify-es": "^3.3.8"
+        "uglify-es": "^3.3.9"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
     "repository": {

src/js/plugins/ads.js

@@ -35,17 +35,27 @@ class Ads {
         this.enabled = player.config.ads.enabled;
         this.playing = false;
         this.initialized = false;
+        this.blocked = false;
+        this.enabled = utils.is.url(player.config.ads.tag);
 
         // Check if a tag URL is provided.
         if (!this.enabled) {
             return;
         }
 
-        // Check if the Google IMA3 SDK is loaded
+        // Check if the Google IMA3 SDK is loaded or load it ourselves
         if (!utils.is.object(window.google)) {
-            utils.loadScript(player.config.urls.googleIMA.api, () => {
+            utils.loadScript(
+                player.config.urls.googleIMA.api,
+                () => {
                     this.ready();
-            });
+                },
+                () => {
+                    // Script failed to load or is blocked
+                    this.blocked = true;
+                    this.player.debug.log('Ads error: Google IMA SDK failed to load');
+                },
+            );
         } else {
             this.ready();
         }

src/js/plyr.js

@@ -306,13 +306,13 @@ class Plyr {
     }
 
     /**
-     * Play the media, or play the advertisement
+     * Play the media, or play the advertisement (if they are not blocked)
      */
     play() {
-        // Play the ad if setup
+        // TODO: Always return a promise?
-        // TODO: Fix the occasional play of the video before the Ad fires?
+        if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) {
-        if (this.ads.enabled && !this.ads.initialized) {
             this.ads.play();
+            return null;
         }
 
         // Return the promise (for HTML5)

src/js/utils.js

@@ -82,7 +82,7 @@ const utils = {
     },
 
     // Load an external script
-    loadScript(url, callback) {
+    loadScript(url, callback, error) {
         const current = document.querySelector(`script[src="${url}"]`);
 
         // Check script is not already referenced, if so wait for load
@@ -99,6 +99,10 @@ const utils = {
         element.callbacks = element.callbacks || [];
         element.callbacks.push(callback);
 
+        // Error queue
+        element.errors = element.errors || [];
+        element.errors.push(error);
+
         // Bind callback
         if (utils.is.function(callback)) {
             element.addEventListener(
@@ -111,6 +115,16 @@ const utils = {
             );
         }
 
+        // Bind error handling
+        element.addEventListener(
+            'error',
+            event => {
+                element.errors.forEach(err => err.call(null, event));
+                element.errors = null;
+            },
+            false,
+        );
+
         // Set the URL after binding callback
         element.src = url;
 

yarn.lock

@@ -2322,9 +2322,9 @@ gulp-size@^3.0.0:
     stream-counter "^1.0.0"
     through2 "^2.0.0"
 
-gulp-sourcemaps@^2.6.3:
+gulp-sourcemaps@^2.6.4:
-  version "2.6.3"
+  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.3.tgz#11b033f759f909e0a5f15b7bdf47ac29cc54efa4"
+  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.4.tgz#cbb2008450b1bcce6cd23bf98337be751bf6e30a"
   dependencies:
     "@gulp-sourcemaps/identity-map" "1.X"
     "@gulp-sourcemaps/map-sources" "1.X"
@@ -2334,7 +2334,7 @@ gulp-sourcemaps@^2.6.3:
     debug-fabulous "1.X"
     detect-newline "2.X"
     graceful-fs "4.X"
-    source-map "0.X"
+    source-map "~0.6.0"
     strip-bom-string "1.X"
     through2 "2.X"
 
@@ -4553,9 +4553,9 @@ rollup-plugin-babel@^3.0.3:
   dependencies:
     rollup-pluginutils "^1.5.0"
 
-rollup-plugin-commonjs@^8.2.6:
+rollup-plugin-commonjs@^8.3.0:
-  version "8.2.6"
+  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz#27e5b9069ff94005bb01e01bb46a1e4873784677"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.3.0.tgz#91b4ba18f340951e39ed7b1901f377a80ab3f9c3"
   dependencies:
     acorn "^5.2.1"
     estree-walker "^0.5.0"
@@ -4791,10 +4791,6 @@ source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@0.X, source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 source-map@^0.1.38:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@@ -4807,6 +4803,10 @@ source-map@^0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 sparkles@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
@@ -5287,9 +5287,9 @@ uglify-es@^3.3.7:
     commander "~2.13.0"
     source-map "~0.6.1"
 
-uglify-es@^3.3.8:
+uglify-es@^3.3.9:
-  version "3.3.8"
+  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
   dependencies:
     commander "~2.13.0"
     source-map "~0.6.1"