From 060aafef656a1782d6b815bb52749815e5557cf0 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 9 Jul 2016 14:19:50 -0700
Subject: [PATCH 01/21] Introduce Redux

---
 js/ContextMenu.jsx | 24 ++++++++----------------
 js/main.js         | 15 +++++++++++++--
 js/reducers.js     | 39 +++++++++++++++++++++++++++++++++++++++
 package.json       |  4 +++-
 4 files changed, 63 insertions(+), 19 deletions(-)
 create mode 100644 js/reducers.js

diff --git a/js/ContextMenu.jsx b/js/ContextMenu.jsx
index 5589e055..74e9cac8 100644
--- a/js/ContextMenu.jsx
+++ b/js/ContextMenu.jsx
@@ -1,15 +1,11 @@
 import React from 'react';
-import MyFile from './my-file';
+import {connect} from 'react-redux';
 
 import '../css/context-menu.css';
 
 class ContextMenu extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      selected: false
-    };
-
     this.openFileDialog = this.openFileDialog.bind(this);
     this.close = this.close.bind(this);
     this.toggleMenu = this.toggleMenu.bind(this);
@@ -27,34 +23,30 @@ class ContextMenu extends React.Component {
   }
 
   openFileDialog() {
-    this.props.winamp.openFileDialog();
+    this.props.dispatch({type: 'OPEN_FILE_DIALOG'});
   }
 
   close() {
-    // Close all of Winamp
-    this.props.winamp.close();
+    this.props.dispatch({type: 'CLOSE_WINAMP'});
   }
 
   closeMenu() {
-    this.setState({selected: false});
+    this.props.dispatch({type: 'CLOSE_CONTEXT_MENU'});
   }
 
   toggleMenu(event) {
-    this.setState({selected: !this.state.selected});
+    this.props.dispatch({type: 'TOGGLE_CONTEXT_MENU'});
     event.stopPropagation();
   }
 
   setSkin(e) {
     const filename = e.target.dataset.filename;
     const url = 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/' + filename;
-    const skinFile = new MyFile();
-    skinFile.setUrl(url);
-    this.props.winamp.setSkin(skinFile);
+    this.props.dispatch({type: 'SET_SKIN_FROM_URL', url: url});
   }
 
-
   render() {
-    var classes = this.state.selected ? 'selected' : '';
+    var 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>
@@ -80,4 +72,4 @@ class ContextMenu extends React.Component {
   }
 }
 
-module.exports = ContextMenu;
+module.exports = connect(state => state.contextMenu)(ContextMenu);
diff --git a/js/main.js b/js/main.js
index 6b69c92b..1958b412 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
+import {Provider} from 'react-redux';
+import {createStore} from 'redux';
+
+import createReducer from './reducers';
 
 import Browser from './browser';
 import mainWindowDom from './main-window-dom';
@@ -25,8 +29,15 @@ if (new Browser(window).isCompatible) {
     skinUrl: 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'
   });
 
+  let store = createStore(createReducer(winamp));
+
   new Hotkeys(winamp);
-  ReactDOM.render(<ContextMenu winamp={winamp} />, document.getElementById('context-menu-holder'));
+  render(
+    <Provider store={store}>
+      <ContextMenu winamp={winamp} />
+    </Provider>,
+    document.getElementById('context-menu-holder')
+  );
 } else {
   document.getElementById('winamp').style.display = 'none';
   document.getElementById('browser-compatibility').style.display = 'block';
diff --git a/js/reducers.js b/js/reducers.js
new file mode 100644
index 00000000..63540c31
--- /dev/null
+++ b/js/reducers.js
@@ -0,0 +1,39 @@
+import MyFile from './my-file';
+
+const createReducer = (winamp) => {
+
+  const reducers = (state, action) => {
+    if (!state) {
+      return {
+        contextMenu: {
+          selected: false
+        }
+      };
+    }
+    switch (action.type) {
+      case 'TOGGLE_CONTEXT_MENU':
+        return Object.assign({}, state, {contextMenu: {selected: !state.contextMenu.selected}});
+      case 'CLOSE_CONTEXT_MENU':
+        return Object.assign({}, state, {contextMenu: {selected: false}});
+      case 'CLOSE_WINAMP':
+        winamp.close();
+        return state;
+      case 'OPEN_FILE_DIALOG':
+        // TODO: Figure out how to make this pure
+        winamp.openFileDialog();
+        return state;
+      case 'SET_SKIN_FROM_URL':
+        // TODO: Figure out how to make this pure
+        const skinFile = new MyFile();
+        skinFile.setUrl(action.url);
+        winamp.setSkin(skinFile);
+        return state;
+      default:
+        return state;
+    }
+  };
+
+  return reducers;
+};
+
+export default createReducer;
diff --git a/package.json b/package.json
index 9c781c84..f1755e4a 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "jszip": "^2.6.0",
     "react": "^15.2.0",
-    "react-dom": "^15.2.0"
+    "react-dom": "^15.2.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2"
   }
 }

From 20b5ec28c76ec62e3adcf9b4ac24984f6103aded Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 9 Jul 2016 23:21:38 -0700
Subject: [PATCH 02/21] Migrate Marquee to react/redux

Also begin splitting up the reducers
---
 js/Marquee.jsx      | 45 ++++++++++++++++++++++
 js/main-window.js   | 46 ++++++++++-------------
 js/main.js          | 26 +++++++++----
 js/multi-display.js | 64 -------------------------------
 js/reducers.js      | 92 ++++++++++++++++++++++++++++++++++++++-------
 5 files changed, 160 insertions(+), 113 deletions(-)
 create mode 100644 js/Marquee.jsx
 delete mode 100644 js/multi-display.js

diff --git a/js/Marquee.jsx b/js/Marquee.jsx
new file mode 100644
index 00000000..57c5ea2a
--- /dev/null
+++ b/js/Marquee.jsx
@@ -0,0 +1,45 @@
+// Single line text display that can animate and hold multiple registers
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Marquee extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  componentDidMount() {
+    const step = () => {
+      setTimeout(() => {
+        this.props.dispatch({type: 'STEP_MARQUEE'});
+        step();
+      }, 220);
+    };
+    step();
+  }
+  selectedRegister() {
+    const selected = this.props.registers.filter(register => {
+      return register.id === this.props.selectedRegister;
+    });
+    return selected ? selected[0] : selected;
+  }
+
+  render() {
+    const register = this.selectedRegister();
+    let chars = register.text.split('');
+    if (chars.length > 30 && register.step > 0) {
+      const start = chars.slice(register.step);
+      const end = chars.slice(0, register.step);
+      // TODO: Use the spread operator
+      chars = start.concat(end).slice(0, 30);
+    }
+    return <div>
+    {chars.map(character => {
+      // TODO: Standarize how we get a characer class name
+      const className = 'character character-' + character.toLowerCase().charCodeAt(0);
+      return <div className={className}>{character}</div>;
+    })}
+    </div>;
+  }
+}
+
+module.exports = connect(state => state.marquee)(Marquee);
diff --git a/js/main-window.js b/js/main-window.js
index a1f25eb1..7d8b1581 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -1,4 +1,5 @@
-import MultiDisplay from './multi-display';
+import React from 'react';
+import Marquee from './Marquee.jsx';
 
 module.exports = {
   init: function(winamp) {
@@ -38,16 +39,7 @@ module.exports = {
     this.handle = document.getElementById('title-bar');
     this.body = this.nodes.window;
 
-    this.textDisplay = new MultiDisplay(this.nodes.songTitle);
-    this.textDisplay.addRegister('songTitle');
-    this.textDisplay.addRegister('position');
-    this.textDisplay.addRegister('volume');
-    this.textDisplay.addRegister('balance');
-    this.textDisplay.addRegister('message'); // General purpose
-
-    this.textDisplay.showRegister('songTitle');
-
-    this.textDisplay.startRegisterMarquee('songTitle');
+    this.winamp.renderTo(<Marquee />, this.nodes.songTitle);
 
     this._registerListeners();
     return this;
@@ -66,15 +58,15 @@ module.exports = {
 
     this.nodes.buttonD.onmousedown = function() {
       if (self.nodes.window.classList.contains('doubled')) {
-        self.textDisplay.setRegisterText('message', 'Disable doublesize mode');
+        self.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'message', text: 'Disable doublesize mode'});
       } else {
-        self.textDisplay.setRegisterText('message', 'Enable doublesize mode');
+        self.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'message', text: 'Enable doublesize mode'});
       }
-      self.textDisplay.showRegister('message');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'message'});
     };
 
     this.nodes.buttonD.onmouseup = function() {
-      self.textDisplay.showRegister('songTitle');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'songTitle'});
     };
 
     this.nodes.buttonD.onclick = function() {
@@ -86,24 +78,24 @@ module.exports = {
     };
 
     this.nodes.songTitle.onmousedown = function() {
-      self.textDisplay.pauseRegisterMarquee('songTitle');
+      //self.textDisplay.pauseRegisterMarquee('songTitle');
     };
 
     this.nodes.songTitle.onmouseup = function() {
       setTimeout(function() {
-        self.textDisplay.startRegisterMarquee('songTitle');
+        //self.textDisplay.startRegisterMarquee('songTitle');
       }, 1000);
     };
 
     this.nodes.position.onmousedown = function() {
       if (!self.nodes.window.classList.contains('stop')){
-        self.textDisplay.showRegister('position');
+        self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'position'});
         self.nodes.window.classList.add('setting-position');
       }
     };
 
     this.nodes.position.onmouseup = function() {
-      self.textDisplay.showRegister('songTitle');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'songTitle'});
       self.nodes.window.classList.remove('setting-position');
     };
 
@@ -113,7 +105,7 @@ module.exports = {
       var newElapsed = self._timeString(self.winamp.getDuration() * newFractionComplete);
       var duration = self._timeString(self.winamp.getDuration());
       var message = 'Seek to: ' + newElapsed + '/' + duration + ' (' + newPercentComplete + '%)';
-      self.textDisplay.setRegisterText('position', message);
+      self.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'message', text: message});
     };
 
     this.nodes.position.onchange = function() {
@@ -155,11 +147,11 @@ module.exports = {
     };
 
     this.nodes.volume.onmousedown = function() {
-      self.textDisplay.showRegister('volume');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'volume'});
     };
 
     this.nodes.volume.onmouseup = function() {
-      self.textDisplay.showRegister('songTitle');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'songTitle'});
     };
 
     this.nodes.volume.oninput = function() {
@@ -171,11 +163,11 @@ module.exports = {
     };
 
     this.nodes.balance.onmousedown = function() {
-      self.textDisplay.showRegister('balance');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'balance'});
     };
 
     this.nodes.balance.onmouseup = function() {
-      self.textDisplay.showRegister('songTitle');
+      self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'songTitle'});
     };
 
     this.nodes.balance.oninput = function() {
@@ -335,7 +327,7 @@ module.exports = {
     this.nodes.volume.style.backgroundPosition = '0 -' + offset + 'px';
 
     var message = 'Volume: ' + volume + '%';
-    this.textDisplay.setRegisterText('volume', message);
+    this.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'volume', text: message});
 
     // This shouldn't trigger an infinite loop with volume.onchange(),
     // since the value will be the same
@@ -352,7 +344,7 @@ module.exports = {
     } else {
       string = 'Balance: ' + Math.abs(balance) + '% Left';
     }
-    this.textDisplay.setRegisterText('balance', string);
+    this.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'balance', text: string});
     balance = Math.abs(balance) / 100;
     var sprite = Math.round(balance * 28);
     var offset = (sprite - 1) * 15;
@@ -375,7 +367,7 @@ module.exports = {
   updateTitle: function() {
     var duration = this._timeString(this.winamp.getDuration());
     var name = this.winamp.fileName + ' (' + duration + ')  ***  ';
-    this.textDisplay.setRegisterText('songTitle', name);
+    this.winamp.dispatch({type: 'SET_MARQUEE_REGISTER', register: 'songTitle', text: name});
   },
 
   updateChannelCount: function() {
diff --git a/js/main.js b/js/main.js
index 1958b412..a89eecc8 100644
--- a/js/main.js
+++ b/js/main.js
@@ -19,7 +19,22 @@ if (new Browser(window).isCompatible) {
   mainWindowElement.appendChild(mainWindowDom);
   document.getElementById('winamp2-js').appendChild(mainWindowElement);
 
-  var winamp = Winamp.init({
+  var winamp = Winamp;
+  let store = createStore(createReducer(winamp));
+
+  // TODO: Remove this workaround
+  winamp.renderTo = (componant, node) => {
+    render(
+      <Provider store={store}>
+        {componant}
+      </Provider>,
+      node
+    );
+  };
+
+  winamp.dispatch = store.dispatch;
+
+  winamp.init({
     volume: 50,
     balance: 0,
     mediaFile: {
@@ -29,15 +44,10 @@ if (new Browser(window).isCompatible) {
     skinUrl: 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'
   });
 
-  let store = createStore(createReducer(winamp));
+
 
   new Hotkeys(winamp);
-  render(
-    <Provider store={store}>
-      <ContextMenu winamp={winamp} />
-    </Provider>,
-    document.getElementById('context-menu-holder')
-  );
+  winamp.renderTo(<ContextMenu />, document.getElementById('context-menu-holder'));
 } else {
   document.getElementById('winamp').style.display = 'none';
   document.getElementById('browser-compatibility').style.display = 'block';
diff --git a/js/multi-display.js b/js/multi-display.js
deleted file mode 100644
index 4f27ff6a..00000000
--- a/js/multi-display.js
+++ /dev/null
@@ -1,64 +0,0 @@
-// Single line text display that can animate and hold multiple registers
-import Font from './font';
-var MultiDisplay = function(node) {
-  this.font = new Font();
-  this.node = node;
-  this.registers = {};
-  this._marqueeLoop();
-};
-
-MultiDisplay.prototype.addRegister = function(key) {
-  // Create element node
-  var register = document.createElement('div');
-  register.style.display = 'none';
-
-  this.node.appendChild(register);
-  this.registers[key] = {
-    node: register,
-    text: '',
-    marquee: false
-  };
-};
-
-// Set text of register
-MultiDisplay.prototype.setRegisterText = function(register, text) {
-  this.font.setNodeToString(this.registers[register].node, text);
-};
-
-MultiDisplay.prototype.showRegister = function(showKey) {
-  for (var key in this.registers) {
-    if (this.registers.hasOwnProperty(key)) {
-      var display = (key === showKey) ? 'block' : 'none';
-      this.registers[key].node.style.display = display;
-    }
-  }
-};
-
-MultiDisplay.prototype.startRegisterMarquee = function(key) {
-  this.registers[key].marquee = true;
-};
-
-MultiDisplay.prototype.pauseRegisterMarquee = function(key) {
-  this.registers[key].marquee = false;
-};
-
-MultiDisplay.prototype._marqueeLoop = function() {
-  var self = this;
-  setTimeout(function() {
-    for (var key in self.registers) {
-      // Check every register to see if it needs to be marqueed
-      if (self.registers[key].marquee) {
-        var text = self.registers[key].node.firstChild;
-        // Only scroll if the text is too long
-        if (text && text.childNodes.length > 30) {
-          var characterNode = text.firstChild;
-          text.removeChild(characterNode);
-          text.appendChild(characterNode);
-        }
-      }
-    }
-    self._marqueeLoop();
-  }, 220);
-};
-
-module.exports = MultiDisplay;
diff --git a/js/reducers.js b/js/reducers.js
index 63540c31..7e977ae5 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -1,20 +1,86 @@
 import MyFile from './my-file';
+import {combineReducers} from 'redux';
+
+const register = (state, action) => {
+  if (!state) {
+    return {
+      id: '',
+      step: 0,
+      text: ''
+    };
+  }
+  switch (action.type) {
+    case 'SET_MARQUEE_REGISTER':
+      if (state.id === action.register) {
+        return Object.assign({}, state, {step: 0, text: action.text});
+      }
+      return state;
+    case 'STEP_MARQUEE':
+      return Object.assign({}, state, {step: (state.step + 1) % state.text.length});
+    default:
+      return state;
+  }
+};
+
+const marquee = (state, action) => {
+  if (!state) {
+    return {
+      stepping: true,
+      selectedRegister: 'songTitle',
+      registers: [
+        Object.assign(register(), {id: 'songTitle'}),
+        Object.assign(register(), {id: 'position'}),
+        Object.assign(register(), {id: 'volume'}),
+        Object.assign(register(), {id: 'balance'}),
+        Object.assign(register(), {id: 'message'})
+      ]
+    };
+  }
+  switch (action.type) {
+    case 'SET_MARQUEE_REGISTER':
+      return Object.assign({}, state, {registers: state.registers.map(r => register(r, action))});
+    case 'STEP_MARQUEE':
+      if (state.stepping) {
+        return Object.assign({}, state, {registers: state.registers.map(r => register(r, action))});
+      }
+      return state;
+    case 'SHOW_MARQUEE_REGISTER':
+      if (state.stepping) {
+        return Object.assign({}, state, {selectedRegister: action.register});
+      }
+      return state;
+    default:
+      return state;
+  }
+};
+
+const contextMenu = (state, action) => {
+  if (!state) {
+    return {
+      selected: false
+    };
+  }
+  switch (action.type) {
+    case 'TOGGLE_CONTEXT_MENU':
+      return Object.assign({}, state, {selected: !state.selected});
+    case 'CLOSE_CONTEXT_MENU':
+      return Object.assign({}, state, {selected: false});
+    default:
+      return state;
+  }
+};
 
 const createReducer = (winamp) => {
 
-  const reducers = (state, action) => {
-    if (!state) {
-      return {
-        contextMenu: {
-          selected: false
-        }
-      };
-    }
+  const reducer = combineReducers({
+    marquee,
+    contextMenu
+  });
+
+  // Add in the temporary actions that don't modify the state.
+  return (state, action) => {
+    state = reducer(state, action);
     switch (action.type) {
-      case 'TOGGLE_CONTEXT_MENU':
-        return Object.assign({}, state, {contextMenu: {selected: !state.contextMenu.selected}});
-      case 'CLOSE_CONTEXT_MENU':
-        return Object.assign({}, state, {contextMenu: {selected: false}});
       case 'CLOSE_WINAMP':
         winamp.close();
         return state;
@@ -32,8 +98,6 @@ const createReducer = (winamp) => {
         return state;
     }
   };
-
-  return reducers;
 };
 
 export default createReducer;

From e2f0339ef7d176ee161c4287de444b7627e4780d Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 08:16:10 -0700
Subject: [PATCH 03/21] Use keydown for better hotkey response

---
 js/hotkeys.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/hotkeys.js b/js/hotkeys.js
index 7c85c130..62c3a500 100644
--- a/js/hotkeys.js
+++ b/js/hotkeys.js
@@ -1,7 +1,7 @@
 module.exports = function(winamp) {
   var keylog = [];
   var trigger = [78, 85, 76, 27, 76, 27, 83, 79, 70, 84];
-  document.addEventListener('keyup', function(e){
+  document.addEventListener('keydown', function(e){
     if (e.ctrlKey) { // Is CTRL depressed?
       switch (e.keyCode) {
         case 68: winamp.toggleDoubledMode(); break;   // CTRL+D

From 09f70d5e2a65dca44fb318260fa8d1b0bd0be8be Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 14:38:50 -0700
Subject: [PATCH 04/21] Trigger file opener via dispatch

---
 js/hotkeys.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/hotkeys.js b/js/hotkeys.js
index 62c3a500..3f980525 100644
--- a/js/hotkeys.js
+++ b/js/hotkeys.js
@@ -17,13 +17,15 @@ module.exports = function(winamp) {
         case 40: winamp.incrementVolumeBy(-1); break; // down arrow
         case 66: winamp.next(); break;                // B
         case 67: winamp.pause(); break;               // C
-        case 76: winamp.openFileDialog(); break;      // L
+        // L
+        case 76: winamp.dispatch({type: 'OPEN_FILE_DIALOG'}); break;
         case 82: winamp.toggleRepeat(); break;        // R
         case 83: winamp.toggleShuffle(); break;       // S
         case 86: winamp.stop(); break;                // V
         case 88: winamp.play(); break;                // X
         case 90: winamp.previous(); break;            // Z
-        case 96: winamp.openFileDialog(); break;      // numpad 0
+        // numpad 0
+        case 96: winamp.dispatch({type: 'OPEN_FILE_DIALOG'}); break;
         case 97: winamp.previous(10); break;          // numpad 1
         case 98: winamp.incrementVolumeBy(-1); break; // numpad 2
         case 99: winamp.next(10); break;              // numpad 3

From 6b79eb54dcc35c91eb50905a2adb2bcf7c1e30a4 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 14:39:46 -0700
Subject: [PATCH 05/21] Move css files closer to their js

---
 js/main-window.js | 2 ++
 js/main.js        | 3 ---
 js/winamp.js      | 2 ++
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/js/main-window.js b/js/main-window.js
index 7d8b1581..e9816b74 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import Marquee from './Marquee.jsx';
 
+import '../css/main-window.css';
+
 module.exports = {
   init: function(winamp) {
     this.winamp = winamp;
diff --git a/js/main.js b/js/main.js
index a89eecc8..37c60e4b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -11,9 +11,6 @@ import Winamp from './winamp';
 import ContextMenu from './ContextMenu.jsx';
 import Hotkeys from './hotkeys';
 
-import '../css/winamp.css';
-import '../css/main-window.css';
-
 if (new Browser(window).isCompatible) {
   var mainWindowElement = document.createElement('div');
   mainWindowElement.appendChild(mainWindowDom);
diff --git a/js/winamp.js b/js/winamp.js
index 4d8d3518..8584e986 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -5,6 +5,8 @@ import Skin from './skin';
 import Media from './media';
 import MyFile from './my-file';
 
+import '../css/winamp.css';
+
 module.exports = {
   init: function(options) {
     this.fileInput = document.createElement('input');

From d24376f57fe70d90ee4f3ff9e2ce8acda1daba45 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 14:40:00 -0700
Subject: [PATCH 06/21] Trigger file dialog via dispatch

---
 js/main-window.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/main-window.js b/js/main-window.js
index e9816b74..b9564289 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -133,7 +133,7 @@ module.exports = {
     };
 
     this.nodes.eject.onclick = function() {
-      self.winamp.openFileDialog();
+      self.winamp.dispatch({type: 'OPEN_FILE_DIALOG'});
     };
 
     this.nodes.repeat.onclick = function() {

From 90dbfecf1007f8bcbdb6f0fd4b4bd7573455e497 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 14:40:13 -0700
Subject: [PATCH 07/21] Allow redux dev tools to work

---
 js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/main.js b/js/main.js
index 37c60e4b..e61f77a7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -17,7 +17,7 @@ if (new Browser(window).isCompatible) {
   document.getElementById('winamp2-js').appendChild(mainWindowElement);
 
   var winamp = Winamp;
-  let store = createStore(createReducer(winamp));
+  let store = createStore(createReducer(winamp), window.devToolsExtension && window.devToolsExtension());
 
   // TODO: Remove this workaround
   winamp.renderTo = (componant, node) => {

From 6b65e944e2224c2c4de51ce309b729ec0584cc54 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 19:07:36 -0700
Subject: [PATCH 08/21] Remove rudunant constructor

---
 js/Marquee.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/js/Marquee.jsx b/js/Marquee.jsx
index 57c5ea2a..8e136505 100644
--- a/js/Marquee.jsx
+++ b/js/Marquee.jsx
@@ -4,9 +4,6 @@ import {connect} from 'react-redux';
 
 
 class Marquee extends React.Component {
-  constructor(props) {
-    super(props);
-  }
   componentDidMount() {
     const step = () => {
       setTimeout(() => {

From 0558f3c6124276400732ae16ff08fa45f5286448 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 19:45:37 -0700
Subject: [PATCH 09/21] Move Actons to React

---
 js/main-window-dom.js |  8 +-------
 js/main-window.js     | 30 +++---------------------------
 js/reducers.js        |  9 +++++++++
 3 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/js/main-window-dom.js b/js/main-window-dom.js
index b206fd59..11f1ff1f 100644
--- a/js/main-window-dom.js
+++ b/js/main-window-dom.js
@@ -71,13 +71,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
     el('div', {id: 'playlist-button'})
   ]),
   el('input', {id: 'position', type: 'range', min: '0', max: '100', step: '1', value: '0'}),
-  el('div', {class: 'actions'}, [
-    el('div', {id: 'previous'}),
-    el('div', {id: 'play'}),
-    el('div', {id: 'pause'}),
-    el('div', {id: 'stop'}),
-    el('div', {id: 'next'})
-  ]),
+  el('div', {id: 'actions-holder'}),
   el('div', {id: 'eject'}),
   el('div', {class: 'shuffle-repeat'}, [
     el('div', {id: 'shuffle'}),
diff --git a/js/main-window.js b/js/main-window.js
index b9564289..5b16a2d0 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Marquee from './Marquee.jsx';
+import Actions from './Actions.jsx';
 
 import '../css/main-window.css';
 
@@ -14,16 +15,10 @@ module.exports = {
       volumeMessage: document.getElementById('volume-message'),
       balanceMessage: document.getElementById('balance-message'),
       positionMessage: document.getElementById('position-message'),
-      songTitle: document.getElementById('song-title'),
       time: document.getElementById('time'),
       shadeTime: document.getElementById('shade-time'),
       shadeMinusSign: document.getElementById('shade-minus-sign'),
       visualizer: document.getElementById('visualizer'),
-      previous: document.getElementById('previous'),
-      play: document.getElementById('play'),
-      pause: document.getElementById('pause'),
-      stop: document.getElementById('stop'),
-      next: document.getElementById('next'),
       eject: document.getElementById('eject'),
       repeat: document.getElementById('repeat'),
       shuffle: document.getElementById('shuffle'),
@@ -41,7 +36,8 @@ module.exports = {
     this.handle = document.getElementById('title-bar');
     this.body = this.nodes.window;
 
-    this.winamp.renderTo(<Marquee />, this.nodes.songTitle);
+    this.winamp.renderTo(<Marquee />, document.getElementById('song-title'));
+    this.winamp.renderTo(<Actions />, document.getElementById('actions-holder'));
 
     this._registerListeners();
     return this;
@@ -75,10 +71,6 @@ module.exports = {
       self.winamp.toggleDoubledMode();
     };
 
-    this.nodes.play.onclick = function() {
-      self.winamp.play();
-    };
-
     this.nodes.songTitle.onmousedown = function() {
       //self.textDisplay.pauseRegisterMarquee('songTitle');
     };
@@ -116,22 +108,6 @@ module.exports = {
       }
     };
 
-    this.nodes.previous.onclick = function() {
-      self.winamp.previous();
-    };
-
-    this.nodes.next.onclick = function() {
-      self.winamp.next();
-    };
-
-    this.nodes.pause.onclick = function() {
-      self.winamp.pause();
-    };
-
-    this.nodes.stop.onclick = function() {
-      self.winamp.stop();
-    };
-
     this.nodes.eject.onclick = function() {
       self.winamp.dispatch({type: 'OPEN_FILE_DIALOG'});
     };
diff --git a/js/reducers.js b/js/reducers.js
index 7e977ae5..bd43da52 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -81,6 +81,15 @@ const createReducer = (winamp) => {
   return (state, action) => {
     state = reducer(state, action);
     switch (action.type) {
+      case 'PLAY':
+        winamp.play();
+        return state;
+      case 'PAUSE':
+        winamp.pause();
+        return state;
+      case 'STOP':
+        winamp.stop();
+        return state;
       case 'CLOSE_WINAMP':
         winamp.close();
         return state;

From 1fe9fe5da7a1907760ade2aa5c7249e7ef885fc8 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 10 Jul 2016 19:58:13 -0700
Subject: [PATCH 10/21] Reinstate pausing marquee

Also fix a bug where releasing the mouse button after moving the cursor outside
of the marquee would fail to restart the marquee.
---
 js/Marquee.jsx    | 16 +++++++++++++++-
 js/main-window.js | 10 ----------
 js/reducers.js    |  4 ++++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/js/Marquee.jsx b/js/Marquee.jsx
index 8e136505..58fcd82b 100644
--- a/js/Marquee.jsx
+++ b/js/Marquee.jsx
@@ -4,6 +4,11 @@ import {connect} from 'react-redux';
 
 
 class Marquee extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
   componentDidMount() {
     const step = () => {
       setTimeout(() => {
@@ -19,6 +24,15 @@ class Marquee extends React.Component {
     });
     return selected ? selected[0] : selected;
   }
+  handleMouseDown() {
+    this.props.dispatch({type: 'PAUSE_MARQUEE'});
+    document.addEventListener('mouseup', () => {
+      // TODO: Remove this listener
+      setTimeout(() => {
+        this.props.dispatch({type: 'START_MARQUEE'});
+      }, 1000);
+    });
+  }
 
   render() {
     const register = this.selectedRegister();
@@ -29,7 +43,7 @@ class Marquee extends React.Component {
       // TODO: Use the spread operator
       chars = start.concat(end).slice(0, 30);
     }
-    return <div>
+    return <div onMouseDown={this.handleMouseDown}>
     {chars.map(character => {
       // TODO: Standarize how we get a characer class name
       const className = 'character character-' + character.toLowerCase().charCodeAt(0);
diff --git a/js/main-window.js b/js/main-window.js
index 5b16a2d0..728954c1 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -71,16 +71,6 @@ module.exports = {
       self.winamp.toggleDoubledMode();
     };
 
-    this.nodes.songTitle.onmousedown = function() {
-      //self.textDisplay.pauseRegisterMarquee('songTitle');
-    };
-
-    this.nodes.songTitle.onmouseup = function() {
-      setTimeout(function() {
-        //self.textDisplay.startRegisterMarquee('songTitle');
-      }, 1000);
-    };
-
     this.nodes.position.onmousedown = function() {
       if (!self.nodes.window.classList.contains('stop')){
         self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'position'});
diff --git a/js/reducers.js b/js/reducers.js
index bd43da52..31decf8b 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -49,6 +49,10 @@ const marquee = (state, action) => {
         return Object.assign({}, state, {selectedRegister: action.register});
       }
       return state;
+    case 'PAUSE_MARQUEE':
+      return Object.assign({}, state, {stepping: false});
+    case 'START_MARQUEE':
+      return Object.assign({}, state, {stepping: true});
     default:
       return state;
   }

From 3ef2bf70415c5842be900957f5113df1bb7bedb6 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 11 Jul 2016 20:37:03 -0700
Subject: [PATCH 11/21] Refactor how we handle special NUM_EX CSS

---
 css/main-window.css |  8 +-------
 js/skin-sprites.js  |  4 ++--
 js/skin.js          | 16 +++++++---------
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/css/main-window.css b/css/main-window.css
index a2f64c4c..8e2f59d7 100755
--- a/css/main-window.css
+++ b/css/main-window.css
@@ -161,6 +161,7 @@
 }
 
 #winamp2-js .status #time #minus-sign {
+    /* Note that this get's augmented by the skin CSS if NUM_EX.BMP is present */
     position: absolute;
     top: 6px;
     left: -1px;
@@ -168,13 +169,6 @@
     height: 1px;
 }
 
-/* Alternate format for minus sign, when skin supports it */
-#winamp2-js .status #time.ex #minus-sign {
-    top: 0px;
-    left: -1px;
-    width: 9px;
-    height: 13px;
-}
 
 #winamp2-js .status #time #minute-first-digit {
     position: absolute;
diff --git a/js/skin-sprites.js b/js/skin-sprites.js
index 7d39322c..eb63d08a 100644
--- a/js/skin-sprites.js
+++ b/js/skin-sprites.js
@@ -94,8 +94,8 @@ module.exports = [
   {
     img: 'NUMS_EX',
     sprites: [
-      {selectors: ['#time.ex #minus-sign'], x: 90, y: 0, width: 9, height: 13},
-      {selectors: ['#time.ex.countdown #minus-sign'], x: 99, y: 0, width: 9, height: 13},
+      {selectors: ['#time #minus-sign'], x: 90, y: 0, width: 9, height: 13},
+      {selectors: ['#time.countdown #minus-sign'], x: 99, y: 0, width: 9, height: 13},
       {selectors: ['.digit-0'], x: 0, y: 0, width: 9, height: 13},
       {selectors: ['.digit-1'], x: 9, y: 0, width: 9, height: 13},
       {selectors: ['.digit-2'], x: 18, y: 0, width: 9, height: 13},
diff --git a/js/skin.js b/js/skin.js
index aa3e33bd..80df7c69 100644
--- a/js/skin.js
+++ b/js/skin.js
@@ -25,18 +25,11 @@ module.exports = {
   // Gets passed as a callback, so don't have access to `this`
   _setSkinByBuffer: function(buffer) {
     var zip = new JSZip(buffer);
-    document.getElementById('time').classList.remove('ex');
-
     var promisedCssRules = this._skinSprites.map(function(spriteObj) {
-
       var file = this._findFileInZip(spriteObj.img, zip);
       if (file) {
-        // CSS has to change if this file is present
-        if (spriteObj.img === 'NUMS_EX') {
-          document.getElementById('time').classList.add('ex');
-        }
         var src = 'data:image/bmp;base64,' + btoa(file.asBinary());
-        return this._spriteCssRule(src, spriteObj);
+        return this._spriteCssRule(spriteObj.img, src, spriteObj);
       }
     }, this);
 
@@ -85,7 +78,7 @@ module.exports = {
 
   // Given an image URL and coordinates, returns a data url for a sub-section
   // of that image
-  _spriteCssRule: function(src, spriteObj) {
+  _spriteCssRule: function(img, src, spriteObj) {
     return new Promise(function(resolve) {
       var imageObj = new Image();
       imageObj.src = src;
@@ -105,6 +98,11 @@ module.exports = {
             cssRules += '#winamp2-js ' + selector + '{' + value + '}\n';
           });
         });
+        if (img === 'NUMS_EX') {
+          // This alternate number file requires that the minus sign be
+          // formatted differently.
+          cssRules += '#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }\n';
+        }
         resolve(cssRules);
       };
     });

From 9558890d51abf931848a1bb888668c49a3729bb5 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 11 Jul 2016 20:39:09 -0700
Subject: [PATCH 12/21] Add length and time elapsed to redux state

---
 js/reducers.js | 24 +++++++++++++++++++++++-
 js/winamp.js   |  3 +++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/js/reducers.js b/js/reducers.js
index 31decf8b..cf8500d0 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -74,11 +74,33 @@ const contextMenu = (state, action) => {
   }
 };
 
+const media = (state, action) => {
+  if (!state) {
+    return {
+      timeMode: 'ELAPSED',
+      timeElapsed: 0,
+      length: null
+    };
+  }
+  switch (action.type) {
+    case 'TOGGLE_TIME_MODE':
+      const newMode = state.timeMode === 'REMAINING' ? 'ELAPSED' : 'REMAINING';
+      return Object.assign({}, state, {timeMode: newMode});
+    case 'UPDATE_TIME_ELAPSED':
+      return Object.assign({}, state, {timeElapsed: action.elapsed});
+    case 'SET_MEDIA_LENGTH':
+      return Object.assign({}, state, {length: action.length});
+    default:
+      return state;
+  }
+};
+
 const createReducer = (winamp) => {
 
   const reducer = combineReducers({
     marquee,
-    contextMenu
+    contextMenu,
+    media
   });
 
   // Add in the temporary actions that don't modify the state.
diff --git a/js/winamp.js b/js/winamp.js
index 8584e986..e75fb4ba 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -55,6 +55,8 @@ module.exports = {
     this.windowManager.registerWindow(this.mainWindow);
 
     this.media.addEventListener('timeupdate', function() {
+      self.dispatch({type: 'UPDATE_TIME_ELAPSED', elapsed: self.media.timeElapsed()});
+      // Legacy
       window.dispatchEvent(self.events.timeUpdated);
     });
 
@@ -264,6 +266,7 @@ module.exports = {
       window.dispatchEvent(this.events.channelCountUpdated);
       window.dispatchEvent(this.events.titleUpdated);
       window.dispatchEvent(this.events.timeUpdated);
+      this.dispatch({type: 'SET_MEDIA_LENGTH', length: this.media.duration()});
     }
 
     // Note, this will not happen right away

From 130d18f07286f66e5b1e4f1e05cf7611d37a97d4 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 11 Jul 2016 21:09:44 -0700
Subject: [PATCH 13/21] Abstract Character componant

---
 js/Character.jsx |  8 ++++++++
 js/Marquee.jsx   | 12 ++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 js/Character.jsx

diff --git a/js/Character.jsx b/js/Character.jsx
new file mode 100644
index 00000000..fa33c346
--- /dev/null
+++ b/js/Character.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+module.exports = (props) => {
+  const char = '' + props.children;
+  const className = 'character character-' + char.toLowerCase().charCodeAt(0);
+  return <div {...props} className={className}>{props.children}</div>;
+};
+
diff --git a/js/Marquee.jsx b/js/Marquee.jsx
index 58fcd82b..080dca72 100644
--- a/js/Marquee.jsx
+++ b/js/Marquee.jsx
@@ -2,6 +2,8 @@
 import React from 'react';
 import {connect} from 'react-redux';
 
+import Character from './Character.jsx';
+
 
 class Marquee extends React.Component {
   constructor(props) {
@@ -44,12 +46,10 @@ class Marquee extends React.Component {
       chars = start.concat(end).slice(0, 30);
     }
     return <div onMouseDown={this.handleMouseDown}>
-    {chars.map(character => {
-      // TODO: Standarize how we get a characer class name
-      const className = 'character character-' + character.toLowerCase().charCodeAt(0);
-      return <div className={className}>{character}</div>;
-    })}
-    </div>;
+      {chars.map(character => {
+        return <Character>{character}</Character>;
+      })};
+      </div>;
   }
 }
 

From 06482e6795ffa93aeb121f06b22c3b26c1eb9eb1 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 11 Jul 2016 21:30:27 -0700
Subject: [PATCH 14/21] Move time displasy to Redux/React

---
 js/Actions.jsx        | 32 +++++++++++++++++++++++++
 js/ShadeTime.jsx      | 32 +++++++++++++++++++++++++
 js/Time.jsx           | 30 +++++++++++++++++++++++
 js/font.js            |  9 -------
 js/hotkeys.js         |  3 ++-
 js/main-window-dom.js | 16 ++-----------
 js/main-window.js     | 56 ++++---------------------------------------
 js/utils.js           | 16 +++++++++++++
 js/winamp.js          |  5 ----
 9 files changed, 118 insertions(+), 81 deletions(-)
 create mode 100644 js/Actions.jsx
 create mode 100644 js/ShadeTime.jsx
 create mode 100644 js/Time.jsx
 create mode 100644 js/utils.js

diff --git a/js/Actions.jsx b/js/Actions.jsx
new file mode 100644
index 00000000..11227591
--- /dev/null
+++ b/js/Actions.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Actions extends React.Component {
+  constructor(props) {
+    super(props);
+    this.play = this.play.bind(this);
+    this.pause = this.pause.bind(this);
+    this.stop = this.stop.bind(this);
+  }
+  play() {
+    this.props.dispatch({type: 'PLAY'});
+  }
+  pause() {
+    this.props.dispatch({type: 'PAUSE'});
+  }
+  stop() {
+    this.props.dispatch({type: 'STOP'});
+  }
+  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>;
+  }
+}
+
+module.exports = connect(state => state.media)(Actions);
diff --git a/js/ShadeTime.jsx b/js/ShadeTime.jsx
new file mode 100644
index 00000000..cddb411b
--- /dev/null
+++ b/js/ShadeTime.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+import {getTimeObj} from './utils';
+import Character from './Character.jsx';
+
+
+class Time extends React.Component {
+  constructor(props) {
+    super(props);
+    this.toggleTimeMode = this.toggleTimeMode.bind(this);
+  }
+  toggleTimeMode() {
+    this.props.dispatch({type: 'TOGGLE_TIME_MODE'});
+  }
+  render() {
+    const seconds = this.props.timeMode === 'ELAPSED' ?
+      this.props.timeElapsed :
+      this.props.length - this.props.timeElapsed;
+
+    const timeObj = getTimeObj(seconds);
+    return <div id='shade-time' onClick={this.toggleTimeMode} className='countdown'>
+      <Character id='shade-minus-sign'>{this.props.timeMode === 'REMAINING' ? '-' : ''}</Character>
+      <Character id='shade-minute-first-digit'>{timeObj.minutesFirstDigit}</Character>
+      <Character id='shade-minute-second-digit'>{timeObj.minutesSecondDigit}</Character>
+      <Character id='shade-second-first-digit'>{timeObj.secondsFirstDigit}</Character>
+      <Character id='shade-second-second-digit'>{timeObj.secondsSecondDigit}</Character>
+    </div>;
+  }
+}
+
+module.exports = connect(state => state.media)(Time);
diff --git a/js/Time.jsx b/js/Time.jsx
new file mode 100644
index 00000000..849e9cac
--- /dev/null
+++ b/js/Time.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+import {getTimeObj} from './utils';
+
+class Time extends React.Component {
+  constructor(props) {
+    super(props);
+    this.toggleTimeMode = this.toggleTimeMode.bind(this);
+  }
+  toggleTimeMode() {
+    this.props.dispatch({type: 'TOGGLE_TIME_MODE'});
+  }
+  render() {
+    const seconds = this.props.timeMode === 'ELAPSED' ?
+      this.props.timeElapsed :
+      this.props.length - this.props.timeElapsed;
+
+    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>;
+  }
+}
+
+module.exports = connect(state => state.media)(Time);
diff --git a/js/font.js b/js/font.js
index a671734f..0019ada7 100644
--- a/js/font.js
+++ b/js/font.js
@@ -25,13 +25,4 @@ module.exports = function() {
     node.classList.add(className);
     return node;
   };
-
-  // Get a <div> containing a digit
-  this.digitNode = function(digit) {
-    var div = document.createElement('div');
-    div.classList.add('digit');
-    div.classList.add('digit-' + digit);
-    return div;
-  };
-
 };
diff --git a/js/hotkeys.js b/js/hotkeys.js
index 3f980525..a35077a8 100644
--- a/js/hotkeys.js
+++ b/js/hotkeys.js
@@ -7,7 +7,8 @@ module.exports = function(winamp) {
         case 68: winamp.toggleDoubledMode(); break;   // CTRL+D
         // XXX FIXME
         case 76: winamp.openOptionMenu(); break;      // CTRL+L
-        case 84: winamp.toggleTimeMode(); break;      // CTRL+T
+        // CTRL+T
+        case 84: winamp.dispath({type: 'TOGGLE_TIME_MODE'}); break;
       }
     } else {
       switch (e.keyCode) {
diff --git a/js/main-window-dom.js b/js/main-window-dom.js
index 11f1ff1f..c715e1f1 100644
--- a/js/main-window-dom.js
+++ b/js/main-window-dom.js
@@ -25,13 +25,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
   el('div', {id: 'loading'}, 'Loading...'),
   el('div', {id: 'title-bar', class: 'selected'}, [
     el('div', {id: 'context-menu-holder'}),
-    el('div', {id: 'shade-time'}, [
-      el('div', {id: 'shade-minus-sign'}),
-      el('div', {id: 'shade-minute-first-digit', class: 'character'}),
-      el('div', {id: 'shade-minute-second-digit', class: 'character'}),
-      el('div', {id: 'shade-second-first-digit', class: 'character'}),
-      el('div', {id: 'shade-second-second-digit', class: 'character'})
-    ]),
+    el('div', {id: 'shade-time-holder'}),
     el('div', {id: 'minimize'}),
     el('div', {id: 'shade'}),
     el('div', {id: 'close'})
@@ -46,13 +40,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
     ]),
     el('div', {id: 'play-pause'}),
     el('div', {id: 'work-indicator'}),
-    el('div', {id: 'time'}, [
-      el('div', {id: 'minus-sign'}),
-      el('div', {id: 'minute-first-digit'}),
-      el('div', {id: 'minute-second-digit'}),
-      el('div', {id: 'second-first-digit'}),
-      el('div', {id: 'second-second-digit'})
-    ]),
+    el('div', {id: 'time-holder'}),
     el('canvas', {id: 'visualizer', width: '152', height: '32'})
   ]),
   el('div', {class: 'media-info'}, [
diff --git a/js/main-window.js b/js/main-window.js
index 728954c1..85026f17 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import Marquee from './Marquee.jsx';
 import Actions from './Actions.jsx';
+import Time from './Time.jsx';
+import ShadeTime from './ShadeTime.jsx';
 
 import '../css/main-window.css';
 
@@ -15,9 +17,6 @@ module.exports = {
       volumeMessage: document.getElementById('volume-message'),
       balanceMessage: document.getElementById('balance-message'),
       positionMessage: document.getElementById('position-message'),
-      time: document.getElementById('time'),
-      shadeTime: document.getElementById('shade-time'),
-      shadeMinusSign: document.getElementById('shade-minus-sign'),
       visualizer: document.getElementById('visualizer'),
       eject: document.getElementById('eject'),
       repeat: document.getElementById('repeat'),
@@ -38,6 +37,8 @@ module.exports = {
 
     this.winamp.renderTo(<Marquee />, document.getElementById('song-title'));
     this.winamp.renderTo(<Actions />, document.getElementById('actions-holder'));
+    this.winamp.renderTo(<Time />, document.getElementById('time-holder'));
+    this.winamp.renderTo(<ShadeTime />, document.getElementById('shade-time-holder'));
 
     this._registerListeners();
     return this;
@@ -110,10 +111,6 @@ module.exports = {
       self.winamp.toggleShuffle();
     };
 
-    this.nodes.shadeTime.onclick = function() {
-      self.winamp.toggleTimeMode();
-    };
-
     this.nodes.volume.onmousedown = function() {
       self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'volume'});
     };
@@ -126,10 +123,6 @@ module.exports = {
       self.winamp.setVolume(this.value);
     };
 
-    this.nodes.time.onclick = function() {
-      self.winamp.toggleTimeMode();
-    };
-
     this.nodes.balance.onmousedown = function() {
       self.winamp.dispatch({type: 'SHOW_MARQUEE_REGISTER', register: 'balance'});
     };
@@ -164,9 +157,6 @@ module.exports = {
     window.addEventListener('stopLoading', function() {
       self.unsetLoadingState();
     });
-    window.addEventListener('toggleTimeMode', function() {
-      self.toggleTimeMode();
-    });
     window.addEventListener('changeState', function() {
       self.changeState();
     });
@@ -231,39 +221,6 @@ module.exports = {
   updateTime: function() {
     this.updateShadePositionClass();
     this.updatePosition();
-
-    var shadeMinusCharacter = ' ';
-    var digits = null;
-    if (this.nodes.time.classList.contains('countdown')) {
-      digits = this.winamp._timeObject(this.winamp.getTimeRemaining());
-      shadeMinusCharacter = '-';
-    } else {
-      digits = this.winamp._timeObject(this.winamp.getTimeElapsed());
-    }
-    this.winamp.skin.font.displayCharacterInNode(shadeMinusCharacter, this.nodes.shadeMinusSign);
-
-    var digitNodes = [
-      document.getElementById('minute-first-digit'),
-      document.getElementById('minute-second-digit'),
-      document.getElementById('second-first-digit'),
-      document.getElementById('second-second-digit')
-    ];
-    var shadeDigitNodes = [
-      document.getElementById('shade-minute-first-digit'),
-      document.getElementById('shade-minute-second-digit'),
-      document.getElementById('shade-second-first-digit'),
-      document.getElementById('shade-second-second-digit')
-    ];
-
-    // For each digit/node
-    for (var i = 0; i < 4; i++) {
-      var digit = digits[i];
-      var digitNode = digitNodes[i];
-      var shadeNode = shadeDigitNodes[i];
-      digitNode.innerHTML = '';
-      digitNode.appendChild(this.winamp.skin.font.digitNode(digit));
-      this.winamp.skin.font.displayCharacterInNode(digit, shadeNode);
-    }
   },
 
   setWorkingIndicator: function() {
@@ -282,11 +239,6 @@ module.exports = {
     this.nodes.window.classList.remove('loading');
   },
 
-  toggleTimeMode: function() {
-    this.nodes.time.classList.toggle('countdown');
-    this.updateTime();
-  },
-
   updateVolume: function() {
     var volume = this.winamp.getVolume();
     var percent = volume / 100;
diff --git a/js/utils.js b/js/utils.js
new file mode 100644
index 00000000..8c33a6d4
--- /dev/null
+++ b/js/utils.js
@@ -0,0 +1,16 @@
+const getTimeObj = (time) => {
+  var minutes = Math.floor(time / 60);
+  var seconds = time % 60;
+
+  return {
+    minutesFirstDigit: Math.floor(minutes / 10),
+    minutesSecondDigit: Math.floor(minutes % 10),
+    secondsFirstDigit: Math.floor(seconds / 10),
+    secondsSecondDigit: Math.floor(seconds % 10)
+  };
+};
+
+module.exports = {
+  getTimeObj
+};
+
diff --git a/js/winamp.js b/js/winamp.js
index e75fb4ba..5e05f70c 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -26,7 +26,6 @@ module.exports = {
       stopWaiting: new Event('stopWaiting'),
       startLoading: new Event('startLoading'),
       stopLoading: new Event('stopLoading'),
-      toggleTimeMode: new Event('toggleTimeMode'),
       changeState: new Event('changeState'),
       titleUpdated: new Event('titleUpdated'),
       channelCountUpdated: new Event('channelCountUpdated'),
@@ -124,10 +123,6 @@ module.exports = {
     this.media.seekToPercentComplete(percent);
   },
 
-  toggleTimeMode: function() {
-    window.dispatchEvent(this.events.toggleTimeMode);
-  },
-
   play: function() {
     if (this.getState() === 'play'){
       this.media.stop();

From 389f5cb27df2c94288d289b43ef11139918dde3d Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 09:14:58 -0700
Subject: [PATCH 15/21] Abstract CharacterString for resuability

---
 js/Character.jsx       |  1 +
 js/CharacterString.jsx | 14 ++++++++++++++
 js/Marquee.jsx         | 11 +++++------
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 js/CharacterString.jsx

diff --git a/js/Character.jsx b/js/Character.jsx
index fa33c346..965d10e1 100644
--- a/js/Character.jsx
+++ b/js/Character.jsx
@@ -6,3 +6,4 @@ module.exports = (props) => {
   return <div {...props} className={className}>{props.children}</div>;
 };
 
+// TODO: Require that props.children be a string
diff --git a/js/CharacterString.jsx b/js/CharacterString.jsx
new file mode 100644
index 00000000..faa57133
--- /dev/null
+++ b/js/CharacterString.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Character from './Character.jsx';
+
+module.exports = (props) => {
+  const text = '' + props.children;
+  const chars = text.split('');
+  return <div {...props}>
+    {chars.map(character => {
+      return <Character>{character}</Character>;
+    })};
+  </div>;
+};
+
+// TODO: Require that props.children be a string
diff --git a/js/Marquee.jsx b/js/Marquee.jsx
index 080dca72..2f06277c 100644
--- a/js/Marquee.jsx
+++ b/js/Marquee.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
 
-import Character from './Character.jsx';
+import CharacterString from './CharacterString.jsx';
 
 
 class Marquee extends React.Component {
@@ -45,11 +45,10 @@ class Marquee extends React.Component {
       // TODO: Use the spread operator
       chars = start.concat(end).slice(0, 30);
     }
-    return <div onMouseDown={this.handleMouseDown}>
-      {chars.map(character => {
-        return <Character>{character}</Character>;
-      })};
-      </div>;
+    const text = chars.join('');
+    return <CharacterString onMouseDown={this.handleMouseDown}>
+      {text}
+    </CharacterString>;
   }
 }
 

From e37d19d9aca4e59f939cc9c1c0dcc2689cb4754c Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 09:15:14 -0700
Subject: [PATCH 16/21] Move kbps and khz to redux

These are the last text nodes, so we can finally remove the old Font file.
---
 js/Kbps.jsx           | 16 ++++++++++++++++
 js/Khz.jsx            | 16 ++++++++++++++++
 js/font.js            | 28 ----------------------------
 js/main-window-dom.js |  4 ++--
 js/main-window.js     |  6 ++++--
 js/reducers.js        |  8 +++++++-
 js/skin.js            |  2 --
 js/winamp.js          |  4 ++--
 8 files changed, 47 insertions(+), 37 deletions(-)
 create mode 100644 js/Kbps.jsx
 create mode 100644 js/Khz.jsx
 delete mode 100644 js/font.js

diff --git a/js/Kbps.jsx b/js/Kbps.jsx
new file mode 100644
index 00000000..1b8dde37
--- /dev/null
+++ b/js/Kbps.jsx
@@ -0,0 +1,16 @@
+// Single line text display that can animate and hold multiple registers
+import React from 'react';
+import {connect} from 'react-redux';
+
+import CharacterString from './CharacterString.jsx';
+
+
+class Kbps extends React.Component {
+  render() {
+    return <CharacterString id='kbps'>
+      {this.props.kbps}
+    </CharacterString>;
+  }
+}
+
+module.exports = connect(state => state.media)(Kbps);
diff --git a/js/Khz.jsx b/js/Khz.jsx
new file mode 100644
index 00000000..3663a6bd
--- /dev/null
+++ b/js/Khz.jsx
@@ -0,0 +1,16 @@
+// Single line text display that can animate and hold multiple registers
+import React from 'react';
+import {connect} from 'react-redux';
+
+import CharacterString from './CharacterString.jsx';
+
+
+class Khz extends React.Component {
+  render() {
+    return <CharacterString id='khz'>
+      {this.props.khz}
+    </CharacterString>;
+  }
+}
+
+module.exports = connect(state => state.media)(Khz);
diff --git a/js/font.js b/js/font.js
deleted file mode 100644
index 0019ada7..00000000
--- a/js/font.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Manage rendering text from this skin's text.bmp file
-module.exports = function() {
-
-  // Fill a node with a <div> containing character <div>s
-  this.setNodeToString = function(node, string) {
-    var stringElement = document.createElement('div');
-    for (var i = 0, len = string.length; i < len; i++) {
-      var char = string[i].toLowerCase();
-      stringElement.appendChild(this.characterNode(char));
-    }
-    node.innerHTML = '';
-    node.appendChild(stringElement);
-  };
-
-  // Get a <div> containing char
-  this.characterNode = function(char) {
-    return this.displayCharacterInNode(char, document.createElement('div'));
-  };
-
-  // Style/populate a <div> to display a character
-  this.displayCharacterInNode = function(character, node) {
-    character = character.toString();
-    var className = 'character-' + character.charCodeAt(0);
-    node.classList.add('character');
-    node.classList.add(className);
-    return node;
-  };
-};
diff --git a/js/main-window-dom.js b/js/main-window-dom.js
index c715e1f1..fddbe670 100644
--- a/js/main-window-dom.js
+++ b/js/main-window-dom.js
@@ -45,8 +45,8 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
   ]),
   el('div', {class: 'media-info'}, [
     el('div', {id: 'song-title', class: 'text'}),
-    el('div', {id: 'kbps'}),
-    el('div', {id: 'khz'}),
+    el('div', {id: 'kbps-holder'}),
+    el('div', {id: 'khz-holder'}),
     el('div', {class: 'mono-stereo'}, [
       el('div', {id: 'mono'}),
       el('div', {id: 'stereo'})
diff --git a/js/main-window.js b/js/main-window.js
index 85026f17..f3f5d1c4 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -3,6 +3,8 @@ import Marquee from './Marquee.jsx';
 import Actions from './Actions.jsx';
 import Time from './Time.jsx';
 import ShadeTime from './ShadeTime.jsx';
+import Kbps from './Kbps.jsx';
+import Khz from './Khz.jsx';
 
 import '../css/main-window.css';
 
@@ -22,8 +24,6 @@ module.exports = {
       repeat: document.getElementById('repeat'),
       shuffle: document.getElementById('shuffle'),
       volume: document.getElementById('volume'),
-      kbps: document.getElementById('kbps'),
-      khz: document.getElementById('khz'),
       mono: document.getElementById('mono'),
       stereo: document.getElementById('stereo'),
       balance: document.getElementById('balance'),
@@ -39,6 +39,8 @@ module.exports = {
     this.winamp.renderTo(<Actions />, document.getElementById('actions-holder'));
     this.winamp.renderTo(<Time />, document.getElementById('time-holder'));
     this.winamp.renderTo(<ShadeTime />, document.getElementById('shade-time-holder'));
+    this.winamp.renderTo(<Kbps />, document.getElementById('kbps-holder'));
+    this.winamp.renderTo(<Khz />, document.getElementById('khz-holder'));
 
     this._registerListeners();
     return this;
diff --git a/js/reducers.js b/js/reducers.js
index cf8500d0..327a7abd 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -79,7 +79,9 @@ const media = (state, action) => {
     return {
       timeMode: 'ELAPSED',
       timeElapsed: 0,
-      length: null
+      length: null,
+      kbps: null,
+      khz: null
     };
   }
   switch (action.type) {
@@ -90,6 +92,10 @@ const media = (state, action) => {
       return Object.assign({}, state, {timeElapsed: action.elapsed});
     case 'SET_MEDIA_LENGTH':
       return Object.assign({}, state, {length: action.length});
+    case 'SET_MEDIA_KBPS':
+      return Object.assign({}, state, {kbps: action.kbps});
+    case 'SET_MEDIA_KHZ':
+      return Object.assign({}, state, {khz: action.khz});
     default:
       return state;
   }
diff --git a/js/skin.js b/js/skin.js
index 80df7c69..9cc62f03 100644
--- a/js/skin.js
+++ b/js/skin.js
@@ -1,11 +1,9 @@
 // Dynamically set the css background images for all the sprites
 import SKIN_SPRITES from './skin-sprites';
-import Font from './font';
 import Visualizer from './visualizer';
 import JSZip from '../node_modules/jszip/dist/jszip'; // Hack
 
 module.exports = {
-  font: new Font(),
   init: function(visualizerNode, analyser) {
     this._createNewStyleNode();
     this.visualizer = Visualizer.init(visualizerNode, analyser);
diff --git a/js/winamp.js b/js/winamp.js
index 5e05f70c..f3e7d3ff 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -256,8 +256,8 @@ module.exports = {
     function setMetaData() {
       var kbps = '128';
       var khz = Math.round(this.media.sampleRate() / 1000).toString();
-      this.skin.font.setNodeToString(document.getElementById('kbps'), kbps);
-      this.skin.font.setNodeToString(document.getElementById('khz'), khz);
+      this.dispatch({type: 'SET_MEDIA_KBPS', kbps: kbps});
+      this.dispatch({type: 'SET_MEDIA_KHZ', khz: khz});
       window.dispatchEvent(this.events.channelCountUpdated);
       window.dispatchEvent(this.events.titleUpdated);
       window.dispatchEvent(this.events.timeUpdated);

From 7525d411d4675d1b2f8cab3008f94bf990d58b46 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 09:16:41 -0700
Subject: [PATCH 17/21] Remove unused html file

---
 html/main-window.html | 85 -------------------------------------------
 1 file changed, 85 deletions(-)
 delete mode 100644 html/main-window.html

diff --git a/html/main-window.html b/html/main-window.html
deleted file mode 100644
index d898b76e..00000000
--- a/html/main-window.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<div id='main-window' class='loading stop'>
-    <div id='loading'>Loading...</div>
-    <div id='title-bar' class='selected'>
-        <div id='option'>
-            <ul id='context-menu'>
-                <li><a href='https://github.com/captbaritone/winamp2-js' target='_blank'>Winamp2-js...</a></li>
-                <li class='hr'><hr /></li>
-                <li id='context-play-file'>Play File...</li>
-                <li class='parent'>
-                <ul>
-                    <li id='context-load-skin'>Load Skin...</li>
-                    <li class='hr'><hr /></li>
-                    <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'>&lt;Base Skin&gt;</li>
-                    <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/MacOSXAqua1-5.wsz'>Mac OSX v1.5 (Aqua)</li>
-                    <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/TopazAmp1-2.wsz'>TopazAmp</li>
-                    <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/Vizor1-01.wsz'>Vizor</li>
-                    <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/XMMS-Turquoise.wsz'>XMMS Turquoise </li>
-                    <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/ZaxonRemake1-0.wsz'>Zaxon Remake</li>
-                </ul>
-                Skins
-                </li>
-                <li class='hr'><hr /></li>
-                <li id='context-exit'>Exit</li>
-            </ul>
-        </div>
-        <div id='shade-time'>
-            <div id='shade-minus-sign'></div>
-            <div id='shade-minute-first-digit' class='character'></div>
-            <div id='shade-minute-second-digit' class='character'></div>
-            <div id='shade-second-first-digit' class='character'></div>
-            <div id='shade-second-second-digit' class='character'></div>
-        </div>
-        <div id='minimize'></div>
-        <div id='shade'></div>
-        <div id='close'></div>
-    </div>
-    <div class='status'>
-        <div id='clutter-bar'>
-            <div id='button-o'></div>
-            <div id='button-a'></div>
-            <div id='button-i'></div>
-            <div id='button-d'></div>
-            <div id='button-v'></div>
-        </div>
-        <div id='play-pause'></div>
-        <div id='work-indicator'></div>
-        <div id='time'>
-            <div id='minus-sign'></div>
-            <div id='minute-first-digit'></div>
-            <div id='minute-second-digit'></div>
-            <div id='second-first-digit'></div>
-            <div id='second-second-digit'></div>
-        </div>
-        <canvas id='visualizer' width='152' height='32'></canvas>
-    </div>
-    <div class='media-info'>
-        <div id='song-title' class='text'></div>
-        <div id='kbps'></div>
-        <div id='khz'></div>
-        <div class='mono-stereo'>
-            <div id='mono'></div>
-            <div id='stereo'></div>
-        </div>
-    </div>
-    <input id='volume' type='range' min='0' max='100' step='1' value='50' />
-    <input id='balance' type='range' min='-100' max='100' step='2' value='0' />
-    <div class='windows'>
-        <div id='equalizer-button'></div>
-        <div id='playlist-button'></div>
-    </div>
-    <input id='position' type='range' min='0' max='100' step='1' value='0' />
-    <div class='actions'>
-        <div id='previous'></div>
-        <div id='play'></div>
-        <div id='pause'></div>
-        <div id='stop'></div>
-        <div id='next'></div>
-    </div>
-    <div id='eject'></div>
-    <div class='shuffle-repeat'>
-        <div id="shuffle"></div>
-        <div id="repeat"></div>
-    </div>
-    <a id='about' target='_blank' href='https://github.com/captbaritone/winamp2-js'></a>
-</div>

From 357b0c7950125b0dd1e91bb95741909212554d21 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 09:19:30 -0700
Subject: [PATCH 18/21] Remove unused DOM node bindings

---
 js/main-window.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/js/main-window.js b/js/main-window.js
index f3f5d1c4..62b19df0 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -16,9 +16,6 @@ module.exports = {
       shade: document.getElementById('shade'),
       buttonD: document.getElementById('button-d'),
       position: document.getElementById('position'),
-      volumeMessage: document.getElementById('volume-message'),
-      balanceMessage: document.getElementById('balance-message'),
-      positionMessage: document.getElementById('position-message'),
       visualizer: document.getElementById('visualizer'),
       eject: document.getElementById('eject'),
       repeat: document.getElementById('repeat'),

From 087546802f253bfa5ce91eed53a491f9bc8fdc21 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 09:55:35 -0700
Subject: [PATCH 19/21] Inline cursors in CSS

---
 css/main-window.css | 30 +++++++++++++++---------------
 package.json        |  2 ++
 webpack.config.js   |  4 ++++
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/css/main-window.css b/css/main-window.css
index 8e2f59d7..bc53e21b 100755
--- a/css/main-window.css
+++ b/css/main-window.css
@@ -3,7 +3,7 @@
     position: absolute;
     height: 116px;
     width: 275px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/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 */
@@ -59,7 +59,7 @@
     left: 0;
     height: 14px;
     width: 275px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/TITLEBAR.PNG'), auto;
+    cursor:url('../cursors/TITLEBAR.PNG'), auto;
 }
 
 #winamp2-js #option,
@@ -70,7 +70,7 @@
     height: 9px;
     width: 9px;
     top: 3px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
+    cursor:url('../cursors/MAINMENU.PNG'), auto;
 }
 
 #winamp2-js #title-bar #option {
@@ -94,7 +94,7 @@
 }
 #winamp2-js #title-bar #close {
     left: 264px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/CLOSE.PNG'), auto;
+    cursor:url('../cursors/CLOSE.PNG'), auto;
 }
 #winamp2-js #clutter-bar {
     position: absolute;
@@ -273,19 +273,19 @@
     height: 13px;
     width: 68px;
     background-position: 0 0;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 #winamp2-js #volume::-webkit-slider-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 #winamp2-js #volume::-moz-range-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 
 #winamp2-js #balance {
@@ -295,20 +295,20 @@
     height: 13px;
     width: 38px;
     background-position: 0 0;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 
 #winamp2-js #balance::-webkit-slider-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 #winamp2-js #balance::-moz-range-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 
 #winamp2-js .windows {
@@ -339,13 +339,13 @@
     top: 72px;
     width: 248px;
     height: 10px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 
 #winamp2-js #position::-webkit-slider-thumb {
     height: 10px;
     width: 29px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/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
@@ -357,7 +357,7 @@
 #winamp2-js #position::-moz-range-thumb {
     height: 10px;
     width: 29px;
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/POSBAR.PNG'), auto;
+    cursor:url('../cursors/POSBAR.PNG'), auto;
 }
 
 /* For some reason, we can't use display: none here */
@@ -444,7 +444,7 @@
 }
 
 #winamp2-js #shade-time {
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
+    cursor:url('../cursors/MAINMENU.PNG'), auto;
 }
 
 
@@ -457,7 +457,7 @@
     display: none;
 }
 #winamp2-js .shade #title-bar {
-    cursor:url('https://jordaneldredge.com/projects/winamp2-js/cursors/MAINMENU.PNG'), auto;
+    cursor:url('../cursors/MAINMENU.PNG'), auto;
 }
 
 #winamp2-js .shade .actions div {
diff --git a/package.json b/package.json
index f1755e4a..0c45c44f 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,11 @@
     "css-loader": "^0.23.1",
     "eslint": "2.*",
     "eslint-plugin-react": "^5.2.2",
+    "file-loader": "^0.9.0",
     "gzip-size-cli": "^1.0.0",
     "pretty-bytes-cli": "^1.0.0",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^1.13.0"
   },
   "dependencies": {
diff --git a/webpack.config.js b/webpack.config.js
index 6751af43..d459b17c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,6 +15,10 @@ module.exports = {
         test: /\.css$/,
         loader: 'style-loader!css-loader'
       },
+      {
+        test: /\.png$/i,
+        loader: 'url-loader?limit=100000'
+      },
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,

From 816a998df73e5adeca8170fd18367a3a4dad1008 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 10:02:32 -0700
Subject: [PATCH 20/21] Add dev instructions to readme

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 4b2b00e3..3a026282 100755
--- a/README.md
+++ b/README.md
@@ -23,6 +23,12 @@ supported](http://caniuse.com/#feat=audio-api).
 
 Open `index.html` in your browser.
 
+## Development
+
+    npm run serve
+
+Open `http://localhost:8080/webpack-dev-server/` in your browser.
+
 ## Reference
 
 - [skinspecs.pdf](http://members.xoom.it/skinart/tutorial/skinspecs..pdf)

From 4ec95923963847df89b61f8c9a0549a27d287052 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 12 Jul 2016 10:02:38 -0700
Subject: [PATCH 21/21] Fix typo in readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3a026282..8cfb6170 100755
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ for Winamp which inspired so many of us.
 
 ## License
 
-While the Winamp name, interface, sample audio file and surely property of
+While the Winamp name, interface, and, sample audio file are surely property of
 Nullsoft, the code within this project is released under the [MIT
 License](LICENSE.txt). That being said, if you do anything interesting with
 this code, please let me know. I'd love to see it.