feat(equalizer): add equalizer view and component and store values in…

… redux

app/App.js

@@ -151,7 +151,8 @@ class App extends React.Component {
           {this.renderNavLink('plugins', 'flask', 'Plugins', settings)}
           {this.renderNavLink('search', 'search', 'Search Results', settings)}
           {this.renderNavLink('settings', 'cogs', 'Settings', settings)}
-
+          {this.renderNavLink('equalizer', 'cogs', 'Equalizer', settings)}
+
           <SidebarMenuCategoryHeader>
             Collection
           </SidebarMenuCategoryHeader>

app/actions/player.js

@@ -9,6 +9,7 @@ export const UPDATE_VOLUME = 'UPDATE_VOLUME';
 export const MUTE = 'MUTE';
 export const UNMUTE = 'UNMUTE';
 export const UPDATE_PLAYBACK_STREAM_LOADING = 'UPDATE_PLAYBACK_STREAM_LOADING';
+export const UPDATE_EQUALIZER = 'UPDATE_EQUALIZER';
 
 export function startPlayback() {
   sendPlay();
@@ -90,3 +91,10 @@ export function updateStreamLoading(state) {
     payload: state
   };
 }
+
+export function updateEqualizer(payload) {
+  return {
+    type: UPDATE_EQUALIZER,
+    payload
+  };
+}

app/components/Equalizer/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './styles.scss';
+
+const Equalizer = ({ values, onChange }) => (
+  <div className={styles.equalizer_wrapper}>
+    <h1>Equalizer</h1>
+    <div className={styles.equalizer}>
+      {values.map((value, idx) => (
+        <div key={idx} className={styles.slider_container}>
+          <input
+            type='range'
+            className={styles.slider}
+            value={value}
+            onChange={evt => {
+              const updatedValues = [...values];
+
+              updatedValues[idx] = Number(evt.target.value);
+              onChange(updatedValues);
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+Equalizer.propTypes = {
+  values: PropTypes.arrayOf(PropTypes.number),
+  onChange: PropTypes.func
+};
+
+export default Equalizer;

app/components/Equalizer/styles.scss

@@ -0,0 +1,25 @@
+.equalizer_wrapper {
+  width: 100%;
+  padding: 30px 50px;
+}
+
+.equalizer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.slider_container {
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.slider {
+  width: 8px;
+  height: 175px;
+  padding: 0 5px;
+  -webkit-appearance: slider-vertical !important;
+}

app/containers/EqualizerViewContainer/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as Player from '../../actions/player';
+import Equalizer from '../../components/Equalizer';
+
+const EqualizerViewContainer = ({ actions, values }) => (
+  <Equalizer
+    values={values}
+    onChange={actions.updateEqualizer}
+  />
+);
+
+function mapStateToProps({ player }) {
+  return {
+    values: player.equalizer
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Player, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EqualizerViewContainer);

app/containers/MainContentContainer/index.js

@@ -17,6 +17,11 @@ import PluginsContainer from '../PluginsContainer';
 import SearchResultsContainer from '../SearchResultsContainer';
 import SettingsContainer from '../SettingsContainer';
 import TagViewContainer from '../TagViewContainer';
+<<<<<<< HEAD
+=======
+import LyricsContainer from '../LyricsContainer';
+import EqualizerViewContainer from '../EqualizerViewContainer';
+>>>>>>> feat(equalizer): add equalizer view and component and store values in redux
 
 import Downloads from '../../components/Downloads';
 
@@ -31,7 +36,7 @@ class MainContentContainer extends React.Component {
 
   render () {
     return (
-      <Route render={({ location, history, match }) => {
+      <Route render={({ location }) => {
         return (
           <MainLayout>
             <Switch key={location.key} location={location}>
@@ -47,6 +52,7 @@ class MainContentContainer extends React.Component {
               <Route path='/tag/:tagName' component={TagViewContainer} />
               <Route path='/search' component={SearchResultsContainer} />
               <Route path='/lyrics' component={LyricsContainer} />
+              <Route path='/equalizer' component={EqualizerViewContainer} />
             </Switch>
           </MainLayout>
         );
@@ -56,9 +62,8 @@ class MainContentContainer extends React.Component {
   }
 }
 
-function mapStateToProps (state) {
-  return {
-  };
+function mapStateToProps () {
+  return {};
 }
 
 function mapDispatchToProps (dispatch) {

app/reducers/player.js

@@ -8,7 +8,8 @@ import {
   UPDATE_VOLUME,
   MUTE,
   UNMUTE,
-  UPDATE_PLAYBACK_STREAM_LOADING
+  UPDATE_PLAYBACK_STREAM_LOADING,
+  UPDATE_EQUALIZER
 } from '../actions/player';
 
 import {
@@ -23,7 +24,8 @@ const initialState = {
   playbackProgress: 0,
   seek: 0,
   volume: 100,
-  muted: false
+  muted: false,
+  equalizer: [500, 1500, 2500, 4000, 6500, 8500, 12000, 16000]
 };
 
 export default function PlayerReducer(state=initialState, action) {
@@ -68,6 +70,11 @@ export default function PlayerReducer(state=initialState, action) {
     return Object.assign({}, state, {
       playbackStreamLoading: action.payload
     });
+  case UPDATE_EQUALIZER:
+    return {
+      ...state,
+      equalizer: action.payload
+    };
   default:
     return state;
   }