mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-22 17:47:16 +00:00
Refactor loading files
This commit is contained in:
Jordan Eldredge
parent
00a000dba4
commit
ff11deae0d
3 changed files with 169 additions and 124 deletions
|
|
@ -171,30 +171,37 @@ function setEqFromFile(file) {
|
|||
};
|
||||
}
|
||||
|
||||
export function loadFilesFromReferences(fileReferences) {
|
||||
function addTracksFromReferences(fileReferences) {
|
||||
return dispatch => {
|
||||
Array.from(fileReferences).forEach((file, i) => {
|
||||
dispatch(loadFileFromReference(file, i === 0 ? "PLAY" : "NONE"));
|
||||
const priority = i === 0 ? "PLAY" : "NONE";
|
||||
const id = uniqueId();
|
||||
const url = URL.createObjectURL(file);
|
||||
dispatch(_addTrackFromUrl(url, file.name, id, priority));
|
||||
dispatch(fetchMediaTags(file, id));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const SKIN_FILENAME_MATCHER = new RegExp("(wsz|zip)$", "i");
|
||||
const EQF_FILENAME_MATCHER = new RegExp("eqf$", "i");
|
||||
export function loadFileFromReference(fileReference, priority) {
|
||||
export function loadFilesFromReferences(fileReferences) {
|
||||
return dispatch => {
|
||||
const file = new MyFile();
|
||||
file.setFileReference(fileReference);
|
||||
if (SKIN_FILENAME_MATCHER.test(fileReference.name)) {
|
||||
dispatch(setSkinFromFile(file));
|
||||
} else if (EQF_FILENAME_MATCHER.test(fileReference.name)) {
|
||||
dispatch(setEqFromFile(file));
|
||||
} else {
|
||||
const id = uniqueId();
|
||||
const url = URL.createObjectURL(fileReference);
|
||||
dispatch(_addTrackFromUrl(url, fileReference.name, id, priority));
|
||||
dispatch(fetchMediaTags(fileReference, id));
|
||||
if (fileReferences.length < 1) {
|
||||
return;
|
||||
} else if (fileReferences.length === 1) {
|
||||
const fileReference = fileReferences[0];
|
||||
const file = new MyFile();
|
||||
file.setFileReference(fileReference);
|
||||
if (SKIN_FILENAME_MATCHER.test(fileReference.name)) {
|
||||
dispatch(setSkinFromFile(file));
|
||||
return;
|
||||
} else if (EQF_FILENAME_MATCHER.test(fileReference.name)) {
|
||||
dispatch(setEqFromFile(file));
|
||||
return;
|
||||
}
|
||||
}
|
||||
dispatch(addTracksFromReferences(fileReferences));
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@ import { connect } from "react-redux";
|
|||
import classnames from "classnames";
|
||||
|
||||
import { WINDOWS } from "../../constants";
|
||||
import { loadFilesFromReferences, removeAllTracks } from "../../actionCreators";
|
||||
|
||||
import DropTarget from "../DropTarget";
|
||||
import MiniTime from "../MiniTime";
|
||||
|
||||
import { SET_FOCUSED_WINDOW } from "../../actionTypes";
|
||||
import ActionButtons from "./ActionButtons";
|
||||
import MainBalance from "./MainBalance";
|
||||
import Close from "./Close";
|
||||
|
|
@ -27,20 +29,24 @@ import Time from "./Time";
|
|||
import Visualizer from "./Visualizer";
|
||||
import MainVolume from "./MainVolume";
|
||||
|
||||
import { SET_FOCUSED_WINDOW } from "../../actionTypes";
|
||||
|
||||
import "../../../css/main-window.css";
|
||||
|
||||
export class MainWindow extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this._handleClick = this._handleClick.bind(this);
|
||||
this._handleDrop = this._handleDrop.bind(this);
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
_handleClick() {
|
||||
this.props.setFocus();
|
||||
}
|
||||
|
||||
_handleDrop(e) {
|
||||
this.props.removeAllTracks();
|
||||
this.props.loadFilesFromReferences(e);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
focused,
|
||||
|
|
@ -70,7 +76,8 @@ export class MainWindow extends React.Component {
|
|||
<DropTarget
|
||||
id="main-window"
|
||||
className={className}
|
||||
onMouseDown={this.handleClick}
|
||||
onMouseDown={this._handleClick}
|
||||
handleDrop={this._handleDrop}
|
||||
>
|
||||
<div id="title-bar" className="selected title-bard draggable">
|
||||
<MainContextMenu fileInput={this.props.fileInput} />
|
||||
|
|
@ -129,6 +136,8 @@ const mapStateToProps = state => {
|
|||
};
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setFocus: () => ({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN })
|
||||
setFocus: () => ({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN }),
|
||||
loadFilesFromReferences: e => loadFilesFromReferences(e.dataTransfer.files),
|
||||
removeAllTracks
|
||||
};
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(MainWindow);
|
||||
|
|
|
|||
|
|
@ -2,23 +2,12 @@ import React from "react";
|
|||
import { connect } from "react-redux";
|
||||
import classnames from "classnames";
|
||||
|
||||
import DropTarget from "../DropTarget";
|
||||
import MiniTime from "../MiniTime";
|
||||
import PlaylistShade from "./PlaylistShade";
|
||||
import AddMenu from "./AddMenu";
|
||||
import RemoveMenu from "./RemoveMenu";
|
||||
import SelectionMenu from "./SelectionMenu";
|
||||
import MiscMenu from "./MiscMenu";
|
||||
import ListMenu from "./ListMenu";
|
||||
import ResizeTarget from "./ResizeTarget";
|
||||
import RunningTimeDisplay from "./RunningTimeDisplay";
|
||||
import TrackList from "./TrackList";
|
||||
import ScrollBar from "./ScrollBar";
|
||||
import {
|
||||
WINDOWS,
|
||||
PLAYLIST_RESIZE_SEGMENT_WIDTH,
|
||||
PLAYLIST_RESIZE_SEGMENT_HEIGHT,
|
||||
MIN_PLAYLIST_WINDOW_WIDTH
|
||||
MIN_PLAYLIST_WINDOW_WIDTH,
|
||||
TRACK_HEIGHT
|
||||
} from "../../constants";
|
||||
import {
|
||||
TOGGLE_PLAYLIST_WINDOW,
|
||||
|
|
@ -32,107 +21,143 @@ import {
|
|||
openFileDialog,
|
||||
toggleVisualizerStyle,
|
||||
scrollUpFourTracks,
|
||||
scrollDownFourTracks
|
||||
scrollDownFourTracks,
|
||||
loadFilesFromReferences
|
||||
} from "../../actionCreators";
|
||||
|
||||
import { clamp } from "../../utils";
|
||||
import DropTarget from "../DropTarget";
|
||||
import MiniTime from "../MiniTime";
|
||||
import PlaylistShade from "./PlaylistShade";
|
||||
import AddMenu from "./AddMenu";
|
||||
import RemoveMenu from "./RemoveMenu";
|
||||
import SelectionMenu from "./SelectionMenu";
|
||||
import MiscMenu from "./MiscMenu";
|
||||
import ListMenu from "./ListMenu";
|
||||
import ResizeTarget from "./ResizeTarget";
|
||||
import RunningTimeDisplay from "./RunningTimeDisplay";
|
||||
import TrackList from "./TrackList";
|
||||
import ScrollBar from "./ScrollBar";
|
||||
|
||||
import "../../../css/playlist-window.css";
|
||||
|
||||
const MIN_WINDOW_HEIGHT = 116;
|
||||
|
||||
const PlaylistWindow = props => {
|
||||
const {
|
||||
skinPlaylistStyle,
|
||||
focusPlaylist,
|
||||
focused,
|
||||
playlistSize,
|
||||
playlistShade,
|
||||
close,
|
||||
toggleShade
|
||||
} = props;
|
||||
if (playlistShade) {
|
||||
return <PlaylistShade />;
|
||||
class PlaylistWindow extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._handleDrop = this._handleDrop.bind(this);
|
||||
}
|
||||
|
||||
const style = {
|
||||
color: skinPlaylistStyle.normal,
|
||||
backgroundColor: skinPlaylistStyle.normalbg,
|
||||
fontFamily: `${skinPlaylistStyle.font}, Arial, sans-serif`,
|
||||
height: `${MIN_WINDOW_HEIGHT +
|
||||
playlistSize[1] * PLAYLIST_RESIZE_SEGMENT_HEIGHT}px`,
|
||||
width: `${MIN_PLAYLIST_WINDOW_WIDTH +
|
||||
playlistSize[0] * PLAYLIST_RESIZE_SEGMENT_WIDTH}px`
|
||||
};
|
||||
_handleDrop(e, targetCoords) {
|
||||
const top = e.clientY - targetCoords.y;
|
||||
/*const startIndex = */ clamp(
|
||||
(top - 23) % TRACK_HEIGHT,
|
||||
0,
|
||||
this.props.maxTrackIndex
|
||||
);
|
||||
this.props.loadFilesFromReferences(e /*, startIndex*/);
|
||||
}
|
||||
|
||||
const classes = classnames("window", "draggable", {
|
||||
selected: focused === WINDOWS.PLAYLIST,
|
||||
wide: playlistSize[0] > 2
|
||||
});
|
||||
render() {
|
||||
const {
|
||||
skinPlaylistStyle,
|
||||
focusPlaylist,
|
||||
focused,
|
||||
playlistSize,
|
||||
playlistShade,
|
||||
close,
|
||||
toggleShade
|
||||
} = this.props;
|
||||
if (playlistShade) {
|
||||
return <PlaylistShade />;
|
||||
}
|
||||
|
||||
return (
|
||||
<DropTarget
|
||||
id="playlist-window"
|
||||
className={classes}
|
||||
style={style}
|
||||
onMouseDown={focusPlaylist}
|
||||
>
|
||||
<div className="playlist-top draggable">
|
||||
<div className="playlist-top-left draggable" />
|
||||
<div className="playlist-top-title draggable" />
|
||||
<div className="playlist-top-right draggable">
|
||||
<div id="playlist-shade-button" onClick={toggleShade} />
|
||||
<div id="playlist-close-button" onClick={close} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="playlist-middle draggable">
|
||||
<div className="playlist-middle-left draggable" />
|
||||
<div className="playlist-middle-center">
|
||||
<TrackList />
|
||||
</div>
|
||||
<div className="playlist-middle-right draggable">
|
||||
<ScrollBar />
|
||||
</div>
|
||||
</div>
|
||||
<div className="playlist-bottom draggable">
|
||||
<div className="playlist-bottom-left draggable">
|
||||
<AddMenu openFileDialog={props.openFileDialog} />
|
||||
<RemoveMenu />
|
||||
<SelectionMenu />
|
||||
<MiscMenu />
|
||||
</div>
|
||||
<div className="playlist-bottom-center draggable" />
|
||||
<div className="playlist-bottom-right draggable">
|
||||
<div
|
||||
className="playlist-visualizer"
|
||||
onClick={props.toggleVisualizerStyle}
|
||||
/>
|
||||
<RunningTimeDisplay />
|
||||
<div className="playlist-action-buttons">
|
||||
<div className="playlist-previous-button" />
|
||||
<div className="playlist-play-button" onClick={props.play} />
|
||||
<div className="playlist-pause-button" onClick={props.pause} />
|
||||
<div className="playlist-stop-button" onClick={props.stop} />
|
||||
<div className="playlist-next-button" />
|
||||
<div
|
||||
className="playlist-eject-button"
|
||||
onClick={props.openFileDialog}
|
||||
/>
|
||||
const style = {
|
||||
color: skinPlaylistStyle.normal,
|
||||
backgroundColor: skinPlaylistStyle.normalbg,
|
||||
fontFamily: `${skinPlaylistStyle.font}, Arial, sans-serif`,
|
||||
height: `${MIN_WINDOW_HEIGHT +
|
||||
playlistSize[1] * PLAYLIST_RESIZE_SEGMENT_HEIGHT}px`,
|
||||
width: `${MIN_PLAYLIST_WINDOW_WIDTH +
|
||||
playlistSize[0] * PLAYLIST_RESIZE_SEGMENT_WIDTH}px`
|
||||
};
|
||||
|
||||
const classes = classnames("window", "draggable", {
|
||||
selected: focused === WINDOWS.PLAYLIST,
|
||||
wide: playlistSize[0] > 2
|
||||
});
|
||||
|
||||
return (
|
||||
<DropTarget
|
||||
id="playlist-window"
|
||||
className={classes}
|
||||
style={style}
|
||||
onMouseDown={focusPlaylist}
|
||||
handleDrop={this._handleDrop}
|
||||
>
|
||||
<div className="playlist-top draggable">
|
||||
<div className="playlist-top-left draggable" />
|
||||
<div className="playlist-top-title draggable" />
|
||||
<div className="playlist-top-right draggable">
|
||||
<div id="playlist-shade-button" onClick={toggleShade} />
|
||||
<div id="playlist-close-button" onClick={close} />
|
||||
</div>
|
||||
<MiniTime />
|
||||
<ListMenu />
|
||||
<div
|
||||
id="playlist-scroll-up-button"
|
||||
onClick={props.scrollUpFourTracks}
|
||||
/>
|
||||
<div
|
||||
id="playlist-scroll-down-button"
|
||||
onClick={props.scrollDownFourTracks}
|
||||
/>
|
||||
<ResizeTarget />
|
||||
</div>
|
||||
</div>
|
||||
</DropTarget>
|
||||
);
|
||||
};
|
||||
<div className="playlist-middle draggable">
|
||||
<div className="playlist-middle-left draggable" />
|
||||
<div className="playlist-middle-center">
|
||||
<TrackList />
|
||||
</div>
|
||||
<div className="playlist-middle-right draggable">
|
||||
<ScrollBar />
|
||||
</div>
|
||||
</div>
|
||||
<div className="playlist-bottom draggable">
|
||||
<div className="playlist-bottom-left draggable">
|
||||
<AddMenu openFileDialog={this.props.openFileDialog} />
|
||||
<RemoveMenu />
|
||||
<SelectionMenu />
|
||||
<MiscMenu />
|
||||
</div>
|
||||
<div className="playlist-bottom-center draggable" />
|
||||
<div className="playlist-bottom-right draggable">
|
||||
<div
|
||||
className="playlist-visualizer"
|
||||
onClick={this.props.toggleVisualizerStyle}
|
||||
/>
|
||||
<RunningTimeDisplay />
|
||||
<div className="playlist-action-buttons">
|
||||
<div className="playlist-previous-button" />
|
||||
<div className="playlist-play-button" onClick={this.props.play} />
|
||||
<div
|
||||
className="playlist-pause-button"
|
||||
onClick={this.props.pause}
|
||||
/>
|
||||
<div className="playlist-stop-button" onClick={this.props.stop} />
|
||||
<div className="playlist-next-button" />
|
||||
<div
|
||||
className="playlist-eject-button"
|
||||
onClick={this.props.openFileDialog}
|
||||
/>
|
||||
</div>
|
||||
<MiniTime />
|
||||
<ListMenu />
|
||||
<div
|
||||
id="playlist-scroll-up-button"
|
||||
onClick={this.props.scrollUpFourTracks}
|
||||
/>
|
||||
<div
|
||||
id="playlist-scroll-down-button"
|
||||
onClick={this.props.scrollDownFourTracks}
|
||||
/>
|
||||
<ResizeTarget />
|
||||
</div>
|
||||
</div>
|
||||
</DropTarget>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||
focusPlaylist: () =>
|
||||
|
|
@ -148,17 +173,21 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
|
|||
toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE }),
|
||||
toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle()),
|
||||
scrollUpFourTracks: () => dispatch(scrollUpFourTracks()),
|
||||
scrollDownFourTracks: () => dispatch(scrollDownFourTracks())
|
||||
scrollDownFourTracks: () => dispatch(scrollDownFourTracks()),
|
||||
loadFilesFromReferences: (e, startIndex) =>
|
||||
dispatch(loadFilesFromReferences(e.dataTransfer.files, startIndex))
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const {
|
||||
windows: { focused },
|
||||
display: { skinPlaylistStyle, playlistSize, playlistShade },
|
||||
media: { duration }
|
||||
media: { duration },
|
||||
playlist: { trackOrder }
|
||||
} = state;
|
||||
|
||||
return {
|
||||
maxTrackIndex: trackOrder.length - 1,
|
||||
focused,
|
||||
skinPlaylistStyle,
|
||||
playlistSize,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue