mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-22 09:37:17 +00:00
Remove MediaLibrary components
This commit is contained in:
Jordan Eldredge
parent
9b3cedafc2
commit
2ee295ec72
7 changed files with 1 additions and 238 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import * as React from "react";
|
||||
import LibraryLayout from "./LibraryLayout";
|
||||
|
||||
export default class MediaLibraryWindow extends React.Component<{}> {
|
||||
render() {
|
||||
return (
|
||||
<LibraryLayout
|
||||
sidebar={null}
|
||||
artists={null}
|
||||
albums={null}
|
||||
tracks={null}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
| {
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue