Hook up random colors to Bars visualizer

Author: likethemammal

package-lock.json

@@ -22,6 +22,7 @@
     "chroma-js": "^2.0.2",
     "gradient-color": "^2.0.1",
     "lodash": "^4.17.11",
+    "randomcolor": "^0.5.3",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",

package.json

@@ -74,11 +74,20 @@ class Bars extends Base {
         var sampleAvgs = sampleArray(waveform, numOfBars, 1);
         var bars = this.bars;
 
-
-
         for (var j = 0; j < numOfBars; j++) {
-            var magnitude = (Math.floor(sampleAvgs[j]*1000)/1000);
-            bars[j].parentNode.style[prefix.css + 'transform'] = ["scaleY(", magnitude, ") translate3d(0,0,0)"].join("");
+            const magnitude = Math.floor(sampleAvgs[j]*1000)/1000
+
+            const bar = bars[j]
+
+            if (bar) {
+                bar.parentNode
+                    .style[prefix.css + 'transform'] =
+                    [
+                        "scaleY(",
+                        magnitude,
+                        ") translate3d(0,0,0)"
+                    ].join("")
+            }
         }
     }
 

src/components/Visualizer/Bars/Bars.component.js

@@ -1,15 +1,19 @@
 import React, { Component } from 'react'
+import randomColor from 'randomcolor'
 
 import Bars from './Bars'
 
+const color1 = randomColor()
+const color2 = randomColor()
+
 class Visualizer extends Component {
 
     constructor(props) {
         super(props)
     }
 
     render() {
-        return <Bars color1={'rgb(255,0,0)'} color2={'rgb(255,255,0)'}/>
+        return <Bars color1={color1} color2={color2}/>
     }
 }