Linting, housekeeping, duration fix (fixes #1074)

.eslintrc.json

@@ -5,7 +5,10 @@
         "browser": true,
         "es6": true
     },
-    "globals": { "Plyr": false, "jQuery": false },
+    "globals": {
+        "Plyr": false,
+        "jQuery": false
+    },
     "rules": {
         "no-const-assign": 1,
         "no-shadow": 0,
@@ -22,17 +25,7 @@
         "one-var": [2, "never"],
         "comma-dangle": [2, "always-multiline"],
         "spaced-comment": [2, "always"],
-        "no-restricted-globals": [
+        "no-restricted-globals": 2,
-            "error",
-            {
-                "name": "event",
-                "message": "Use local parameter instead."
-            },
-            {
-                "name": "error",
-                "message": "Use local parameter instead."
-            }
-        ],
         "no-param-reassign": [2, { "props": false }]
     },
     "parserOptions": {

.gitignore

@@ -6,6 +6,5 @@ aws.json
 index-*.html
 npm-debug.log
 *.webm
-/package-lock.json
+package-lock.json
 .idea/
-

.npmignore

@@ -2,3 +2,10 @@ demo
 .github
 .vscode
 *.code-workspace
+aws.json
+bundles.json
+yarn.lock
+package-lock.json
+*.mp4
+*.webm
+!dist/blank.mp4

.prettierrc

@@ -1,7 +1,6 @@
 {
     "useTabs": false,
     "tabWidth": 4,
-    "printWidth": 120,
     "singleQuote": true,
     "trailingComma": "all"
 }

bower.json

@@ -1,33 +0,0 @@
-{
-    "name": "plyr",
-    "description": "A simple HTML5 media player using custom controls",
-    "homepage": "http://plyr.io",
-    "keywords": [
-        "Audio",
-        "Video",
-        "HTML5 Audio",
-        "HTML5 Video"
-    ],
-    "authors": [
-        "Sam Potts <sam@potts.es>"
-    ],
-    "dependencies": {},
-    "main": [
-        "dist/plyr.css",
-        "dist/plyr.js",
-        "dist/plyr.svg",
-        "src/less/plyr.less",
-        "src/scss/plyr.scss",
-        "src/js/plyr.js"
-    ],
-    "ignore": [
-        "node_modules",
-        "bower_components",
-        ".gitignore"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/sampotts/plyr.git"
-    },
-    "license": "MIT"
-}

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
@@ -4130,6 +4137,7 @@ typeof navigator === "object" && (function () {
 	                tooltips: {
 	                    controls: true
 	                },
+	                clickToPlay: false,
 	                /* controls: [
 	                    'play-large',
 	                    'restart',

demo/src/js/demo.js

@@ -57,6 +57,7 @@ import Raven from 'raven-js';
                 tooltips: {
                     controls: true,
                 },
+                clickToPlay: false,
                 /* controls: [
                     'play-large',
                     'restart',

dist/plyr.js

@@ -1483,7 +1483,7 @@ typeof navigator === "object" && (function (global, factory) {
             }
 
             if ('class' in attributes) {
-                if (attributes.class.includes(this.config.classNames.control)) {
+                if (!attributes.class.includes(this.config.classNames.control)) {
                     attributes.class += ' ' + this.config.classNames.control;
                 }
             } else {
@@ -3009,8 +3009,10 @@ typeof navigator === "object" && (function (global, factory) {
                     return;
                 }
 
-                // Toggle state
+                // Toggle button if it's enabled
+                if (this.elements.buttons.captions) {
                     this.elements.buttons.captions.pressed = active;
+                }
 
                 // Add class hook
                 toggleClass(this.elements.container, activeClass, active);
@@ -4605,9 +4607,11 @@ typeof navigator === "object" && (function (global, factory) {
                 };
 
                 // Play/pause toggle
+                if (this.player.elements.buttons.play) {
                     Array.from(this.player.elements.buttons.play).forEach(function (button) {
                         bind(button, 'click', _this4.player.togglePlay, 'play');
                     });
+                }
 
                 // Pause
                 bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
@@ -6777,7 +6781,7 @@ typeof navigator === "object" && (function (global, factory) {
                 var params = {
                     AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
                     AV_CHANNELID: '5a0458dc28a06145e4519d21',
-                    AV_URL: location.hostname,
+                    AV_URL: window.location.hostname,
                     cb: Date.now(),
                     AV_WIDTH: 640,
                     AV_HEIGHT: 480,
@@ -7421,6 +7425,7 @@ typeof navigator === "object" && (function (global, factory) {
             value: function on$$1(event, callback) {
                 on.call(this, this.elements.container, event, callback);
             }
+
             /**
              * Add event listeners once
              * @param {string} event - Event type
@@ -7432,6 +7437,7 @@ typeof navigator === "object" && (function (global, factory) {
             value: function once$$1(event, callback) {
                 once.call(this, this.elements.container, event, callback);
             }
+
             /**
              * Remove event listeners
              * @param {string} event - Event type
@@ -7707,8 +7713,9 @@ typeof navigator === "object" && (function (global, factory) {
                 // Faux duration set via config
                 var fauxDuration = parseFloat(this.config.duration);
 
-                // Media duration can be NaN before the media has loaded
+                // Media duration can be NaN or Infinity before the media has loaded
-                var duration = (this.media || {}).duration || 0;
+                var realDuration = (this.media || {}).duration;
+                var duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
 
                 // If config duration is funky, use regular duration
                 return fauxDuration || duration;

dist/plyr.polyfilled.js

@@ -6869,7 +6869,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        }
 
 	        if ('class' in attributes) {
-	            if (attributes.class.includes(this.config.classNames.control)) {
+	            if (!attributes.class.includes(this.config.classNames.control)) {
 	                attributes.class += ' ' + this.config.classNames.control;
 	            }
 	        } else {
@@ -8395,8 +8395,10 @@ typeof navigator === "object" && (function (global, factory) {
 	                return;
 	            }
 
-	            // Toggle state
+	            // Toggle button if it's enabled
+	            if (this.elements.buttons.captions) {
 	                this.elements.buttons.captions.pressed = active;
+	            }
 
 	            // Add class hook
 	            toggleClass(this.elements.container, activeClass, active);
@@ -9991,9 +9993,11 @@ typeof navigator === "object" && (function (global, factory) {
 	            };
 
 	            // Play/pause toggle
+	            if (this.player.elements.buttons.play) {
 	                Array.from(this.player.elements.buttons.play).forEach(function (button) {
 	                    bind(button, 'click', _this4.player.togglePlay, 'play');
 	                });
+	            }
 
 	            // Pause
 	            bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
@@ -12149,7 +12153,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',
@@ -12801,6 +12805,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        value: function on$$1(event, callback) {
 	            on.call(this, this.elements.container, event, callback);
 	        }
+
 	        /**
 	         * Add event listeners once
 	         * @param {string} event - Event type
@@ -12812,6 +12817,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        value: function once$$1(event, callback) {
 	            once.call(this, this.elements.container, event, callback);
 	        }
+
 	        /**
 	         * Remove event listeners
 	         * @param {string} event - Event type

src/js/console.js

@@ -17,10 +17,12 @@ export default class Console {
         // eslint-disable-next-line no-console
         return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;
     }
+
     get warn() {
         // eslint-disable-next-line no-console
         return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop;
     }
+
     get error() {
         // eslint-disable-next-line no-console
         return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;

src/js/controls.js

@@ -16,11 +16,11 @@ import {
     getElement,
     getElements,
     hasClass,
+    matches,
     removeElement,
     setAttributes,
     toggleClass,
     toggleHidden,
-    matches,
 } from './utils/elements';
 import { off, on } from './utils/events';
 import is from './utils/is';

src/js/listeners.js

@@ -669,8 +669,7 @@ class Listeners {
                 const inverted = event.webkitDirectionInvertedFromDevice;
 
                 // Get delta from event. Invert if `inverted` is true
-                const [x, y] = [event.deltaX, -event.deltaY]
+                const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
-                    .map(value => inverted ? -value : value);
 
                 // 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);

src/js/plugins/ads.js

@@ -7,12 +7,12 @@
 /* global google */
 
 import i18n from '../i18n';
-import { createElement } from './../utils/elements';
+import { createElement } from '../utils/elements';
-import { triggerEvent } from './../utils/events';
+import { triggerEvent } from '../utils/events';
-import is from './../utils/is';
+import is from '../utils/is';
-import loadScript from './../utils/loadScript';
+import loadScript from '../utils/loadScript';
-import { formatTime } from './../utils/time';
+import { formatTime } from '../utils/time';
-import { buildUrlParams } from './../utils/urls';
+import { buildUrlParams } from '../utils/urls';
 
 class Ads {
     /**
@@ -100,7 +100,7 @@ class Ads {
         const params = {
             AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
             AV_CHANNELID: '5a0458dc28a06145e4519d21',
-            AV_URL: location.hostname,
+            AV_URL: window.location.hostname,
             cb: Date.now(),
             AV_WIDTH: 640,
             AV_HEIGHT: 480,

src/js/plugins/vimeo.js

@@ -2,16 +2,16 @@
 // Vimeo plugin
 // ==========================================================================
 
-import captions from './../captions';
+import captions from '../captions';
-import controls from './../controls';
+import controls from '../controls';
-import ui from './../ui';
+import ui from '../ui';
-import { createElement, replaceElement, toggleClass } from './../utils/elements';
+import { createElement, replaceElement, toggleClass } from '../utils/elements';
-import { triggerEvent } from './../utils/events';
+import { triggerEvent } from '../utils/events';
-import fetch from './../utils/fetch';
+import fetch from '../utils/fetch';
-import is from './../utils/is';
+import is from '../utils/is';
-import loadScript from './../utils/loadScript';
+import loadScript from '../utils/loadScript';
-import { format, stripHTML } from './../utils/strings';
+import { format, stripHTML } from '../utils/strings';
-import { buildUrlParams } from './../utils/urls';
+import { buildUrlParams } from '../utils/urls';
 
 // Parse Vimeo ID from URL
 function parseId(url) {

src/js/plugins/youtube.js

@@ -2,16 +2,16 @@
 // YouTube plugin
 // ==========================================================================
 
-import controls from './../controls';
+import controls from '../controls';
-import ui from './../ui';
+import ui from '../ui';
-import { dedupe } from './../utils/arrays';
+import { dedupe } from '../utils/arrays';
-import { createElement, replaceElement, toggleClass } from './../utils/elements';
+import { createElement, replaceElement, toggleClass } from '../utils/elements';
-import { triggerEvent } from './../utils/events';
+import { triggerEvent } from '../utils/events';
-import fetch from './../utils/fetch';
+import fetch from '../utils/fetch';
-import is from './../utils/is';
+import is from '../utils/is';
-import loadImage from './../utils/loadImage';
+import loadImage from '../utils/loadImage';
-import loadScript from './../utils/loadScript';
+import loadScript from '../utils/loadScript';
-import { format, generateId } from './../utils/strings';
+import { format, generateId } from '../utils/strings';
 
 // Parse YouTube ID from URL
 function parseId(url) {

src/js/plyr.js

@@ -310,18 +310,23 @@ class Plyr {
     get isHTML5() {
         return Boolean(this.provider === providers.html5);
     }
+
     get isEmbed() {
         return Boolean(this.isYouTube || this.isVimeo);
     }
+
     get isYouTube() {
         return Boolean(this.provider === providers.youtube);
     }
+
     get isVimeo() {
         return Boolean(this.provider === providers.vimeo);
     }
+
     get isVideo() {
         return Boolean(this.type === types.video);
     }
+
     get isAudio() {
         return Boolean(this.type === types.audio);
     }
@@ -489,8 +494,9 @@ class Plyr {
         // Faux duration set via config
         const fauxDuration = parseFloat(this.config.duration);
 
-        // Media duration can be NaN before the media has loaded
+        // Media duration can be NaN or Infinity before the media has loaded
-        const duration = (this.media || {}).duration || 0;
+        const realDuration = (this.media || {}).duration;
+        const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
 
         // If config duration is funky, use regular duration
         return fauxDuration || duration;
@@ -944,6 +950,7 @@ class Plyr {
     on(event, callback) {
         on.call(this, this.elements.container, event, callback);
     }
+
     /**
      * Add event listeners once
      * @param {string} event - Event type
@@ -952,6 +959,7 @@ class Plyr {
     once(event, callback) {
         once.call(this, this.elements.container, event, callback);
     }
+
     /**
      * Remove event listeners
      * @param {string} event - Event type

src/js/utils/loadSprite.js

@@ -2,7 +2,7 @@
 // Sprite loader
 // ==========================================================================
 
-import Storage from './../storage';
+import Storage from '../storage';
 import fetch from './fetch';
 import is from './is';