diff --git a/js/actionTypes.ts b/js/actionTypes.ts index 4dfa588b..6b757ada 100644 --- a/js/actionTypes.ts +++ b/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"; diff --git a/js/index.js b/js/index.js index 657b49da..eb6c5cef 100644 --- a/js/index.js +++ b/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] diff --git a/js/reducers/windows.ts b/js/reducers/windows.ts index df26f78d..07d229fe 100644 --- a/js/reducers/windows.ts +++ b/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: diff --git a/js/types.ts b/js/types.ts index b1316517..d1b085ee 100644 --- a/js/types.ts +++ b/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" diff --git a/js/webampLazy.js b/js/webampLazy.js index 655c51fa..1d32c24f 100644 --- a/js/webampLazy.js +++ b/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 }) );