From ff11deae0d6c778eddfc3a63ad81f07e94e4b067 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Mon, 1 Jan 2018 13:31:05 -0800 Subject: [PATCH] Refactor loading files --- js/actionCreators.js | 35 ++-- js/components/MainWindow/index.js | 21 ++- js/components/PlaylistWindow/index.js | 237 +++++++++++++++----------- 3 files changed, 169 insertions(+), 124 deletions(-) diff --git a/js/actionCreators.js b/js/actionCreators.js index 525d7712..865a6f65 100644 --- a/js/actionCreators.js +++ b/js/actionCreators.js @@ -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)); }; } diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.js index e8fac09a..4ebd3f18 100644 --- a/js/components/MainWindow/index.js +++ b/js/components/MainWindow/index.js @@ -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 {
@@ -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); diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js index d81f7f22..dfbe23c4 100644 --- a/js/components/PlaylistWindow/index.js +++ b/js/components/PlaylistWindow/index.js @@ -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 ; +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 ; + } - return ( - -
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
- - - - -
-
-
-
- -
-
-
-
-
-
-
+ 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 ( + +
+
+
+
+
+
- - -
-
-
-
- - ); -}; +
+
+
+ +
+
+ +
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ +
+
+ + ); + } +} 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,