Toggle vis syle from playlist

This commit is contained in:
Jordan Eldredge 2017-11-18 14:19:02 -08:00
parent 0e773a0d31
commit 802b1564b2
3 changed files with 24 additions and 9 deletions

View file

@ -34,7 +34,8 @@ import {
PAUSE,
REVERSE_LIST,
RANDOMIZE_LIST,
SET_TRACK_ORDER
SET_TRACK_ORDER,
TOGGLE_VISUALIZER_STYLE
} from "./actionTypes";
export function play() {
@ -274,3 +275,7 @@ export function sortListByTitle() {
return dispatch({ type: SET_TRACK_ORDER, trackOrder });
};
}
export function toggleVisualizerStyle() {
return { type: TOGGLE_VISUALIZER_STYLE };
}

View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { TOGGLE_VISUALIZER_STYLE } from "../../actionTypes";
import { toggleVisualizerStyle } from "../../actionCreators";
const OSCILLOSCOPE = 1;
const BAR = 2;
@ -181,7 +181,7 @@ class Visualizer extends React.Component {
ref={node => (this.canvas = node)}
width="152"
height="32"
onClick={this.props.toggleVisualizer}
onClick={this.props.toggleVisualizerStyle}
/>
);
}
@ -193,8 +193,8 @@ const mapStateToProps = state => ({
status: state.media.status
});
const mapDispatchToProps = dispatch => ({
toggleVisualizer: () => dispatch({ type: TOGGLE_VISUALIZER_STYLE })
});
const mapDispatchToProps = {
toggleVisualizerStyle
};
export default connect(mapStateToProps, mapDispatchToProps)(Visualizer);

View file

@ -27,7 +27,13 @@ import {
SET_PLAYLIST_SCROLL_POSITION
} from "../../actionTypes";
import { getOrderedTracks } from "../../selectors";
import { play, pause, stop, openFileDialog } from "../../actionCreators";
import {
play,
pause,
stop,
openFileDialog,
toggleVisualizerStyle
} from "../../actionCreators";
import "../../../css/playlist-window.css";
@ -134,7 +140,10 @@ const PlaylistWindow = props => {
</div>
<div className="playlist-bottom-center draggable" />
<div className="playlist-bottom-right draggable">
<div className="playlist-visualizer" />
<div
className="playlist-visualizer"
onClick={props.toggleVisualizerStyle}
/>
<RunningTimeDisplay />
<div className="playlist-action-buttons">
<div className="playlist-previous-button" />
@ -169,7 +178,8 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
setPlaylistScrollPosition: position =>
dispatch({ type: SET_PLAYLIST_SCROLL_POSITION, position: 100 - position }),
close: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW }),
toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE })
toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE }),
toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle())
});
const mapStateToProps = state => {