Fix for bug where controls wouldn't show on hover over YouTube video

# Conflicts:
#	dist/plyr.js.map
#	dist/plyr.min.js
#	dist/plyr.min.js.map
#	dist/plyr.polyfilled.js.map
#	dist/plyr.polyfilled.min.js
#	dist/plyr.polyfilled.min.js.map

changelog.md

@@ -1,7 +1,21 @@
+# v3.3.20
+
+-   Fix for bug where controls wouldn't show on hover over YouTube video
+
+# v3.3.19
+
+-   Remove `pointer-events: none` on embed `<iframe>` to comply with YouTube ToS
+
+# 3.3.18
+
+-   Ads are now only supported on HTML5 videos as it violates terms of service for YouTube and Vimeo 😢
+-   Fix i18n defaults path on README (thanks @meyt!)
+-   Minor increaseVolume and decreaseVolume changes (thanks @friday!)
+
 # v3.3.17
 
--   Fix YouTube muting after seeking with the progress slider
--   Respect preload="none" when setting quality if the media hasn't been loaded some other way
+-   Fix YouTube muting after seeking with the progress slider (thanks @friday!)
+-   Respect preload="none" when setting quality if the media hasn't been loaded some other way (thanks @friday!)
 
 # v3.3.16
 

demo/dist/demo.js

@@ -1874,7 +1874,7 @@ typeof navigator === "object" && (function () {
 	  // webpack (using a build step causes webpack #1617). Grunt verifies that
 	  // this value matches package.json during build.
 	  //   See: https://github.com/getsentry/raven-js/issues/465
-	  VERSION: '3.26.2',
+	  VERSION: '3.26.3',
 
 	  debug: false,
 
@@ -2351,7 +2351,9 @@ typeof navigator === "object" && (function () {
 	      return;
 	    }
 
-	    if (this._globalOptions.stacktrace || (options && options.stacktrace)) {
+	    // Always attempt to get stacktrace if message is empty.
+	    // It's the only way to provide any helpful information to the user.
+	    if (this._globalOptions.stacktrace || options.stacktrace || data.message === '') {
 	      // fingerprint on msg, not stack trace (legacy behavior, could be revisited)
 	      data.fingerprint = data.fingerprint == null ? msg : data.fingerprint;
 
@@ -3508,6 +3510,11 @@ typeof navigator === "object" && (function () {
 	      options
 	    );
 
+	    var ex = data.exception.values[0];
+	    if (ex.type == null && ex.value === '') {
+	      ex.value = 'Unrecoverable error caught';
+	    }
+
 	    // Move mechanism from options to exception interface
 	    // We do this, as requiring user to pass `{exception:{mechanism:{ ... }}}` would be
 	    // too much

dist/plyr.js

@@ -11,60 +11,92 @@ typeof navigator === "object" && (function (global, factory) {
     var getConstructor = function getConstructor(input) {
         return input !== null && typeof input !== 'undefined' ? input.constructor : null;
     };
-
     var instanceOf = function instanceOf(input, constructor) {
         return Boolean(input && constructor && input instanceof constructor);
     };
+    var isNullOrUndefined = function isNullOrUndefined(input) {
+        return input === null || typeof input === 'undefined';
+    };
+    var isObject = function isObject(input) {
+        return getConstructor(input) === Object;
+    };
+    var isNumber = function isNumber(input) {
+        return getConstructor(input) === Number && !Number.isNaN(input);
+    };
+    var isString = function isString(input) {
+        return getConstructor(input) === String;
+    };
+    var isBoolean = function isBoolean(input) {
+        return getConstructor(input) === Boolean;
+    };
+    var isFunction = function isFunction(input) {
+        return getConstructor(input) === Function;
+    };
+    var isArray = function isArray(input) {
+        return Array.isArray(input);
+    };
+    var isWeakMap = function isWeakMap(input) {
+        return instanceOf(input, WeakMap);
+    };
+    var isNodeList = function isNodeList(input) {
+        return instanceOf(input, NodeList);
+    };
+    var isElement = function isElement(input) {
+        return instanceOf(input, Element);
+    };
+    var isTextNode = function isTextNode(input) {
+        return getConstructor(input) === Text;
+    };
+    var isEvent = function isEvent(input) {
+        return instanceOf(input, Event);
+    };
+    var isCue = function isCue(input) {
+        return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+    };
+    var isTrack = function isTrack(input) {
+        return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind);
+    };
+
+    var isEmpty = function isEmpty(input) {
+        return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length;
+    };
+
+    var isUrl = function isUrl(input) {
+        // Accept a URL object
+        if (instanceOf(input, window.URL)) {
+            return true;
+        }
+
+        // Add the protocol if required
+        var string = input;
+        if (!input.startsWith('http://') || !input.startsWith('https://')) {
+            string = 'http://' + input;
+        }
+
+        try {
+            return !isEmpty(new URL(string).hostname);
+        } catch (e) {
+            return false;
+        }
+    };
 
     var is = {
-        object: function object(input) {
-            return getConstructor(input) === Object;
-        },
-        number: function number(input) {
-            return getConstructor(input) === Number && !Number.isNaN(input);
-        },
-        string: function string(input) {
-            return getConstructor(input) === String;
-        },
-        boolean: function boolean(input) {
-            return getConstructor(input) === Boolean;
-        },
-        function: function _function(input) {
-            return getConstructor(input) === Function;
-        },
-        array: function array(input) {
-            return !is.nullOrUndefined(input) && Array.isArray(input);
-        },
-        weakMap: function weakMap(input) {
-            return instanceOf(input, WeakMap);
-        },
-        nodeList: function nodeList(input) {
-            return instanceOf(input, NodeList);
-        },
-        element: function element(input) {
-            return instanceOf(input, Element);
-        },
-        textNode: function textNode(input) {
-            return getConstructor(input) === Text;
-        },
-        event: function event(input) {
-            return instanceOf(input, Event);
-        },
-        cue: function cue(input) {
-            return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-        },
-        track: function track(input) {
-            return instanceOf(input, TextTrack) || !is.nullOrUndefined(input) && is.string(input.kind);
-        },
-        url: function url(input) {
-            return !is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
-        },
-        nullOrUndefined: function nullOrUndefined(input) {
-            return input === null || typeof input === 'undefined';
-        },
-        empty: function empty(input) {
-            return is.nullOrUndefined(input) || (is.string(input) || is.array(input) || is.nodeList(input)) && !input.length || is.object(input) && !Object.keys(input).length;
-        }
+        nullOrUndefined: isNullOrUndefined,
+        object: isObject,
+        number: isNumber,
+        string: isString,
+        boolean: isBoolean,
+        function: isFunction,
+        array: isArray,
+        weakMap: isWeakMap,
+        nodeList: isNodeList,
+        element: isElement,
+        textNode: isTextNode,
+        event: isEvent,
+        cue: isCue,
+        track: isTrack,
+        url: isUrl,
+        empty: isEmpty
     };
 
     // ==========================================================================
@@ -4777,33 +4809,28 @@ typeof navigator === "object" && (function (global, factory) {
                     // Detect "natural" scroll - suppored on OS X Safari only
                     // Other browsers on OS X will be inverted until support improves
                     var inverted = event.webkitDirectionInvertedFromDevice;
-                    var step = 1 / 50;
-                    var direction = 0;
 
-                    // Scroll down (or up on natural) to decrease
-                    if (event.deltaY < 0 || event.deltaX > 0) {
-                        if (inverted) {
-                            _this4.player.decreaseVolume(step);
-                            direction = -1;
-                        } else {
-                            _this4.player.increaseVolume(step);
-                            direction = 1;
-                        }
-                    }
+                    // Get delta from event. Invert if `inverted` is true
 
-                    // Scroll up (or down on natural) to increase
-                    if (event.deltaY > 0 || event.deltaX < 0) {
-                        if (inverted) {
-                            _this4.player.increaseVolume(step);
-                            direction = 1;
-                        } else {
-                            _this4.player.decreaseVolume(step);
-                            direction = -1;
-                        }
-                    }
+                    var _map = [event.deltaX, -event.deltaY].map(function (value) {
+                        return inverted ? -value : value;
+                    }),
+                        _map2 = slicedToArray(_map, 2),
+                        x = _map2[0],
+                        y = _map2[1];
+
+                    // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+
+
+                    var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+                    // Change the volume by 2%
+                    _this4.player.increaseVolume(direction / 50);
 
                     // Don't break page scrolling at max and min
-                    if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
+                    var volume = _this4.player.media.volume;
+
+                    if (direction === 1 && volume < 1 || direction === -1 && volume > 0) {
                         event.preventDefault();
                     }
                 }, 'volume', false);
@@ -6742,7 +6769,7 @@ typeof navigator === "object" && (function (global, factory) {
         }, {
             key: 'enabled',
             get: function get$$1() {
-                return this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
+                return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
             }
         }, {
             key: 'tagUrl',
@@ -7299,7 +7326,7 @@ typeof navigator === "object" && (function (global, factory) {
              */
             value: function increaseVolume(step) {
                 var volume = this.media.muted ? 0 : this.volume;
-                this.volume = volume + (is.number(step) ? step : 1);
+                this.volume = volume + (is.number(step) ? step : 0);
             }
 
             /**
@@ -7310,8 +7337,7 @@ typeof navigator === "object" && (function (global, factory) {
         }, {
             key: 'decreaseVolume',
             value: function decreaseVolume(step) {
-                var volume = this.media.muted ? 0 : this.volume;
-                this.volume = volume - (is.number(step) ? step : 1);
+                this.increaseVolume(-step);
             }
 
             /**

dist/plyr.polyfilled.js

@@ -5397,60 +5397,92 @@ typeof navigator === "object" && (function (global, factory) {
 	var getConstructor = function getConstructor(input) {
 	    return input !== null && typeof input !== 'undefined' ? input.constructor : null;
 	};
-
 	var instanceOf = function instanceOf(input, constructor) {
 	    return Boolean(input && constructor && input instanceof constructor);
 	};
+	var isNullOrUndefined = function isNullOrUndefined(input) {
+	    return input === null || typeof input === 'undefined';
+	};
+	var isObject = function isObject(input) {
+	    return getConstructor(input) === Object;
+	};
+	var isNumber = function isNumber(input) {
+	    return getConstructor(input) === Number && !Number.isNaN(input);
+	};
+	var isString = function isString(input) {
+	    return getConstructor(input) === String;
+	};
+	var isBoolean = function isBoolean(input) {
+	    return getConstructor(input) === Boolean;
+	};
+	var isFunction = function isFunction(input) {
+	    return getConstructor(input) === Function;
+	};
+	var isArray = function isArray(input) {
+	    return Array.isArray(input);
+	};
+	var isWeakMap = function isWeakMap(input) {
+	    return instanceOf(input, WeakMap);
+	};
+	var isNodeList = function isNodeList(input) {
+	    return instanceOf(input, NodeList);
+	};
+	var isElement = function isElement(input) {
+	    return instanceOf(input, Element);
+	};
+	var isTextNode = function isTextNode(input) {
+	    return getConstructor(input) === Text;
+	};
+	var isEvent = function isEvent(input) {
+	    return instanceOf(input, Event);
+	};
+	var isCue = function isCue(input) {
+	    return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+	};
+	var isTrack = function isTrack(input) {
+	    return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind);
+	};
+
+	var isEmpty = function isEmpty(input) {
+	    return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length;
+	};
+
+	var isUrl = function isUrl(input) {
+	    // Accept a URL object
+	    if (instanceOf(input, window.URL)) {
+	        return true;
+	    }
+
+	    // Add the protocol if required
+	    var string = input;
+	    if (!input.startsWith('http://') || !input.startsWith('https://')) {
+	        string = 'http://' + input;
+	    }
+
+	    try {
+	        return !isEmpty(new URL(string).hostname);
+	    } catch (e) {
+	        return false;
+	    }
+	};
 
 	var is$1 = {
-	    object: function object(input) {
-	        return getConstructor(input) === Object;
-	    },
-	    number: function number(input) {
-	        return getConstructor(input) === Number && !Number.isNaN(input);
-	    },
-	    string: function string(input) {
-	        return getConstructor(input) === String;
-	    },
-	    boolean: function boolean(input) {
-	        return getConstructor(input) === Boolean;
-	    },
-	    function: function _function(input) {
-	        return getConstructor(input) === Function;
-	    },
-	    array: function array(input) {
-	        return !is$1.nullOrUndefined(input) && Array.isArray(input);
-	    },
-	    weakMap: function weakMap(input) {
-	        return instanceOf(input, WeakMap);
-	    },
-	    nodeList: function nodeList(input) {
-	        return instanceOf(input, NodeList);
-	    },
-	    element: function element(input) {
-	        return instanceOf(input, Element);
-	    },
-	    textNode: function textNode(input) {
-	        return getConstructor(input) === Text;
-	    },
-	    event: function event(input) {
-	        return instanceOf(input, Event);
-	    },
-	    cue: function cue(input) {
-	        return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-	    },
-	    track: function track(input) {
-	        return instanceOf(input, TextTrack) || !is$1.nullOrUndefined(input) && is$1.string(input.kind);
-	    },
-	    url: function url(input) {
-	        return !is$1.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
-	    },
-	    nullOrUndefined: function nullOrUndefined(input) {
-	        return input === null || typeof input === 'undefined';
-	    },
-	    empty: function empty(input) {
-	        return is$1.nullOrUndefined(input) || (is$1.string(input) || is$1.array(input) || is$1.nodeList(input)) && !input.length || is$1.object(input) && !Object.keys(input).length;
-	    }
+	    nullOrUndefined: isNullOrUndefined,
+	    object: isObject,
+	    number: isNumber,
+	    string: isString,
+	    boolean: isBoolean,
+	    function: isFunction,
+	    array: isArray,
+	    weakMap: isWeakMap,
+	    nodeList: isNodeList,
+	    element: isElement,
+	    textNode: isTextNode,
+	    event: isEvent,
+	    cue: isCue,
+	    track: isTrack,
+	    url: isUrl,
+	    empty: isEmpty
 	};
 
 	// ==========================================================================
@@ -10163,33 +10195,28 @@ typeof navigator === "object" && (function (global, factory) {
 	                // Detect "natural" scroll - suppored on OS X Safari only
 	                // Other browsers on OS X will be inverted until support improves
 	                var inverted = event.webkitDirectionInvertedFromDevice;
-	                var step = 1 / 50;
-	                var direction = 0;
 
-	                // Scroll down (or up on natural) to decrease
-	                if (event.deltaY < 0 || event.deltaX > 0) {
-	                    if (inverted) {
-	                        _this4.player.decreaseVolume(step);
-	                        direction = -1;
-	                    } else {
-	                        _this4.player.increaseVolume(step);
-	                        direction = 1;
-	                    }
-	                }
+	                // Get delta from event. Invert if `inverted` is true
 
-	                // Scroll up (or down on natural) to increase
-	                if (event.deltaY > 0 || event.deltaX < 0) {
-	                    if (inverted) {
-	                        _this4.player.increaseVolume(step);
-	                        direction = 1;
-	                    } else {
-	                        _this4.player.decreaseVolume(step);
-	                        direction = -1;
-	                    }
-	                }
+	                var _map = [event.deltaX, -event.deltaY].map(function (value) {
+	                    return inverted ? -value : value;
+	                }),
+	                    _map2 = slicedToArray(_map, 2),
+	                    x = _map2[0],
+	                    y = _map2[1];
+
+	                // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+
+
+	                var direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+	                // Change the volume by 2%
+	                _this4.player.increaseVolume(direction / 50);
 
 	                // Don't break page scrolling at max and min
-	                if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
+	                var volume = _this4.player.media.volume;
+
+	                if (direction === 1 && volume < 1 || direction === -1 && volume > 0) {
 	                    event.preventDefault();
 	                }
 	            }, 'volume', false);
@@ -12122,7 +12149,7 @@ typeof navigator === "object" && (function (global, factory) {
 	    }, {
 	        key: 'enabled',
 	        get: function get() {
-	            return this.player.isVideo && this.player.config.ads.enabled && !is$1.empty(this.publisherId);
+	            return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is$1.empty(this.publisherId);
 	        }
 	    }, {
 	        key: 'tagUrl',
@@ -12679,7 +12706,7 @@ typeof navigator === "object" && (function (global, factory) {
 	         */
 	        value: function increaseVolume(step) {
 	            var volume = this.media.muted ? 0 : this.volume;
-	            this.volume = volume + (is$1.number(step) ? step : 1);
+	            this.volume = volume + (is$1.number(step) ? step : 0);
 	        }
 
 	        /**
@@ -12690,8 +12717,7 @@ typeof navigator === "object" && (function (global, factory) {
 	    }, {
 	        key: 'decreaseVolume',
 	        value: function decreaseVolume(step) {
-	            var volume = this.media.muted ? 0 : this.volume;
-	            this.volume = volume - (is$1.number(step) ? step : 1);
+	            this.increaseVolume(-step);
 	        }
 
 	        /**

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.3.17",
+    "version": "3.3.20",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -45,7 +45,7 @@
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
         "stylelint": "^9.3.0",
-        "stylelint-config-prettier": "^3.2.0",
+        "stylelint-config-prettier": "^3.3.0",
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
@@ -74,7 +74,7 @@
         "babel-polyfill": "^6.26.0",
         "custom-event-polyfill": "^0.3.0",
         "loadjs": "^3.5.4",
-        "raven-js": "^3.26.2",
+        "raven-js": "^3.26.3",
         "url-polyfill": "^1.0.13"
     }
 }

readme.md

@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.3.17/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.3.20/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.3.17/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.3.20/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,13 +152,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.3.17/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.20/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.3.17/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.20/plyr.svg`.
 
 ## Ads
 
@@ -286,7 +286,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                           |
 | `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. |
 | `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If you're using the default controls are used then you can specify which settings to show in the menu                                                                                                                                                                                                                                                                  |
-| `i18n`               | Object                     | See [defaults.js](/src/js/defaults.js)                                                                                         | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                        |
+| `i18n`               | Object                     | See [defaults.js](/src/js/config/defaults.js)                                                                                         | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                        |
 | `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                  |
 | `iconUrl`            | String                     | `null`                                                                                                                         | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info.                                                                                                                                                                                                                                                                                    |
 | `iconPrefix`         | String                     | `plyr`                                                                                                                         | Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.                                                                                                                                 |

src/js/listeners.js

@@ -665,36 +665,20 @@ class Listeners {
                 // Detect "natural" scroll - suppored on OS X Safari only
                 // Other browsers on OS X will be inverted until support improves
                 const inverted = event.webkitDirectionInvertedFromDevice;
-                const step = 1 / 50;
-                let direction = 0;
 
-                // Scroll down (or up on natural) to decrease
-                if (event.deltaY < 0 || event.deltaX > 0) {
-                    if (inverted) {
-                        this.player.decreaseVolume(step);
-                        direction = -1;
-                    } else {
-                        this.player.increaseVolume(step);
-                        direction = 1;
-                    }
-                }
+                // Get delta from event. Invert if `inverted` is true
+                const [x, y] = [event.deltaX, -event.deltaY]
+                    .map(value => inverted ? -value : value);
 
-                // Scroll up (or down on natural) to increase
-                if (event.deltaY > 0 || event.deltaX < 0) {
-                    if (inverted) {
-                        this.player.increaseVolume(step);
-                        direction = 1;
-                    } else {
-                        this.player.decreaseVolume(step);
-                        direction = -1;
-                    }
-                }
+                // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+                const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+                // Change the volume by 2%
+                this.player.increaseVolume(direction / 50);
 
                 // Don't break page scrolling at max and min
-                if (
-                    (direction === 1 && this.player.media.volume < 1) ||
-                    (direction === -1 && this.player.media.volume > 0)
-                ) {
+                const { volume } = this.player.media;
+                if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {
                     event.preventDefault();
                 }
             },

src/js/plugins/ads.js

@@ -49,7 +49,9 @@ class Ads {
     }
 
     get enabled() {
-        return this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
+        return (
+            this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId)
+        );
     }
 
     /**

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.17
+// plyr.js v3.3.20
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -553,7 +553,7 @@ class Plyr {
      */
     increaseVolume(step) {
         const volume = this.media.muted ? 0 : this.volume;
-        this.volume = volume + (is.number(step) ? step : 1);
+        this.volume = volume + (is.number(step) ? step : 0);
     }
 
     /**
@@ -561,8 +561,7 @@ class Plyr {
      * @param {boolean} step - How much to decrease by (between 0 and 1)
      */
     decreaseVolume(step) {
-        const volume = this.media.muted ? 0 : this.volume;
-        this.volume = volume - (is.number(step) ? step : 1);
+        this.increaseVolume(-step);
     }
 
     /**

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.3.17
+// plyr.js v3.3.20
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/utils/is.js

@@ -3,65 +3,61 @@
 // ==========================================================================
 
 const getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null);
-
 const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor);
+const isNullOrUndefined = input => input === null || typeof input === 'undefined';
+const isObject = input => getConstructor(input) === Object;
+const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);
+const isString = input => getConstructor(input) === String;
+const isBoolean = input => getConstructor(input) === Boolean;
+const isFunction = input => getConstructor(input) === Function;
+const isArray = input => Array.isArray(input);
+const isWeakMap = input => instanceOf(input, WeakMap);
+const isNodeList = input => instanceOf(input, NodeList);
+const isElement = input => instanceOf(input, Element);
+const isTextNode = input => getConstructor(input) === Text;
+const isEvent = input => instanceOf(input, Event);
+const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
 
-const is = {
-    object(input) {
-        return getConstructor(input) === Object;
-    },
-    number(input) {
-        return getConstructor(input) === Number && !Number.isNaN(input);
-    },
-    string(input) {
-        return getConstructor(input) === String;
-    },
-    boolean(input) {
-        return getConstructor(input) === Boolean;
-    },
-    function(input) {
-        return getConstructor(input) === Function;
-    },
-    array(input) {
-        return !is.nullOrUndefined(input) && Array.isArray(input);
-    },
-    weakMap(input) {
-        return instanceOf(input, WeakMap);
-    },
-    nodeList(input) {
-        return instanceOf(input, NodeList);
-    },
-    element(input) {
-        return instanceOf(input, Element);
-    },
-    textNode(input) {
-        return getConstructor(input) === Text;
-    },
-    event(input) {
-        return instanceOf(input, Event);
-    },
-    cue(input) {
-        return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-    },
-    track(input) {
-        return instanceOf(input, TextTrack) || (!is.nullOrUndefined(input) && is.string(input.kind));
-    },
-    url(input) {
-        return (
-            !is.nullOrUndefined(input) &&
-            /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input)
-        );
-    },
-    nullOrUndefined(input) {
-        return input === null || typeof input === 'undefined';
-    },
-    empty(input) {
-        return (
-            is.nullOrUndefined(input) ||
-            ((is.string(input) || is.array(input) || is.nodeList(input)) && !input.length) ||
-            (is.object(input) && !Object.keys(input).length)
-        );
-    },
+const isEmpty = input =>
+    isNullOrUndefined(input) ||
+    ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
+    (isObject(input) && !Object.keys(input).length);
+
+const isUrl = input => {
+    // Accept a URL object
+    if (instanceOf(input, window.URL)) {
+        return true;
+    }
+
+    // Add the protocol if required
+    let string = input;
+    if (!input.startsWith('http://') || !input.startsWith('https://')) {
+        string = `http://${input}`;
+    }
+
+    try {
+        return !isEmpty(new URL(string).hostname);
+    } catch (e) {
+        return false;
+    }
 };
 
-export default is;
+export default {
+    nullOrUndefined: isNullOrUndefined,
+    object: isObject,
+    number: isNumber,
+    string: isString,
+    boolean: isBoolean,
+    function: isFunction,
+    array: isArray,
+    weakMap: isWeakMap,
+    nodeList: isNodeList,
+    element: isElement,
+    textNode: isTextNode,
+    event: isEvent,
+    cue: isCue,
+    track: isTrack,
+    url: isUrl,
+    empty: isEmpty,
+};

src/sass/components/embed.scss

@@ -27,11 +27,6 @@ $embed-padding: ((100 / 16) * 9);
     $height: 240;
     $offset: to-percentage(($height - $embed-padding) / ($height / 50));
 
-    // To allow mouse events to be captured if full support
-    iframe {
-        pointer-events: none;
-    }
-
     // Only used for Vimeo
     > .plyr__video-embed__container {
         padding-bottom: to-percentage($height);

src/sass/components/poster.scss

@@ -15,9 +15,9 @@
     transition: opacity 0.3s ease;
     width: 100%;
     z-index: 1;
-    pointer-events: none;
 }
 
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
     opacity: 1;
+    pointer-events: none;
 }

yarn.lock

@@ -5000,9 +5000,9 @@ randomatic@^1.1.3:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-raven-js@^3.26.2:
-  version "3.26.2"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.2.tgz#9153af2416e96ccf4e0b9cbc6c90c34dda0d7e88"
+raven-js@^3.26.3:
+  version "3.26.3"
+  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.3.tgz#0efb49969b5b11ab965f7b0d6da4ca102b763cb0"
 
 rc@^1.0.1, rc@^1.1.6:
   version "1.2.6"
@@ -5903,9 +5903,9 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-stylelint-config-prettier@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-3.2.0.tgz#af32b7845adeeddbf0a0bd642ace4ca1e68958e2"
+stylelint-config-prettier@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-3.3.0.tgz#cc22a4b5310c1919cee77131d6e220c60a62a480"
   dependencies:
     stylelint "^9.1.1"
 
@@ -5938,9 +5938,9 @@ stylelint-scss@^2.0.0:
     postcss-selector-parser "^3.1.1"
     postcss-value-parser "^3.3.0"
 
-stylelint-scss@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.1.2.tgz#3257c0600d197fe7642f3698944b47c91567f379"
+stylelint-scss@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.1.3.tgz#28f881ae298c3f5db667b10b6cf94a1a219001d6"
   dependencies:
     lodash "^4.17.10"
     postcss-media-query-parser "^0.2.3"