diff --git a/js/components/PlaylistWindow/PlaylistActionArea.js b/js/components/PlaylistWindow/PlaylistActionArea.js new file mode 100644 index 00000000..67246ab2 --- /dev/null +++ b/js/components/PlaylistWindow/PlaylistActionArea.js @@ -0,0 +1,41 @@ +import React from "react"; +import { connect } from "react-redux"; + +import { + play, + pause, + stop, + next, + previous, + openFileDialog +} from "../../actionCreators"; + +import MiniTime from "../MiniTime"; +import RunningTimeDisplay from "./RunningTimeDisplay"; + +// TODO: Use React.Fragment +const PlaylistWindow = props => ( +
+ +
+
+
+
+
+
+
+
+ +
+); + +const mapDispatchToProps = { + play, + pause, + stop, + openFileDialog, + next, + previous +}; + +export default connect(null, mapDispatchToProps)(PlaylistWindow); diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js index 577b0513..27e32264 100644 --- a/js/components/PlaylistWindow/index.js +++ b/js/components/PlaylistWindow/index.js @@ -15,10 +15,6 @@ import { SET_FOCUSED_WINDOW } from "../../actionTypes"; import { - play, - pause, - stop, - openFileDialog, toggleVisualizerStyle, scrollUpFourTracks, scrollDownFourTracks, @@ -28,7 +24,6 @@ import { import { clamp } from "../../utils"; import DropTarget from "../DropTarget"; -import MiniTime from "../MiniTime"; import PlaylistShade from "./PlaylistShade"; import AddMenu from "./AddMenu"; import RemoveMenu from "./RemoveMenu"; @@ -36,7 +31,7 @@ import SelectionMenu from "./SelectionMenu"; import MiscMenu from "./MiscMenu"; import ListMenu from "./ListMenu"; import ResizeTarget from "./ResizeTarget"; -import RunningTimeDisplay from "./RunningTimeDisplay"; +import PlaylistActionArea from "./PlaylistActionArea"; import TrackList from "./TrackList"; import ScrollBar from "./ScrollBar"; @@ -130,22 +125,7 @@ class PlaylistWindow extends React.Component { className="playlist-visualizer" onClick={this.props.toggleVisualizerStyle} /> - -
-
-
-
-
-
-
-
- +
({ - focusPlaylist: () => - dispatch({ - type: SET_FOCUSED_WINDOW, - window: WINDOWS.PLAYLIST - }), - play: () => dispatch(play()), - pause: () => dispatch(pause()), - stop: () => dispatch(stop()), - openFileDialog: () => dispatch(openFileDialog()), - close: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW }), - toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE }), - toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle()), - scrollUpFourTracks: () => dispatch(scrollUpFourTracks()), - scrollDownFourTracks: () => dispatch(scrollDownFourTracks()), +const mapDispatchToProps = { + focusPlaylist: () => ({ + type: SET_FOCUSED_WINDOW, + window: WINDOWS.PLAYLIST + }), + close: () => ({ type: TOGGLE_PLAYLIST_WINDOW }), + toggleShade: () => ({ type: TOGGLE_PLAYLIST_SHADE_MODE }), + toggleVisualizerStyle, + scrollUpFourTracks, + scrollDownFourTracks, loadFilesFromReferences: (e, startIndex) => - dispatch(loadFilesFromReferences(e.dataTransfer.files, false, startIndex)), - togglePlaylistShadeMode: () => dispatch(togglePlaylistShadeMode()) -}); + loadFilesFromReferences(e.dataTransfer.files, false, startIndex), + togglePlaylistShadeMode +}; const mapStateToProps = state => { const {