diff --git a/.eslintignore b/.eslintignore
index 2eac19d7..e6165a19 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 *.min.js
 built/
 coverage/
+automated_screenshots/node_modules/
diff --git a/automated_screenshots/index.js b/automated_screenshots/index.js
index b7c67b4b..6dbbd739 100644
--- a/automated_screenshots/index.js
+++ b/automated_screenshots/index.js
@@ -10,7 +10,10 @@ const config = {
 };
 
 (async () => {
-  const files = await Filehound.create().ext("wsz").paths("skins/").find();
+  const files = await Filehound.create()
+    .ext("wsz")
+    .paths("skins/")
+    .find();
 
   const browser = await puppeteer.launch();
 
diff --git a/css/context-menu.css b/css/context-menu.css
index d7b1b2ae..4d153dea 100644
--- a/css/context-menu.css
+++ b/css/context-menu.css
@@ -19,22 +19,23 @@
   display: block;
 }
 
-#winamp2-js #context-menu, #winamp2-js #context-menu ul {
+#winamp2-js #context-menu,
+#winamp2-js #context-menu ul {
   display: none;
   z-index: 50; /* Gross */
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   position: absolute;
   list-style: none;
   padding: 0;
   margin: 0;
-  border: 1px solid #A7A394;
+  border: 1px solid #a7a394;
   cursor: default;
-  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 #winamp2-js #context-menu li {
   position: relative;
-  font-family: 'Tahoma';
+  font-family: "Tahoma";
   font-size: 11px;
   color: black;
   white-space: nowrap;
@@ -52,9 +53,10 @@
   cursor: default;
 }
 
-#winamp2-js #context-menu li:hover, #winamp2-js #context-menu li:hover a {
-  background-color: #224EB7;
-  color: #FFFFFF;
+#winamp2-js #context-menu li:hover,
+#winamp2-js #context-menu li:hover a {
+  background-color: #224eb7;
+  color: #ffffff;
 }
 
 #winamp2-js #context-menu li.hr {
@@ -62,13 +64,13 @@
 }
 
 #winamp2-js #context-menu li.hr:hover {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 }
 
 #winamp2-js #context-menu li.hr hr {
   border: none;
   height: 1px;
-  background-color: #A7A394;
+  background-color: #a7a394;
   margin: 0;
   padding: 0;
 }
diff --git a/css/equalizer-window.css b/css/equalizer-window.css
index 8d99e0cc..2893a712 100644
--- a/css/equalizer-window.css
+++ b/css/equalizer-window.css
@@ -15,29 +15,29 @@
   height: 6px;
   width: 97px;
   background-position: 0 0;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume::-webkit-slider-thumb {
   height: 7px;
   width: 2px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume::-moz-range-thumb {
   height: 7px;
   width: 2px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
   width: 5px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-volume.center::-moz-range-thumb {
   width: 5px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance {
@@ -47,29 +47,29 @@
   height: 6px;
   width: 43px;
   background-position: 0 0;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance::-webkit-slider-thumb {
   height: 7px;
   width: 2px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance::-moz-range-thumb {
   height: 7px;
   width: 2px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
   width: 5px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #equalizer-balance.center::-moz-range-thumb {
   width: 5px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js .equalizer-top {
@@ -84,7 +84,7 @@
   width: 9px;
   left: 264px;
   top: 3px;
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js #equalizer-shade {
@@ -93,7 +93,7 @@
   width: 9px;
   left: 254px;
   top: 3px;
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js #on {
@@ -227,7 +227,7 @@
   height: 51px;
   width: 14px;
   margin-top: 6px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js .band .rc-slider .rc-slider-handle {
@@ -235,5 +235,5 @@
   height: 11px;
   margin: -6px 0 0 1px;
   position: absolute;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
diff --git a/css/main-window.css b/css/main-window.css
index b149d385..8fc65815 100755
--- a/css/main-window.css
+++ b/css/main-window.css
@@ -3,7 +3,7 @@
   position: absolute;
   height: 116px;
   width: 275px;
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
   /* Ask the browser to scale showing large pixels if possible */
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
@@ -13,15 +13,15 @@
 }
 
 #winamp2-js #main-window.doubled #context-menu {
-  -moz-transform: scale(.5);
+  -moz-transform: scale(0.5);
   -moz-transform-origin: top left;
-  -webkit-transform: scale(.5);
+  -webkit-transform: scale(0.5);
   -webkit-transform-origin: top left;
 }
 
 #winamp2-js #main-window.loading {
   background-image: none;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border: 2px solid #dddddd;
 }
 
@@ -45,8 +45,8 @@
 }
 
 #winamp2-js #loading .ellipsis-anim span:nth-child(1) {
-  -webkit-animation-delay: 0.0s;
-  animation-delay: 0.0s;
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
 }
 
 #winamp2-js #loading .ellipsis-anim span:nth-child(2) {
@@ -93,7 +93,7 @@
   left: 0;
   height: 14px;
   width: 275px;
-  cursor: url('../cursors/TITLEBAR.PNG'), auto;
+  cursor: url("../cursors/TITLEBAR.PNG"), auto;
 }
 
 #winamp2-js #option,
@@ -104,7 +104,7 @@
   height: 9px;
   width: 9px;
   top: 3px;
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js #title-bar #option {
@@ -118,7 +118,7 @@
 }
 #winamp2-js #title-bar #close {
   left: 264px;
-  cursor: url('../cursors/CLOSE.PNG'), auto;
+  cursor: url("../cursors/CLOSE.PNG"), auto;
 }
 #winamp2-js #clutter-bar {
   position: absolute;
@@ -301,19 +301,19 @@
   height: 13px;
   width: 68px;
   background-position: 0 0;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 #winamp2-js #volume::-webkit-slider-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 #winamp2-js #volume::-moz-range-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #balance {
@@ -323,20 +323,20 @@
   height: 13px;
   width: 38px;
   background-position: 0 0;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #balance::-webkit-slider-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 #winamp2-js #balance::-moz-range-thumb {
   top: 1px;
   height: 11px;
   width: 14px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js .windows {
@@ -367,13 +367,13 @@
   top: 72px;
   width: 248px;
   height: 10px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 #winamp2-js #position::-webkit-slider-thumb {
   height: 10px;
   width: 29px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
   /*
      * Fix the strange bug in Safair/mobile-chrome
      * http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
@@ -385,7 +385,7 @@
 #winamp2-js #position::-moz-range-thumb {
   height: 10px;
   width: 29px;
-  cursor: url('../cursors/POSBAR.PNG'), auto;
+  cursor: url("../cursors/POSBAR.PNG"), auto;
 }
 
 /* For some reason, we can't use display: none here */
@@ -483,7 +483,7 @@
 }
 
 #winamp2-js #shade-time {
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js .shade .media-info,
@@ -495,7 +495,7 @@
   display: none;
 }
 #winamp2-js .shade #title-bar {
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
 }
 
 #winamp2-js .shade .actions div {
@@ -509,35 +509,40 @@
   top: 2px;
   left: 169px;
 }
-#winamp2-js .shade .actions #play, #winamp2-js .shade .actions #play:active {
+#winamp2-js .shade .actions #play,
+#winamp2-js .shade .actions #play:active {
   background: none;
   height: 10px;
   width: 10px;
   top: 2px;
   left: 176px;
 }
-#winamp2-js .shade .actions #pause, #winamp2-js .shade .actions #pause:active {
+#winamp2-js .shade .actions #pause,
+#winamp2-js .shade .actions #pause:active {
   background: none;
   height: 10px;
   width: 9px;
   top: 2px;
   left: 186px;
 }
-#winamp2-js .shade .actions #stop, #winamp2-js .shade .actions #stop:active {
+#winamp2-js .shade .actions #stop,
+#winamp2-js .shade .actions #stop:active {
   background: none;
   height: 10px;
   width: 9px;
   top: 2px;
   left: 195px;
 }
-#winamp2-js .shade .actions #next, #winamp2-js .shade .actions #next:active {
+#winamp2-js .shade .actions #next,
+#winamp2-js .shade .actions #next:active {
   background: none;
   height: 10px;
   width: 10px;
   top: 2px;
   left: 204px;
 }
-#winamp2-js .shade #eject, #winamp2-js .shade #eject:active {
+#winamp2-js .shade #eject,
+#winamp2-js .shade #eject:active {
   height: 10px;
   width: 10px;
   top: 2px;
diff --git a/css/page.css b/css/page.css
index b0ff93c8..8c282089 100644
--- a/css/page.css
+++ b/css/page.css
@@ -1,6 +1,6 @@
 /* Rules for the page layout */
 body {
-  background-color: #224EB7;
+  background-color: #224eb7;
   font-family: arial;
   font-size: 15px;
 }
diff --git a/css/winamp.css b/css/winamp.css
index b43bb751..96b02f04 100644
--- a/css/winamp.css
+++ b/css/winamp.css
@@ -1,32 +1,32 @@
 /* Rules used by all windows */
 
 /* Range input css reset */
-#winamp2-js input[type=range] {
+#winamp2-js input[type="range"] {
   -webkit-appearance: none;
   margin: 0;
   padding: 0;
   background: none;
   border: none;
 }
-#winamp2-js input[type=range]::-webkit-slider-thumb {
+#winamp2-js input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   border-radius: 0;
   background: none;
 }
-#winamp2-js input[type=range]::-moz-range-thumb {
+#winamp2-js input[type="range"]::-moz-range-thumb {
   border: none;
   border-radius: 0;
   background: none;
 }
-#winamp2-js input[type=range]::-moz-range-track {
+#winamp2-js input[type="range"]::-moz-range-track {
   border: none;
   background: none;
 }
-#winamp2-js input[type=range]:focus {
+#winamp2-js input[type="range"]:focus {
   outline: none;
 }
-#winamp2-js input[type=range]::-moz-focus-outer {
+#winamp2-js input[type="range"]::-moz-focus-outer {
   border: 0;
 }
 
@@ -37,24 +37,24 @@
 /* Animation */
 @keyframes blink {
   0% {
-    opacity: 1.0;
+    opacity: 1;
   }
   50% {
-    opacity: 0.0;
+    opacity: 0;
   }
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 @-webkit-keyframes blink {
   0% {
-    opacity: 1.0;
+    opacity: 1;
   }
   50% {
-    opacity: 0.0;
+    opacity: 0;
   }
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
@@ -69,7 +69,7 @@
 
 #winamp2-js .window {
   position: absolute;
-  cursor: url('../cursors/MAINMENU.PNG'), auto;
+  cursor: url("../cursors/MAINMENU.PNG"), auto;
   /* Ask the browser to scale showing large pixels if possible */
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
diff --git a/js/components/App.js b/js/components/App.js
index 8400c6a1..e3b582ab 100644
--- a/js/components/App.js
+++ b/js/components/App.js
@@ -8,23 +8,27 @@ import Skin from "./Skin";
 import { equalizerEnabled, playlistEnabled } from "../config";
 
 const App = ({ winamp, loading }) =>
-  loading
-    ? <div id="loading">
-        Loading<span className="ellipsis-anim">
-          <span>.</span><span>.</span><span>.</span>
-        </span>
-      </div>
-    : <div id="loaded">
-        <Skin>
-          {/* This is not technically kosher, since <style> tags should be in
+  loading ? (
+    <div id="loading">
+      Loading<span className="ellipsis-anim">
+        <span>.</span>
+        <span>.</span>
+        <span>.</span>
+      </span>
+    </div>
+  ) : (
+    <div id="loaded">
+      <Skin>
+        {/* This is not technically kosher, since <style> tags should be in
           the <head>, but browsers don't really care... */}
-        </Skin>
-        <WindowManager>
-          <MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
-          {equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
-          {playlistEnabled && <PlaylistWindow />}
-        </WindowManager>
-      </div>;
+      </Skin>
+      <WindowManager>
+        <MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
+        {equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
+        {playlistEnabled && <PlaylistWindow />}
+      </WindowManager>
+    </div>
+  );
 
 const mapStateToProps = state => ({ loading: state.display.loading });
 
diff --git a/js/components/Balance.js b/js/components/Balance.js
index ae0c76c3..0f8651c2 100644
--- a/js/components/Balance.js
+++ b/js/components/Balance.js
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { setBalance } from "../actionCreators";
 import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
 
-const Balance = props =>
+const Balance = props => (
   <input
     id={props.id}
     className={props.className}
@@ -17,7 +17,8 @@ const Balance = props =>
     onChange={props.handleChange}
     onMouseDown={props.showMarquee}
     onMouseUp={props.hideMarquee}
-  />;
+  />
+);
 
 const mapDispatchToProps = dispatch => ({
   handleChange: e => dispatch(setBalance(e.target.value)),
diff --git a/js/components/Character.js b/js/components/Character.js
index d5c48347..61c9aad1 100644
--- a/js/components/Character.js
+++ b/js/components/Character.js
@@ -2,12 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 
 export const characterClassName = char =>
-  `character-${char.toString().toLowerCase().charCodeAt(0)}`;
+  `character-${char
+    .toString()
+    .toLowerCase()
+    .charCodeAt(0)}`;
 
-const Character = ({ children: char, id }) =>
+const Character = ({ children: char, id }) => (
   <div id={id} className={`character ${characterClassName(char)}`}>
     {char}
-  </div>;
+  </div>
+);
 
 Character.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
diff --git a/js/components/CharacterString.js b/js/components/CharacterString.js
index 35e60629..fd5529ab 100644
--- a/js/components/CharacterString.js
+++ b/js/components/CharacterString.js
@@ -7,11 +7,9 @@ const CharacterString = props => {
   const chars = text.split("");
   return (
     <div {...props}>
-      {chars.map((character, index) =>
-        <Character key={index + character}>
-          {character}
-        </Character>
-      )};
+      {chars.map((character, index) => (
+        <Character key={index + character}>{character}</Character>
+      ))};
     </div>
   );
 };
diff --git a/js/components/ContextMenu.js b/js/components/ContextMenu.js
index 20f59a38..c5c6c020 100644
--- a/js/components/ContextMenu.js
+++ b/js/components/ContextMenu.js
@@ -4,36 +4,32 @@ import classnames from "classnames";
 
 import "../../css/context-menu.css";
 
-export const Hr = () =>
+export const Hr = () => (
   <li className="hr">
     <hr />
-  </li>;
+  </li>
+);
 
 // TODO: Add down-arrow
-export const Parent = ({ children, label }) =>
+export const Parent = ({ children, label }) => (
   <li className="parent">
-    <ul>
-      {children}
-    </ul>
+    <ul>{children}</ul>
     {label}
-  </li>;
+  </li>
+);
 
-export const LinkNode = props =>
+export const LinkNode = props => (
   <li>
-    <a {...props}>
-      {props.label}
-    </a>
-  </li>;
+    <a {...props}>{props.label}</a>
+  </li>
+);
 
 LinkNode.propTypes = {
   label: React.PropTypes.string.isRequired,
   href: React.PropTypes.string.isRequired
 };
 
-export const Node = props =>
-  <li {...props}>
-    {props.label}
-  </li>;
+export const Node = props => <li {...props}>{props.label}</li>;
 
 Node.propTypes = {
   label: React.PropTypes.string.isRequired
@@ -53,9 +49,7 @@ export class ContextMenu extends React.Component {
     const { selected, top, bottom, children } = this.props;
     return (
       <div className={classnames({ selected, top, bottom })}>
-        <ul id="context-menu">
-          {children}
-        </ul>
+        <ul id="context-menu">{children}</ul>
       </div>
     );
   }
diff --git a/js/components/EqualizerWindow/Band.js b/js/components/EqualizerWindow/Band.js
index 1fd275da..781e6169 100644
--- a/js/components/EqualizerWindow/Band.js
+++ b/js/components/EqualizerWindow/Band.js
@@ -18,7 +18,7 @@ export const spriteOffsets = number => {
 
 const Handle = () => <div className="rc-slider-handle" />;
 
-const Band = ({ value, backgroundPosition, id, onChange }) =>
+const Band = ({ value, backgroundPosition, id, onChange }) => (
   <div id={id} className="band" style={{ backgroundPosition }}>
     <Slider
       type="range"
@@ -30,7 +30,8 @@ const Band = ({ value, backgroundPosition, id, onChange }) =>
       onChange={onChange}
       handle={Handle}
     />
-  </div>;
+  </div>
+);
 
 const mapStateToProps = (state, ownProps) => {
   const value = state.equalizer.sliders[ownProps.band];
diff --git a/js/components/EqualizerWindow/PresetsContextMenu.js b/js/components/EqualizerWindow/PresetsContextMenu.js
index effbd5c0..94d1252e 100644
--- a/js/components/EqualizerWindow/PresetsContextMenu.js
+++ b/js/components/EqualizerWindow/PresetsContextMenu.js
@@ -4,11 +4,12 @@ import { CLOSE_PRESETS_CONTEXT_MENU } from "../../actionTypes";
 import { openFileDialog, downloadPreset } from "../../actionCreators";
 import { ContextMenu, Node } from "../ContextMenu";
 
-const MainContextMenu = props =>
+const MainContextMenu = props => (
   <ContextMenu closeMenu={props.closeMenu} selected={props.selected} top>
     <Node onClick={props.openFileDialog} label="Load" />
     <Node onClick={props.downloadPreset} label="Save" />
-  </ContextMenu>;
+  </ContextMenu>
+);
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   closeMenu: () => dispatch({ type: CLOSE_PRESETS_CONTEXT_MENU }),
diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js
index a61578b1..7db20033 100644
--- a/js/components/EqualizerWindow/index.js
+++ b/js/components/EqualizerWindow/index.js
@@ -53,46 +53,45 @@ const EqualizerWindow = props => {
       className={className}
       onClick={props.focusWindow}
     >
-      {props.shade
-        ? <div className="draggable">
+      {props.shade ? (
+        <div className="draggable">
+          <div id="equalizer-shade" onClick={props.toggleEqualizerShadeMode} />
+          <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
+          <Volume id="equalizer-volume" className={eqVolumeClassName} />
+          <Balance id="equalizer-balance" className={eqBalanceClassName} />
+        </div>
+      ) : (
+        <div>
+          <div className="equalizer-top title-bar draggable">
             <div
               id="equalizer-shade"
               onClick={props.toggleEqualizerShadeMode}
             />
             <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
-            <Volume id="equalizer-volume" className={eqVolumeClassName} />
-            <Balance id="equalizer-balance" className={eqBalanceClassName} />
           </div>
-        : <div>
-            <div className="equalizer-top title-bar draggable">
-              <div
-                id="equalizer-shade"
-                onClick={props.toggleEqualizerShadeMode}
-              />
-              <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
-            </div>
-            <EqOn />
-            <EqAuto />
-            <EqGraph />
-            <div id="presets" onClick={props.togglePresetsContextMenu}>
-              <PresetsContextMenu
-                selected={props.contextMenuSelected}
-                fileInput={props.fileInput}
-              />
-            </div>
-            <Band id="preamp" band="preamp" onChange={props.setPreampValue} />
-            <div id="plus12db" onClick={props.setEqToMax} />
-            <div id="zerodb" onClick={props.setEqToMid} />
-            <div id="minus12db" onClick={props.setEqToMin} />
-            {BANDS.map(hertz =>
-              <Band
-                key={hertz}
-                id={bandClassName(hertz)}
-                band={hertz}
-                onChange={props.setHertzValue(hertz)}
-              />
-            )}
-          </div>}
+          <EqOn />
+          <EqAuto />
+          <EqGraph />
+          <div id="presets" onClick={props.togglePresetsContextMenu}>
+            <PresetsContextMenu
+              selected={props.contextMenuSelected}
+              fileInput={props.fileInput}
+            />
+          </div>
+          <Band id="preamp" band="preamp" onChange={props.setPreampValue} />
+          <div id="plus12db" onClick={props.setEqToMax} />
+          <div id="zerodb" onClick={props.setEqToMid} />
+          <div id="minus12db" onClick={props.setEqToMin} />
+          {BANDS.map(hertz => (
+            <Band
+              key={hertz}
+              id={bandClassName(hertz)}
+              band={hertz}
+              onChange={props.setHertzValue(hertz)}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/js/components/MainWindow/ActionButtons.js b/js/components/MainWindow/ActionButtons.js
index 88017309..0f1ff6d4 100644
--- a/js/components/MainWindow/ActionButtons.js
+++ b/js/components/MainWindow/ActionButtons.js
@@ -2,14 +2,15 @@ import React from "react";
 import { connect } from "react-redux";
 import { play, pause, stop } from "../../actionCreators";
 
-const ActionButtons = props =>
+const ActionButtons = props => (
   <div className="actions">
     <div id="previous" />
     <div id="play" onClick={props.play} />
     <div id="pause" onClick={props.pause} />
     <div id="stop" onClick={props.stop} />
     <div id="next" />
-  </div>;
+  </div>
+);
 
 const mapStateToProps = state => state.media;
 
diff --git a/js/components/MainWindow/ClutterBar.js b/js/components/MainWindow/ClutterBar.js
index 2f1af25a..d559f430 100644
--- a/js/components/MainWindow/ClutterBar.js
+++ b/js/components/MainWindow/ClutterBar.js
@@ -8,7 +8,7 @@ import {
   UNSET_FOCUS
 } from "../../actionTypes";
 
-const ClutterBar = props =>
+const ClutterBar = props => (
   <div id="clutter-bar">
     <div id="button-o" />
     <div id="button-a" />
@@ -20,7 +20,8 @@ const ClutterBar = props =>
       onMouseDown={props.handleMouseDown}
     />
     <div id="button-v" />
-  </div>;
+  </div>
+);
 
 const mapStateToProps = state => ({
   doubled: state.display.doubled
diff --git a/js/components/MainWindow/EqToggleButton.js b/js/components/MainWindow/EqToggleButton.js
index 12ea1d2f..de46562e 100644
--- a/js/components/MainWindow/EqToggleButton.js
+++ b/js/components/MainWindow/EqToggleButton.js
@@ -4,12 +4,13 @@ import classnames from "classnames";
 
 import { TOGGLE_EQUALIZER_WINDOW } from "../../actionTypes";
 
-const EqToggleButton = props =>
+const EqToggleButton = props => (
   <div
     id="equalizer-button"
     className={classnames({ selected: props.equalizer })}
     onClick={props.handleClick}
-  />;
+  />
+);
 
 const mapStateToProps = state => ({
   equalizer: state.windows.equalizer
diff --git a/js/components/MainWindow/Kbps.js b/js/components/MainWindow/Kbps.js
index 0b531c00..f0e8d149 100644
--- a/js/components/MainWindow/Kbps.js
+++ b/js/components/MainWindow/Kbps.js
@@ -3,9 +3,6 @@ import { connect } from "react-redux";
 
 import CharacterString from "../CharacterString";
 
-const Kbps = props =>
-  <CharacterString id="kbps">
-    {props.kbps}
-  </CharacterString>;
+const Kbps = props => <CharacterString id="kbps">{props.kbps}</CharacterString>;
 
 export default connect(state => state.media)(Kbps);
diff --git a/js/components/MainWindow/Khz.js b/js/components/MainWindow/Khz.js
index b77b101c..735ac2af 100644
--- a/js/components/MainWindow/Khz.js
+++ b/js/components/MainWindow/Khz.js
@@ -3,9 +3,6 @@ import { connect } from "react-redux";
 
 import CharacterString from "../CharacterString";
 
-const Khz = props =>
-  <CharacterString id="khz">
-    {props.khz}
-  </CharacterString>;
+const Khz = props => <CharacterString id="khz">{props.khz}</CharacterString>;
 
 export default connect(state => state.media)(Khz);
diff --git a/js/components/MainWindow/MainBalance.js b/js/components/MainWindow/MainBalance.js
index 956809a1..9c67a951 100644
--- a/js/components/MainWindow/MainBalance.js
+++ b/js/components/MainWindow/MainBalance.js
@@ -10,11 +10,12 @@ const offsetFromBalance = balance => {
   return offset;
 };
 
-const MainBalance = props =>
+const MainBalance = props => (
   <Balance
     id="balance"
     style={{ backgroundPosition: `0 -${offsetFromBalance(props.balance)}px` }}
-  />;
+  />
+);
 
 const mapStateToProps = state => ({ balance: state.media.balance });
 
diff --git a/js/components/MainWindow/MainContextMenu.js b/js/components/MainWindow/MainContextMenu.js
index 74598184..e29fc705 100644
--- a/js/components/MainWindow/MainContextMenu.js
+++ b/js/components/MainWindow/MainContextMenu.js
@@ -17,7 +17,7 @@ const SKINS = [
   { file: "ZaxonRemake1-0.wsz", name: "Zaxon Remake" }
 ];
 
-const MainContextMenu = props =>
+const MainContextMenu = props => (
   <ContextMenu
     closeMenu={props.closeMenu}
     openMenu={props.openMenu}
@@ -34,17 +34,18 @@ const MainContextMenu = props =>
     <Parent label="Skins">
       <Node onClick={props.openFileDialog} label="Load Skin..." />
       <Hr />
-      {SKINS.map(skin =>
+      {SKINS.map(skin => (
         <Node
           key={skin.file}
           onClick={props.setSkin.bind(null, skin.file)}
           label={skin.name}
         />
-      )}
+      ))}
     </Parent>
     <Hr />
     <Node onClick={props.close} label="Exit" />
-  </ContextMenu>;
+  </ContextMenu>
+);
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   close: () => dispatch(close()),
diff --git a/js/components/MainWindow/MonoStereo.js b/js/components/MainWindow/MonoStereo.js
index 3dbb153b..7d9ca275 100644
--- a/js/components/MainWindow/MonoStereo.js
+++ b/js/components/MainWindow/MonoStereo.js
@@ -2,13 +2,14 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
-const MonoStereo = props =>
+const MonoStereo = props => (
   <div className="mono-stereo">
     <div
       id="stereo"
       className={classnames({ selected: props.channels === 2 })}
     />
     <div id="mono" className={classnames({ selected: props.channels === 1 })} />
-  </div>;
+  </div>
+);
 
 export default connect(state => state.media)(MonoStereo);
diff --git a/js/components/MainWindow/Position.js b/js/components/MainWindow/Position.js
index 89592069..37dcc836 100644
--- a/js/components/MainWindow/Position.js
+++ b/js/components/MainWindow/Position.js
@@ -43,9 +43,8 @@ const Position = ({
 const mapStateToProps = ({ media, userInput }) => {
   const position = media.length ? media.timeElapsed / media.length * 100 : 0;
 
-  const displayedPosition = userInput.focus === "position"
-    ? userInput.scrubPosition
-    : position;
+  const displayedPosition =
+    userInput.focus === "position" ? userInput.scrubPosition : position;
 
   return {
     displayedPosition,
diff --git a/js/components/MainWindow/Repeat.js b/js/components/MainWindow/Repeat.js
index 54983bb2..504e60c9 100644
--- a/js/components/MainWindow/Repeat.js
+++ b/js/components/MainWindow/Repeat.js
@@ -4,12 +4,13 @@ import classnames from "classnames";
 
 import { toggleRepeat } from "../../actionCreators";
 
-const Repeat = props =>
+const Repeat = props => (
   <div
     id="repeat"
     className={classnames({ selected: props.repeat })}
     onClick={props.handleClick}
-  />;
+  />
+);
 
 const mapStateToProps = state => ({
   repeat: state.media.repeat
diff --git a/js/components/MainWindow/ShadeTime.js b/js/components/MainWindow/ShadeTime.js
index 64d9ba71..343ac77b 100644
--- a/js/components/MainWindow/ShadeTime.js
+++ b/js/components/MainWindow/ShadeTime.js
@@ -14,9 +14,10 @@ class Time extends React.Component {
     this.props.dispatch({ type: TOGGLE_TIME_MODE });
   }
   render() {
-    const seconds = this.props.timeMode === "ELAPSED"
-      ? this.props.timeElapsed
-      : this.props.length - this.props.timeElapsed;
+    const seconds =
+      this.props.timeMode === "ELAPSED"
+        ? this.props.timeElapsed
+        : this.props.length - this.props.timeElapsed;
 
     const timeObj = getTimeObj(seconds);
     return (
diff --git a/js/components/MainWindow/Shuffle.js b/js/components/MainWindow/Shuffle.js
index 8a864fd0..dc5c412b 100644
--- a/js/components/MainWindow/Shuffle.js
+++ b/js/components/MainWindow/Shuffle.js
@@ -3,12 +3,13 @@ import { connect } from "react-redux";
 import classnames from "classnames";
 import { toggleShuffle } from "../../actionCreators";
 
-const Shuffle = ({ shuffle, handleClick }) =>
+const Shuffle = ({ shuffle, handleClick }) => (
   <div
     id="shuffle"
     className={classnames({ selected: shuffle })}
     onClick={handleClick}
-  />;
+  />
+);
 const mapStateToProps = state => ({
   shuffle: state.media.shuffle
 });
diff --git a/js/components/Skin.js b/js/components/Skin.js
index db8fa24c..2dc7d38a 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -239,11 +239,7 @@ const Skin = props => {
       "#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
     );
   }
-  return (
-    <style type="text/css">
-      {cssRules.join("\n")}
-    </style>
-  );
+  return <style type="text/css">{cssRules.join("\n")}</style>;
 };
 
 export default connect(state => ({ skinImages: state.display.skinImages }))(
diff --git a/js/components/Volume.js b/js/components/Volume.js
index 09c6bbc9..88c894d4 100644
--- a/js/components/Volume.js
+++ b/js/components/Volume.js
@@ -4,7 +4,7 @@ import { setVolume } from "../actionCreators";
 
 import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
 
-const Volume = props =>
+const Volume = props => (
   <input
     id={props.id}
     type="range"
@@ -17,7 +17,8 @@ const Volume = props =>
     onChange={props.setVolume}
     onMouseDown={props.showMarquee}
     onMouseUp={props.hideMarquee}
-  />;
+  />
+);
 
 const mapStateToProps = state => state.media;
 
diff --git a/js/components/WindowManager.js b/js/components/WindowManager.js
index cff5d869..af467f01 100644
--- a/js/components/WindowManager.js
+++ b/js/components/WindowManager.js
@@ -131,15 +131,16 @@ class WindowManager extends React.Component {
           const position = this.state[i];
           /* eslint-disable react/jsx-no-bind */
           return (
-            position &&
-            <div
-              onMouseDown={e => this.handleMouseDown(i, e)}
-              ref={this.getRef}
-              style={{ ...style, ...position }}
-              key={i}
-            >
-              {child}
-            </div>
+            position && (
+              <div
+                onMouseDown={e => this.handleMouseDown(i, e)}
+                ref={this.getRef}
+                style={{ ...style, ...position }}
+                key={i}
+              >
+                {child}
+              </div>
+            )
           );
           /* eslint-enable react/jsx-no-bind */
         })}
diff --git a/js/index.js b/js/index.js
index da6cd9c4..aae597d0 100644
--- a/js/index.js
+++ b/js/index.js
@@ -20,7 +20,9 @@ if (new Browser(window).isCompatible) {
   window.store = store;
 
   render(
-    <Provider store={store}><App winamp={winamp} /></Provider>,
+    <Provider store={store}>
+      <App winamp={winamp} />
+    </Provider>,
     document.getElementById("winamp2-js")
   );
 
diff --git a/js/media.js b/js/media.js
index a76c3291..82136b20 100644
--- a/js/media.js
+++ b/js/media.js
@@ -178,9 +178,8 @@ export default {
       this._source.connect(this._analyser);
       this._source.connect(this._preamp);
 
-      this._position = typeof position !== "undefined"
-        ? position
-        : this._position;
+      this._position =
+        typeof position !== "undefined" ? position : this._position;
       this._startTime = this._context.currentTime - this._position;
       this._source.start(0, this._position);
       this._playing = true;
diff --git a/package.json b/package.json
index 3959e302..5eebf933 100644
--- a/package.json
+++ b/package.json
@@ -13,18 +13,14 @@
     "tdd": "jest --watch",
     "deploy": "ssh jordaneldredge.com HASH=$HASH sh < deploy.sh",
     "revert": "ssh jordaneldredge.com sh < revert.sh",
-    "format": "prettier --write js/**/*.js css/**/*.css webpack.config.js webpack.production.config.js"
+    "format":
+      "prettier --write js/**/*.js css/**/*.css webpack.config.js webpack.production.config.js"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/captbaritone/winamp2-js.git"
   },
-  "keywords": [
-    "Winamp",
-    "HTML5",
-    "audio",
-    "web-auido-api"
-  ],
+  "keywords": ["Winamp", "HTML5", "audio", "web-auido-api"],
   "author": "Jordan Eldredge <jordan@jordaneldredge.com>",
   "license": "MIT",
   "bugs": {
@@ -41,13 +37,12 @@
     "canvas-mock": "0.0.0",
     "css-loader": "^0.28.4",
     "eslint": "3.19.0",
-    "eslint-config-prettier": "^1.5.0",
-    "eslint-plugin-prettier": "^2.1.1",
+    "eslint-config-prettier": "^2.3.0",
+    "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "6.10.3",
     "file-loader": "^0.11.0",
     "gzip-size-cli": "^2.0.0",
     "jest-cli": "^20.0.4",
-    "prettier": "^1.4.1",
     "react-test-renderer": "^15.4.2",
     "style-loader": "^0.16.1",
     "travis-weigh-in": "^1.0.2",
@@ -64,6 +59,7 @@
     "classnames": "^2.2.5",
     "eslint-plugin-import": "^2.7.0",
     "jszip": "^3.1.3",
+    "prettier": "^1.6.0",
     "prop-types": "^15.5.10",
     "rc-slider": "^8.1.5",
     "react": "^15.3.1",
diff --git a/yarn.lock b/yarn.lock
index 9cc98584..4b74c6ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1916,9 +1916,9 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-config-prettier@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-1.5.0.tgz#969b6d21b2eb2574a6810426507f755072db1963"
+eslint-config-prettier@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.3.0.tgz#b75b1eabea0c8b97b34403647ee25db349b9d8a0"
   dependencies:
     get-stdin "^5.0.1"
 
@@ -1951,9 +1951,9 @@ eslint-plugin-import@^2.7.0:
     minimatch "^3.0.3"
     read-pkg-up "^2.0.0"
 
-eslint-plugin-prettier@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.1.1.tgz#2fb7e2ab961f2b61d2c8cf91bc17716ca8c53868"
+eslint-plugin-prettier@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.2.0.tgz#f2837ad063903d73c621e7188fb3d41486434088"
   dependencies:
     fast-diff "^1.1.1"
     jest-docblock "^20.0.1"
@@ -4295,9 +4295,9 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.4.4.tgz#a8d1447b14c9bf67e6d420dcadd10fb9a4fad65a"
+prettier@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.6.0.tgz#23e9c68251f440feb847f558821bead21765919a"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"