Linting changes

.eslintrc

@@ -1,6 +1,7 @@
 {
     "parser": "babel-eslint",
     "extends": ["airbnb-base", "prettier"],
+    "plugins": ["simple-import-sort", "import"],
     "env": {
         "browser": true,
         "es6": true
@@ -27,7 +28,18 @@
         "comma-dangle": [2, "always-multiline"],
         "spaced-comment": [2, "always"],
         "no-restricted-globals": 2,
-        "no-param-reassign": [2, { "props": false }]
+        "no-param-reassign": [2, { "props": false }],
+        "padding-line-between-statements": [
+            "error",
+            {
+                "blankLine": "never",
+                "prev": ["singleline-const", "singleline-let", "singleline-var"],
+                "next": ["singleline-const", "singleline-let", "singleline-var"]
+            }
+        ],
+        "sort-imports": "off",
+        "import/order": "off",
+        "simple-import-sort/sort": "error"
     },
     "parserOptions": {
         "sourceType": "module"

package.json

@@ -31,28 +31,30 @@
     "scripts": {
         "build": "gulp build",
         "lint": "eslint src/js && npm run-script remark",
+        "lint:fix": "eslint --fix src/js",
         "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
         "deploy": "yarn lint && gulp deploy"
     },
     "devDependencies": {
         "ansi-colors": "^3.2.4",
-        "aws-sdk": "^2.437.0",
-        "@babel/core": "^7.4.3",
-        "@babel/preset-env": "^7.4.3",
+        "aws-sdk": "^2.445.0",
+        "@babel/core": "^7.4.4",
+        "@babel/preset-env": "^7.4.4",
         "babel-eslint": "^10.0.1",
-        "del": "^4.1.0",
+        "del": "^4.1.1",
         "eslint": "^5.16.0",
         "eslint-config-airbnb-base": "^13.1.0",
-        "eslint-config-prettier": "^4.1.0",
-        "eslint-plugin-import": "^2.16.0",
+        "eslint-config-prettier": "^4.2.0",
+        "eslint-plugin-import": "^2.17.2",
+        "eslint-plugin-simple-import-sort": "^3.1.0",
         "fancy-log": "^1.3.3",
         "fastly-purge": "^1.0.1",
         "git-branch": "^2.0.1",
-        "gulp": "^4.0.0",
-        "gulp-autoprefixer": "^6.0.0",
+        "gulp": "^4.0.1",
+        "gulp-autoprefixer": "^6.1.0",
         "gulp-awspublish": "^4.0.0",
         "gulp-better-rollup": "^4.0.1",
-        "gulp-clean-css": "^4.0.0",
+        "gulp-clean-css": "^4.2.0",
         "gulp-filter": "^5.1.0",
         "gulp-header": "^2.0.7",
         "gulp-imagemin": "^5.0.3",
@@ -71,16 +73,16 @@
         "prettier-stylelint": "^0.4.2",
         "remark-cli": "^6.0.1",
         "remark-validate-links": "^8.0.2",
-        "rollup": "^1.10.0",
+        "rollup": "^1.10.1",
         "rollup-plugin-babel": "^4.3.2",
         "rollup-plugin-commonjs": "^9.3.4",
         "rollup-plugin-node-resolve": "^4.2.3",
-        "stylelint": "^9.10.1",
-        "stylelint-config-prettier": "^5.0.0",
-        "stylelint-config-recommended": "^2.1.0",
-        "stylelint-config-sass-guidelines": "^5.4.0",
-        "stylelint-order": "^2.2.1",
-        "stylelint-scss": "^3.5.4",
+        "stylelint": "^10.0.1",
+        "stylelint-config-prettier": "^5.1.0",
+        "stylelint-config-recommended": "^2.2.0",
+        "stylelint-config-sass-guidelines": "^6.0.0",
+        "stylelint-order": "^3.0.0",
+        "stylelint-scss": "^3.6.0",
         "stylelint-selector-bem-pattern": "^2.1.0",
         "through2": "^3.0.1"
     },

readme.md

@@ -123,13 +123,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.5.4/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.5.3/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.5.4/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.5.3/plyr.polyfilled.js"></script>
 ```
 
 ## CSS
@@ -143,13 +143,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.5.4/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/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.5.4/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.3/plyr.svg`.
 
 # Ads
 
@@ -212,7 +212,7 @@ _Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element
 
 #### Single player
 
-Passing a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
+Passing a CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector):
 
 ```javascript
 const player = new Plyr('#player');
@@ -238,7 +238,7 @@ You have two choices here. You can either use a simple array loop to map the con
 const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
 ```
 
-...or use a static method where you can pass a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements, or a [JQuery](https://jquery.com) object:
+...or use a static method where you can pass a string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement), or a [JQuery](https://jquery.com) object:
 
 ```javascript
 const players = Plyr.setup('.js-player');

src/js/captions.js

@@ -85,7 +85,6 @@ const captions = {
 
         const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
         const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
-
         let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
 
         // Use first browser language when language is 'auto'
@@ -166,7 +165,6 @@ const captions = {
 
         const { toggled } = this.captions; // Current state
         const activeClass = this.config.classNames.captions.active;
-
         // Get the next state
         // If the method is called without parameter, toggle based on current value
         const active = is.nullOrUndefined(input) ? !toggled : input;

src/js/controls.js

@@ -4,6 +4,7 @@
 // ==========================================================================
 
 import RangeTouch from 'rangetouch';
+
 import captions from './captions';
 import html5 from './html5';
 import support from './support';
@@ -92,7 +93,6 @@ const controls = {
         const namespace = 'http://www.w3.org/2000/svg';
         const iconUrl = controls.getIconUrl.call(this);
         const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;
-
         // Create <svg>
         const icon = document.createElementNS(namespace, 'svg');
         setAttributes(

src/js/html5.js

@@ -60,7 +60,6 @@ const html5 = {
             set(input) {
                 // Get sources
                 const sources = html5.getSources.call(player);
-
                 // Get first match for requested size
                 const source = sources.find(source => Number(source.getAttribute('size')) === input);
 

src/js/listeners.js

@@ -285,7 +285,6 @@ class Listeners {
 
                 // Show, then hide after a timeout unless another control event occurs
                 const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
-
                 let delay = 0;
 
                 if (show) {
@@ -351,7 +350,6 @@ class Listeners {
             }
 
             const isEnter = event.type === 'enterfullscreen';
-
             // Set the player size when entering fullscreen to viewport size
             const { padding, ratio } = setPlayerSize(isEnter);
 
@@ -542,7 +540,6 @@ class Listeners {
     controls() {
         const { player } = this;
         const { elements } = player;
-
         // IE doesn't support input event, so we fallback to change
         const inputEvent = browser.isIE ? 'change' : 'input';
 
@@ -678,7 +675,6 @@ class Listeners {
 
             // Was playing before?
             const play = seek.hasAttribute(attribute);
-
             // Done seeking
             const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);
 
@@ -706,7 +702,6 @@ class Listeners {
             inputEvent,
             event => {
                 const seek = event.currentTarget;
-
                 // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
                 let seekTo = seek.getAttribute('seek-value');
 
@@ -837,10 +832,8 @@ 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;
-
                 // Get delta from event. Invert if `inverted` is true
                 const [x, y] = [event.deltaX, -event.deltaY].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

@@ -303,7 +303,6 @@ class Ads {
      */
     onAdEvent(event) {
         const { container } = this.player.elements;
-
         // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
         // don't have ad object associated
         const ad = event.getAd();

src/js/plugins/previewThumbnails.js

@@ -121,7 +121,6 @@ class PreviewThumbnails {
 
             // If string, convert into single-element list
             const urls = is.string(src) ? [src] : src;
-
             // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
             const promises = urls.map(u => this.getThumbnail(u));
 
@@ -467,7 +466,6 @@ class PreviewThumbnails {
 
                                 const { urlPrefix } = this.thumbnails[0];
                                 const thumbURL = urlPrefix + newThumbFilename;
-
                                 const previewImage = new Image();
                                 previewImage.src = thumbURL;
                                 previewImage.onload = () => {
@@ -601,11 +599,9 @@ class PreviewThumbnails {
         const seekbarRect = this.player.elements.progress.getBoundingClientRect();
         const plyrRect = this.player.elements.container.getBoundingClientRect();
         const { container } = this.elements.thumb;
-
         // Find the lowest and highest desired left-position, so we don't slide out the side of the video container
         const minVal = plyrRect.left - seekbarRect.left + 10;
         const maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10;
-
         // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
         let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
 

src/js/plugins/vimeo.js

@@ -91,7 +91,6 @@ const vimeo = {
         }
 
         const id = parseId(source);
-
         // Build an iframe
         const iframe = createElement('iframe');
         const src = format(player.config.urls.vimeo.iframe, id, params);
@@ -102,7 +101,6 @@ const vimeo = {
 
         // Get poster, if already set
         const { poster } = player;
-
         // Inject the package
         const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);

src/js/plugins/youtube.js

@@ -107,7 +107,6 @@ const youtube = {
     // API ready
     ready() {
         const player = this;
-
         // Ignore already setup (race condition)
         const currentId = player.media.getAttribute('id');
         if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
@@ -125,10 +124,8 @@ const youtube = {
         // Replace the <iframe> with a <div> due to YouTube API issues
         const videoId = parseId(source);
         const id = generateId(player.provider);
-
         // Get poster, if already set
         const { poster } = player;
-
         // Replace media element
         const container = createElement('div', { id, poster });
         player.media = replaceElement(container, player.media);

src/js/plyr.js

@@ -151,7 +151,6 @@ class Plyr {
         // Set media type based on tag or data attribute
         // Supported: video, audio, vimeo, youtube
         const type = this.media.tagName.toLowerCase();
-
         // Embed properties
         let iframe = null;
         let url = null;
@@ -514,7 +513,6 @@ class Plyr {
     get duration() {
         // Faux duration set via config
         const fauxDuration = parseFloat(this.config.duration);
-
         // Media duration can be NaN or Infinity before the media has loaded
         const realDuration = (this.media || {}).duration;
         const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
@@ -1045,10 +1043,8 @@ class Plyr {
         if (this.supported.ui && !this.isAudio) {
             // Get state before change
             const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls);
-
             // Negate the argument if not undefined since adding the class to hides the controls
             const force = typeof toggle === 'undefined' ? undefined : !toggle;
-
             // Apply and get updated state
             const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
 

src/js/plyr.polyfilled.js

@@ -7,6 +7,7 @@
 
 import 'custom-event-polyfill';
 import 'url-polyfill';
+
 import Plyr from './plyr';
 
 export default Plyr;

src/js/utils/elements.js

@@ -17,7 +17,6 @@ export function wrap(elements, wrapper) {
         .reverse()
         .forEach((element, index) => {
             const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
-
             // Cache the current parent and sibling.
             const parent = element.parentNode;
             const sibling = element.nextSibling;
@@ -145,12 +144,10 @@ export function getAttributesFromSelector(sel, existingAttributes) {
         const selector = s.trim();
         const className = selector.replace('.', '');
         const stripped = selector.replace(/[[\]]/g, '');
-
         // Get the parts and value
         const parts = stripped.split('=');
         const [key] = parts;
         const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
-
         // Get the first character
         const start = selector.charAt(0);
 

src/js/utils/events.js

@@ -35,7 +35,6 @@ export function toggleListener(element, event, callback, toggle = false, passive
 
     // Allow multiple events
     const events = event.split(' ');
-
     // Build options
     // Default to just the capture boolean for browsers with no passive listener support
     let options = capture;

src/js/utils/loadSprite.js

@@ -15,7 +15,6 @@ export default function loadSprite(url, id) {
     const prefix = 'cache';
     const hasId = is.string(id);
     let isCached = false;
-
     const exists = () => document.getElementById(id) !== null;
 
     const update = (container, data) => {
@@ -33,7 +32,6 @@ export default function loadSprite(url, id) {
     // Only load once if ID set
     if (!hasId || !exists()) {
         const useStorage = Storage.supported;
-
         // Create container
         const container = document.createElement('div');
         container.setAttribute('hidden', '');

src/js/utils/style.js

@@ -64,7 +64,6 @@ export function setAspectRatio(input) {
     }
 
     const ratio = getAspectRatio.call(this, input);
-
     const [w, h] = is.array(ratio) ? ratio : [0, 0];
     const padding = (100 / w) * h;
 

src/js/utils/time.js

@@ -18,7 +18,6 @@ export function formatTime(time = 0, displayHours = false, inverted = false) {
 
     // Format time component to add leading zero
     const format = value => `0${value}`.slice(-2);
-
     // Breakdown to hours, mins, secs
     let hours = getHours(time);
     const mins = getMinutes(time);