From 2ee295ec72ce59c343d8843d33943d2858c6170e Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Thu, 5 Dec 2019 23:34:56 -0800 Subject: [PATCH] Remove MediaLibrary components --- demo/js/index.js | 18 +- js/components/App.tsx | 3 - .../MediaLibraryWindow/LibraryLayout.tsx | 176 ------------------ js/components/MediaLibraryWindow/index.tsx | 15 -- js/reducers/windows.ts | 20 -- js/types.ts | 1 - js/webampLazy.tsx | 6 - 7 files changed, 1 insertion(+), 238 deletions(-) delete mode 100644 js/components/MediaLibraryWindow/LibraryLayout.tsx delete mode 100644 js/components/MediaLibraryWindow/index.tsx diff --git a/demo/js/index.js b/demo/js/index.js index 11667394..6e417117 100644 --- a/demo/js/index.js +++ b/demo/js/index.js @@ -54,17 +54,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; } @@ -130,14 +122,7 @@ Raven.context(async () => { __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 +155,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/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 { return ; case WINDOWS.PLAYLIST: return ; - case WINDOWS.MEDIA_LIBRARY: - return ; case WINDOWS.MILKDROP: return ; default: 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 { - 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) => { - 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, - 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, - 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 ( - - {({ width, height }) => ( -
- {this.state.sidebarWidth === 0 ?
: this.props.sidebar} -
-
-
-
-
- {this.props.artists} -
) => - this._handleArtistsResizeMouseDown(e, width) - } - > -
-
- {this.props.albums} -
-
) => - this._handlePlaylistResizeMouseDown(e, height) - } - > -
-
-
{this.props.tracks}
-
-
- )} - - ); - } -} - -const mapStateToProps = (state: AppState): StateProps => { - return { - skinGenExColors: Selectors.getSkinGenExColors(state), - }; -}; -export default connect(mapStateToProps)(LibraryLayout); diff --git a/js/components/MediaLibraryWindow/index.tsx b/js/components/MediaLibraryWindow/index.tsx deleted file mode 100644 index b926c015..00000000 --- a/js/components/MediaLibraryWindow/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from "react"; -import LibraryLayout from "./LibraryLayout"; - -export default class MediaLibraryWindow extends React.Component<{}> { - render() { - return ( - - ); - } -} diff --git a/js/reducers/windows.ts b/js/reducers/windows.ts index 2e80cf86..f1b0764a 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"; @@ -104,25 +103,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/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/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; // 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 });