diff --git a/js/__mocks__/mediaMock.js b/js/__mocks__/mediaMock.js
new file mode 100644
index 00000000..ccec2a2c
--- /dev/null
+++ b/js/__mocks__/mediaMock.js
@@ -0,0 +1,9 @@
+const media = {
+  addEventListener: jest.fn(),
+  setVolume: jest.fn(),
+  setBalance: jest.fn(),
+  setPreamp: jest.fn(),
+  getAnalyser: () => null,
+  on: jest.fn(),
+};
+export default media;
diff --git a/js/__mocks__/storeMock.js b/js/__mocks__/storeMock.js
new file mode 100644
index 00000000..4017830f
--- /dev/null
+++ b/js/__mocks__/storeMock.js
@@ -0,0 +1,7 @@
+import getStore from "../store";
+import Emitter from "../emitter";
+import media from "./mediaMock";
+
+export default function mockGetStore() {
+  return getStore(media, new Emitter());
+}
diff --git a/js/components/EqualizerWindow/__snapshots__/index.test.js.snap b/js/components/EqualizerWindow/__snapshots__/index.test.js.snap
index da4b09ba..3de34868 100644
--- a/js/components/EqualizerWindow/__snapshots__/index.test.js.snap
+++ b/js/components/EqualizerWindow/__snapshots__/index.test.js.snap
@@ -4,538 +4,548 @@ exports[`EqualizerWindow renders to snapshot 1`] = `
 <div
   className="window draggable"
   id="equalizer-window"
-  onMouseDown={[Function]}
 >
-  <div>
-    <div
-      className="equalizer-top title-bar draggable"
-      onDoubleClick={[Function]}
-    >
+  <div
+    onFocus={[Function]}
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+    tabIndex={-1}
+  >
+    <div>
       <div
-        id="equalizer-shade"
+        className="equalizer-top title-bar draggable"
+        onDoubleClick={[Function]}
+      >
+        <div
+          id="equalizer-shade"
+          onClick={[Function]}
+        />
+        <div
+          id="equalizer-close"
+          onClick={[Function]}
+        />
+      </div>
+      <div
+        className="selected"
+        id="on"
         onClick={[Function]}
       />
       <div
-        id="equalizer-close"
+        className=""
+        id="auto"
         onClick={[Function]}
       />
-    </div>
-    <div
-      className="selected"
-      id="on"
-      onClick={[Function]}
-    />
-    <div
-      className=""
-      id="auto"
-      onClick={[Function]}
-    />
-    <canvas
-      height={19}
-      id="eqGraph"
-      width={113}
-    />
-    <div
-      id="presets-context"
-    >
+      <canvas
+        height={19}
+        id="eqGraph"
+        width={113}
+      />
       <div
-        className="handle"
-        onClick={[Function]}
+        id="presets-context"
+      >
+        <div
+          className="handle"
+          onClick={[Function]}
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        >
+          <div
+            id="presets"
+          />
+        </div>
+      </div>
+      <div
+        className="band"
+        id="preamp"
         style={
           Object {
-            "height": "100%",
-            "width": "100%",
+            "backgroundPosition": "-0px -65px",
           }
         }
       >
         <div
-          id="presets"
-        />
-      </div>
-    </div>
-    <div
-      className="band"
-      id="preamp"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
-      <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
-      >
-        <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      id="plus12db"
-      onClick={[Function]}
-    />
-    <div
-      id="zerodb"
-      onClick={[Function]}
-    />
-    <div
-      id="minus12db"
-      onClick={[Function]}
-    />
-    <div
-      className="band"
-      id="band-60"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        id="plus12db"
+        onClick={[Function]}
+      />
+      <div
+        id="zerodb"
+        onClick={[Function]}
+      />
+      <div
+        id="minus12db"
+        onClick={[Function]}
+      />
+      <div
+        className="band"
+        id="band-60"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-170"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-170"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-310"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-310"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-600"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-600"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-1000"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-1000"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-3000"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-3000"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-6000"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-6000"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-12000"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-12000"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-14000"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-14000"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="band"
-      id="band-16000"
-      style={
-        Object {
-          "backgroundPosition": "-0px -65px",
-        }
-      }
-    >
       <div
-        className="rc-slider rc-slider-vertical"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="band"
+        id="band-16000"
+        style={
+          Object {
+            "backgroundPosition": "-0px -65px",
+          }
+        }
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
-          style={
-            Object {
-              "bottom": "0%",
-              "height": "50%",
-              "visibility": "visible",
+          className="rc-slider rc-slider-vertical"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "50%",
+                "visibility": "visible",
+              }
             }
-          }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="rc-slider-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="rc-slider-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/js/components/GenWindow/__snapshots__/index.test.js.snap b/js/components/GenWindow/__snapshots__/index.test.js.snap
index 033d6bf2..9cc5c70d 100644
--- a/js/components/GenWindow/__snapshots__/index.test.js.snap
+++ b/js/components/GenWindow/__snapshots__/index.test.js.snap
@@ -2,107 +2,117 @@
 
 exports[`GenWindow renders to snapshot 1`] = `
 <div
-  className="gen-window window selected"
-  onMouseDown={[Function]}
+  onFocus={[Function]}
   style={
     Object {
-      "height": undefined,
-      "width": undefined,
+      "height": "100%",
+      "width": "100%",
     }
   }
+  tabIndex={-1}
 >
   <div
-    className="gen-top draggable"
+    className="gen-window window selected"
+    style={
+      Object {
+        "height": undefined,
+        "width": undefined,
+      }
+    }
   >
     <div
-      className="gen-top-left draggable"
-    />
-    <div
-      className="gen-top-left-fill draggable"
-    />
-    <div
-      className="gen-top-left-end draggable"
-    />
-    <div
-      className="gen-top-title draggable"
+      className="gen-top draggable"
     >
       <div
-        className="draggable gen-text-letter gen-text-m"
+        className="gen-top-left draggable"
       />
       <div
-        className="draggable gen-text-letter gen-text-y"
+        className="gen-top-left-fill draggable"
       />
       <div
-        className="draggable gen-text-letter gen-text-space"
+        className="gen-top-left-end draggable"
       />
       <div
-        className="draggable gen-text-letter gen-text-w"
+        className="gen-top-title draggable"
+      >
+        <div
+          className="draggable gen-text-letter gen-text-m"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-y"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-space"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-w"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-i"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-n"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-d"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-o"
+        />
+        <div
+          className="draggable gen-text-letter gen-text-w"
+        />
+      </div>
+      <div
+        className="gen-top-right-end draggable"
       />
       <div
-        className="draggable gen-text-letter gen-text-i"
+        className="gen-top-right-fill draggable"
       />
       <div
-        className="draggable gen-text-letter gen-text-n"
-      />
-      <div
-        className="draggable gen-text-letter gen-text-d"
-      />
-      <div
-        className="draggable gen-text-letter gen-text-o"
-      />
-      <div
-        className="draggable gen-text-letter gen-text-w"
-      />
+        className="gen-top-right draggable"
+      >
+        <div
+          className="gen-close selected"
+          onClick={[Function]}
+        />
+      </div>
     </div>
     <div
-      className="gen-top-right-end draggable"
-    />
-    <div
-      className="gen-top-right-fill draggable"
-    />
-    <div
-      className="gen-top-right draggable"
+      className="gen-middle"
     >
       <div
-        className="gen-close selected"
-        onClick={[Function]}
-      />
-    </div>
-  </div>
-  <div
-    className="gen-middle"
-  >
-    <div
-      className="gen-middle-left draggable"
-    >
+        className="gen-middle-left draggable"
+      >
+        <div
+          className="gen-middle-left-bottom draggable"
+        />
+      </div>
       <div
-        className="gen-middle-left-bottom draggable"
+        className="gen-middle-center"
       />
+      <div
+        className="gen-middle-right draggable"
+      >
+        <div
+          className="gen-middle-right-bottom draggable"
+        />
+      </div>
     </div>
     <div
-      className="gen-middle-center"
-    />
-    <div
-      className="gen-middle-right draggable"
+      className="gen-bottom draggable"
     >
       <div
-        className="gen-middle-right-bottom draggable"
+        className="gen-bottom-left draggable"
       />
-    </div>
-  </div>
-  <div
-    className="gen-bottom draggable"
-  >
-    <div
-      className="gen-bottom-left draggable"
-    />
-    <div
-      className="gen-bottom-right draggable"
-    >
       <div
-        id="gen-resize-target"
-        onMouseDown={[Function]}
-      />
+        className="gen-bottom-right draggable"
+      >
+        <div
+          id="gen-resize-target"
+          onMouseDown={[Function]}
+        />
+      </div>
     </div>
   </div>
 </div>
diff --git a/js/components/GenWindow/index.test.js b/js/components/GenWindow/index.test.js
index d2654783..2226f7f2 100644
--- a/js/components/GenWindow/index.test.js
+++ b/js/components/GenWindow/index.test.js
@@ -1,22 +1,30 @@
 import React from "react";
+import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
+import mockGetStore from "../../__mocks__/storeMock";
 
 import { GenWindow } from "./index";
 
 describe("GenWindow", () => {
+  let store;
+  beforeEach(() => {
+    store = mockGetStore();
+  });
   it("renders to snapshot", () => {
     const tree = renderer
       .create(
-        <GenWindow
-          title="My Window"
-          selected
-          close={() => {}}
-          windowId="TEST_WINDOW_ID"
-          scrollVolume={() => {}}
-          windowSize={[0, 0]}
-        >
-          {() => {}}
-        </GenWindow>
+        <Provider store={store}>
+          <GenWindow
+            title="My Window"
+            selected
+            close={() => {}}
+            windowId="TEST_WINDOW_ID"
+            scrollVolume={() => {}}
+            windowSize={[0, 0]}
+          >
+            {() => {}}
+          </GenWindow>
+        </Provider>
       )
       .toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap
index 1d5ff940..c7fe4390 100644
--- a/js/components/MainWindow/__snapshots__/index.test.js.snap
+++ b/js/components/MainWindow/__snapshots__/index.test.js.snap
@@ -8,64 +8,26 @@ exports[`MainWindow renders to snapshot 1`] = `
   onDragOver={[Function]}
   onDragStart={[Function]}
   onDrop={[Function]}
-  onMouseDown={[Function]}
   onWheel={[Function]}
 >
   <div
-    className="selected draggable"
-    id="title-bar"
-    onDoubleClick={[Function]}
+    onFocus={[Function]}
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+    tabIndex={-1}
   >
     <div
-      id="option-context"
+      className="selected draggable"
+      id="title-bar"
+      onDoubleClick={[Function]}
     >
       <div
-        className="handle"
-        onClick={[Function]}
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
+        id="option-context"
       >
-        <div
-          className=""
-          id="option"
-          onMouseDown={[Function]}
-          title="Winamp Menu"
-        />
-      </div>
-    </div>
-    <div
-      className=""
-      id="minimize"
-      onClick={[Function]}
-      onMouseDown={[Function]}
-      title="Minimize"
-    />
-    <div
-      className=""
-      id="shade"
-      onDoubleClick={[Function]}
-      onMouseDown={[Function]}
-      title="Toggle Windowshade Mode"
-    />
-    <div
-      className=""
-      id="close"
-      onClick={[Function]}
-      onMouseDown={[Function]}
-      title="Close"
-    />
-  </div>
-  <div
-    className="status"
-  >
-    <div
-      id="clutter-bar"
-    >
-      <div>
         <div
           className="handle"
           onClick={[Function]}
@@ -77,405 +39,453 @@ exports[`MainWindow renders to snapshot 1`] = `
           }
         >
           <div
-            id="button-o"
+            className=""
+            id="option"
+            onMouseDown={[Function]}
+            title="Winamp Menu"
           />
         </div>
       </div>
       <div
-        id="button-a"
-      />
-      <div
-        id="button-i"
+        className=""
+        id="minimize"
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        title="Minimize"
       />
       <div
         className=""
-        id="button-d"
+        id="shade"
+        onDoubleClick={[Function]}
         onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        title="Toggle Doublesize Mode"
+        title="Toggle Windowshade Mode"
       />
       <div
-        id="button-v"
+        className=""
+        id="close"
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        title="Close"
       />
     </div>
     <div
-      id="play-pause"
-    />
-    <div
-      className=""
-      id="work-indicator"
-    />
-    <div
-      className="countdown"
-      id="time"
-      onClick={[Function]}
+      className="status"
     >
       <div
-        className="digit digit-0"
-        id="minute-first-digit"
-      />
-      <div
-        className="digit digit-0"
-        id="minute-second-digit"
-      />
-      <div
-        className="digit digit-0"
-        id="second-first-digit"
-      />
-      <div
-        className="digit digit-0"
-        id="second-second-digit"
-      />
-    </div>
-  </div>
-  <canvas
-    height={32}
-    id="visualizer"
-    onClick={[Function]}
-    style={
-      Object {
-        "height": 16,
-        "width": 76,
-      }
-    }
-    width={152}
-  />
-  <div
-    className="media-info"
-  >
-    <div
-      className="text"
-      id="marquee"
-      onMouseDown={[Function]}
-      title="Song Title"
-    >
-      <div
-        style={
-          Object {
-            "transform": "translateX(0px)",
-            "whiteSpace": "nowrap",
-            "willChange": "transform",
-          }
-        }
+        id="clutter-bar"
       >
-        <span
-          className=" character character-119"
+        <div>
+          <div
+            className="handle"
+            onClick={[Function]}
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+          >
+            <div
+              id="button-o"
+            />
+          </div>
+        </div>
+        <div
+          id="button-a"
+        />
+        <div
+          id="button-i"
+        />
+        <div
+          className=""
+          id="button-d"
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          title="Toggle Doublesize Mode"
+        />
+        <div
+          id="button-v"
+        />
+      </div>
+      <div
+        id="play-pause"
+      />
+      <div
+        className=""
+        id="work-indicator"
+      />
+      <div
+        className="countdown"
+        id="time"
+        onClick={[Function]}
+      >
+        <div
+          className="digit digit-0"
+          id="minute-first-digit"
+        />
+        <div
+          className="digit digit-0"
+          id="minute-second-digit"
+        />
+        <div
+          className="digit digit-0"
+          id="second-first-digit"
+        />
+        <div
+          className="digit digit-0"
+          id="second-second-digit"
+        />
+      </div>
+    </div>
+    <canvas
+      height={32}
+      id="visualizer"
+      onClick={[Function]}
+      style={
+        Object {
+          "height": 16,
+          "width": 76,
+        }
+      }
+      width={152}
+    />
+    <div
+      className="media-info"
+    >
+      <div
+        className="text"
+        id="marquee"
+        onMouseDown={[Function]}
+        title="Song Title"
+      >
+        <div
+          style={
+            Object {
+              "transform": "translateX(0px)",
+              "whiteSpace": "nowrap",
+              "willChange": "transform",
+            }
+          }
         >
-          W
-        </span>
-        <span
-          className=" character character-105"
-        >
-          i
-        </span>
-        <span
-          className=" character character-110"
-        >
-          n
-        </span>
-        <span
-          className=" character character-97"
-        >
-          a
-        </span>
-        <span
-          className=" character character-109"
-        >
-          m
-        </span>
-        <span
-          className=" character character-112"
-        >
-          p
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-50"
-        >
-          2
-        </span>
-        <span
-          className=" character character-46"
-        >
-          .
-        </span>
-        <span
-          className=" character character-57"
-        >
-          9
-        </span>
-        <span
-          className=" character character-49"
-        >
-          1
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-        >
-           
-        </span>
+          <span
+            className=" character character-119"
+          >
+            W
+          </span>
+          <span
+            className=" character character-105"
+          >
+            i
+          </span>
+          <span
+            className=" character character-110"
+          >
+            n
+          </span>
+          <span
+            className=" character character-97"
+          >
+            a
+          </span>
+          <span
+            className=" character character-109"
+          >
+            m
+          </span>
+          <span
+            className=" character character-112"
+          >
+            p
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-50"
+          >
+            2
+          </span>
+          <span
+            className=" character character-46"
+          >
+            .
+          </span>
+          <span
+            className=" character character-57"
+          >
+            9
+          </span>
+          <span
+            className=" character character-49"
+          >
+            1
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+          <span
+            className=" character character-32"
+          >
+             
+          </span>
+        </div>
+      </div>
+      <div
+        id="kbps"
+      />
+      <div
+        id="khz"
+      />
+      <div
+        className="mono-stereo"
+      >
+        <div
+          className=""
+          id="stereo"
+        />
+        <div
+          className=""
+          id="mono"
+        />
       </div>
     </div>
     <div
-      id="kbps"
-    />
-    <div
-      id="khz"
-    />
-    <div
-      className="mono-stereo"
+      id="volume"
+      style={
+        Object {
+          "backgroundPosition": "0 -315px",
+        }
+      }
     >
-      <div
-        className=""
-        id="stereo"
-      />
-      <div
-        className=""
-        id="mono"
+      <input
+        max="100"
+        min="0"
+        onChange={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        step="1"
+        title="Volume Bar"
+        type="range"
+        value={78}
       />
     </div>
-  </div>
-  <div
-    id="volume"
-    style={
-      Object {
-        "backgroundPosition": "0 -315px",
-      }
-    }
-  >
     <input
+      id="balance"
       max="100"
-      min="0"
+      min="-100"
       onChange={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
       step="1"
-      title="Volume Bar"
+      style={
+        Object {
+          "backgroundPosition": "0 -0px",
+        }
+      }
+      title="Balance"
       type="range"
-      value={78}
-    />
-  </div>
-  <input
-    id="balance"
-    max="100"
-    min="-100"
-    onChange={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    step="1"
-    style={
-      Object {
-        "backgroundPosition": "0 -0px",
-      }
-    }
-    title="Balance"
-    type="range"
-    value={0}
-  />
-  <div
-    className="windows"
-  >
-    <div
-      className="selected"
-      id="equalizer-button"
-      onClick={[Function]}
-      title="Toggle Graphical Equalizer"
+      value={0}
     />
     <div
-      className="selected"
-      id="playlist-button"
-      onClick={[Function]}
-      title="Toggle Playlist Editor"
-    />
-  </div>
-  <input
-    className="left"
-    id="position"
-    max="100"
-    min="0"
-    onChange={[Function]}
-    onInput={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    step="1"
-    title="Seeking Bar"
-    type="range"
-    value={0}
-  />
-  <div
-    className="actions"
-  >
-    <div
-      id="previous"
-      onClick={[Function]}
-      title="Previous Track"
-    />
-    <div
-      id="play"
-      onClick={[Function]}
-      title="Play"
-    />
-    <div
-      id="pause"
-      onClick={[Function]}
-      title="Pause"
-    />
-    <div
-      id="stop"
-      onClick={[Function]}
-      title="Stop"
-    />
-    <div
-      id="next"
-      onClick={[Function]}
-      title="Next Track"
-    />
-  </div>
-  <div
-    id="eject"
-    onClick={[Function]}
-    title="Open File(s)"
-  />
-  <div
-    className="shuffle-repeat"
-  >
-    <div
-      onContextMenu={[Function]}
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
+      className="windows"
     >
       <div
-        className=""
-        id="shuffle"
+        className="selected"
+        id="equalizer-button"
         onClick={[Function]}
-        title="Toggle Shuffle"
+        title="Toggle Graphical Equalizer"
+      />
+      <div
+        className="selected"
+        id="playlist-button"
+        onClick={[Function]}
+        title="Toggle Playlist Editor"
+      />
+    </div>
+    <input
+      className="left"
+      id="position"
+      max="100"
+      min="0"
+      onChange={[Function]}
+      onInput={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      step="1"
+      title="Seeking Bar"
+      type="range"
+      value={0}
+    />
+    <div
+      className="actions"
+    >
+      <div
+        id="previous"
+        onClick={[Function]}
+        title="Previous Track"
+      />
+      <div
+        id="play"
+        onClick={[Function]}
+        title="Play"
+      />
+      <div
+        id="pause"
+        onClick={[Function]}
+        title="Pause"
+      />
+      <div
+        id="stop"
+        onClick={[Function]}
+        title="Stop"
+      />
+      <div
+        id="next"
+        onClick={[Function]}
+        title="Next Track"
       />
     </div>
     <div
-      onContextMenu={[Function]}
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
+      id="eject"
+      onClick={[Function]}
+      title="Open File(s)"
+    />
+    <div
+      className="shuffle-repeat"
     >
       <div
-        className=""
-        id="repeat"
-        onClick={[Function]}
-        title="Toggle Repeat"
-      />
+        onContextMenu={[Function]}
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          className=""
+          id="shuffle"
+          onClick={[Function]}
+          title="Toggle Shuffle"
+        />
+      </div>
+      <div
+        onContextMenu={[Function]}
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          className=""
+          id="repeat"
+          onClick={[Function]}
+          title="Toggle Repeat"
+        />
+      </div>
     </div>
+    <a
+      href="https://webamp.org/about"
+      id="about"
+      target="blank"
+      title="About"
+    />
   </div>
-  <a
-    href="https://webamp.org/about"
-    id="about"
-    target="blank"
-    title="About"
-  />
 </div>
 `;
diff --git a/js/components/MainWindow/index.test.js b/js/components/MainWindow/index.test.js
index 3299d050..4e8d4c4b 100644
--- a/js/components/MainWindow/index.test.js
+++ b/js/components/MainWindow/index.test.js
@@ -1,21 +1,12 @@
 import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
-import getStore from "../../store";
+import mockGetStore from "../../__mocks__/storeMock";
+import media from "../../__mocks__/mediaMock";
 import { SET_SKIN_DATA } from "../../actionTypes";
-import Emitter from "../../emitter";
 
 import MainWindow from "./index";
 
-const media = {
-  addEventListener: jest.fn(),
-  setVolume: jest.fn(),
-  setBalance: jest.fn(),
-  setPreamp: jest.fn(),
-  getAnalyser: () => null,
-  on: jest.fn(),
-};
-
 const canvasMockify = require("canvas-mock");
 
 function createNodeMock(element) {
@@ -30,7 +21,7 @@ function createNodeMock(element) {
 describe("MainWindow", () => {
   let store;
   beforeEach(() => {
-    store = getStore(media, new Emitter());
+    store = mockGetStore();
     store.dispatch({ type: SET_SKIN_DATA, data: {} });
   });
 
diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
index 8d5aa782..7b82598a 100644
--- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
+++ b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
@@ -8,7 +8,6 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
   onDragOver={[Function]}
   onDragStart={[Function]}
   onDrop={[Function]}
-  onMouseDown={[Function]}
   onWheel={[Function]}
   style={
     Object {
@@ -21,404 +20,415 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
   }
 >
   <div
-    className="playlist-top draggable"
-    onDoubleClick={[Function]}
+    onFocus={[Function]}
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+    tabIndex={-1}
   >
     <div
-      className="playlist-top-left draggable"
-    />
-    <div
-      className="playlist-top-left-spacer draggable"
-    />
-    <div
-      className="playlist-top-left-fill draggable"
-    />
-    <div
-      className="playlist-top-title draggable"
-    />
-    <div
-      className="playlist-top-right-spacer draggable"
-    />
-    <div
-      className="playlist-top-right-fill draggable"
-    />
-    <div
-      className="playlist-top-right draggable"
+      className="playlist-top draggable"
+      onDoubleClick={[Function]}
     >
       <div
-        id="playlist-shade-button"
-        onClick={[Function]}
+        className="playlist-top-left draggable"
       />
       <div
-        id="playlist-close-button"
-        onClick={[Function]}
+        className="playlist-top-left-spacer draggable"
       />
-    </div>
-  </div>
-  <div
-    className="playlist-middle draggable"
-  >
-    <div
-      className="playlist-middle-left draggable"
-    />
-    <div
-      className="playlist-middle-center"
-    >
       <div
-        className="playlist-tracks"
-        onClick={[Function]}
-        onWheel={[Function]}
-        style={
-          Object {
-            "height": "100%",
-          }
-        }
+        className="playlist-top-left-fill draggable"
+      />
+      <div
+        className="playlist-top-title draggable"
+      />
+      <div
+        className="playlist-top-right-spacer draggable"
+      />
+      <div
+        className="playlist-top-right-fill draggable"
+      />
+      <div
+        className="playlist-top-right draggable"
       >
         <div
-          className="playlist-track-titles"
+          id="playlist-shade-button"
+          onClick={[Function]}
         />
         <div
-          className="playlist-track-durations"
+          id="playlist-close-button"
+          onClick={[Function]}
         />
       </div>
     </div>
     <div
-      className="playlist-middle-right draggable"
+      className="playlist-middle draggable"
     >
       <div
-        className="rc-slider rc-slider-disabled rc-slider-vertical playlist-scrollbar"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchStart={[Function]}
+        className="playlist-middle-left draggable"
+      />
+      <div
+        className="playlist-middle-center"
       >
         <div
-          className="rc-slider-rail"
-          style={Object {}}
-        />
-        <div
-          className="rc-slider-track"
+          className="playlist-tracks"
+          onClick={[Function]}
+          onWheel={[Function]}
           style={
             Object {
-              "bottom": "0%",
-              "height": "0%",
-              "visibility": "visible",
+              "height": "100%",
             }
           }
-        />
-        <div
-          className="rc-slider-step"
-        />
-        <div
-          className="playlist-scrollbar-handle"
-        />
-        <div
-          className="rc-slider-mark"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="playlist-bottom draggable"
-  >
-    <div
-      className="playlist-bottom-left draggable"
-    >
-      <div
-        className="playlist-menu"
-        id="playlist-add-menu"
-        onClick={[Function]}
-      >
-        <div
-          className="bar"
-        />
+        >
+          <div
+            className="playlist-track-titles"
+          />
+          <div
+            className="playlist-track-durations"
+          />
+        </div>
       </div>
       <div
-        className="playlist-menu"
-        id="playlist-remove-menu"
-        onClick={[Function]}
+        className="playlist-middle-right draggable"
       >
         <div
-          className="bar"
-        />
-      </div>
-      <div
-        className="playlist-menu"
-        id="playlist-selection-menu"
-        onClick={[Function]}
-      >
-        <div
-          className="bar"
-        />
-      </div>
-      <div
-        className="playlist-menu"
-        id="playlist-misc-menu"
-        onClick={[Function]}
-      >
-        <div
-          className="bar"
-        />
+          className="rc-slider rc-slider-disabled rc-slider-vertical playlist-scrollbar"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="rc-slider-rail"
+            style={Object {}}
+          />
+          <div
+            className="rc-slider-track"
+            style={
+              Object {
+                "bottom": "0%",
+                "height": "0%",
+                "visibility": "visible",
+              }
+            }
+          />
+          <div
+            className="rc-slider-step"
+          />
+          <div
+            className="playlist-scrollbar-handle"
+          />
+          <div
+            className="rc-slider-mark"
+          />
+        </div>
       </div>
     </div>
     <div
-      className="playlist-bottom-center draggable"
-    />
-    <div
-      className="playlist-bottom-right draggable"
+      className="playlist-bottom draggable"
     >
       <div
-        className="playlist-running-time-display draggable"
+        className="playlist-bottom-left draggable"
       >
-        <div>
+        <div
+          className="playlist-menu"
+          id="playlist-add-menu"
+          onClick={[Function]}
+        >
+          <div
+            className="bar"
+          />
+        </div>
+        <div
+          className="playlist-menu"
+          id="playlist-remove-menu"
+          onClick={[Function]}
+        >
+          <div
+            className="bar"
+          />
+        </div>
+        <div
+          className="playlist-menu"
+          id="playlist-selection-menu"
+          onClick={[Function]}
+        >
+          <div
+            className="bar"
+          />
+        </div>
+        <div
+          className="playlist-menu"
+          id="playlist-misc-menu"
+          onClick={[Function]}
+        >
+          <div
+            className="bar"
+          />
+        </div>
+      </div>
+      <div
+        className="playlist-bottom-center draggable"
+      />
+      <div
+        className="playlist-bottom-right draggable"
+      >
+        <div
+          className="playlist-running-time-display draggable"
+        >
+          <div>
+            <span
+              className=" character character-48"
+            >
+              0
+            </span>
+            <span
+              className=" character character-58"
+            >
+              :
+            </span>
+            <span
+              className=" character character-48"
+            >
+              0
+            </span>
+            <span
+              className=" character character-48"
+            >
+              0
+            </span>
+            <span
+              className=" character character-47"
+            >
+              /
+            </span>
+            <span
+              className=" character character-48"
+            >
+              0
+            </span>
+            <span
+              className=" character character-58"
+            >
+              :
+            </span>
+            <span
+              className=" character character-48"
+            >
+              0
+            </span>
+            <span
+              className=" character character-48"
+            >
+              0
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+            <span
+              className=" character character-32"
+            >
+               
+            </span>
+          </div>
+        </div>
+        <div
+          className="playlist-action-buttons"
+        >
+          <div
+            className="playlist-previous-button"
+            onClick={[Function]}
+          />
+          <div
+            className="playlist-play-button"
+            onClick={[Function]}
+          />
+          <div
+            className="playlist-pause-button"
+            onClick={[Function]}
+          />
+          <div
+            className="playlist-stop-button"
+            onClick={[Function]}
+          />
+          <div
+            className="playlist-next-button"
+            onClick={[Function]}
+          />
+          <div
+            className="playlist-eject-button"
+            onClick={[Function]}
+          />
+        </div>
+        <div
+          className="mini-time countdown"
+          onClick={[Function]}
+        >
           <span
-            className=" character character-48"
+            className="background-character character character-32"
+            style={
+              Object {
+                "left": 1,
+              }
+            }
           >
-            0
+             
           </span>
           <span
-            className=" character character-58"
+            className="background-character character character-32"
+            style={
+              Object {
+                "left": 7,
+              }
+            }
           >
-            :
+             
           </span>
           <span
-            className=" character character-48"
+            className="background-character character character-32"
+            style={
+              Object {
+                "left": 12,
+              }
+            }
           >
-            0
+             
           </span>
           <span
-            className=" character character-48"
+            className="background-character character character-32"
+            style={
+              Object {
+                "left": 20,
+              }
+            }
           >
-            0
+             
           </span>
           <span
-            className=" character character-47"
-          >
-            /
-          </span>
-          <span
-            className=" character character-48"
-          >
-            0
-          </span>
-          <span
-            className=" character character-58"
-          >
-            :
-          </span>
-          <span
-            className=" character character-48"
-          >
-            0
-          </span>
-          <span
-            className=" character character-48"
-          >
-            0
-          </span>
-          <span
-            className=" character character-32"
-          >
-             
-          </span>
-          <span
-            className=" character character-32"
-          >
-             
-          </span>
-          <span
-            className=" character character-32"
-          >
-             
-          </span>
-          <span
-            className=" character character-32"
+            className="background-character character character-32"
+            style={
+              Object {
+                "left": 25,
+              }
+            }
           >
              
           </span>
           <span
             className=" character character-32"
+            style={
+              Object {
+                "left": 1,
+              }
+            }
           >
              
           </span>
           <span
             className=" character character-32"
+            style={
+              Object {
+                "left": 7,
+              }
+            }
           >
              
           </span>
           <span
             className=" character character-32"
+            style={
+              Object {
+                "left": 12,
+              }
+            }
           >
              
           </span>
           <span
             className=" character character-32"
+            style={
+              Object {
+                "left": 20,
+              }
+            }
           >
              
           </span>
           <span
             className=" character character-32"
+            style={
+              Object {
+                "left": 25,
+              }
+            }
           >
              
           </span>
         </div>
-      </div>
-      <div
-        className="playlist-action-buttons"
-      >
         <div
-          className="playlist-previous-button"
+          className="playlist-menu"
+          id="playlist-list-menu"
+          onClick={[Function]}
+        >
+          <div
+            className="bar"
+          />
+        </div>
+        <div
+          id="playlist-scroll-up-button"
           onClick={[Function]}
         />
         <div
-          className="playlist-play-button"
+          id="playlist-scroll-down-button"
           onClick={[Function]}
         />
         <div
-          className="playlist-pause-button"
-          onClick={[Function]}
-        />
-        <div
-          className="playlist-stop-button"
-          onClick={[Function]}
-        />
-        <div
-          className="playlist-next-button"
-          onClick={[Function]}
-        />
-        <div
-          className="playlist-eject-button"
-          onClick={[Function]}
+          id="playlist-resize-target"
+          onMouseDown={[Function]}
         />
       </div>
-      <div
-        className="mini-time countdown"
-        onClick={[Function]}
-      >
-        <span
-          className="background-character character character-32"
-          style={
-            Object {
-              "left": 1,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className="background-character character character-32"
-          style={
-            Object {
-              "left": 7,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className="background-character character character-32"
-          style={
-            Object {
-              "left": 12,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className="background-character character character-32"
-          style={
-            Object {
-              "left": 20,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className="background-character character character-32"
-          style={
-            Object {
-              "left": 25,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-          style={
-            Object {
-              "left": 1,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-          style={
-            Object {
-              "left": 7,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-          style={
-            Object {
-              "left": 12,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-          style={
-            Object {
-              "left": 20,
-            }
-          }
-        >
-           
-        </span>
-        <span
-          className=" character character-32"
-          style={
-            Object {
-              "left": 25,
-            }
-          }
-        >
-           
-        </span>
-      </div>
-      <div
-        className="playlist-menu"
-        id="playlist-list-menu"
-        onClick={[Function]}
-      >
-        <div
-          className="bar"
-        />
-      </div>
-      <div
-        id="playlist-scroll-up-button"
-        onClick={[Function]}
-      />
-      <div
-        id="playlist-scroll-down-button"
-        onClick={[Function]}
-      />
-      <div
-        id="playlist-resize-target"
-        onMouseDown={[Function]}
-      />
     </div>
   </div>
 </div>