Don't use var (#185)

.eslintrc

@@ -100,7 +100,7 @@
     "no-unused-vars": "error",
     "no-use-before-define": ["error", "nofunc"],
     "no-useless-rename": "error",
-    "no-var": "warn",
+    "no-var": "error",
     "no-with": "error",
     "object-curly-spacing": ["error", "never"],
     "prefer-arrow-callback": "warn",

js/ContextMenu.jsx

@@ -46,7 +46,7 @@ class ContextMenu extends React.Component {
   }
 
   render() {
-    var classes = this.props.selected ? 'selected' : '';
+    const classes = this.props.selected ? 'selected' : '';
     return <div id='option' className={classes} onClick={this.toggleMenu}>
       <ul id='context-menu'>
         <li><a href='https://github.com/captbaritone/winamp2-js' target='_blank'>Winamp2-js...</a></li>

js/Visualizer.jsx

@@ -6,10 +6,10 @@ const BAR = 2;
 
 // Return the average value in a slice of dataArray
 function sliceAverage(dataArray, sliceWidth, sliceNumber) {
-  var start = sliceWidth * sliceNumber;
-  var end = start + sliceWidth;
-  var sum = 0;
-  for (var i = start; i < end; i++) {
+  const start = sliceWidth * sliceNumber;
+  const end = start + sliceWidth;
+  let sum = 0;
+  for (let i = start; i < end; i++) {
     sum += dataArray[i];
   }
   return sum / sliceWidth;
@@ -87,12 +87,12 @@ class Visualizer extends React.Component {
 
   // Pre-render the background grid
   preRenderBg() {
-    var bgCanvasCtx = this.bgCanvas.getContext('2d');
+    const bgCanvasCtx = this.bgCanvas.getContext('2d');
     bgCanvasCtx.fillStyle = this.props.colors[0];
     bgCanvasCtx.fillRect(0, 0, this.width, this.height);
     bgCanvasCtx.fillStyle = this.props.colors[1];
-    for (var x = 0; x < this.width; x += 4) {
-      for (var y = 2; y < this.height; y += 4) {
+    for (let x = 0; x < this.width; x += 4) {
+      for (let y = 2; y < this.height; y += 4) {
         bgCanvasCtx.fillRect(x, y, 2, 2);
       }
     }
@@ -100,13 +100,13 @@ class Visualizer extends React.Component {
 
   // Pre-render the bar gradient
   preRenderBar() {
-    var barCanvasCtx = this.barCanvas.getContext('2d');
+    const barCanvasCtx = this.barCanvas.getContext('2d');
     barCanvasCtx.fillStyle = this.props.colors[23];
     barCanvasCtx.fillRect(0, 0, 6, 2);
-    for (var i = 0; i <= 15; i++) {
-      var colorNumber = 17 - i;
+    for (let i = 0; i <= 15; i++) {
+      const colorNumber = 17 - i;
       barCanvasCtx.fillStyle = this.props.colors[colorNumber];
-      var y = 32 - (i * 2);
+      const y = 32 - (i * 2);
       barCanvasCtx.fillRect(0, y, 6, 2);
     }
   }
@@ -136,19 +136,19 @@ class Visualizer extends React.Component {
     //
     // We use the  2x scale here since we only want to plot values for
     // "real" pixels.
-    var sliceWidth = Math.floor(this.bufferLength / this.width) * 2;
+    const sliceWidth = Math.floor(this.bufferLength / this.width) * 2;
 
     // The max amplitude is half the height
-    var h = this.height / 2;
+    const h = this.height / 2;
 
     this.canvasCtx.beginPath();
 
     // Iterate over the width of the canvas in "real" pixels.
-    for (var j = 0; j <= this.width / 2; j++) {
-      var amplitude = sliceAverage(this.dataArray, sliceWidth, j);
-      var percentAmplitude = amplitude / 128; // dataArray gives us bytes
-      var y = percentAmplitude * h;
-      var x = j * 2;
+    for (let j = 0; j <= this.width / 2; j++) {
+      const amplitude = sliceAverage(this.dataArray, sliceWidth, j);
+      const percentAmplitude = amplitude / 128; // dataArray gives us bytes
+      const y = percentAmplitude * h;
+      const x = j * 2;
 
       // Canvas coordinates are in the middle of the pixel by default.
       // When we want to draw pixel perfect lines, we will need to
@@ -165,7 +165,7 @@ class Visualizer extends React.Component {
   _printBar(x, height) {
     height = Math.round(height) * 2;
     if (height > 0) {
-      var y = 32 - height;
+      const y = 32 - height;
       // Draw the gray peak line
       this.canvasCtx.drawImage(this.barCanvas, 0, 0, 6, 2, x, y - 2, 6, 2);
       // Draw the gradient
@@ -175,8 +175,8 @@ class Visualizer extends React.Component {
 
   _paintBarFrame() {
     this.props.analyser.getByteFrequencyData(this.dataArray);
-    for (var j = 0; j < this.bufferLength; j++) {
-      var height = this.dataArray[j] * (14 / 256);
+    for (let j = 0; j < this.bufferLength; j++) {
+      const height = this.dataArray[j] * (14 / 256);
       this._printBar(j * 8, height);
     }
   }

js/main.js

@@ -13,8 +13,8 @@ import Hotkeys from './hotkeys';
 import Skin from './Skin.jsx';
 
 if (new Browser(window).isCompatible) {
-  var winamp = Winamp;
-  let store = createStore(
+  const winamp = Winamp;
+  const store = createStore(
     createReducer(winamp),
     window.devToolsExtension && window.devToolsExtension(),
     applyMiddleware(thunk)

js/media.js

@@ -84,7 +84,7 @@ module.exports = {
     this.stop();
     this._callbacks.waiting();
 
-    var loadAudioBuffer = function(audioBuffer) {
+    const loadAudioBuffer = function(audioBuffer) {
       this._buffer = audioBuffer;
       loadedCallback();
       this._callbacks.stopWaiting();
@@ -93,7 +93,7 @@ module.exports = {
       }
     };
 
-    var error = function(errorMessage) {
+    const error = function(errorMessage) {
       console.error('failed to decode:', errorMessage);
     };
     // Decode the target file into an arrayBuffer and pass it to loadBuffer
@@ -168,7 +168,7 @@ module.exports = {
 
   /* Actions with arguments */
   seekToPercentComplete: function(percent) {
-    var seekTime = this.duration() * (percent / 100);
+    const seekTime = this.duration() * (percent / 100);
     this.seekToTime(seekTime);
   },
 
@@ -183,7 +183,7 @@ module.exports = {
 
   // From -100 to 100
   setBalance: function(balance) {
-    var changeVal = Math.abs(balance) / 100;
+    let changeVal = Math.abs(balance) / 100;
 
     // Hack for Firefox. Having either channel set to 0 seems to revert us
     // to equal balance.

js/my-file.js

@@ -12,12 +12,12 @@ module.exports = function() {
   };
   this.processBuffer = function(bufferHandler) {
     if (this.url) {
-      var oReq = new XMLHttpRequest();
+      const oReq = new XMLHttpRequest();
       oReq.open('GET', this.url, true);
       oReq.responseType = 'arraybuffer';
 
       oReq.onload = function() {
-        var arrayBuffer = oReq.response; // Note: not oReq.responseText
+        const arrayBuffer = oReq.response; // Note: not oReq.responseText
         bufferHandler(arrayBuffer);
       };
 
@@ -26,7 +26,7 @@ module.exports = function() {
 
     } else if (this.fileReference) {
       this.reader.onload = function(e) {
-        var arrayBuffer = e.target.result;
+        const arrayBuffer = e.target.result;
         bufferHandler(arrayBuffer);
       };
       this.reader.onerror = function(e) {

js/skin-sprites.js

@@ -1,5 +1,5 @@
 /* TODO: There are too many " " and "_" characters */
-var FONT_LOOKUP = {
+const FONT_LOOKUP = {
   'a': [0, 0], 'b': [0, 1], 'c': [0, 2], 'd': [0, 3], 'e': [0, 4], 'f': [0, 5],
   'g': [0, 6], 'h': [0, 7], 'i': [0, 8], 'j': [0, 9], 'k': [0, 10],
   'l': [0, 11], 'm': [0, 12], 'n': [0, 13], 'o': [0, 14], 'p': [0, 15],
@@ -16,13 +16,13 @@ var FONT_LOOKUP = {
   '>': [1, 23], '{': [1, 22], '}': [1, 23]
 };
 
-var CHAR_X = 5;
-var CHAR_Y = 6;
+const CHAR_X = 5;
+const CHAR_Y = 6;
 
-var characterSprites = [];
-for (var key in FONT_LOOKUP) {
+const characterSprites = [];
+for (const key in FONT_LOOKUP) {
   if (FONT_LOOKUP.hasOwnProperty(key)) {
-    var position = FONT_LOOKUP[key];
+    const position = FONT_LOOKUP[key];
     characterSprites.push({
       selectors: ['.character-' + key.charCodeAt(0)],
       y: position[0] * CHAR_Y,

js/utils.js

@@ -1,6 +1,6 @@
 const getTimeObj = (time) => {
-  var minutes = Math.floor(time / 60);
-  var seconds = time % 60;
+  const minutes = Math.floor(time / 60);
+  const seconds = time % 60;
 
   return {
     minutesFirstDigit: Math.floor(minutes / 10),