Linting improvements

.eslintrc

@@ -23,18 +23,23 @@
   },
 
   "rules": {
+    "arrow-parens": "error",
+    "arrow-spacing": "error",
     "block-scoped-var": "warn",
     "brace-style": ["warn", "1tbs"],
     "camelcase": "error",
     "comma-dangle": ["error", "never"],
     "comma-spacing": "error",
     "consistent-return": "warn",
+    "constructor-super": "error",
     "dot-notation": ["error", { "allowKeywords": false }],
     "eol-last": "error",
     "eqeqeq": ["error", "smart"],
     "guard-for-in": "error",
     "indent": ["error", 2, {"SwitchCase": 1}],
+    "jsx-quotes": ["error", "prefer-single"],
     "key-spacing": "warn",
+    "keyword-spacing": "error",
     "linebreak-style": "error",
     "max-depth": ["warn", 4],
     "max-params": ["warn", 5],
@@ -42,15 +47,17 @@
     "no-alert": "error",
     "no-caller": "error",
     "no-catch-shadow": "error",
+    "no-const-assign": "error",
     "no-debugger": "error",
     "no-delete-var": "error",
     "no-div-regex": "warn",
     "no-dupe-args": "error",
+    "no-dupe-class-members": "error",
     "no-dupe-keys": "error",
     "no-duplicate-case": "error",
+    "no-duplicate-imports": "error",
     "no-else-return": "warn",
     "no-empty-character-class": "error",
-    "no-labels": "error",
     "no-eval": "error",
     "no-ex-assign": "error",
     "no-extend-native": "warn",
@@ -63,6 +70,7 @@
     "no-inner-declarations": "error",
     "no-irregular-whitespace": "error",
     "no-label-var": "error",
+    "no-labels": "error",
     "no-lone-blocks": "error",
     "no-lonely-if": "error",
     "no-multi-spaces": "warn",
@@ -71,6 +79,7 @@
     "no-negated-in-lhs": "warn",
     "no-nested-ternary": "error",
     "no-new-object": "error",
+    "no-new-symbol": "error",
     "no-new-wrappers": "error",
     "no-obj-calls": "error",
     "no-octal": "error",
@@ -79,6 +88,7 @@
     "no-redeclare": "error",
     "no-shadow": "error",
     "no-spaced-func": "error",
+    "no-this-before-super": "error",
     "no-throw-literal": "error",
     "no-trailing-spaces": "error",
     "no-undef": "error",
@@ -89,19 +99,33 @@
     "no-unused-expressions": "error",
     "no-unused-vars": "error",
     "no-use-before-define": ["error", "nofunc"],
+    "no-useless-rename": "error",
+    "no-var": "warn",
     "no-with": "error",
     "object-curly-spacing": ["error", "never"],
+    "prefer-arrow-callback": "warn",
+    "prefer-const": "error",
+    "prefer-spread": "error",
+    "prefer-template": "warn",
     "quote-props": ["warn", "consistent-as-needed"],
     "quotes": ["error", "single", "avoid-escape"],
     "radix": "error",
-    "react/jsx-uses-react": "error",
+    "react/jsx-closing-bracket-location": ["error", "line-aligned"],
+    "react/jsx-curly-spacing": "error",
+    "react/jsx-equals-spacing": "error",
+    "react/jsx-first-prop-new-line": ["error", "multiline"],
+    "react/jsx-indent": ["error", 2],
     "react/jsx-no-bind": "error",
+    "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
+    "react/prefer-stateless-function": "error",
+    "react/require-render-return": "error",
+    "react/self-closing-comp": "error",
     "semi": "error",
-    "keyword-spacing": "error",
     "space-before-function-paren": ["error", {"anonymous": "never", "named": "never"}],
     "space-infix-ops": "error",
     "space-unary-ops": ["error", { "words": true, "nonwords": false }],
+    "template-curly-spacing": "error",
     "use-isnan": "error",
     "valid-typeof": "error",
     "wrap-iife": "error"

js/Actions.jsx

@@ -21,13 +21,13 @@ class Actions extends React.Component {
   }
   render() {
     return <div className='actions'>
-        <div id='previous'></div>
-        <div id='play' onClick={this.play}></div>
-        <div id='pause' onClick={this.pause}></div>
-        <div id='stop' onClick={this.stop}></div>
-        <div id='next'></div>
+      <div id='previous'></div>
+      <div id='play' onClick={this.play}></div>
+      <div id='pause' onClick={this.pause}></div>
+      <div id='stop' onClick={this.stop}></div>
+      <div id='next'></div>
     </div>;
   }
 }
 
-module.exports = connect(state => state.media)(Actions);
+module.exports = connect((state) => state.media)(Actions);

js/Balance.jsx

@@ -33,7 +33,7 @@ class Balance extends React.Component {
     const offset = (sprite - 1) * 15;
 
     const style = {
-      backgroundPosition: '0 -' + offset + 'px'
+      backgroundPosition: `0 -${offset}px`
     };
 
     return <input
@@ -51,4 +51,4 @@ class Balance extends React.Component {
   }
 }
 
-module.exports = connect(state => state.media)(Balance);
+module.exports = connect((state) => state.media)(Balance);

js/Character.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 module.exports = (props) => {
   const char = '' + props.children;
-  const className = 'character character-' + char.toLowerCase().charCodeAt(0);
+  const className = `character character-${char.toLowerCase().charCodeAt(0)}`;
   return <div {...props} className={className}>{props.children}</div>;
 };
 

js/ClutterBar.jsx

@@ -34,4 +34,4 @@ class ClutterBar extends React.Component {
   }
 }
 
-module.exports = connect(state => state.display)(ClutterBar);
+module.exports = connect((state) => state.display)(ClutterBar);

js/ContextMenu.jsx

@@ -72,4 +72,4 @@ class ContextMenu extends React.Component {
   }
 }
 
-module.exports = connect(state => state.contextMenu)(ContextMenu);
+module.exports = connect((state) => state.contextMenu)(ContextMenu);

js/DragTarget.jsx

@@ -20,7 +20,8 @@ class DragTarget extends React.Component {
     return <div
       onDragEnter={this.supress}
       onDragOver={this.supress}
-      onDrop={this.handleDrop}>
+      onDrop={this.handleDrop}
+    >
       {this.props.children}
     </div>;
   }

js/Kbps.jsx

@@ -4,12 +4,10 @@ import {connect} from 'react-redux';
 import CharacterString from './CharacterString.jsx';
 
 
-class Kbps extends React.Component {
-  render() {
-    return <CharacterString id='kbps'>
-      {this.props.kbps}
-    </CharacterString>;
-  }
-}
+const Kbps = (props) => {
+  return <CharacterString id='kbps'>
+    {props.kbps}
+  </CharacterString>;
+};
 
-module.exports = connect(state => state.media)(Kbps);
+module.exports = connect((state) => state.media)(Kbps);

js/Khz.jsx

@@ -4,12 +4,10 @@ import {connect} from 'react-redux';
 import CharacterString from './CharacterString.jsx';
 
 
-class Khz extends React.Component {
-  render() {
-    return <CharacterString id='khz'>
-      {this.props.khz}
-    </CharacterString>;
-  }
-}
+const Khz = (props) => {
+  return <CharacterString id='khz'>
+    {props.khz}
+  </CharacterString>;
+};
 
-module.exports = connect(state => state.media)(Khz);
+module.exports = connect((state) => state.media)(Khz);

js/MainWindow.jsx

@@ -81,9 +81,9 @@ const MainWindow = (props) => {
         <Shuffle />
         <Repeat />
       </div>
-      <a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
+      <a id='about' target='blank' href='https://github.com/captbaritone/winamp2-js'></a>
     </div>
   </DragTarget>;
 };
 
-module.exports = connect(state => state)(MainWindow);
+module.exports = connect((state) => state)(MainWindow);

js/Marquee.jsx

@@ -117,4 +117,4 @@ export {
   loopText,
   Marquee
 };
-export default connect(state => state)(Marquee);
+export default connect((state) => state)(Marquee);

js/MonoStereo.jsx

@@ -9,4 +9,4 @@ const MonoStereo = (props) => {
   </div>;
 };
 
-module.exports = connect(state => state.media)(MonoStereo);
+module.exports = connect((state) => state.media)(MonoStereo);

js/Position.jsx

@@ -52,4 +52,4 @@ class Position extends React.Component {
   }
 }
 
-module.exports = connect(state => state)(Position);
+module.exports = connect((state) => state)(Position);

js/Repeat.jsx

@@ -19,4 +19,4 @@ class Repeat extends React.Component {
   }
 }
 
-module.exports = connect(state => state.media)(Repeat);
+module.exports = connect((state) => state.media)(Repeat);

js/ShadeTime.jsx

@@ -29,4 +29,4 @@ class Time extends React.Component {
   }
 }
 
-module.exports = connect(state => state.media)(Time);
+module.exports = connect((state) => state.media)(Time);

js/Shuffle.jsx

@@ -19,4 +19,4 @@ class Shuffle extends React.Component {
   }
 }
 
-module.exports = connect(state => state.media)(Shuffle);
+module.exports = connect((state) => state.media)(Shuffle);

js/Time.jsx

@@ -19,12 +19,12 @@ class Time extends React.Component {
     const timeObj = getTimeObj(seconds);
     return <div id='time' onClick={this.toggleTimeMode} className='countdown'>
       {this.props.timeMode === 'REMAINING' && <div id='minus-sign'></div>}
-      <div id='minute-first-digit' className={'digit digit-' + timeObj.minutesFirstDigit}></div>
-      <div id='minute-second-digit' className={'digit digit-' + timeObj.minutesSecondDigit}></div>
-      <div id='second-first-digit' className={'digit digit-' + timeObj.secondsFirstDigit}></div>
-      <div id='second-second-digit' className={'digit digit-' + timeObj.secondsSecondDigit}></div>
+      <div id='minute-first-digit' className={`digit digit-${timeObj.minutesFirstDigit}`}></div>
+      <div id='minute-second-digit' className={`digit digit-${timeObj.minutesSecondDigit}`}></div>
+      <div id='second-first-digit' className={`digit digit-${timeObj.secondsFirstDigit}`}></div>
+      <div id='second-second-digit' className={`digit digit-${timeObj.secondsSecondDigit}`}></div>
     </div>;
   }
 }
 
-module.exports = connect(state => state.media)(Time);
+module.exports = connect((state) => state.media)(Time);

js/Visualizer.jsx

@@ -20,4 +20,4 @@ class Visualizer extends React.Component {
   }
 }
 
-module.exports = connect(state => state)(Visualizer);
+module.exports = connect((state) => state)(Visualizer);

js/Volume.jsx

@@ -32,7 +32,7 @@ class Volume extends React.Component {
     const offset = (sprite - 1) * 15;
 
     const style = {
-      backgroundPosition: '0 -' + offset + 'px'
+      backgroundPosition: `0 -${offset}px`
     };
 
     return <input
@@ -50,4 +50,4 @@ class Volume extends React.Component {
   }
 }
 
-module.exports = connect(state => state.media)(Volume);
+module.exports = connect((state) => state.media)(Volume);

js/browser.js

@@ -1,6 +1,6 @@
 module.exports = function(base) {
-  var supportsAudioApi = !!(base.AudioContext || base.webkitAudioContext);
-  var supportsCanvas = !!(base.document.createElement('canvas').getContext);
+  const supportsAudioApi = !!(base.AudioContext || base.webkitAudioContext);
+  const supportsCanvas = !!(base.document.createElement('canvas').getContext);
 
   this.isCompatible = supportsAudioApi && supportsCanvas;
 };

js/hotkeys.js

@@ -1,9 +1,9 @@
 import {play, pause, stop} from './actionCreators';
 
 module.exports = function(winamp, store) {
-  var keylog = [];
-  var trigger = [78, 85, 76, 27, 76, 27, 83, 79, 70, 84];
-  document.addEventListener('keydown', function(e){
+  let keylog = [];
+  const trigger = [78, 85, 76, 27, 76, 27, 83, 79, 70, 84];
+  document.addEventListener('keydown', (e) => {
     if (e.ctrlKey) { // Is CTRL depressed?
       switch (e.keyCode) {
         // CTRL+D

js/winamp.js

@@ -27,7 +27,7 @@ module.exports = {
     this.dispatch({type: 'SET_VOLUME', volume: options.volume});
     this.dispatch({type: 'SET_BALANCE', balance: options.balance});
     this.loadFromUrl(options.mediaFile.url, options.mediaFile.name);
-    var skinFile = new MyFile();
+    const skinFile = new MyFile();
     skinFile.setUrl(options.skinUrl);
     this.setSkin(skinFile);
 
@@ -36,39 +36,37 @@ module.exports = {
   },
 
   _registerListeners: function() {
-    var self = this;
-
     this.windowManager.registerWindow(this.mainWindow);
 
-    this.media.addEventListener('timeupdate', function() {
-      self.dispatch({type: 'UPDATE_TIME_ELAPSED', elapsed: self.media.timeElapsed()});
+    this.media.addEventListener('timeupdate', () => {
+      this.dispatch({type: 'UPDATE_TIME_ELAPSED', elapsed: this.media.timeElapsed()});
       // Legacy
-      window.dispatchEvent(self.events.timeUpdated);
+      window.dispatchEvent(this.events.timeUpdated);
     });
 
-    this.media.addEventListener('visualizerupdate', function(analyser) {
-      self.skin.visualizer.paintFrame(self.visualizerStyle, analyser);
+    this.media.addEventListener('visualizerupdate', (analyser) => {
+      this.skin.visualizer.paintFrame(this.visualizerStyle, analyser);
     });
 
-    this.media.addEventListener('ended', function() {
-      self.skin.visualizer.clear();
-      self.dispatch({type: 'MEDIA_IS_STOPPED'});
+    this.media.addEventListener('ended', () => {
+      this.skin.visualizer.clear();
+      this.dispatch({type: 'MEDIA_IS_STOPPED'});
     });
 
-    this.media.addEventListener('waiting', function() {
-      self.dispatch({type: 'START_WORKING'});
+    this.media.addEventListener('waiting', () => {
+      this.dispatch({type: 'START_WORKING'});
     });
 
-    this.media.addEventListener('stopWaiting', function() {
-      self.dispatch({type: 'STOP_WORKING'});
+    this.media.addEventListener('stopWaiting', () => {
+      this.dispatch({type: 'STOP_WORKING'});
     });
 
-    this.media.addEventListener('playing', function() {
-      self.dispatch({type: 'MEDIA_IS_PLAYING'});
+    this.media.addEventListener('playing', () => {
+      this.dispatch({type: 'MEDIA_IS_PLAYING'});
     });
 
-    this.fileInput.onchange = function(e){
-      self.loadFromFileReference(e.target.files[0]);
+    this.fileInput.onchange = (e) => {
+      this.loadFromFileReference(e.target.files[0]);
     };
   },
 
@@ -93,7 +91,7 @@ module.exports = {
 
   seekForwardBy: function(seconds) {
     this.media.seekToTime(this.media.timeElapsed() + seconds);
-    window.dispatchEvent(self.events.timeUpdated);
+    window.dispatchEvent(this.events.timeUpdated);
   },
 
   toggleRepeat: function() {
@@ -114,7 +112,7 @@ module.exports = {
   },
 
   loadFromFileReference: function(fileReference) {
-    var file = new MyFile();
+    const file = new MyFile();
     file.setFileReference(fileReference);
     if (new RegExp('(wsz|zip)$', 'i').test(fileReference.name)) {
       this.skin.setSkinByFile(file);
@@ -132,7 +130,7 @@ module.exports = {
     } else {
       this.fileName = fileName;
     }
-    var file = new MyFile();
+    const file = new MyFile();
     file.setUrl(url);
     file.processBuffer(this._loadBuffer.bind(this));
   },
@@ -156,8 +154,8 @@ module.exports = {
   /* Listeners */
   _loadBuffer: function(buffer) {
     function setMetaData() {
-      var kbps = '128';
-      var khz = Math.round(this.media.sampleRate() / 1000).toString();
+      const kbps = '128';
+      const khz = Math.round(this.media.sampleRate() / 1000).toString();
       this.dispatch({type: 'SET_MEDIA_KBPS', kbps: kbps});
       this.dispatch({type: 'SET_MEDIA_KHZ', khz: khz});
       this.dispatch({type: 'SET_CHANNELS_COUNT', channels: this.media.channels()});