Small UI tweaks and fix for instanceof issue

Fix: ads blocked and media playing before ad plays

demo/error.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="dist/error.css">
 
     <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
 </head>

demo/index.html

@@ -30,6 +30,7 @@
     <link rel="stylesheet" href="dist/demo.css">
 
     <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
 </head>

demo/index.local.html

@@ -30,6 +30,7 @@
     <link rel="stylesheet" href="dist/demo.css">
 
     <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
 </head>

demo/src/sass/type/headings.scss

@@ -4,7 +4,7 @@
 
 h1 {
     @include font-size($font-size-h1);
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-light;
     letter-spacing: $letter-spacing-headings;
     margin: 0 0 ($spacing-base / 2);
 }

gulpfile.js

@@ -312,9 +312,13 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
             .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
             .pipe(gulp.dest(root));
 
-        // Replace versioned files in plyr.js
+        // Replace versioned URLs in source
+        const files = [
+            'plyr.js',
+            'defaults.js',
+        ];
         gulp
-            .src(path.join(root, 'src/js/plyr.js'))
+            .src(files.map(file => path.join(root, `src/js/${file}`)))
             .pipe(replace(semver, `v${version}`))
             .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
             .pipe(gulp.dest(path.join(root, 'src/js/')));

package.json

@@ -1,9 +1,9 @@
 {
     "name": "plyr",
-    "version": "3.0.0-beta.8",
+    "version": "3.0.0-beta.11",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
-    "main": "./dist",
+    "main": "./dist/plyr.js",
     "sass": "./src/sass/plyr.scss",
     "style": "./dist/plyr.css",
     "devDependencies": {
@@ -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": {

readme.md

@@ -122,7 +122,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.0.0-beta.8/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.0-beta.11/plyr.js"></script>
 ```
 
 ### CSS
@@ -136,13 +136,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.8/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.11/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.8/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.11/plyr.svg`.
 
 ## Advanced
 

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.11/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

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, () => {
-                this.ready();
-            });
+            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

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.8
+// plyr.js v3.0.0-beta.11
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -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: Fix the occasional play of the video before the Ad fires?
-        if (this.ads.enabled && !this.ads.initialized) {
+        // TODO: Always return a promise?
+        if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) {
             this.ads.play();
+            return null;
         }
 
         // Return the promise (for HTML5)
@@ -559,6 +559,10 @@ class Plyr {
             return true;
         }
 
+        if (this.isAudio) {
+            return true;
+        }
+
         // Get audio tracks
         return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
     }

src/js/utils.js

@@ -9,7 +9,7 @@ const utils = {
     // Check variable types
     is: {
         plyr(input) {
-            return this.instanceof(input, Plyr);
+            return this.instanceof(input, window.Plyr);
         },
         object(input) {
             return this.getConstructor(input) === Object;
@@ -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;
 
@@ -573,7 +587,7 @@ const utils = {
         const event = new CustomEvent(type, {
             bubbles: utils.is.boolean(bubbles) ? bubbles : false,
             detail: Object.assign({}, detail, {
-                plyr: this instanceof Plyr ? this : null,
+                plyr: utils.is.plyr(this) ? this : null,
             }),
         });
 

src/sass/components/sliders.scss

@@ -91,6 +91,21 @@
             @include plyr-tab-focus();
         }
     }
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-video-range-track-bg;
+    }
 
     // Pressed styles
     &:active {
@@ -108,21 +123,6 @@
     }
 }
 
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-}
-
 // Audio range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
     &::-webkit-slider-runnable-track {
@@ -136,4 +136,19 @@
     &::-ms-track {
         background-color: $plyr-audio-range-track-bg;
     }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
 }

src/sass/lib/mixins.scss

@@ -44,8 +44,8 @@
     width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active() {
-    box-shadow: 0 0 0 $plyr-range-thumb-active-shadow-width transparentize($plyr-range-thumb-bg, 0.5);
+@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
+    box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
 // Fullscreen styles
@@ -87,6 +87,11 @@
         }
     }
 
+    // Hide cursor in fullscreen when controls hidden
+    &.plyr--hide-controls {
+        cursor: none;
+    }
+
     // Large captions in full screen on larger screens
     @media (min-width: $plyr-bp-lg) {
         .plyr__captions {

src/sass/settings/sliders.scss

@@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 $plyr-range-thumb-height: 14px !default;
 $plyr-range-thumb-bg: #fff !default;
 $plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
 
 // Track
 $plyr-range-track-height: 6px !default;
@@ -21,3 +21,4 @@ $plyr-range-fill-bg: $plyr-color-main !default;
 // Type specific
 $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
 $plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;

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:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.3.tgz#11b033f759f909e0a5f15b7bdf47ac29cc54efa4"
+gulp-sourcemaps@^2.6.4:
+  version "2.6.4"
+  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:
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz#27e5b9069ff94005bb01e01bb46a1e4873784677"
+rollup-plugin-commonjs@^8.3.0:
+  version "8.3.0"
+  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:
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
+uglify-es@^3.3.9:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
   dependencies:
     commander "~2.13.0"
     source-map "~0.6.1"