add download to wav functionality

.eslintrc.json

@@ -1,9 +1,9 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jasmine": true
-    },
-    "extends": ["react-app"],
-    "plugins": ["prettier", "react", "jasmine"]
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jasmine": true
+  },
+  "extends": ["react-app"],
+  "plugins": ["prettier", "react", "jasmine"]
 }

package.json

@@ -16,7 +16,7 @@
     "classnames": "^2.2.5",
     "color": "^2.0.1",
     "konva": "^2.1.3",
-    "lodash": "^3.10.1",
+    "lodash": "^4.17.11",
     "prop-types": "^15.6.0",
     "radium": "^0.24.0",
     "rc-select": "^7.7.6",
@@ -33,6 +33,7 @@
     "react-portal": "^3.2.0",
     "react-scripts-cssmodules": "^1.1.10",
     "react-select": "^1.2.1",
+    "record-audio-js": "^0.0.4",
     "teoria": "^2.5.0",
     "tone": "^0.11.11"
   },

src/components/Button/index.jsx

@@ -9,17 +9,23 @@ const propTypes = {
   children: PropTypes.node,
   darkHover: PropTypes.bool,
   hasBorder: PropTypes.bool,
+  href: PropTypes.bool,
+  download: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 };
 
-function Button (props) {
+function Button(props) {
   const style = {
     backgroundColor: props.color,
     ':hover': {
-      backgroundColor: props.darkHover ? ColorUtils.getDarker(props.color) : ColorUtils.getLighter(props.color),
+      backgroundColor: props.darkHover
+        ? ColorUtils.getDarker(props.color)
+        : ColorUtils.getLighter(props.color),
     },
     ':active': {
-      backgroundColor: props.darkHover ? ColorUtils.getDarker(props.color, 0.2) : ColorUtils.getDarker(props.color),
+      backgroundColor: props.darkHover
+        ? ColorUtils.getDarker(props.color, 0.2)
+        : ColorUtils.getDarker(props.color),
     },
     padding: 6,
     borderColor: ColorUtils.getDarker(props.color),
@@ -29,13 +35,19 @@ function Button (props) {
     borderRadius: props.hasBorder ? 3 : 0,
   };
 
-  return (
-    <button
+  return props.href ? (
+    <a
+      href={props.href}
+      download={props.download}
       className={props.className}
       onClick={props.onClick}
       style={style}
     >
       {props.children}
+    </a>
+  ) : (
+    <button className={props.className} onClick={props.onClick} style={style}>
+      {props.children}
     </button>
   );
 }

src/components/Downloads/Component.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Portal from 'react-portal';
+import styles from './styles.module.css';
+
+import Button from 'components/Button';
+
+const propTypes = {
+  downloadUrls: PropTypes.array.isRequired,
+};
+
+/* ================================ Toolbar ================================ */
+function Downloads(props) {
+  const { downloadUrls } = props;
+  return (
+    <div className={styles.downloads}>
+      <h2>Downloads</h2>
+      <ul>
+        {downloadUrls.map((url, i) => (
+          <li>
+            <audio src={url} controls />
+            <Button
+              key={`download-${i}`}
+              href={url}
+              download={url}
+              hasBorder
+              darkHover
+              color={'#f1f1f1'}
+              title={`download-${i}`}
+            >
+              {`download-${i}`}
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+Downloads.propTypes = propTypes;
+
+export default Downloads;

src/components/Downloads/Container.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ControlsComponent from './Component';
+
+class ControlsContainer extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      isColorPickerOpen: false,
+    };
+
+    this.handleColorSelectClick = this.handleColorSelectClick.bind(this);
+  }
+
+  handleColorSelectClick () {
+    this.setState({
+      isColorPickerOpen: !this.state.isColorPickerOpen,
+    });
+  }
+
+  render () {
+    return (
+      <ControlsComponent
+        onColorSelectClick={this.handleColorSelectClick}
+        isColorPickerOpen={this.state.isColorPickerOpen}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default ControlsContainer;

src/components/Downloads/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ControlsContainer from './Container';
+
+function Controls (props) {
+  return <ControlsContainer {...props} />;
+}
+
+export default Controls;

src/components/Downloads/styles.module.css

@@ -0,0 +1,14 @@
+.downloads {
+  position: absolute;
+  z-index: 200;
+  left: 0;
+  padding: 20px;
+  top: 100px;
+  background: white;
+}
+
+.downloads a {
+  display: block;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+}