feat(equalizer): add equalizer presets

app/actions/equalizer.js

@@ -0,0 +1,16 @@
+export const UPDATE_EQUALIZER = 'UPDATE_EQUALIZER';
+export const SET_EQUALIZER = 'SET_EQUALIZER';
+
+export function updateEqualizer(payload) {
+  return {
+    type: UPDATE_EQUALIZER,
+    payload
+  };
+}
+
+export function setEqualizer(payload) {
+  return {
+    type: SET_EQUALIZER,
+    payload
+  };
+}

app/actions/player.js

@@ -9,7 +9,6 @@ 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();
@@ -91,10 +90,3 @@ export function updateStreamLoading(state) {
     payload: state
   };
 }
-
-export function updateEqualizer(payload) {
-  return {
-    type: UPDATE_EQUALIZER,
-    payload
-  };
-}

app/components/Equalizer/index.js

@@ -112,8 +112,7 @@ class Equalizer extends React.Component {
         borderColor: 'rgb(30, 203, 92)',
         backgroundColor: gradient,
         data: this.props.values.map(val => val + 10),
-        pointHitRadius: 50,
-        pointHoverRadius: 10,
+        pointHoverRadius: 5,
         borderWidth: 2
       }]
     }));
@@ -128,6 +127,7 @@ class Equalizer extends React.Component {
   componentDidUpdate(prevProps) {
     if (!_.isEqual(prevProps.values, this.props.values)) {
       this.chartInstance.data.datasets[0].data = this.props.values.map(val => val + 10);
+      this.chartInstance.update(0);
     }
   }
 

app/components/Equalizer/styles.scss

@@ -5,6 +5,5 @@
 
 .chart_wrapper {
   margin: auto;
-  width: 80%;
-  height: 400px;
+  width: 90%;
 }

app/components/EqualizerPresetList/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { List, Icon } from 'semantic-ui-react';
+import classNames from 'classnames';
+
+import styles from './styles.scss';
+
+const EqualizerPresetList = ({ presets, onClickItem, selected }) => (
+  <List divided verticalAlign='middle' className={styles.list}>
+    {presets.map((preset, idx) => (
+      <List.Item
+        key={idx}
+        onClick={() => preset !== selected && onClickItem(preset)}
+        className={classNames(styles.item, {
+          [styles.click_item]: preset !== selected
+        })}
+      >
+        <List.Content floated='right'>
+          {preset === selected && <Icon name='check' />}
+        </List.Content>
+        <List.Content>{preset}</List.Content>
+      </List.Item>
+    ))}
+  </List>
+);
+
+EqualizerPresetList.propTypes = {
+  presets: PropTypes.arrayOf(PropTypes.string),
+  onClickItem: PropTypes.func,
+  selected: PropTypes.string
+};
+
+export default EqualizerPresetList;

app/components/EqualizerPresetList/styles.scss

@@ -0,0 +1,17 @@
+.list {
+  margin: auto !important;
+  width: 50%;
+  height: 200px;
+  overflow: auto;
+}
+
+.item {
+  padding: 5px !important;
+}
+
+.click_item {
+  cursor: pointer;
+  :hover {
+    border-right: solid 2px white;
+  }
+}

app/containers/EqualizerViewContainer/index.js

@@ -2,25 +2,35 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import * as Player from '../../actions/player';
+import * as EqualizerActions from '../../actions/equalizer';
 import Equalizer from '../../components/Equalizer';
+import EqualizerPresetList from '../../components/EqualizerPresetList';
 
-const EqualizerViewContainer = ({ actions, values }) => (
-  <Equalizer
-    values={values}
-    onChange={actions.updateEqualizer}
-  />
+const EqualizerViewContainer = ({ actions, values, presets, selected }) => (
+  <React.Fragment>
+    <Equalizer
+      values={values}
+      onChange={actions.updateEqualizer}
+    />
+    <EqualizerPresetList
+      onClickItem={actions.setEqualizer}
+      presets={presets}
+      selected={selected}
+    />
+  </React.Fragment>
 );
 
-function mapStateToProps({ player }) {
+function mapStateToProps({ equalizer }) {
   return {
-    values: player.equalizer
+    selected: equalizer.selected,
+    values: equalizer.presets[equalizer.selected],
+    presets: Object.keys(equalizer.presets)
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Player, dispatch)
+    actions: bindActionCreators(EqualizerActions, dispatch)
   };
 }
 

app/containers/SoundContainer/index.js

@@ -148,7 +148,7 @@ class SoundContainer extends React.Component {
   }
 
   render () {
-    let { player, queue, plugins } = this.props;
+    let { player, queue, plugins, equalizer } = this.props;
     let streamUrl = '';
 
     if (queue.queueItems.length > 0) {
@@ -168,7 +168,7 @@ class SoundContainer extends React.Component {
         onLoad={this.handleLoaded.bind(this)}
         position={player.seek}
         volume={player.muted ? 0 : player.volume}
-        equalizer={player.equalizer}
+        equalizer={equalizer}
       />
     );
   }
@@ -180,7 +180,8 @@ function mapStateToProps (state) {
     plugins: state.plugin,
     player: state.player,
     scrobbling: state.scrobbling,
-    settings: state.settings
+    settings: state.settings,
+    equalizer: state.equalizer.presets[state.equalizer.selected]
   };
 }
 

app/persistence/store.js

@@ -26,6 +26,19 @@ function initStore () {
       albums: []
     });
   }
+
+  if (!store.get('equalizer')) {
+    store.set('equalizer', {
+      selected: 'default',
+      presets: {
+        default: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        'Rock&Roll': [4, 6, -7, -8, 4, 3, 0, 5, 7, 10],
+        'Hip-Hop': [-6, 5, 1, 7, -8, 10, 9, 6, 0, 5],
+        'Soul': [3, 4, 5, 6, 7, 8, 9, 10, 1, 2],
+        'Classic': [1, 2, 3, 4, 5, 6, -10, -9, -8, -7]
+      }
+    });
+  }
 }
 
 initStore();

app/reducers/equalizer.js

@@ -0,0 +1,40 @@
+import {
+  UPDATE_EQUALIZER,
+  SET_EQUALIZER
+} from '../actions/equalizer';
+import { store } from '../persistence/store';
+
+const { presets, selected } = store.get('equalizer');
+
+const initialState = {
+  presets,
+  selected
+};
+
+export default function EqualizerReducer(state = initialState, action) {
+  let newState;
+
+  switch (action.type) {
+  case UPDATE_EQUALIZER:
+    newState = {
+      selected: 'custom',
+      presets: {
+        ...state.presets,
+        custom: action.payload
+      }
+    };
+    store.set('equalizer', newState);
+
+    return newState;
+  case SET_EQUALIZER:
+    newState = {
+      presets: state.presets,
+      selected: action.payload
+    };
+    store.set('equalizer', newState);
+
+    return newState;
+  default:
+    return state;
+  }
+}

app/reducers/index.js

@@ -11,7 +11,11 @@ import DashboardReducer from './dashboard';
 import TagReducer from './tag';
 import ToastsReducer from './toasts';
 import LyricsReducer from './lyrics';
+<<<<<<< HEAD
 import FavoritesReducer from './favorites';
+=======
+import EqualizerReducer from './equalizer';
+>>>>>>> feat(equalizer): add equalizer presets
 
 const rootReducer = combineReducers({
   search: SearchReducer,
@@ -25,7 +29,11 @@ const rootReducer = combineReducers({
   settings: SettingsReducer,
   toasts: ToastsReducer,
   lyrics: LyricsReducer,
+<<<<<<< HEAD
   favorites: FavoritesReducer 
+=======
+  equalizer: EqualizerReducer
+>>>>>>> feat(equalizer): add equalizer presets
 });
 
 export default rootReducer;

app/reducers/player.js

@@ -8,8 +8,7 @@ import {
   UPDATE_VOLUME,
   MUTE,
   UNMUTE,
-  UPDATE_PLAYBACK_STREAM_LOADING,
-  UPDATE_EQUALIZER
+  UPDATE_PLAYBACK_STREAM_LOADING
 } from '../actions/player';
 
 import {
@@ -24,8 +23,7 @@ const initialState = {
   playbackProgress: 0,
   seek: 0,
   volume: 100,
-  muted: false,
-  equalizer: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+  muted: false
 };
 
 export default function PlayerReducer(state=initialState, action) {
@@ -70,11 +68,6 @@ 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;
   }