Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-19 17:43:50 +00:00
Code Issues Projects Releases Wiki Activity

Abstract out Playlist Action Area. Add prev/next to playlist

Browse source
This commit is contained in:
Jordan Eldredge 2018-01-16 21:09:42 -08:00
parent fb58e54a3d
commit c1d6d06c46
2 changed files with 56 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

41
js/components/PlaylistWindow/PlaylistActionArea.js Normal file
View file

@ -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 => (
<div>
<RunningTimeDisplay />
<div className="playlist-action-buttons">
<div className="playlist-previous-button" onClick={props.previous} />
<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" onClick={props.next} />
<div className="playlist-eject-button" onClick={props.openFileDialog} />
</div>
<MiniTime />
</div>
);
const mapDispatchToProps = {
play,
pause,
stop,
openFileDialog,
next,
previous
};
export default connect(null, mapDispatchToProps)(PlaylistWindow);

56
js/components/PlaylistWindow/index.js
View file

@ -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}
/>
<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 />
<PlaylistActionArea />
<ListMenu />
<div
id="playlist-scroll-up-button"
@ -163,26 +143,20 @@ class PlaylistWindow extends React.Component {
}
}
// TODO: Convert to object syntax
const mapDispatchToProps = dispatch => ({
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 {