Get Bars visualizer working with Base component and visualizer-micro

Author: likethemammal

.gitignore

@@ -0,0 +1 @@
+node_modules/**

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+    require('../src/components/Audio/Audio.story');
+    require('../src/components/Visualizer/Visualizer.story');
+}
+
+configure(loadStories, module);

.storybook/constants.js

@@ -0,0 +1 @@
+export const IS_STORYBOOK = process.env.NODE_ENV === 'storybook'

.storybook/decorators.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import store from "../src/store"
+import getProvider from '../src/components/Provider'
+
+const Provider = getProvider(store)
+
+export const dispatch = store.dispatch
+
+export const withProvider = (stories) => {
+    return <Provider>
+        {stories()}
+    </Provider>
+}

.storybook/webpack.config.js

@@ -0,0 +1,17 @@
+const webpack = require('webpack')
+
+module.exports = (baseConfig, env, defaultConfig) => {
+    defaultConfig.plugins.push(
+        new webpack.DefinePlugin({
+            __DEV__: true,
+        })
+    )
+
+    defaultConfig.devServer = {
+        ...defaultConfig.devServer,
+        inline: true,
+        hot: true,
+    }
+
+    return defaultConfig
+}

package-lock.json

@@ -0,0 +1,32 @@
+{
+  "name": "css-visualizer",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "NODE_ENV=storybook start-storybook -p 9001 -c .storybook"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@storybook/react": "^4.1.6",
+    "react-hot-loader": "^4.6.3",
+    "redux-devtools-extension": "^2.13.7",
+    "reselect-tools": "0.0.7",
+    "storybook-addon-redux-listener": "^0.1.7"
+  },
+  "dependencies": {
+    "@babel/core": "^7.2.2",
+    "babel-loader": "^8.0.5",
+    "chroma-js": "^2.0.2",
+    "gradient-color": "^2.0.1",
+    "lodash": "^4.17.11",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-redux": "^6.0.0",
+    "redux": "^4.0.1",
+    "redux-saga": "^0.16.2",
+    "visualizer-micro": "^0.1.0"
+  }
+}

package.json

@@ -0,0 +1,24 @@
+const AUDIO__VISUALIZER_LOADED = 'AUDIO__VISUALIZER_LOADED'
+const AUDIO__AUDIO_MOUNTED = 'AUDIO__AUDIO_MOUNTED'
+
+export const types = {
+    AUDIO__VISUALIZER_LOADED,
+    AUDIO__AUDIO_MOUNTED,
+}
+
+const onAudioMounted = () => {
+    return {
+        type: types.AUDIO__AUDIO_MOUNTED,
+    }
+}
+
+const onVisualizerLoaded = () => {
+    return {
+        type: types.AUDIO__VISUALIZER_LOADED,
+    }
+}
+
+export const actions = {
+    onAudioMounted,
+    onVisualizerLoaded,
+}

sample.mp3

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+
+class _Audio extends Component {
+
+    constructor(props) {
+        super(props)
+        this.audioEl = React.createRef();
+    }
+
+    onAudioLoaded = () => {
+        this.props.vm.load(this.audioEl.current, this.props.onVisualizerLoaded)
+    }
+
+    onAudioMounted = () => {
+
+        const { current } = this.audioEl
+
+        if (current.readyState === 3 || current.readyState === 4) {
+            this.onAudioLoaded()
+        } else {
+            current.addEventListener('canplay', this.onAudioLoaded)
+        }
+
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props.audioMounted && !prevProps.audioMounted) {
+            this.onAudioMounted()
+        }
+
+    }
+
+    componentDidMount() {
+        this.audioEl.current.crossOrigin = "anonymous"
+    }
+
+    render() {
+
+        return <div>
+            <button onClick={this.props.onAudioMounted}>Start</button>
+            <audio ref={this.audioEl} controls src={'https://likethemammal.github.io/visualizer-micro/sample.mp3'}></audio>
+            {this.props.children}
+        </div>
+    }
+}
+
+export default _Audio

src/components/Audio/Audio.actions.js

@@ -0,0 +1,15 @@
+import {
+    connect
+} from 'react-redux'
+
+import { actions } from './Audio.actions'
+
+export default (Component) => connect((state) => {
+    return {
+        audioMounted: state.Audio.audioMounted,
+        visualizerLoaded: state.Audio.visualizerLoaded,
+        vm: state.Audio.vm
+    }
+}, {
+    ...actions,
+})(Component)

src/components/Audio/Audio.component.js

@@ -0,0 +1,23 @@
+import { types } from './Audio.actions'
+import VisualizerMicro from "visualizer-micro"
+
+export const initialState = {
+    visualizerLoaded: false,
+    audioMounted: false,
+    vm: new VisualizerMicro(),
+}
+
+export const reducer = {
+    [types.AUDIO__VISUALIZER_LOADED]: (state, action) => {
+        return {
+            ...state,
+            visualizerLoaded: true,
+        }
+    },
+    [types.AUDIO__AUDIO_MOUNTED]: (state, action) => {
+        return {
+            ...state,
+            audioMounted: true,
+        }
+    },
+}

src/components/Audio/Audio.connect.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf, addDecorator } from '@storybook/react'
+import { withProvider } from '../../../.storybook/decorators'
+
+import _Audio from './'
+
+storiesOf('Audio', module)
+    .addDecorator(withProvider)
+    .add('default', () => {
+        return <_Audio />
+    })
+

src/components/Audio/Audio.reducer.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import connect from './Audio.connect'
+import Component from './Audio.component'
+
+export default connect(Component)
+

src/components/Audio/Audio.story.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+
+import { hot } from 'react-hot-loader'
+
+const ProviderWrapper = (store) => ({ children }) => (
+    <Provider store={store}>
+        { children }
+    </Provider>
+)
+
+export default (store) => hot(module)(ProviderWrapper(store))

src/components/Audio/index.js

@@ -0,0 +1,98 @@
+import React, { Component } from 'react'
+
+import { lighterColor, changeColor, darkerColor, fadeToColor, } from '../../../units/utils/color'
+import { sampleArray, } from '../../../units/utils/visualizer'
+
+import { prefix } from '../../../constants/app'
+
+import Base from '../Base.component'
+
+const _numOfBars = (viewportWidth, barWidth) => viewportWidth / barWidth
+
+const BAR_WIDTH = 24
+
+class Bars extends Base {
+
+    name = 'Bars'
+    currentAmp = 0
+    fps = 40
+    colorsNeeded = 2
+
+    bars = []
+
+    setupElements = () => {
+
+        const numOfBars = _numOfBars(window.innerWidth, BAR_WIDTH)
+
+        var reflectionOverlay = document.createElement('div');
+
+        reflectionOverlay.id = "reflection-overlay";
+
+        this.visualizer.current.innerHTML = ''
+        this.visualizer.current.appendChild(reflectionOverlay)
+
+        for (var i = 0; i < numOfBars; i++) {
+            var bar = document.createElement('div'),
+                barWrapper = document.createElement('div');
+
+            bar.className = 'bar';
+            barWrapper.className = 'bar-wrapper';
+            barWrapper.style.left = i*BAR_WIDTH + "px";
+
+            barWrapper.appendChild(bar);
+            this.visualizer.current.appendChild(barWrapper);
+        }
+
+        this.bars = document.getElementsByClassName('bar');
+    }
+
+    setupColors = () => {
+        const styleSheet = document.getElementById('visualizer-css');
+        var stylesStr = '';
+        var color = this.props.color1;
+
+        const numOfBars = _numOfBars(window.innerWidth, BAR_WIDTH)
+
+        for (var i = 0; i < numOfBars; i++) {
+
+            var startOfSelectorStr = '.bar-wrapper:nth-of-type(' + (i + 2) + ') .bar', // Its '+ 2' because reflectionOverlay is first-child
+                beforeStr = startOfSelectorStr + ':before { background-color: ' + lighterColor(color, 0.1) + '; }',
+                afterStr = startOfSelectorStr + ':after { background-color: ' + darkerColor(color, 0.1) + '; }',
+                barStr = startOfSelectorStr + ' { background-color: ' + darkerColor(color, 0.2) + '; }';
+
+            stylesStr += beforeStr + afterStr + barStr;
+
+            color = fadeToColor(color, this.props.color2, i/numOfBars);
+        }
+
+        styleSheet.innerHTML = stylesStr;
+    }
+
+    onWaveform = (waveform) => {
+        const numOfBars = _numOfBars(window.innerWidth, BAR_WIDTH)
+
+        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("");
+        }
+    }
+
+    onMount = () => {
+        this.setupElements()
+        this.setupColors()
+    }
+
+    onResize = () => {
+        this.setupElements()
+        this.setupColors()
+    }
+
+
+}
+
+export default Bars

src/components/Provider.js

@@ -0,0 +1,67 @@
+#reflection-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    opacity: 0.5;
+
+    background: transparent; /* Old browsers */
+    background: -moz-linear-gradient(top, transparent 50%, #000000 50%, #000000 50%, transparent 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,transparent), color-stop(50%,#000000), color-stop(50%,#000000), color-stop(100%,transparent)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, transparent 50%,#000000 50%,#000000 50%,transparent 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, transparent 50%,#000000 50%,#000000 50%,transparent 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, transparent 50%,#000000 50%,#000000 50%,transparent 100%); /* IE10+ */
+    background: linear-gradient(to bottom, transparent 50%,#000000 50%,#000000 50%,transparent 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='transparent',GradientType=0 ); /* IE6-9 */
+}
+
+.bar-wrapper {
+    height: 100%;
+    position: absolute;
+
+    -webkit-transform: scaleY(0);
+    -moz-transform: scaleY(0);
+    transform: scaleY(0);
+
+    -webkit-transition: -webkit-transform 50ms linear;
+    -moz-transition: -moz-transform 50ms linear;
+    -o-transition: -o-transform 50ms linear;
+    transition: transform 50ms linear;
+}
+
+.bar {
+    width: 12px;
+    height: 100%;
+}
+
+.bar::before,
+.bar::after {
+    position: absolute;
+    content: ' ';
+}
+
+.bar::before {
+    top: -3px;
+    left: -6px;
+    width: 6px;
+    height: 100%;
+
+    -webkit-transform: skew(0,45deg);
+    -moz-transform: skew(0,45deg);
+    -o-transform: skew(0,45deg);
+    transform: skew(0,45deg);
+}
+
+.bar::after {
+    top: -6px;
+    left: -4px;
+    width: 100%;
+    height: 6px;
+
+    -webkit-transform: skew(45deg);
+    -moz-transform: skew(45deg);
+    -o-transform: skew(45deg);
+    transform: skew(45deg);
+}

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

@@ -0,0 +1,6 @@
+import React from 'react'
+import connect from '../Visualizer.connect'
+import Component from './Bars.component'
+
+export default connect(Component)
+