From d24b86e1894ee654d8b5fd5fb4c8491830666e32 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 6 Dec 2019 06:24:21 -0800
Subject: [PATCH] Rm media library (#957)

* Remove CSS

* Remove LibraryButton

* Remove Sidebar

* Remove LibraryTable

* Remove MediaLibrary components

* Clean up skin stuff and some odds and ends

* Clean up constants

* Remove Media Library from compiled CSS
---
 css/base-skin.css                             |  38 ----
 css/media-library-window.css                  | 102 ----------
 demo/js/index.js                              |  20 +-
 js/actionTypes.ts                             |   1 -
 js/components/App.tsx                         |   3 -
 .../MediaLibraryWindow/AlbumsTable.tsx        |  17 --
 .../MediaLibraryWindow/ArtistsTable.tsx       |  19 --
 .../MediaLibraryWindow/LibraryButton.tsx      |  16 --
 .../MediaLibraryWindow/LibraryLayout.tsx      | 176 ------------------
 .../MediaLibraryWindow/LibraryTable.tsx       |  72 -------
 js/components/MediaLibraryWindow/Sidebar.tsx  |  45 -----
 .../MediaLibraryWindow/TracksTable.tsx        |  98 ----------
 js/components/MediaLibraryWindow/index.tsx    |  20 --
 js/components/Skin.js                         |  66 -------
 js/constants.ts                               |   1 -
 js/reducers/windows.ts                        |  21 ---
 js/selectors.ts                               |  16 --
 js/skinSelectors.ts                           |   9 -
 js/skinSprites.ts                             |   4 +
 js/trackUtils.ts                              |   9 -
 js/types.ts                                   |   1 -
 js/utils.test.ts                              |  87 ---------
 js/utils.ts                                   |  36 ----
 js/webampLazy.tsx                             |   6 -
 24 files changed, 5 insertions(+), 878 deletions(-)
 delete mode 100644 css/media-library-window.css
 delete mode 100644 js/components/MediaLibraryWindow/AlbumsTable.tsx
 delete mode 100644 js/components/MediaLibraryWindow/ArtistsTable.tsx
 delete mode 100644 js/components/MediaLibraryWindow/LibraryButton.tsx
 delete mode 100644 js/components/MediaLibraryWindow/LibraryLayout.tsx
 delete mode 100644 js/components/MediaLibraryWindow/LibraryTable.tsx
 delete mode 100644 js/components/MediaLibraryWindow/Sidebar.tsx
 delete mode 100644 js/components/MediaLibraryWindow/TracksTable.tsx
 delete mode 100644 js/components/MediaLibraryWindow/index.tsx

diff --git a/css/base-skin.css b/css/base-skin.css
index bf0a1257..3568eb3b 100644
--- a/css/base-skin.css
+++ b/css/base-skin.css
@@ -225,7 +225,6 @@
 #webamp .gen-window .gen-middle-right {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAdCAYAAACXFC2jAAAALElEQVQ4T2PMyqr6f2D/MQYYcHC0YoDxP395y8A4qoBhNBwg6WM0HAZXOAAAZMQtu5vd5AgAAAAASUVORK5CYII=)}
 #webamp .gen-window .gen-middle-right-bottom {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAYCAYAAADH2bwQAAAAKUlEQVQ4T2PMyqr6f2D/MQYYcHC0YoDxP395y8A4qoBhNBwg6WMEhQMAnDr5qQGVDEcAAAAASUVORK5CYII=)}
 #webamp .gen-window .gen-close:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2PcMjH5PwMBwAhStOPMA4bvjD8Yrl9+B1euqSvEwPmfg8HDRIEBrGj92RtgBUY6UmDFIMlzV54xgBQGGmtAFLUtOAZWAJIIt1VkWHn4PpxflWCFUATSpSfAz5A3cSvDpHxvhksfPoJNR1FE0CSi3ESU7wiFEwDes2XpVzKmTwAAAABJRU5ErkJggg==)}
-#webamp #webamp-media-library button {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAPCAYAAAB0i5aaAAAAhUlEQVRIS2Ncu/XYf4YhCK7fv8/ACHK8k5flkHL+vm3HGZauW4tw/Lnz14eEBz48/8AACvVjx44NTcefO3+O4fy166OOp2tyAyWb0ZCna5BDLRsN+YEIdZCdoyE/qEIeVOUOFYBSVIIcDapyv394P1TcD6lhW6Ys/Q/yyY/vP4aMw2EOBQAnuriposTxowAAAABJRU5ErkJggg==)}
 #webamp .character-48 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAALklEQVQYV2NkYGD4z/CIAQLkIBQjwyOG/zAOWFIOWRBJNUQlTCuGSpAEXBCLRQAyQhABbALQ/gAAAABJRU5ErkJggg==)}
 #webamp .character-49 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAJElEQVQYV2NkYGD4zwACjxgYGOTALAZGsCBIAARQBLGqJFsQAB97DAFASJPiAAAAAElFTkSuQmCC)}
 #webamp .character-50 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAL0lEQVQYV2NkeMTwnwEG5CAMRgYGJMFHDAwMcngFQSpAAK4dZCaUAzOaEcUiqGoALSMMAep9mTsAAAAASUVORK5CYII=)}
@@ -416,40 +415,3 @@
 #webamp #volume {cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==), auto}
 #webamp #volume input {cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==), auto}
 #webamp #balance {cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==), auto}
-#webamp-media-library {
-       background-color: rgb(56,55,87);
-       color: rgb(255,255,255);
-    }
-#webamp-media-library input {
-       caret-color: rgb(255,255,255);
-    }
-#webamp-media-library .webamp-media-library-item {
-       color: rgb(0,255,0);
-       background-color: rgb(0,0,0);
-       border-right: 1px solid rgb(117,116,139);
-       border-bottom: 1px solid rgb(117,116,139);
-    }
-#webamp-media-library button {
-       color: rgb(57,57,66);
-    }
-#webamp-media-library .webamp-media-library-vertical-divider {
-    }
-#webamp-media-library .webamp-media-library-vertical-divider-line,
-     #webamp-media-library .webamp-media-library-horizontal-divider-line
-     {
-       background-color: rgb(117,116,139);
-    }
-#webamp-media-library .webamp-media-library-table {
-       color: rgb(0,255,0);
-       background-color: rgb(0,0,0);
-    }
-#webamp-media-library .webamp-media-library-table thead {
-       color: rgb(255,255,255);
-       background-color: rgb(72,72,120);
-    }
-#webamp-media-library .webamp-media-library-table thead th {
-       border-top: 1px solid rgb(108,108,180);
-       border-left: 1px solid rgb(108,108,180);
-       border-bottom: 1px solid rgb(36,36,60);
-       border-right: 1px solid rgb(36,36,60);
-    }
diff --git a/css/media-library-window.css b/css/media-library-window.css
deleted file mode 100644
index 7382d77f..00000000
--- a/css/media-library-window.css
+++ /dev/null
@@ -1,102 +0,0 @@
-#webamp-media-library {
-  font-size: 11px;
-  font-family: "MS Sans Serif", "Segoe UI", sans-serif;
-  -webkit-font-smoothing: none;
-  padding-right: 2px;
-  padding-bottom: 3px;
-  user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -webkit-touch-callout: none;
-  -o-user-select: none;
-  -moz-user-select: none;
-}
-
-#webamp-media-library input {
-  height: 15px;
-  border: none;
-  background-color: inherit;
-  padding: 0;
-}
-
-#webamp-media-library ul {
-  list-style: none;
-}
-
-#webamp-media-library ul {
-  padding: 0;
-  margin: 0;
-}
-
-#webamp-media-library ul li ul {
-  padding-left: 10px;
-}
-
-#webamp-media-library .webamp-media-library-vertical-divider {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  cursor: col-resize;
-}
-
-#webamp-media-library .webamp-media-library-vertical-divider-line {
-  width: 1px;
-  height: 100%;
-}
-
-#webamp-media-library .webamp-media-library-horizontal-divider {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 0px;
-  padding-right: 0px;
-  cursor: row-resize;
-}
-
-#webamp-media-library .webamp-media-library-horizontal-divider-line {
-  height: 1px;
-  width: 100%;
-}
-
-#webamp-media-library .webamp-media-library-item {
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-#webamp-media-library .webamp-media-library-table .library-table-heading > div {
-  margin-right: 1px;
-  margin-bottom: 1px;
-}
-
-#webamp-media-library
-  .webamp-media-library-table
-  .library-table-heading
-  > div:active {
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 1px;
-  margin-left: 1px;
-  border: 1px solid transparent;
-}
-
-#webamp-media-library .library-button {
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  outline: inherit;
-  height: 15px;
-  cursor: inherit;
-  display: inline-grid;
-  grid-template-columns: 4px auto 4px;
-  margin-right: 4px;
-  align-items: stretch;
-}
-
-#webamp-media-library .library-button-center {
-  text-align: center;
-}
-
-#webamp-media-library-track-summary-duration {
-  /* This plus the margin-right on the button add up to 8px; */
-  margin-left: 4px;
-}
diff --git a/demo/js/index.js b/demo/js/index.js
index 11667394..3b3660cb 100644
--- a/demo/js/index.js
+++ b/demo/js/index.js
@@ -5,7 +5,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import createMiddleware from "raven-for-redux";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
-import base from "../../skins/base-2.91-png.wsz";
 import { WINDOWS } from "../../js/constants";
 import * as Selectors from "../../js/selectors";
 
@@ -54,17 +53,9 @@ const MIN_MILKDROP_WIDTH = 725;
 
 let screenshot = false;
 let skinUrl = configSkinUrl;
-let library = false;
 if ("URLSearchParams" in window) {
   const params = new URLSearchParams(location.search);
   screenshot = params.get("screenshot");
-  library = Boolean(params.get("library"));
-  // The default skin CSS baked into the JS library does not have full Media
-  // Library support. If we are going to show the library we have to load a
-  // skin at start time.
-  if (library && skinUrl == null) {
-    skinUrl = base;
-  }
   skinUrl = params.get("skinUrl") || skinUrl;
 }
 
@@ -123,21 +114,13 @@ Raven.context(async () => {
   let __initialWindowLayout = null;
   if (isButterchurnSupported()) {
     const startWithMilkdropHidden =
-      library ||
       document.body.clientWidth < MIN_MILKDROP_WIDTH ||
       skinUrl != null ||
       screenshot;
 
     __butterchurnOptions = getButterchurnOptions(startWithMilkdropHidden);
 
-    if (library) {
-      __initialWindowLayout = {
-        [WINDOWS.MAIN]: { position: { x: 0, y: 0 } },
-        [WINDOWS.EQUALIZER]: { position: { x: 0, y: 116 } },
-        [WINDOWS.PLAYLIST]: { position: { x: 0, y: 232 }, size: [0, 4] },
-        [WINDOWS.MEDIA_LIBRARY]: { position: { x: 275, y: 0 }, size: [7, 12] },
-      };
-    } else if (startWithMilkdropHidden) {
+    if (startWithMilkdropHidden) {
       __initialWindowLayout = {
         [WINDOWS.MAIN]: { position: { x: 0, y: 0 } },
         [WINDOWS.EQUALIZER]: { position: { x: 0, y: 116 } },
@@ -170,7 +153,6 @@ Raven.context(async () => {
       import(
         /* webpackChunkName: "music-metadata-browser" */ "music-metadata-browser/dist/index"
       ),
-    __enableMediaLibrary: library,
     __initialWindowLayout,
     __initialState: screenshot ? screenshotInitialState : initialState,
     __butterchurnOptions,
diff --git a/js/actionTypes.ts b/js/actionTypes.ts
index 8daa196b..2e129a1a 100644
--- a/js/actionTypes.ts
+++ b/js/actionTypes.ts
@@ -73,7 +73,6 @@ export const LOAD_SERIALIZED_STATE = "LOAD_SERIALIZED_STATE";
 export const RESET_WINDOW_SIZES = "RESET_WINDOW_SIZES";
 export const BROWSER_WINDOW_SIZE_CHANGED = "BROWSER_WINDOW_SIZE_CHANGED";
 export const LOAD_DEFAULT_SKIN = "LOAD_DEFAULT_SKIN";
-export const ENABLE_MEDIA_LIBRARY = "ENABLE_MEDIA_LIBRARY";
 export const ENABLE_MILKDROP = "ENABLE_MILKDROP";
 export const SET_MILKDROP_DESKTOP = "SET_MILKDROP_DESKTOP";
 export const SET_VISUALIZER_STYLE = "SET_VISUALIZER_STYLE";
diff --git a/js/components/App.tsx b/js/components/App.tsx
index 0c60237a..e40ac16a 100644
--- a/js/components/App.tsx
+++ b/js/components/App.tsx
@@ -20,7 +20,6 @@ import WindowManager from "./WindowManager";
 import MainWindow from "./MainWindow";
 import PlaylistWindow from "./PlaylistWindow";
 import EqualizerWindow from "./EqualizerWindow";
-import MediaLibraryWindow from "./MediaLibraryWindow";
 import Skin from "./Skin";
 
 import "../../css/webamp.css";
@@ -123,8 +122,6 @@ class App extends React.Component<Props> {
           return <EqualizerWindow />;
         case WINDOWS.PLAYLIST:
           return <PlaylistWindow analyser={media.getAnalyser()} />;
-        case WINDOWS.MEDIA_LIBRARY:
-          return <MediaLibraryWindow />;
         case WINDOWS.MILKDROP:
           return <MilkdropWindow analyser={media.getAnalyser()} />;
         default:
diff --git a/js/components/MediaLibraryWindow/AlbumsTable.tsx b/js/components/MediaLibraryWindow/AlbumsTable.tsx
deleted file mode 100644
index 6db9dd98..00000000
--- a/js/components/MediaLibraryWindow/AlbumsTable.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from "react";
-import LibraryTable from "./LibraryTable";
-
-const AlbumsTable = React.memo(() => {
-  return (
-    <LibraryTable
-      headings={["Album", "Tracks"]}
-      rows={[
-        ["All (1 album)", "1"],
-        ["Ben Mason", "1"],
-      ]}
-      widths={[50, 200]}
-    />
-  );
-});
-
-export default AlbumsTable;
diff --git a/js/components/MediaLibraryWindow/ArtistsTable.tsx b/js/components/MediaLibraryWindow/ArtistsTable.tsx
deleted file mode 100644
index 7e6e58b2..00000000
--- a/js/components/MediaLibraryWindow/ArtistsTable.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react";
-import LibraryTable from "./LibraryTable";
-
-interface Props {}
-
-export default class ArtistsTable extends React.Component<Props> {
-  render() {
-    return (
-      <LibraryTable
-        headings={["Album", "Tracks", "Other"]}
-        rows={[
-          ["All (1 album)", "1", "1"],
-          ["Ben Mason", "1", "1"],
-        ]}
-        widths={[100, 150, 200]}
-      />
-    );
-  }
-}
diff --git a/js/components/MediaLibraryWindow/LibraryButton.tsx b/js/components/MediaLibraryWindow/LibraryButton.tsx
deleted file mode 100644
index 14dedcc4..00000000
--- a/js/components/MediaLibraryWindow/LibraryButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-type Props = React.HTMLAttributes<HTMLDivElement>;
-
-// TODO: This should be a `<button>` but I couldn't figure out how to style it with css grid
-const LibraryButton = (props: Props) => {
-  const { children, ...passThroughProps } = props;
-  return (
-    <div className="library-button" {...passThroughProps}>
-      <span className="library-button-left" />
-      <span className="library-button-center">{children}</span>
-      <span className="library-button-right" />
-    </div>
-  );
-};
-
-export default LibraryButton;
diff --git a/js/components/MediaLibraryWindow/LibraryLayout.tsx b/js/components/MediaLibraryWindow/LibraryLayout.tsx
deleted file mode 100644
index de4d8d8b..00000000
--- a/js/components/MediaLibraryWindow/LibraryLayout.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { ReactNode } from "react";
-import { connect } from "react-redux";
-import GenWindow from "../GenWindow";
-import { WINDOWS } from "../../constants";
-import { AppState, SkinGenExColors } from "../../types";
-import * as Selectors from "../../selectors";
-
-interface StateProps {
-  skinGenExColors: SkinGenExColors;
-}
-
-interface OwnProps {
-  sidebar: ReactNode;
-  artists: ReactNode;
-  albums: ReactNode;
-  tracks: ReactNode;
-}
-
-type Props = StateProps & OwnProps;
-
-interface State {
-  sidebarWidth: number;
-  topPlaylistSectionHeight: number;
-  artistsPanelWidth: number;
-}
-
-const DIVIDER_WIDTH = 9;
-// TODO: Tune these
-const SIDEBAR_MIN = 25;
-const SIDEBAR_MAX = 200;
-
-class LibraryLayout extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      sidebarWidth: 100, // Pixels
-      topPlaylistSectionHeight: 0.25, // Percent
-      artistsPanelWidth: 0.5, // Percent
-    };
-  }
-
-  _onMouseMove(cb: (e: MouseEvent) => void) {
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", cb);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-    // TODO: Technically there's a leak here since the component could unmount while we are moving
-    document.addEventListener("mousemove", cb);
-    document.addEventListener("mouseup", handleMouseUp);
-  }
-
-  _handleSidebarMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    const { pageX: startX } = e;
-    const initialWidth = this.state.sidebarWidth;
-    this._onMouseMove((moveEvent: MouseEvent) => {
-      let sidebarWidth = initialWidth + moveEvent.pageX - startX;
-      if (sidebarWidth < SIDEBAR_MIN) {
-        sidebarWidth = 0;
-      }
-      sidebarWidth = Math.min(sidebarWidth, SIDEBAR_MAX);
-
-      this.setState({ sidebarWidth });
-    });
-  };
-
-  _handlePlaylistResizeMouseDown = (
-    e: React.MouseEvent<HTMLDivElement>,
-    windowHeight: number
-  ) => {
-    const { pageY: startY } = e;
-    const avaliableHeight = windowHeight - DIVIDER_WIDTH;
-    const initialHeight = avaliableHeight * this.state.topPlaylistSectionHeight;
-
-    this._onMouseMove((moveEvent: MouseEvent) => {
-      const deltaY = moveEvent.pageY - startY;
-      const topPlaylistSectionPixelHeight = initialHeight + deltaY;
-      this.setState({
-        topPlaylistSectionHeight:
-          topPlaylistSectionPixelHeight / avaliableHeight,
-      });
-    });
-  };
-
-  _handleArtistsResizeMouseDown = (
-    e: React.MouseEvent<HTMLDivElement>,
-    windowWidth: number
-  ) => {
-    const { pageX: startX } = e;
-    const avaliableWidth =
-      windowWidth - DIVIDER_WIDTH - this.state.sidebarWidth;
-    const initialWidth = avaliableWidth * this.state.artistsPanelWidth;
-
-    this._onMouseMove((moveEvent: MouseEvent) => {
-      const deltaX = moveEvent.pageX - startX;
-      const artistsPanelPixelWidth = initialWidth + deltaX;
-      this.setState({
-        artistsPanelWidth: artistsPanelPixelWidth / avaliableWidth,
-      });
-    });
-  };
-
-  render() {
-    return (
-      <GenWindow title={"Winamp Library"} windowId={WINDOWS.MEDIA_LIBRARY}>
-        {({ width, height }) => (
-          <div
-            id="webamp-media-library"
-            style={{
-              // TODO: There's probably a better way to fill all avalaible space.
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              left: 0,
-              right: 0,
-              display: "grid",
-              gridTemplateColumns: `${this.state.sidebarWidth}px ${DIVIDER_WIDTH}px auto`,
-            }}
-          >
-            {this.state.sidebarWidth === 0 ? <div /> : this.props.sidebar}
-            <div
-              className="webamp-media-library-vertical-divider"
-              onMouseDown={this._handleSidebarMouseDown}
-            >
-              <div className="webamp-media-library-vertical-divider-line" />
-            </div>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateRows: `${
-                  this.state.topPlaylistSectionHeight
-                }fr ${DIVIDER_WIDTH}px ${1 -
-                  this.state.topPlaylistSectionHeight}fr`,
-              }}
-            >
-              <div
-                style={{
-                  display: "grid",
-                  gridTemplateColumns: `${
-                    this.state.artistsPanelWidth
-                  }fr ${DIVIDER_WIDTH}px ${1 - this.state.artistsPanelWidth}fr`,
-                }}
-              >
-                {this.props.artists}
-                <div
-                  className="webamp-media-library-vertical-divider"
-                  onMouseDown={(e: React.MouseEvent<HTMLDivElement>) =>
-                    this._handleArtistsResizeMouseDown(e, width)
-                  }
-                >
-                  <div className="webamp-media-library-vertical-divider-line" />
-                </div>
-                {this.props.albums}
-              </div>
-              <div
-                className="webamp-media-library-horizontal-divider"
-                onMouseDown={(e: React.MouseEvent<HTMLDivElement>) =>
-                  this._handlePlaylistResizeMouseDown(e, height)
-                }
-              >
-                <div className="webamp-media-library-horizontal-divider-line" />
-              </div>
-              <div style={{ overflow: "hidden" }}>{this.props.tracks}</div>
-            </div>
-          </div>
-        )}
-      </GenWindow>
-    );
-  }
-}
-
-const mapStateToProps = (state: AppState): StateProps => {
-  return {
-    skinGenExColors: Selectors.getSkinGenExColors(state),
-  };
-};
-export default connect(mapStateToProps)(LibraryLayout);
diff --git a/js/components/MediaLibraryWindow/LibraryTable.tsx b/js/components/MediaLibraryWindow/LibraryTable.tsx
deleted file mode 100644
index 3c81cd7b..00000000
--- a/js/components/MediaLibraryWindow/LibraryTable.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useState } from "react";
-import classnames from "classnames";
-
-interface Props {
-  headings: Array<string>;
-  rows: Array<Array<any>>;
-  widths: Array<number>;
-}
-
-export default function LibraryTable(props: Props) {
-  const [selectedRow, setSelectedRow] = useState<number | null>(null);
-  const rowStyle = {
-    display: "grid",
-    gridTemplateColumns: props.widths.map(width => `${width}px`).join(" "),
-  };
-
-  return (
-    <div
-      className="webamp-media-library-item"
-      style={{ height: "100%", position: "relative" }}
-    >
-      <div
-        className="webamp-media-library-table"
-        style={{
-          overflow: "scroll",
-          height: "100%",
-        }}
-      >
-        <div style={rowStyle} className="library-table-heading">
-          {props.headings.map((heading, i) => (
-            <div key={`heading-${i}-${heading}`} style={{ paddingLeft: 5 }}>
-              {heading}
-            </div>
-          ))}
-        </div>
-        {props.rows.map((row, i) => (
-          <div
-            style={{
-              ...rowStyle,
-              boxSizing: "border-box",
-            }}
-            className={classnames("library-table-row", {
-              selected: i === selectedRow,
-            })}
-            onClick={() => setSelectedRow(i)}
-            key={`row-${i}`}
-          >
-            {row.map((text, j) => (
-              <div
-                style={{ overflow: "hidden", paddingLeft: 6 }}
-                key={`cell-${j}`}
-              >
-                {text}
-              </div>
-            ))}
-          </div>
-        ))}
-        <div
-          style={{
-            zIndex: 99999,
-            color: "white",
-            width: 1,
-            position: "absolute",
-            left: 50,
-            top: 0,
-            height: "100%",
-          }}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/js/components/MediaLibraryWindow/Sidebar.tsx b/js/components/MediaLibraryWindow/Sidebar.tsx
deleted file mode 100644
index f982471b..00000000
--- a/js/components/MediaLibraryWindow/Sidebar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-import LibraryButton from "./LibraryButton";
-
-export default class Sidebar extends React.Component {
-  render() {
-    return (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        <div className="webamp-media-library-item" style={{ flexGrow: 1 }}>
-          <ul style={{ margin: 3 }}>
-            <li>
-              Local Media
-              <ul>
-                <li>Audio</li>
-                <li>Video</li>
-              </ul>
-            </li>
-            <li>Playlist</li>
-            <li>
-              Devices
-              <ul>
-                <li>CD E:</li>
-              </ul>
-            </li>
-            <li>Internet Radio</li>
-            <li>Internet TV</li>
-          </ul>
-        </div>
-        <LibraryButton
-          style={{
-            width: "100%",
-            marginTop: 1,
-          }}
-        >
-          Library
-        </LibraryButton>
-      </div>
-    );
-  }
-}
diff --git a/js/components/MediaLibraryWindow/TracksTable.tsx b/js/components/MediaLibraryWindow/TracksTable.tsx
deleted file mode 100644
index 01f04e9b..00000000
--- a/js/components/MediaLibraryWindow/TracksTable.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from "react";
-import { connect } from "react-redux";
-import * as Selectors from "../../selectors";
-import { AppState, PlaylistTrack } from "../../types";
-import * as Utils from "../../utils";
-import * as FileUtils from "../../fileUtils";
-import LibraryButton from "./LibraryButton";
-import LibraryTable from "./LibraryTable";
-
-interface StateProps {
-  tracks: PlaylistTrack[];
-  filterTracks: (query: string) => PlaylistTrack[];
-}
-
-interface State {
-  filter: string;
-}
-
-class TracksTable extends React.Component<StateProps, State> {
-  constructor(props: StateProps) {
-    super(props);
-    this.state = { filter: "" };
-  }
-
-  render() {
-    return (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            height: 23,
-          }}
-        >
-          <span>Search:</span>
-          <input
-            style={{ marginLeft: 12, flexGrow: 1 }}
-            type="text"
-            className="webamp-media-library-item"
-            onChange={e => this.setState({ filter: e.target.value })}
-          />
-        </div>
-        <LibraryTable
-          headings={[
-            "Artist",
-            "Title",
-            "Album",
-            "Length",
-            "Track #",
-            "Genere",
-            "Year",
-            "Filename",
-          ]}
-          rows={this.props.filterTracks(this.state.filter).map(track => {
-            return [
-              track.artist,
-              track.title,
-              track.album,
-              Utils.getTimeStr(track.duration),
-              1,
-              "Primus",
-              2001,
-              track.url == null
-                ? track.defaultName
-                : FileUtils.filenameFromUrl(track.url),
-            ];
-          })}
-          widths={[100, 100, 100, 100, 100, 100, 100, 100]}
-        />
-
-        <div style={{ marginTop: 2 }}>
-          <LibraryButton>Play</LibraryButton>
-          <LibraryButton>Enqueue</LibraryButton>
-          <LibraryButton>Play all</LibraryButton>
-          <LibraryButton>Enqueue all</LibraryButton>
-          <span id="webamp-media-library-track-summary-duration">
-            1 item [3:25]
-          </span>
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state: AppState): StateProps => {
-  return {
-    tracks: Object.values(Selectors.getTracks(state)),
-    filterTracks: Selectors.getTracksMatchingFilter(state),
-  };
-};
-
-export default connect(mapStateToProps)(TracksTable);
diff --git a/js/components/MediaLibraryWindow/index.tsx b/js/components/MediaLibraryWindow/index.tsx
deleted file mode 100644
index 9150d708..00000000
--- a/js/components/MediaLibraryWindow/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from "react";
-import "../../../css/media-library-window.css";
-import Sidebar from "./Sidebar";
-import ArtistsTable from "./ArtistsTable";
-import AlbumsTable from "./AlbumsTable";
-import TracksTable from "./TracksTable";
-import LibraryLayout from "./LibraryLayout";
-
-export default class MediaLibraryWindow extends React.Component<{}> {
-  render() {
-    return (
-      <LibraryLayout
-        sidebar={<Sidebar />}
-        artists={<ArtistsTable />}
-        albums={<AlbumsTable />}
-        tracks={<TracksTable />}
-      />
-    );
-  }
-}
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 545fa64f..eb3d8133 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -135,71 +135,6 @@ function cssRulesFromProps(props) {
     }
   }
 
-  // TODO: Find a way to make this declarative.
-  cssRules.push(
-    `#webamp-media-library {
-       background-color: ${props.skinGenExColors.windowBackground};
-       color: ${props.skinGenExColors.windowText};
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library input {
-       caret-color: ${props.skinGenExColors.windowText};
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-item {
-       color: ${props.skinGenExColors.itemForeground};
-       background-color: ${props.skinGenExColors.itemBackground};
-       border-right: 1px solid ${props.skinGenExColors.divider};
-       border-bottom: 1px solid ${props.skinGenExColors.divider};
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library .library-button-center {
-       color: ${props.skinGenExColors.buttonText};
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-vertical-divider {
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-vertical-divider-line,
-     #webamp-media-library .webamp-media-library-horizontal-divider-line
-     {
-       background-color: ${props.skinGenExColors.divider};
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-table {
-       color: ${props.skinGenExColors.itemForeground};
-       background-color: ${props.skinGenExColors.itemBackground};
-    }`
-  );
-
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-table .library-table-heading {
-       background-color: ${props.skinGenExColors.listHeaderFramePressed};
-    }`
-  );
-
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-table .library-table-heading > div {
-       color: ${props.skinGenExColors.listHeaderText};
-       background-color: ${props.skinGenExColors.listHeaderBackground};
-       border-top: 1px solid ${props.skinGenExColors.listHeaderFrameTopAndLeft};
-       border-left: 1px solid ${props.skinGenExColors.listHeaderFrameTopAndLeft};
-       border-bottom: 1px solid ${props.skinGenExColors.listHeaderFrameBottomAndRight};
-       border-right: 1px solid ${props.skinGenExColors.listHeaderFrameBottomAndRight};
-    }`
-  );
-  cssRules.push(
-    `#webamp-media-library .webamp-media-library-table .library-table-row.selected {
-      background-color: ${props.skinGenExColors.playlistSelection};
-      color: ${props.skinGenExColors.listHeaderText};
-    }`
-  );
   return cssRules;
 }
 
@@ -233,5 +168,4 @@ export default connect(state => ({
   skinCursors: state.display.skinCursors,
   skinRegion: state.display.skinRegion,
   skinGenLetterWidths: state.display.skinGenLetterWidths,
-  skinGenExColors: state.display.skinGenExColors,
 }))(Skin);
diff --git a/js/constants.ts b/js/constants.ts
index a1b1fdf2..d302a36f 100644
--- a/js/constants.ts
+++ b/js/constants.ts
@@ -23,7 +23,6 @@ export const WINDOWS = {
   MAIN: "main",
   PLAYLIST: "playlist",
   EQUALIZER: "equalizer",
-  MEDIA_LIBRARY: "mediaLibrary",
   MILKDROP: "milkdrop",
 };
 
diff --git a/js/reducers/windows.ts b/js/reducers/windows.ts
index 2e80cf86..3fd2fdf8 100644
--- a/js/reducers/windows.ts
+++ b/js/reducers/windows.ts
@@ -11,7 +11,6 @@ import {
   LOAD_SERIALIZED_STATE,
   BROWSER_WINDOW_SIZE_CHANGED,
   RESET_WINDOW_SIZES,
-  ENABLE_MEDIA_LIBRARY,
   ENABLE_MILKDROP,
 } from "../actionTypes";
 import * as Utils from "../utils";
@@ -94,7 +93,6 @@ const defaultWindowsState: WindowsState = {
     WINDOWS.PLAYLIST,
     WINDOWS.EQUALIZER,
     WINDOWS.MILKDROP,
-    WINDOWS.MEDIA_LIBRARY,
     WINDOWS.MAIN,
   ],
 };
@@ -104,25 +102,6 @@ const windows = (
   action: Action
 ): WindowsState => {
   switch (action.type) {
-    case ENABLE_MEDIA_LIBRARY:
-      return {
-        ...state,
-        genWindows: {
-          ...state.genWindows,
-          [WINDOWS.MEDIA_LIBRARY]: {
-            title: "Library",
-            size: [0, 0],
-            open: true,
-            hidden: false,
-            shade: false,
-            canResize: true,
-            canShade: false,
-            canDouble: false,
-            hotkey: "Alt+E",
-            position: { x: 0, y: 0 },
-          },
-        },
-      };
     case ENABLE_MILKDROP:
       return {
         ...state,
diff --git a/js/selectors.ts b/js/selectors.ts
index 76dbc2a0..980cdfe2 100644
--- a/js/selectors.ts
+++ b/js/selectors.ts
@@ -30,7 +30,6 @@ import * as fromDisplay from "./reducers/display";
 import * as fromEqualizer from "./reducers/equalizer";
 import * as fromMedia from "./reducers/media";
 import * as fromWindows from "./reducers/windows";
-import * as TrackUtils from "./trackUtils";
 import * as MarqueeUtils from "./marqueeUtils";
 import { generateGraph } from "./resizeUtils";
 import { SerializedStateV1 } from "./serializedStates/v1Types";
@@ -53,17 +52,6 @@ export const getEqfData = createSelector(getSliders, sliders => {
 });
 
 export const getTracks = (state: AppState) => state.tracks;
-
-export const getTracksMatchingFilter = createSelector(getTracks, tracks => {
-  const tracksArray = Object.values(tracks);
-  const filter = Utils.makeCachingFilterFunction(tracksArray, (track, query) =>
-    TrackUtils.trackFilterContents(track).includes(query)
-  );
-  return (filterString: string): PlaylistTrack[] => {
-    return filter(filterString.toLowerCase());
-  };
-});
-
 export const getTrackUrl = (state: AppState) => {
   return (id: number): string | null => {
     return state.tracks[id]?.url;
@@ -495,10 +483,6 @@ export const getSkinPlaylistStyle = (state: AppState): PlaylistStyle => {
   return state.display.skinPlaylistStyle || defaultPlaylistStyle;
 };
 
-export const getSkinGenExColors = (state: AppState) => {
-  return state.display.skinGenExColors;
-};
-
 export const getVisualizerStyle = (state: AppState): string => {
   const milkdrop = state.windows.genWindows[WINDOWS.MILKDROP];
   if (milkdrop != null && milkdrop.open) {
diff --git a/js/skinSelectors.ts b/js/skinSelectors.ts
index a4e1bcdb..ef811820 100644
--- a/js/skinSelectors.ts
+++ b/js/skinSelectors.ts
@@ -318,15 +318,6 @@ export const imageSelectors: Selectors = {
   GEN_MIDDLE_RIGHT: [".gen-window .gen-middle-right"],
   GEN_MIDDLE_RIGHT_BOTTOM: [".gen-window .gen-middle-right-bottom"],
   GEN_CLOSE_SELECTED: [".gen-window .gen-close:active"],
-  GENEX_BUTTON_BACKGROUND_LEFT_UNPRESSED: [
-    "#webamp-media-library .library-button-left",
-  ],
-  GENEX_BUTTON_BACKGROUND_CENTER_UNPRESSED: [
-    "#webamp-media-library .library-button-center",
-  ],
-  GENEX_BUTTON_BACKGROUND_RIGHT_UNPRESSED: [
-    "#webamp-media-library .library-button-right",
-  ],
 };
 
 Object.keys(FONT_LOOKUP).forEach(character => {
diff --git a/js/skinSprites.ts b/js/skinSprites.ts
index 56c9a664..9742bbac 100644
--- a/js/skinSprites.ts
+++ b/js/skinSprites.ts
@@ -738,6 +738,9 @@ const sprites: SpriteMap = {
     { name: "GEN_MIDDLE_RIGHT_BOTTOM", x: 170, y: 42, width: 8, height: 24 },
     { name: "GEN_CLOSE_SELECTED", x: 148, y: 42, width: 9, height: 9 },
   ],
+  /*
+
+  We don't currently support the Media Library, so there are disabled
   GENEX: [
     {
       name: "GENEX_BUTTON_BACKGROUND_LEFT_UNPRESSED",
@@ -816,6 +819,7 @@ const sprites: SpriteMap = {
       width: 28,
     },
   ],
+  */
 };
 
 export default sprites;
diff --git a/js/trackUtils.ts b/js/trackUtils.ts
index 2f41a831..5559a2a4 100644
--- a/js/trackUtils.ts
+++ b/js/trackUtils.ts
@@ -35,12 +35,3 @@ export const trackFilename = Utils.weakMapMemoize(
     return "???";
   }
 );
-
-export const trackFilterContents = Utils.weakMapMemoize(
-  (track: PlaylistTrack): string => {
-    return [track.artist, track.title, track.defaultName]
-      .filter(Boolean)
-      .join("|")
-      .toLowerCase();
-  }
-);
diff --git a/js/types.ts b/js/types.ts
index a8dea966..88d11591 100644
--- a/js/types.ts
+++ b/js/types.ts
@@ -496,7 +496,6 @@ export type Action =
   | { type: "RESET_WINDOW_SIZES" }
   | { type: "BROWSER_WINDOW_SIZE_CHANGED"; height: number; width: number }
   | { type: "LOAD_DEFAULT_SKIN" }
-  | { type: "ENABLE_MEDIA_LIBRARY" }
   | { type: "ENABLE_MILKDROP"; open: boolean }
   | { type: "SCHEDULE_MILKDROP_MESSAGE"; message: string }
   | {
diff --git a/js/utils.test.ts b/js/utils.test.ts
index 8f26ff2f..e19dffe9 100644
--- a/js/utils.test.ts
+++ b/js/utils.test.ts
@@ -11,7 +11,6 @@ import {
   segment,
   moveSelected,
   spliceIn,
-  makeCachingFilterFunction,
   replaceAtIndex,
 } from "./utils";
 
@@ -381,92 +380,6 @@ describe("spliceIn", () => {
   });
 });
 
-describe("makeCachingFilterFunction", () => {
-  test("caches exact queries", () => {
-    const values = ["abc", "b", "c"];
-    const includes = jest.fn((v, query) => v.includes(query));
-    const filter = makeCachingFilterFunction(values, includes);
-    expect(filter("c")).toEqual(["abc", "c"]);
-    expect(includes.mock.calls.length).toBe(3);
-    expect(filter("c")).toEqual(["abc", "c"]);
-    expect(includes.mock.calls.length).toBe(3);
-  });
-
-  test("caches sub queries", () => {
-    const values = ["a--", "ab-", "abc"];
-    const includes = jest.fn((v, query) => v.includes(query));
-    let comparisons = 0;
-    const newComparisons = () => {
-      const recent = includes.mock.calls.length - comparisons;
-      comparisons += recent;
-      return recent;
-    };
-    const filter = makeCachingFilterFunction(values, includes);
-    // Intial search
-    expect(filter("ab")).toEqual(["ab-", "abc"]);
-    expect(newComparisons()).toBe(3); // Looks at all elements
-
-    // Second search where original search is a prefix
-    expect(filter("abc")).toEqual(["abc"]);
-    expect(newComparisons()).toBe(2); // Only reconsiders the previous matches
-
-    // Unique search
-    expect(filter("b")).toEqual(["ab-", "abc"]); // Looks at all elements
-    expect(newComparisons()).toBe(3); // Reconsiders all elements
-
-    expect(filter("bc")).toEqual(["abc"]); // Only reconsidres the matches that already include `b`
-    expect(newComparisons()).toBe(2);
-
-    // Go back to the initial serach
-    expect(filter("ab")).toEqual(["ab-", "abc"]);
-    expect(newComparisons()).toBe(0); // Result is cached
-
-    // A variation on the second search
-    expect(filter("abcd")).toEqual([]);
-    expect(newComparisons()).toBe(1); // Only recondsiders the results of `abc`
-  });
-
-  test("big data", () => {
-    const values = [...Array(10000)].map((val, i) => String(i));
-    const includes = jest.fn((v, query) => v.includes(query));
-    let comparisons = 0;
-    const newComparisons = () => {
-      const recent = includes.mock.calls.length - comparisons;
-      comparisons += recent;
-      return recent;
-    };
-    const filter = makeCachingFilterFunction(values, includes);
-    // Intial search
-    expect(filter("").length).toEqual(10000);
-    expect(newComparisons()).toBe(0); // Looks at zero
-
-    expect(filter("1").length).toEqual(3439);
-    expect(newComparisons()).toBe(10000); // Looks at all elements
-
-    expect(filter("12").length).toEqual(299);
-    expect(newComparisons()).toBe(3439);
-
-    expect(filter("123").length).toEqual(20);
-    expect(newComparisons()).toBe(299);
-
-    expect(filter("1234").length).toEqual(1);
-    expect(newComparisons()).toBe(20);
-
-    expect(filter("12345").length).toEqual(0);
-    expect(newComparisons()).toBe(1);
-
-    // A variation on the initial non-empty query
-    expect(filter("11").length).toEqual(280);
-    expect(newComparisons()).toBe(3439);
-
-    expect(filter("111").length).toEqual(19);
-    expect(newComparisons()).toBe(280);
-
-    expect(filter("1111").length).toEqual(1);
-    expect(newComparisons()).toBe(19);
-  });
-});
-
 describe("replaceAtIndex", () => {
   test("can replace", () => {
     expect(replaceAtIndex([1, 2, 3, 4], 2, 0)).toEqual([1, 2, 0, 4]);
diff --git a/js/utils.ts b/js/utils.ts
index 438b0dd2..c9bdfcf0 100644
--- a/js/utils.ts
+++ b/js/utils.ts
@@ -403,39 +403,3 @@ export function weakMapMemoize<T extends object, R>(
     return cache.get(value);
   };
 }
-
-interface Cache<V> {
-  results?: V[];
-  subCaches: { [char: string]: Cache<V> };
-}
-
-// Is this a premature optimizaiton? Probably. But it's my side-project so I can
-// do what I like. :P
-export function makeCachingFilterFunction<V>(
-  values: V[],
-  includes: (v: V, query: string) => boolean
-) {
-  const cache: Cache<V> = {
-    results: values,
-    subCaches: {},
-  };
-  return (query: string): V[] => {
-    let queryCache: Cache<V> = cache;
-    let lastResults: V[] = values;
-    for (const char of query) {
-      let letterCaches = queryCache.subCaches[char];
-      if (!letterCaches) {
-        letterCaches = queryCache.subCaches[char] = { subCaches: {} };
-      } else if (letterCaches.results) {
-        lastResults = letterCaches.results;
-      }
-      queryCache = letterCaches;
-    }
-
-    if (!queryCache.results) {
-      queryCache.results = lastResults.filter(v => includes(v, query));
-    }
-
-    return queryCache.results;
-  };
-}
diff --git a/js/webampLazy.tsx b/js/webampLazy.tsx
index c193a0cd..60f8f8b7 100644
--- a/js/webampLazy.tsx
+++ b/js/webampLazy.tsx
@@ -32,7 +32,6 @@ import {
   LOADED,
   SET_Z_INDEX,
   CLOSE_REQUESTED,
-  ENABLE_MEDIA_LIBRARY,
   ENABLE_MILKDROP,
 } from "./actionTypes";
 import Emitter from "./emitter";
@@ -117,7 +116,6 @@ interface PrivateOptions {
   requireMusicMetadata(): Promise<any>; // TODO: Type musicmetadata
   __initialState?: AppState;
   __customMiddlewares?: Middleware[];
-  __enableMediaLibrary?: boolean;
   __initialWindowLayout: {
     [windowId: string]: {
       size: null | [number, number];
@@ -241,10 +239,6 @@ class Winamp {
       );
     }
 
-    if (options.__enableMediaLibrary) {
-      this.store.dispatch({ type: ENABLE_MEDIA_LIBRARY });
-    }
-
     const handleOnline = () => this.store.dispatch({ type: NETWORK_CONNECTED });
     const handleOffline = () =>
       this.store.dispatch({ type: NETWORK_DISCONNECTED });