D3.js + React Music Player / Visualizer

            
              // Work In Progress. 😝
// Wanna convert this a Redux app when I have the following features stubbed out:
// • Add Data Visualiztions
// • Add scrubbing
// • Full Screenage
// • Hook up to Soundcloud api
//   - Build SoundCloud search

/*
    Artists
    ===========================
    Andrew Bird
    http://www.andrewbird.net/

    Portugal, The Man.
    http://www.portugaltheman.com
    ===========================
*/

// Config
let helpers = {
    secondsToHMS: function(d) {
        d = Number(d);
        var h = Math.floor(d / 3600);
        var m = Math.floor(d % 3600 / 60);
        var s = Math.floor(d % 3600 % 60);
        return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s); 
    },
    randomProperty: function (obj) {
        var keys = Object.keys(obj)
        return obj[keys[ keys.length * Math.random() << 0]];
    },
    cycleThroughObject: (obj, i) => {
        var keys = Object.keys(obj);
        i < keys.length ? i++ : i = 0;
        return i
    },
    getAverageVolume: (array) => {
        var values = 0;
        var average;

        var length = array.length;

        // get all the frequency amplitudes
        for (var i = 0; i < length; i++) {
            values += array[i];
        }

        average = values / length;
        return average;
    },
    hexToRgb: (hex) => {
        hex.replace("#", "");
        var bigint = parseInt(hex, 16);
        var r = (bigint >> 16) & 255;
        var g = (bigint >> 8) & 255;
        var b = bigint & 255;

        return r + "," + g + "," + b;
    }
}
let darkTheme = {
    overlayBg: "rgba(40,40,40,0.9)",
    textColor: "#eee",
    iconColor: "#fff",
    playButtonColor: "#000",
    brightTone: "#898787",
    lightTone: "#333333",
    midTone: "#222222",
    darkTone: "#111111",
    gradient: {
        primary: "#557c89",
        secondary: "#ace33b",
        tertiary: "#ffcf06"
    },
    visualizer: {
        rippleColor: "#557c89",
        barColor:"#fff"
    }
}
let lightTheme = {
    overlayBg: "rgba(255,255,255,0.9)",
    textColor: "#333",
    iconColor: "#3BD0E3",
    playButtonColor: "#fff",
    brightTone: "#fafafa",
    lightTone: "#eee",
    midTone: "#aaaaaa",
    darkTone: "#777",
    gradient: {
        primary: "#7E5589",
        secondary: "#3BD0E3",
        tertiary: "#FF067E"
    },
    visualizer: {
        rippleColor: "#FF067E",
        barColor:"#3BD0E3"
    }
}

//////////////////
// Player
//////////////////
/* 
    The meat and potatoes... of a somewhat messy, but very tasty, soup.
*/
class MusicPlayer extends React.Component {
    constructor(props) {
        super(props);
        /*
            In componentDidMount we set this to reference the 
            corresponding <audio> DOM node so it is available as a global reference.
            There is probably a better way to do this. Look into it, Tedd.
        */
        this.audioNode;

        this.state = {
            hover: false,
            isPlaying: false,
            currentSongTimeElapsed: 0,
            currentSongDuration: 0,
            theme: this.props.theme,
            showOverlay: null,
            audioNodeId: "audioNode" + this.props.id,
            layoutConfig: {
                playerWidth: 360,
                scrubberBar: {
                    height: 7
                }
            }
        }
    }
    componentDidMount() {
        // Give our player component a global variable that references the corresponding HTML <audio> tag
        this.audioNode = document.getElementById(this.state.audioNodeId);

        /* 
            Song
            -----------------
            Setting up events that observe the audio element's actions
            = Play
            = Pause
            = Update elapsed time
        */
        var song = this.audioNode;
        // Set the duration time
        song.onloadedmetadata = () => this.setState({currentSongDuration: song.duration});
        // Update the elapsed playtime
        song.ontimeupdate = () => this.updateTime();
        // Update when played
        song.onplay = () => this.setState({isPlaying: true})
        // Update when paused
        song.onpause = () => this.setState({isPlaying: false})
    }

    /* 
       Audio Events
    */
    updateTime(){
        var currentTime = this.audioNode.currentTime;
        this.setState({currentSongTimeElapsed : currentTime})
    }
    pauseAudio() {
        this.audioNode.pause();
        this.setState({isPlaying: false});
    }
    playAudio() {
        // Pause all first
        // Eventually we will want to move this to a isPlaying react state... Probably Redux, ya know?
        var audioNodes = document.getElementsByTagName("audio");
        _.each(audioNodes, (n) => document.getElementById(n.id).pause());

        // Play selected song
        this.audioNode.play();
    }

    /* 
       Interaction Event Handlers
    */
    handleMouseEnter() {
        this.setState({hover: true})
    }
    handleMouseLeave() {
        this.setState({hover: false})
    }

    /* 
       Switch Theme
    */
    setTheme(theme) {
        if (theme == "Dark") {
            this.setState({theme: darkTheme});
        } else {
            this.setState({theme: lightTheme});
        }
    }

    enlargePlayer() {
        this.state.layoutConfig.playerWidth = 500;
        this.setState({layoutConfig : this.state.layoutConfig})
    }
    shrinkPlayer() {
        this.state.layoutConfig.playerWidth = 250;
        this.setState({layoutConfig : this.state.layoutConfig})
    }
    showOverlay() {
        this.setState({showOverlay: true});
    }
    hideOverlay() {
        this.setState({showOverlay: false});
    }
    /* 
       Styles
    */
    getStyles() {
        var hover = this.state.hover,
            isPlaying = this.state.isPlaying;
        return {
            background: "#fff",
            position: "relative",
            //overflow: "hidden",
            width: this.state.layoutConfig.playerWidth,
            transform: hover || isPlaying ? "translateY(-3px)" : "",
            boxShadow: hover || isPlaying ? "2px 6px 20px 0px rgba(0,0,0,0.6)" : "1px 0px 4px 0px rgba(0,0,0,0.66)",
            transition: "all ease 0.3s",
            margin: 10
        }    
    }
    /* 
       Render Methods
    */
    renderOverlay() {
        if (this.state.showOverlay) {
            return (
                <MusicPlayerOverlay
                    theme={this.state.theme}
                    hideOverlay={this.hideOverlay.bind(this)}>
                </MusicPlayerOverlay>
            )
        }
    }
    renderUtilities() {
        if (this.props.utilities) {
            return (
                <MusicPlayerUtilityBelt
                    isPlaying={this.state.isPlaying}
                    showOverlay={this.showOverlay.bind(this)}
                    theme={this.state.theme}
                    enlarge>
                </MusicPlayerUtilityBelt>
            )
        }
    }

    render() {
        return (
            <div id="music-player"
                ref="musicPlayer"
                style={this.getStyles()}
                onTouchStart={this.handleMouseEnter.bind(this)}
                onTouchEnd={this.handleMouseLeave.bind(this)}
                onMouseEnter={this.handleMouseEnter.bind(this)}
                onMouseLeave={this.handleMouseLeave.bind(this)}>
                {/*
                <ThemeToggle 
                    setTheme={this.setTheme.bind(this)}
                    theme={this.state.theme}
                    playerHover={this.state.hover}></ThemeToggle>*/}
                <AlbumArt
                    albumArt={this.props.albumArt}
                    hover={this.state.hover}
                    isPlaying={this.state.isPlaying}
                    theme={this.state.theme}
                    trackInfo={this.props.trackInfo}
                    playerId={this.props.id}></AlbumArt>
                <VisualizerContainer
                    visualizerType={this.props.visualizerType}
                    playerId={this.props.id}
                    audioNodeId={this.state.audioNodeId}
                    theme={this.state.theme}
                    isPlaying={this.state.isPlaying}
                    playerWidth={this.state.layoutConfig.playerWidth}>
                </VisualizerContainer>
                <MusicPlayerControls
                    audioNode={this.audioNode}
                    isPlaying={this.state.isPlaying}
                    play={this.playAudio.bind(this)}
                    pause={this.pauseAudio.bind(this)}
                    theme={this.state.theme}
                    layoutConfig={this.state.layoutConfig}
                    currentSongTimeElapsed={this.state.currentSongTimeElapsed}
                    currentSongDuration={this.state.currentSongDuration}></MusicPlayerControls>
                {this.renderUtilities()}
                {this.renderOverlay()}
                <AudioElement
                    playerId={this.props.id}
                    trackUrl={this.props.trackUrl}
                    isPlaying={this.state.isPlaying}>
                </AudioElement>
            </div>
        )
    }
}
class AudioElement extends React.Component {
    componentDidMount() {
        if (this.props.isPlaying) {
            this.refs.audioNode.play();
        }
    }
    render() {
        var id = "audioNode" + this.props.playerId,
            trackUrl = this.props.trackUrl;
        return (
            <audio 
                id={id} 
                ref={id} 
                src={trackUrl}
                crossOrigin="anonymous">
                Your browser does not support the audio tag.
            </audio>
        )
    }
}

// Controls
class MusicPlayerControls extends React.Component {
    getStyles() {
        var bgColor = this.props.theme == darkTheme ? this.props.theme.midTone : this.props.theme.brightTone;
        return {
            background: bgColor,
            color: "#fff",
            height: 40,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-around",
            overflow: "visible",
            position: "relative",
            zIndex: 101
        }
    }
    getScrubTimeStyles() {
        return {
            fontSize: "0.8em", 
            color: this.props.theme.textColor
        }
    }
    render() {
        return (
            <div style={this.getStyles()}>
                <div style={this.getScrubTimeStyles()}>{helpers.secondsToHMS(this.props.currentSongTimeElapsed)}</div>
                <PlayButton 
                    {...this.props}></PlayButton>
                <div style={this.getScrubTimeStyles()}>{helpers.secondsToHMS(this.props.currentSongDuration)}</div>
                <Scrubber 
                    {...this.props}>
                </Scrubber>
            </div>
        )
    }
}
class PlayButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            hover: false
        }
    }
    handleMouseEnter() {
        this.setState({hover: true})
    }
    handleMouseLeave() {
        this.setState({hover: false})
    }
    handleClick() {
        if (this.props.audioNode.paused) {
            this.props.play();
        } else {
            this.props.pause();
        }
    }

    getStyles() {
        var hover = this.state.hover,
            isPlaying = this.props.isPlaying,
            dark = this.props.theme == darkTheme;
        return {
            background: hover || isPlaying ? (dark ? "#111" : this.props.theme.iconColor) : null,
            color: "#fff",
            height: 60,
            width: 60,
            marginBottom: hover || isPlaying ? 10 : -10,
            borderRadius: "50%",
            alignSelf: "flex-end",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: "pointer",
            transition: "all ease 0.3s"
        }
    }
    render() {
        var hover = this.state.hover,
            isPlaying = this.props.isPlaying,
            icon = isPlaying ? <PauseIcon theme={this.props.theme} active={hover || isPlaying}></PauseIcon> : <PlayIcon theme={this.props.theme} active={hover || isPlaying}></PlayIcon>;
        return (
            <div style={this.getStyles()}
                onClick={this.handleClick.bind(this)}
                onMouseEnter={this.handleMouseEnter.bind(this)}
                onMouseLeave={this.handleMouseLeave.bind(this)}>
                {icon}
            </div>
        )
    }
}
class AlbumArt extends React.Component {
    getStyles() {
        return {
            width: "100%",
            height: "auto",
            display: "block",
            position: "relative",
            margin: 0,
            overflow: "hidden"
        }
    }
    render() {
        var id = this.props.playerId + "AlbumArt",
            imgId= this.props.playerId + "AlbumArtImg"
        return (
            <div 
                id={id}
                style={this.getStyles()}>
                <TrackInfoOverlay 
                    {...this.props}>
                </TrackInfoOverlay>
                <img 
                    id={imgId}
                    ref="art"
                    style={{width: "100%", transform: "translateZ(0)"}}
                    src={this.props.albumArt} />
            </div>
        )
    }
}
class TrackInfoOverlay extends React.Component {
    getStyles() {
        var hover = this.props.hover,
            isPlaying = this.props.isPlaying,
            dark = this.props.theme == darkTheme,
            tone = dark ? this.props.theme.midTone : this.props.theme.brightTone;
        return {
            width: "100%",
            height: "auto",
            background: "linear-gradient(transparent, " + tone + ")",
            display: "block",
            margin: 0,
            position: "absolute",
            zIndex: 100,
            bottom: 0,
            left: 0,
            padding: "100px 20px 20px",
            color: dark ? "#fff" : "#333",
            transition: "all ease 0.5s",
            textShadow: dark ? "2px 2px 2px rgba(0,0,0,0.5)" : "2px 2px 2px rgba(255,255,255,0.5)",
            transform: hover || isPlaying ? "translateY(0%)" : "translateY(100%)"
        }
    }

    getNowPlayingStyles() {
        var isPlaying = this.props.isPlaying,
            dark = this.props.theme == darkTheme;
        return {
            fontSize: "0.5em",
            background: dark ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.8)",
            padding: "5px 10px",
            margin: "10px 0px",
            borderRadius: 3,
            fontWeight: 700,
            opacity: isPlaying ? 1 : 0,
            transform: isPlaying ? "translateY(0px)" : "translateY(-20px)" ,
            textTransform: "uppercase"
        }
    }
    render() {
        var isPlaying = this.props.isPlaying,
            nowPlaying = isPlaying ? "Now Playing" : null;
        return (
            <div style={this.getStyles()}>
                <span style={this.getNowPlayingStyles()}>Now Playing</span>
                <h3 style={{margin: "10px 0px", fontSize: "1.8em"}}>{this.props.trackInfo.artist || null}</h3>
                <p style={{margin: "5px 0px"}}>{this.props.trackInfo.title || null}</p>
                <p style={{margin: "10px 0px", fontSize: "0.8em", fontStyle: "italic"}}>{this.props.trackInfo.album || null}</p>
            </div>
        )
    }
}

// Scrubber
class Scrubber extends React.Component {
    getStyles() {
        return {
            width: "100%",
            height: "auto",
            position: "absolute",
            bottom: -this.props.layoutConfig.scrubberBar.height, 
            left: 0
        }
    }
    render() {
        var handle = this.props.isPlaying ? <ScrubberHandle elapsed={this.props.elapsed} duration={this.props.duration}></ScrubberHandle> : null;
        return (
            <div id="scrubber"
                style={this.getStyles()}>
                <ScrubberBar 
                    {...this.props}></ScrubberBar>
                {handle}
            </div>
        )
    }
}
class ScrubberBar extends React.Component {
    getStyles() {
        return {
            width: "100%",
            height: this.props.layoutConfig.scrubberBar.height,
            position: "absolute",
            bottom: 0, left: 0,
            transition: "all ease 0.3s"
        }
    }
    render() {
        var classes = this.props.theme == darkTheme ? "scrollingGradientBackground dark" : "scrollingGradientBackground";
        return (
            <div style={this.getStyles()}
                className={classes}>
            </div>
        )
    }
}
class ScrubberHandle extends React.Component {
    constructor() {
        super();

        this.state = {
            hover: false
        }
    }
    handleMouseOver() {
        this.setState({hover: true});
    }
    handleMouseOut() {
        this.setState({hover: false});
    }
    getStyles() {
        var hover = this.state.hover,
            scrubberPosition = (this.props.elapsed / this.props.duration * 100);
        return {
            width:  hover ? 20 : 15,
            height:  hover ? 20 : 15,
            position: "absolute",
            top: hover ? -15 : -10, 
            left: scrubberPosition + "%",
            borderRadius: "50%",
            border: "solid 2px #ddd",
            transition: "all ease 0.2s",
            cursor: "ew-resize",
            background: "radial-gradient(#fff, #ddd)",
            boxShadow: hover ? "0px 0px 8px 2px rgba(255,255,255,0.5), inset 0px 0px 2px rgba(0,0,0,0.4)" : "0px 0px 4px 0px rgba(0,0,0,0.3), inset 0px 0px 2px rgba(0,0,0,0.3)",
        }
    }
    render() {
        return (
            <div style={this.getStyles()}
                onMouseOver={this.handleMouseOver.bind(this)}
                onMouseOut={this.handleMouseOut.bind(this)}>
            </div>
        )
    }
}

// Utility Belt
class MusicPlayerUtilityBelt extends React.Component {
    getStyles() {
        return {
            width: "100%",
            height: "auto",
            background: this.props.theme.lightTone,
            display: "flex",
            position: "relative",
            zIndex: 100
        }
    }
    getLiStyles() {
        return {
            listStyle: "none",
            flex: "1 0 auto",
            textAlign: "center",
            color: "#eee",
            textTransform: "uppercase",
            fontSize: "8px",
            letterSpacing: "1px",
            padding: "12px 0px 8px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            flexFlow: "row wrap"
        }
    }
    getIconStyles() {
        return {
            height: 18
        }
    }
    getTitleStyles() {
        return {
            flex: "2 0 100%",
            marginTop: 12,
            color: this.props.theme.textColor
        }
    }
    render() {
        return (
            <div style={this.getStyles()}>
                <li style={this.getLiStyles()}
                    onClick={this.props.showOverlay}>
                    <div style={this.getLiStyles()}>
                        <VisualizerIcon 
                            style={this.getIconStyles()}
                            theme={this.props.theme}>
                        </VisualizerIcon>
                        <span style={this.getTitleStyles()}>Visualizer</span>
                    </div>
                </li>
                <li style={this.getLiStyles()}
                    onClick={this.props.showOverlay}>
                    <div style={this.getLiStyles()}>
                        <SearchIcon 
                            style={this.getIconStyles()}
                            theme={this.props.theme}>
                        </SearchIcon>
                        <span style={this.getTitleStyles()}>Search</span>
                    </div>
                </li>
                <li style={this.getLiStyles()}
                    onClick={this.props.showOverlay}>
                    <div style={this.getLiStyles()}>
                        <FullScreenIcon 
                            style={this.getIconStyles()}
                            theme={this.props.theme}>
                        </FullScreenIcon>
                        <span style={this.getTitleStyles()}>Enlarge</span>
                    </div>
                </li>
            </div>
        )
    }
}
//Utility Overlay
class MusicPlayerOverlay extends React.Component {
    getOverlayStyles() {
        return {
            width: "100%",
            height: "100%",
            background: this.props.theme.overlayBg,
            display: "flex",
            position: "absolute",
            top: 0, left: 0,
            zIndex: 101
        }
    }
    getCloseIconStyles() {
        var dark = this.props.theme == darkTheme;
        return {
            padding: 10,
            position: "absolute",
            right: 10, top: 10,
            background: dark ? null : "#fff"
        }
    }
    render() {
        var dark = this.props.theme == darkTheme;
        return (
            <div style={this.getOverlayStyles()}>
                <CloseIcon
                    onClick={this.props.hideOverlay}
                    color={dark ? "#fff" : this.props.theme.iconColor}
                    style={this.getCloseIconStyles()}></CloseIcon>
            </div>
        )
    }
}

// Visualizer
class VisualizerContainer extends React.Component {
    getStyles() {
        var dark = this.props.theme == darkTheme,
            isPlaying = this.props.isPlaying;
        // Get dimension of album art
        // These are the dimensions we will map the visualizer to... for now..
        var albumId = this.props.playerId + "AlbumArt",
            width = this.props.playerWidth,
            height = this.props.playerWidth;

        return {
            position: "absolute",
            top: 0,
            left: 0,
            width: width,
            height: height,
            zIndex: 99,
            transition: "all ease 0.7s",
            opacity: isPlaying ? 1 : 0,
            //background:  dark ? "rgba(20,20,20,0.2)" : "rgba(255,255,255,0.2)"
        }
    }
    render() {
        var id = "player" + this.props.playerId + "VisualizerContainer";
        return (
            <div id={id} style={this.getStyles()}>
                <Visualizer
                    {...this.props}>
                </Visualizer>
            </div>
        )
    }
}

class Visualizer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: "player" + this.props.playerId + "Visualizer"
        }
    }

    componentDidMount() {
        /*
            MOVE ALL OF THIS
            - This all should go into the MusicPlayer component and be passed through as props
            - Figure out best way to store and pass the Analyser, Media Element, etc...

        */
        // Get the audio data and format it for clean handoff to D3.js
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var audioElement = document.getElementById(this.props.audioNodeId);
        var audioSrc = audioCtx.createMediaElementSource(audioElement);
        var analyser = audioCtx.createAnalyser();

        // Bind our analyser to the media element source.
        audioSrc.connect(analyser);
        audioSrc.connect(audioCtx.destination);

        /*
           D3 setup
        */
        // Setup the SVG
        var svgHeight = document.getElementById(this.state.id + "Container").offsetHeight;
        var svgWidth = document.getElementById(this.state.id + "Container").offsetWidth;
        function createSvg(parent, height, width) {
            return d3.select(parent)
                .append('svg')
                .attr('height', height)
                .attr('width', width);
        }

        // Visualizer
        var graph = createSvg('#' + this.state.id, svgHeight, svgWidth);
        var frequencyData = new Uint8Array(255);
        switch (this.props.visualizerType) {
            case "RIPPLES":
                this.renderFrequencyRipples(graph, analyser, svgWidth, svgHeight)
                this.pulsateArt(analyser)
                break;
            case "BARS":
                this.renderFrequencyBars(graph, analyser, svgWidth, svgHeight)
                this.pulsateArt(analyser)
                break;
            default:
                this.renderFrequencyBars(graph, analyser, svgWidth, svgHeight)
                this.pulsateArt(analyser)
        }

    }

    renderFrequencyRipples(graph, analyser, svgWidth, svgHeight) {
        var i = 0;
        var frequencyData = new Uint8Array(svgWidth);
        var color = this.props.theme.visualizer.rippleColor;

        // NEED TO DO THIS THE REACT WAY!!
        // Continuously loop and update chart with frequency data.
        function renderChart() {
            requestAnimationFrame(renderChart);
            //var color = d3.hsl((i = (i + 1) % 360), 1, 0.66);
            //var color = helpers.randomProperty(gradient);
            // Copy frequency data to frequencyData array.
            analyser.getByteFrequencyData(frequencyData);

            graph.insert("circle", "rect")
                .data(frequencyData)
                .attr("cx", (d, i) => d * (svgWidth / frequencyData.length))
                .attr("cy", (d) =>  svgHeight + 10)
                .attr("r", 1e-6)
                .style("stroke", color)
                .style("stroke-opacity", 0.7)
                .transition()
                .duration(10000)
                .ease(Math.sqrt)
                .attr("r", 600)
                .style("stroke-opacity", 0.001)
                .remove();

        }
        // Run the loop
        renderChart();
    }

    pulsateArt(analyser) {
        var albumArt = document.getElementById(this.props.playerId + "AlbumArtImg");
        var frequencyData = new Uint8Array(8);
        
        function pulsate() {
            requestAnimationFrame(pulsate);
            // Copy frequency data to frequencyData array.
            analyser.getByteFrequencyData(frequencyData);
            // Get the average level
            var average = Math.ceil(helpers.getAverageVolume(frequencyData) / 10) * 10;
            // Pulsate the art
            albumArt.style.webkitFilter = "blur(" + average / 50 + "px)";
            albumArt.style.filter = "blur(" + average / 50 + "px)";
        }
        
        pulsate();
    }

    renderFrequencyBars(graph, analyser, svgWidth, svgHeight) {
        var barPadding = 1;
        var i = 0;
        var color = this.props.theme.visualizer.barColor;
        var gradient = this.props.theme.gradient;
        var frequencyData = new Uint8Array(133);
        graph.selectAll('rect')
            .data(frequencyData)
            .enter()
            .append('rect')
            .attr('fill', function(d) {
                //return d3.hsl((d = (d + 1) % 360), 1, 0.66)
                //return d3.hsl((i = (i + 1) % 360), 1, 0.66)
                return color
            })
            .attr('width', svgWidth / frequencyData.length - barPadding)
            .attr('x', function (d, i) {
                return i * (svgWidth / frequencyData.length);
            })

        // NEED TO DO THIS THE REACT WAY!!
        // Continuously loop and update chart with frequency data.
        function renderChart() {
            requestAnimationFrame(renderChart);
            
            // Copy frequency data to frequencyData array.
            analyser.getByteFrequencyData(frequencyData);

            // Update d3 chart with new data.
            graph.selectAll('rect')
                .data(frequencyData)
                .attr('y', function(d) {
                return svgHeight - d;
            })
                .attr('height', function(d) {
                return d;
            })
        }
        // Run the loop
        renderChart();
    }

    render() {
        return (
            <div id={this.state.id}>
            </div>
        )
    }
}

// Icons
/*
    Hey Tedd! Convert these to stateless components, eh?!
*/
class VisualizerIcon extends React.Component {
    render() {
        return (
            <svg onClick={this.props.onClick} version="1.1" id="Layer_1" x="0px" y="0px" height={this.props.style.height}
                viewBox="0 0 263.1 200.4" enable-background="new 0 0 263.1 200.4">
                <g id="hF24br.tif">
                    <g>
                        <path fill={this.props.theme.iconColor} d="M138.1,100.2c0,31.5-0.2,62.9,0.2,94.4c0.1,6.1-3,5.6-7,5.7c-4.4,0.2-6.5-0.5-6.4-5.8
                                                                   c0.1-54.9,0-109.9-0.1-164.8c0-8.2,0.3-16.3,0.1-24.5c-0.1-3.7,0.8-5.4,4.9-5.2c9.7,0.4,8.3-0.7,8.3,8.3
                                                                   C138.2,38.9,138.1,69.6,138.1,100.2z"/>
                        <path fill={this.props.theme.iconColor} d="M113.1,99.2c0,23.5-0.1,46.9,0.1,70.4c0,4.7-1.4,6-5.9,5.8c-7.3-0.3-7.3-0.1-7.4-7.2
                                                                   c-0.1-41.3-0.1-82.6-0.2-123.8c0-5.7,0.3-11.3,0.1-17c-0.1-3.3,1.2-4.3,4.4-4.2c10.6,0.2,8.8-0.8,8.8,8.7
                                                                   C113.2,54.2,113.1,76.7,113.1,99.2z"/>
                        <path fill={this.props.theme.iconColor} d="M163.1,99.3c0,20.8-0.1,41.6,0.1,62.4c0,4.3-1.1,5.9-5.6,5.6c-8.8-0.4-7.7,0.6-7.7-7.9
                                                                   c0-40.8,0-81.6,0-122.3c0-1.9,0.7-5.4,1.5-5.6c3.5-0.5,7.2-0.2,10.8,0.2c0.5,0.1,0.8,3,0.8,4.6C163.2,57.4,163.1,78.3,163.1,99.3z
                                                                   "/>
                        <path fill={this.props.theme.iconColor} d="M63.1,99.3c0,14-0.1,27.9,0.1,41.9c0.1,4.3-1.6,5.6-5.5,5.1c-1.1-0.1-2.3-0.1-3.5,0
                                                                   c-3.2,0.4-4.4-1-4.3-4.3c0.1-10.8-0.1-21.6-0.1-32.4c0-17.5,0.2-34.9,0.1-52.4c0-4.3,1.6-5.6,5.5-5.1c1.1,0.1,2.3,0.1,3.5,0
                                                                   c3.2-0.4,4.4,1,4.3,4.3C63.1,70.6,63.1,84.9,63.1,99.3z"/>
                        <path fill={this.props.theme.iconColor} d="M174.9,98.6c0-9,0.2-18-0.1-26.9c-0.1-3.9,1.4-4.8,5-4.7c9.7,0.3,8.3-0.9,8.4,8.2
                                                                   c0.3,17.1-0.1,34.2,0,51.4c0,3.9-1.4,5.1-5,4.7c-1.5-0.2-3-0.1-4.5,0c-2.7,0.2-3.9-0.9-3.8-3.7C175,117.9,175,108.3,174.9,98.6
                                                                   C175,98.6,175,98.6,174.9,98.6z"/>
                        <path fill={this.props.theme.iconColor} d="M88.1,99.7c0,8.6-0.2,17.3,0.1,25.9c0.1,3.9-1.3,4.8-4.9,4.7c-9.7-0.3-8.3,0.8-8.3-8.2
                                                                   c-0.1-16.1,0.1-32.2-0.1-48.4c-0.1-4.2,0.8-6,5.4-5.7c8.9,0.4,7.7-0.7,7.8,7.8C88.2,83.7,88.1,91.7,88.1,99.7z"/>
                        <path fill={this.props.theme.iconColor} d="M38.1,99.3c0,4-0.1,8,0,11.9c0.1,3-1,4-4,4.1c-8.9,0.2-9.1,0.4-9.3-8.3c-0.2-6.6,0.2-13.3,0-19.9
                                                                   c-0.1-3,1-4,4-4.1c8.9-0.2,9-0.4,9.3,8.3c0.1,2.6,0,5.3,0,8C38.2,99.3,38.2,99.3,38.1,99.3z"/>
                        <path fill={this.props.theme.iconColor} d="M213.1,99c0,3.5-0.3,7,0.1,10.4c0.4,4.1-1.5,5.3-5.2,4.9c-1-0.1-2-0.1-3,0c-3.8,0.5-5.3-0.9-5.1-4.9
                                                                   c0.3-6.8,0.3-13.6,0-20.4c-0.2-4.1,1.5-5.3,5.2-4.9c1,0.1,2,0.1,3,0c3.8-0.5,5.5,0.9,5.1,5C212.9,92.3,213.1,95.7,213.1,99z"/>
                        <path fill={this.props.theme.iconColor} d="M13.3,99.3c0,7.4-4.5,10.5-11.6,7.7c-0.7-0.3-1.6-1.3-1.6-2.1c-0.1-4-0.1-7.9,0-11.9
                                                                   c0-0.7,1.1-1.5,1.8-1.8c0.9-0.3,2-0.2,3-0.2C13.3,91,13.3,91,13.3,99.3z"/>
                        <path fill={this.props.theme.iconColor} d="M225.1,91.2c4.5,0,8.6,0,13,0c0,5.3,0,10.4,0,15.9c-4.2,0-8.4,0-13,0C225.1,101.9,225.1,96.8,225.1,91.2z"
                            />
                        <path fill={this.props.theme.iconColor} d="M263.1,94.2c0,3.5,0,6.5,0,9.9c-4.3,0-8.4,0-12.9,0c0-3.2,0-6.4,0-9.9C254.3,94.2,258.4,94.2,263.1,94.2z"
                            />
                    </g>
                </g>
            </svg>
        )
    }
}
class SearchIcon extends React.Component {
    render() {
        return (
            <svg height={this.props.style.height} viewBox="0 0 18 17" version="1.1">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Group" transform="translate(-174.000000, -15.000000)" fill={this.props.theme.iconColor}>
                        <path d="M184.037798,27.0294582 C186.885432,26.3541691 189,23.8455695 189,20.8541667 C189,17.3448573 186.089851,14.5 182.5,14.5 C178.910149,14.5 176,17.3448573 176,20.8541667 C176,23.8458689 178.114992,26.3546712 180.963057,27.0296609 C180.855406,27.2535459 180.795082,27.5046315 180.795082,27.769954 L180.795082,32.792546 C180.795082,33.7355468 181.551835,34.5 182.5,34.5 C183.4416,34.5 184.204918,33.7363468 184.204918,32.792546 L184.204918,27.769954 C184.204918,27.5046387 184.145014,27.2534571 184.037798,27.0294582 Z M182.553279,25.75 C185.289804,25.75 187.508197,23.5813793 187.508197,20.90625 C187.508197,18.2311207 185.289804,16.0625 182.553279,16.0625 C179.816753,16.0625 177.598361,18.2311207 177.598361,20.90625 C177.598361,23.5813793 179.816753,25.75 182.553279,25.75 Z" id="Oval-1" transform="translate(182.500000, 24.500000) rotate(50.000000) translate(-182.500000, -24.500000) "></path>
                    </g>
                </g>
            </svg>
        )
    }
}
class FullScreenIcon extends React.Component {
    render() {
        return (
            <svg style={this.props.style}
                viewBox="0 0 38 24" 
                width="20px"
                enable-background="new 0 0 38 24">
                <g>
                    <path fill={this.props.theme.iconColor} d="M0,0v24h38V0H0z M33,12H20V5h13V12z"/>
                </g>
            </svg>
        )
    }
}
class PlayIcon extends React.Component {
    render() {
        var active = this.props.active;
        return (
            <svg height="20px" 
                viewBox="0 0 39 42">
                <g id="Page-1" 
                    stroke="none" 
                    stroke-width="1" 
                    fill="none" 
                    fill-rule="evenodd">
                    <path 
                        d="M0.784313725,41.5 L0.784313725,0 L38.2156863,20.75 L0.784313725,41.5 Z" 
                        id="Triangle-15" 
                        fill={active ? "#fff" : this.props.theme.iconColor}>
                    </path>
                </g>
            </svg>
        )
    }
}
class PauseIcon extends React.Component {
    render() {
        var active = this.props.active;
        return (
            <svg height="20px" viewBox="0 0 23 23" version="1.1">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Rectangle-68-+-Rectangle-62"  transform="translate(0.000000, 1.000000)" fill={active ? "#fff" : this.props.theme.iconColor}>
                        <rect id="Rectangle-68" x="0" y="-0.48" width="8.21428571" height="22.48"></rect>
                        <rect id="Rectangle-62" x="14.7857143" y="-0.48" width="8.21428571" height="22.48"></rect>
                    </g>
                </g>
            </svg>
        )
    }
}
class CloseIcon extends React.Component {
    render() {
        return (
            <svg version="1.1" id="Layer_1" x="0px" y="0px"
                height={this.props.height || "30px"}
                style={this.props.style}
                onClick={this.props.onClick}
                viewBox="0 0 11.8 11.8" enable-background="new 0 0 11.8 11.8">
                <line fill="none" stroke={this.props.color} stroke-width="3" stroke-linejoin="bevel" stroke-miterlimit="10" x1="1.1" y1="1.1" x2="10.7" y2="10.7"/>
                <line fill="none" stroke={this.props.color} stroke-width="3" stroke-linejoin="bevel" stroke-miterlimit="10" x1="1.1" y1="10.7" x2="10.7" y2="1.1"/>
            </svg>
        ) 
    }
}

// Theme Toggle
class ThemeToggle extends React.Component {
    getStyles() {
        var dark = this.props.theme == darkTheme,
            playerHover = this.props.playerHover;
        return {
            position: "absolute",
            top: 10,
            right: 10,
            width: "auto",
            height: "auto",
            color: "#fff",
            padding: 4,
            zIndex: 101,
            transform: playerHover ? "translateX(0%)" : "translateX(0%)" ,
            transition: "all ease 0.5s",
            background: dark ? "rgba(0,0,0,0.66)" : "rgba(255,255,255,0.66)"
        }
    }
    render() {
        return (
            <div style={this.getStyles()}>
                <ThemeToggleButton title="Dark"
                    setAsActive={this.props.setTheme}></ThemeToggleButton>
                <ThemeToggleButton title="Light"
                    setAsActive={this.props.setTheme}></ThemeToggleButton>
            </div>
        )
    }
}
class ThemeToggleButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            hover: false
        }
    }
    handleClick() {
        this.props.setAsActive(this.props.title);
    }
    handleMouseEnter() {
        this.setState({hover: true})
    }
    handleMouseLeave() {
        this.setState({hover: false})
    }
    getStyles() {
        var hover = this.state.hover;
        return {
            padding: "6px 12px",
            cursor: "pointer",
            background: hover ? "rgba(0,0,0,0.75)": "rgba(0,0,0,0.5)",
            fontSize: 12
        }
    }
    render() {
        return (
            <div style={this.getStyles()}
                onClick={this.handleClick.bind(this)}
                onMouseEnter={this.handleMouseEnter.bind(this)}
                onMouseLeave={this.handleMouseLeave.bind(this)}>
                {this.props.title}
            </div>
        )
    }
}

/////////////////
// Application
////////////////
/* 
    This is just being used to
    center the player on the screen and add a nice background
*/
class App extends React.Component {
    getAppStyles() {
        return {
            background: "linear-gradient(white, #eee)",
            width: "100%", height: "100%",
            position: "absolute",
            top: 0, left: 0,
            padding: 10,
            display: "flex",
            flexFlow: "row wrap",
            justifyContent: "center",
            alignItems: "center"
        }
    }

    render() {
        return (
            <div id="app" style={this.getAppStyles()}>
                <h1 style={{flex: "2 0 100%"}}>Frequency Ripples</h1>
                <MusicPlayer
                    id="2"
                    visualizerType="RIPPLES"
                    theme={darkTheme}
                    trackInfo={{
                        title: "Imitosis",
                            artist: "Andrew Bird",
                                album: "Armchair Apocrypha"
                    }}
                    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Andrew+Bird+-+Imitosis.mp3"
                    albumArt="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/andrew+bird.jpg"
                    utilities={true}>
                </MusicPlayer>
                <MusicPlayer
                    id="3"
                    visualizerType="RIPPLES"
                    theme={lightTheme}
                    trackInfo={{
                        title: "Guns & Dogs",
                            artist: "Portugal, The Man",
                                album: "The Satanic Satanist"
                    }}
                    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Portugal.+The+Man+-+Guns+%26+Dogs+-+The+Satanic+Satanist.mp3"
                    albumArt="http://ecx.images-amazon.com/images/I/61X7CiBpZ6L.jpg"
                    utilities={true}>
                </MusicPlayer>
                <h1 style={{flex: "2 0 100%"}}>Frequency Bars</h1>
                <MusicPlayer
                    id="22"
                    visualizerType="BARS"
                    theme={darkTheme}
                    trackInfo={{
                        title: "Imitosis",
                            artist: "Andrew Bird",
                                album: "Armchair Apocrypha"
                    }}
                    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Andrew+Bird+-+Imitosis.mp3"
                    albumArt="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/andrew+bird.jpg"
                    utilities={true}>
                </MusicPlayer>
                <MusicPlayer
                    id="31"
                    visualizerType="BARS"
                    theme={lightTheme}
                    trackInfo={{
                        title: "Guns & Dogs",
                            artist: "Portugal, The Man",
                                album: "The Satanic Satanist"
                    }}
                    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Portugal.+The+Man+-+Guns+%26+Dogs+-+The+Satanic+Satanist.mp3"
                    albumArt="http://ecx.images-amazon.com/images/I/61X7CiBpZ6L.jpg"
                    utilities={true}>
                </MusicPlayer>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("app")
);