Merge pull request nukeop#296 from charjac/feat.equalizer

feat equalizer

.gitignore

@@ -63,4 +63,6 @@ nuclear.json
 bundle.electron.js
 
 # Prettier configuration file
-.prettierrc
+.prettierrc
+
+package-lock.json

.npmrc

@@ -0,0 +1 @@
+package-lock=false

app/App.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
-import Sound from 'react-sound';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
 import _ from 'lodash';
+import Sound from 'react-sound-html5';
+
 import * as Actions from './actions';
 import * as PlayerActions from './actions/player';
 import * as PlaylistsActions from './actions/playlists';
@@ -151,7 +152,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', 'sliders', 'Equalizer', settings)}
+
           <SidebarMenuCategoryHeader>
             Collection
           </SidebarMenuCategoryHeader>

app/actions/equalizer.js

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

app/actions/player.js

@@ -1,4 +1,4 @@
-import Sound from 'react-sound';
+import Sound from 'react-sound-html5';
 import { sendPaused, sendPlay } from '../mpris';
 
 export const START_PLAYBACK = 'START_PLAYBACK';

app/components/Equalizer/PreAmp/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './index.scss';
+
+const PreAmp = ({
+  onChange,
+  value
+}) => (
+  <input
+    type='range'
+    onChange={evt => onChange(Number(evt.target.value))}
+    value={value}
+    className={styles.preamp}
+    min={-10}
+    max={10}
+    step={1}
+  />
+);
+
+PreAmp.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.number.isRequired
+};
+
+export default PreAmp;
+

app/components/Equalizer/PreAmp/index.scss

@@ -0,0 +1,9 @@
+.preamp {
+  -webkit-appearance: slider-vertical !important;
+  height: 60%;
+  margin-top: 30px;
+  cursor: grab !important;
+  &:active {
+    cursor: grabbing !important;
+  }
+}

app/components/Equalizer/chart.js

@@ -0,0 +1,63 @@
+function getChartOptions(data) {
+  return {
+    type: 'line',
+    data,
+    options: {
+      events: ['mousemove', 'mousedown'],
+      onHover: (event, chartElement) => {
+        switch (event.type) {
+        case 'mousedown':
+          event.target.style.cursor = chartElement[0] ? 'grabbing' : 'default';
+          break;
+        default:
+          event.target.style.cursor = chartElement[0] ? 'grab' : 'default';
+        }
+      },
+      responsive: true,
+      legend: {
+        display: false
+      },
+      tooltips: {
+        enabled: false
+      },
+      animation: {
+        duration: 1000
+      },
+      scales: {
+        xAxes: [{
+          display: true,
+          gridLines: {
+            display: false
+          },
+          scaleLabel: {
+            display: true
+          }
+        }],
+        yAxes: [{
+          ticks: {
+            display: false,
+            min: 0,
+            max: 20
+          },
+          gridLines: {
+            display: false
+          },
+          scaleLabel: {
+            display: false
+          }
+        }]
+      }
+    }
+  };
+}
+
+function formatLabels(frequencies) {
+  return frequencies.map(freq => {
+    return freq > 999
+      ? `${Math.round(freq / 1000)}KHz`
+      : `${freq}Hz`;
+  });
+}
+
+export { getChartOptions, formatLabels };
+