Conditionally enable media library via flag

js/actionTypes.ts

@@ -75,3 +75,4 @@ 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";

js/index.js

@@ -9,6 +9,7 @@ import visor from "../skins/Vizor1-01.wsz";
 import xmms from "../skins/XMMS-Turquoise.wsz";
 import zaxon from "../skins/ZaxonRemake1-0.wsz";
 import green from "../skins/Green-Dimension-V2.wsz";
+import base from "../skins/base-2.91-png.wsz";
 import internetArchive from "../skins/Internet-Archive.wsz";
 import MilkdropWindow from "./components/MilkdropWindow";
 import screenshotInitialState from "./screenshotInitialState";
@@ -90,9 +91,17 @@ let screenshot = false;
 let clearState = false;
 let useState = 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;
   clearState = Boolean(params.get("clearState"));
   useState = Boolean(params.get("useState"));
@@ -178,7 +187,7 @@ Raven.context(async () => {
   if (isButterchurnSupported()) {
     const startWithMilkdropHidden =
       document.body.clientWidth < MIN_MILKDROP_WIDTH ||
-      skinUrl != null ||
+      (!library && skinUrl != null) ||
       screenshot;
 
     __extraWindows.push({
@@ -186,7 +195,7 @@ Raven.context(async () => {
       title: "Milkdrop",
       isVisualizer: true,
       Component: MilkdropWindow,
-      open: !startWithMilkdropHidden
+      open: !library && !startWithMilkdropHidden
     });
 
     if (startWithMilkdropHidden) {
@@ -196,6 +205,12 @@ Raven.context(async () => {
         [WINDOWS.PLAYLIST]: { position: { x: 0, y: 232 }, size: [0, 0] },
         milkdrop: { position: { x: 0, y: 348 }, size: [0, 0] }
       };
+      if (library) {
+        __initialWindowLayout[WINDOWS.MEDIA_LIBRARY] = {
+          position: { x: 0, y: 348 },
+          size: [0, 0]
+        };
+      }
     } else {
       __initialWindowLayout = {
         [WINDOWS.MAIN]: { position: { x: 0, y: 0 } },
@@ -203,6 +218,12 @@ Raven.context(async () => {
         [WINDOWS.PLAYLIST]: { position: { x: 0, y: 232 }, size: [0, 4] },
         milkdrop: { position: { x: 275, y: 0 }, size: [7, 12] }
       };
+      if (library) {
+        __initialWindowLayout[WINDOWS.MEDIA_LIBRARY] = {
+          position: { x: 275, y: 0 },
+          size: [7, 12]
+        };
+      }
     }
 
     document.getElementById("butterchurn-share").style.display = "flex";
@@ -239,6 +260,7 @@ Raven.context(async () => {
     requireJSZip,
     requireJSMediaTags,
     __extraWindows,
+    __enableMediaLibrary: library,
     __initialWindowLayout,
     __initialState: screenshot ? screenshotInitialState : initialState,
     __customMiddlewares: [ravenMiddleware]

js/reducers/windows.ts

@@ -11,7 +11,8 @@ import {
   TOGGLE_WINDOW_SHADE_MODE,
   LOAD_SERIALIZED_STATE,
   BROWSER_WINDOW_SIZE_CHANGED,
-  RESET_WINDOW_SIZES
+  RESET_WINDOW_SIZES,
+  ENABLE_MEDIA_LIBRARY
 } from "../actionTypes";
 import * as Utils from "../utils";
 import { WindowsSerializedStateV1 } from "../serializedStates/v1Types";
@@ -96,19 +97,6 @@ const defaultWindowsState: WindowsState = {
       generic: false,
       hotkey: "Alt+E",
       position: { x: 0, y: 0 }
-    },
-    [WINDOWS.MEDIA_LIBRARY]: {
-      title: "Winamp Library",
-      size: [0, 0],
-      open: true,
-      hidden: false,
-      shade: false,
-      canResize: true,
-      canShade: false,
-      canDouble: false,
-      generic: false,
-      hotkey: "Alt+E",
-      position: { x: 0, y: 0 }
     }
   },
   browserWindowSize: { width: 0, height: 0 }
@@ -119,6 +107,26 @@ const windows = (
   action: Action
 ): WindowsState => {
   switch (action.type) {
+    case ENABLE_MEDIA_LIBRARY:
+      return {
+        ...state,
+        genWindows: {
+          ...state.genWindows,
+          [WINDOWS.MEDIA_LIBRARY]: {
+            title: "Winamp Library",
+            size: [0, 0],
+            open: true,
+            hidden: false,
+            shade: false,
+            canResize: true,
+            canShade: false,
+            canDouble: false,
+            generic: false,
+            hotkey: "Alt+E",
+            position: { x: 0, y: 0 }
+          }
+        }
+      };
     case SET_FOCUSED_WINDOW:
       return { ...state, focused: action.window };
     case TOGGLE_WINDOW_SHADE_MODE:

js/types.ts

@@ -377,7 +377,8 @@ export type Action =
     }
   | { type: "RESET_WINDOW_SIZES" }
   | { type: "BROWSER_WINDOW_SIZE_CHANGED"; height: number; width: number }
-  | { type: "LOAD_DEFAULT_SKIN" };
+  | { type: "LOAD_DEFAULT_SKIN" }
+  | { type: "ENABLE_MEDIA_LIBRARY" };
 
 export type MediaTagRequestStatus =
   | "INITIALIZED"

js/webampLazy.js

@@ -22,7 +22,8 @@ import {
   LOADED,
   REGISTER_VISUALIZER,
   SET_Z_INDEX,
-  CLOSE_REQUESTED
+  CLOSE_REQUESTED,
+  ENABLE_MEDIA_LIBRARY
 } from "./actionTypes";
 import Emitter from "./emitter";
 
@@ -110,6 +111,10 @@ class Winamp {
       });
     });
 
+    if (options.__enableMediaLibrary) {
+      this.store.dispatch({ type: ENABLE_MEDIA_LIBRARY });
+    }
+
     window.addEventListener("online", () =>
       this.store.dispatch({ type: NETWORK_CONNECTED })
     );