import React from 'react';
import ReactDOM from 'react-dom';
import { PlayButton, Progress } from 'react-soundplayer/components';
import { SoundPlayerContainer } from 'react-soundplayer/addons';

const clientId = 'xxx';
const resolveUrl = 'https://soundcloud.com/xxx/josh-j-all-i-know';

class AppPlayer extends React.Component {
    render() {

        let { track, currentTime, duration } = this.props; // These are all undefined for some reason.

        return (
            <SoundPlayerContainer resolveUrl={resolveUrl} clientId={clientId}>
                <PlayButton />
                <Progress 
                    value={currentTime / duration * 100 || 0}
                    soundcloudAudio={this.props.soundcloudAudio}
                    {...this.props}
                />
            </SoundPlayerContainer>
        )
    }
}

ReactDOM.render(
    <AppPlayer />,
    document.querySelector('.app')
);

import 'babel-polyfill';
import 'whatwg-fetch';
import ClassNames from 'classnames';
import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import FastClick from 'fastclick';
import { Provider } from 'react-redux';

import store from './core/store';
import router from './core/router';
import history from './core/history';
let routes = require('./routes.json'); // Loaded with utils/routes-loader.js
const container = document.getElementById('container');
import { PlayButton, PrevButton, NextButton, Progress, Icons, Timer } from 'react-soundplayer/components';
import { SoundPlayerContainer } from 'react-soundplayer/addons';

function renderComponent(component) {
  ReactDOM.render(<Provider store={store}>{component}</Provider>, container);
}

function render(location) {
  router.resolve(routes, location)
    .then(renderComponent)
    .catch(error => router.resolve(routes, { ...location, error }).then(renderComponent));
}


history.listen(render);
render(history.getCurrentLocation());

FastClick.attach(document.body);


if (module.hot) {
  module.hot.accept('./routes.json', () => {
    routes = require('./routes.json'); // eslint-disable-line global-require
    render(history.getCurrentLocation());
  });
}

const clientId = '358b0fa53153c2425022d97d00261118';
const resolveUrl = 'https://soundcloud.com/pcmus/sets/deep-trouble';


class Player extends Component {
    constructor() {
        super();

        this.state = {
            activeIndex: 0
        };
    }

    playTrackAtIndex(playlistIndex) {
        let { soundCloudAudio } = this.props;
        this.setState({activeIndex: playlistIndex});
        soundCloudAudio.play({ playlistIndex });
    }

    nextIndex() {
        let { activeIndex } = this.state;
        let { playlist } = this.props;
        if (activeIndex >= playlist.tracks.length - 1) {
            return;
        }
        if (activeIndex || activeIndex === 0) {
            this.setState({activeIndex: ++activeIndex});
        }
    }

    prevIndex() {
        let { activeIndex } = this.state;
        if (activeIndex <= 0) {
            return;
        }
        if (activeIndex || activeIndex === 0) {
            this.setState({activeIndex: --activeIndex});
        }
    }

    renderTrackList(e) {
        let { playlist } = this.props;

        if (!playlist) {
            return <div>Loading...</div>;
        }

        let tracks = playlist.tracks.map((track, i) => {
            let classNames = ClassNames('flex button button-transparent', {
                'is-active': this.state.activeIndex === i
            });

            return (
                <button
                    key={track.id}
                    className={classNames}
                    onClick={this.playTrackAtIndex.bind(this, i)}
                >
                <img src="http://vignette3.wikia.nocookie.net/logopedia/images/d/d5/ITunes_12.2_Apple_Music.png/revision/latest?cb=20150701064004" />

                    <div className="title ">{track.title}</div>
                    <br/>
                      <br/>
                    <div className="song">{track.user.username}</div>
                </button>
            );
        });

        return (
            <div>{tracks}</div>
        );
    }

    render() {
        let { playlist, currentTime, duration } = this.props;

        return (
          <div>
          <div className="control-container">
                <div className='controls'>
                <PrevButton
                    className="backward"
                    onPrevClick={this.prevIndex.bind(this)}
                    {...this.props}
                />
                <PlayButton
                    className="play flex-none h2 button button-transparent button-grow rounded"
                    {...this.props}
                />
                <NextButton
                    className="forward"
                    onNextClick={this.nextIndex.bind(this)}
                    {...this.props}
                />

              </div>
            </div>
            <div className='info'>
               {this.renderTrackList()}
          </div>

            <div className="ipod-container">
              <div id='ipod'>
                  <div id='circle' className="center-center">
                      <div id='play-pause-button'></div>
                      <div id='play-pause-button-shadow-mask'></div>
                  </div>
                  <div id='housing' className="center-center">
                      <div id='left-bezel'>
                      </div>
                      <div id='right-bezel'>
                      </div>
                  </div>
                  <div id='buttons'>
                      <div id='button1'></div>
                      <div id='button2'></div>
                  </div>
                  <div id='shadows'>
                      <div id='shadow1'></div>
                      <div id='shadow2'></div>
                      <div id='shadow3'></div>
                  </div>
              </div>
              </div>

</div>


        );
    }
}

class SCPlay extends Component {
    render() {
        return (
            <SoundPlayerContainer    clientId={clientId}
                    resolveUrl={resolveUrl}>
                <Player />
            </SoundPlayerContainer>
        );
    }
};


ReactDOM.render(<SCPlay />, document.getElementById('app'));

  componentWillUnmount: function() {
    this.setState({song:''}); //need to stop the player calling a action here
  },

  render: function() {
    var track = this.state.song;
    var currentTime = 0;
    var client = SOUNDCLOUD_ID;

    return (
      <div key="div_playSong">
        <div className="image" style={{ margin: '2em auto', width: '50%' }}>
          <img src={this.state.song.artwork_url} />
        </div>

        <h1>
          Musica:
          {this.state.song.title}
        </h1>
         <SoundPlayerContainer streamUrl={this.state.song.stream_url} clientId={client}>
<PlayButton className="flex-none h4 mr2 button button-transparent button-grow rounded" {...this.props} />
                <h2 className="h5 nowrap caps flex-auto m0">{track ? track.title : 'Loading...'}</h2>
<Timer className="h6 mr1" duration={track ? track.duration / 1000 : 0} currentTime={currentTime} {...this.props} />
         </SoundPlayerContainer>
      </div>
    );
  }

    soundCloudAudio.on('pause', this.onAudioEnded.bind(this));
    soundCloudAudio.on('ended', this.onAudioEnded.bind(this));

onAudioEnded() {
    const { onStopTrack } = this.props;
    this.setState({playing: false});

    onStopTrack && onStopTrack(this.soundCloudAudio);
}

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.warning 
@ app.js:5993getInternalInstanceReadyForUpdate 
@ app.js:34208enqueueSetState 
@ app.js:34355ReactComponent.setState 
@ app.js:25656(anonymous function) 
@ app.js:18936(anonymous function) 
@ app.js:38955window.(anonymous function) 
@ app.js:38969(anonymous function) 
@ 33207269.json?callback=jsonp_callback_1469618094176556&client_id=e9b0084…:1

var _this = this;

var soundCloudAudio = this.soundCloudAudio;
var _props = this.props;
var resolveUrl = _props.resolveUrl;
var streamUrl = _props.streamUrl;

if (streamUrl) {
    soundCloudAudio.preload(streamUrl);
} else if (resolveUrl) {
    soundCloudAudio.resolve(resolveUrl, function (data) {
       /* THIS LINE */
        _this.setState(_defineProperty({}, data.tracks ? 'playlist' : 'track', data));
    });
}

// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
soundCloudAudio.on('playing', this.onAudioStarted.bind(this));
soundCloudAudio.on('timeupdate', this.getCurrentTime.bind(this));
soundCloudAudio.on('loadedmetadata', this.getDuration.bind(this));
soundCloudAudio.on('seeking', this.onSeekingTrack.bind(this));
soundCloudAudio.on('seeked', this.onSeekedTrack.bind(this));
soundCloudAudio.on('pause', this.onAudioPaused.bind(this));
soundCloudAudio.on('ended', this.onAudioEnded.bind(this));

import { SoundPlayerContainer } from 'react-soundplayer/addons';
import { Progress, PlayButton, Timer } from 'react-soundplayer/lib/components';

class CustomPlayer extends React.Component {
    play() {
        let { soundCloudAudio, playing } = this.props;
        if (playing) {
            soundCloudAudio.pause();
        } else {
            soundCloudAudio.play();
        }
    }

    render() {
        let { track, playing, currentTime, duration, soundCloudAudio} = this.props;

        if (!track) {
            return <div>Loading...</div>;
        }

        return (
            <div className="playerParent">
                <Col sm={3}>
                    <ButtonToolbar>
                        <Button bsStyle="primary"
                                active
                                onClick={this.play.bind(this)}
                                className="playButton btn-block"
                        >
                            {playing ? 'Pause' : 'Play'}
                        </Button>
                    </ButtonToolbar>
                </Col>
                <Col sm={6}>
                    <Progress
                        className="progress"
                        innerClassName="progress-bar"
                        value={currentTime / duration * 100 || 0}
                        {...this.props}
                    />
                </Col>
                <Col sm={3}>
                    <Timer
                        className="timer"
                        duration={duration}
                        currentTime={currentTime}
                        {...this.props}
                    />
                </Col>
            </div>
        );
    }
}




// Episode component - represents a single episode item
export default class Episode extends Component {
    render() {
        return (
            <Jumbotron className="episode">
                <Row>
                    <Col xs={4}>
                        <img src={this.props.episode.image} className="img-responsive"/>
                    </Col>
                    <Col xs={8}>
                        <h4 className="episodeTitle">{this.props.episode.text}</h4>
                        <p className="episodeDescription">{this.props.episode.description.split('\n').map(function(item, i) {
                            return (
                                <span key={i}>
                                {item}<br/>
                                </span>
                            )
                        })}</p>
                    </Col>
                </Row>
                <Row>
                    <SoundPlayerContainer {...this.props.episode}>
                        <CustomPlayer />
                    </SoundPlayerContainer>
                </Row>
            </Jumbotron>
        );
    }
}

Episode.propTypes = {
    // This component gets the task to display through a React prop.
    // We can use propTypes to indicate it is required
    episode: PropTypes.object.isRequired,
};

XMLHttpRequest cannot load https://api.soundcloud.com/tracks/196316910.json?client_id=08f79801a998c381762ec5b15e4914d5. Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers.

...
const streamUrl = 'https://s3-eu-west-1.amazonaws.com/react-soundplayer-examples/ksmtk-reborn-edit.mp3';
...
<MySoundPlayerComponent
        streamUrl={streamUrl} //title prop not required for this custom component
        preloadType="metadata" />
...

SCRIPT380: Invalid property value.
bundle.min.js (23,5634)

request failed Error: Invalid property value.
   "request failed"
   {
      [functions]: ,
      __proto__: { },
      description: "Invalid property value.",
      message: "Invalid property value.",
      name: "Error",
      number: -2146827908,
      stack: "Error: Invalid property value.
   at SoundCloud.prototype._jsonp (http://10.0.2.2:3000/bundle.js:78193:6)
   at SoundCloud.prototype.resolve (http://10.0.2.2:3000/bundle.js:78155:6)
   at requestAudio (http://10.0.2.2:3000/bundle.js:77992:22)
   at componentDidMount (http://10.0.2.2:3000/bundle.js:77969:18)
   at Anonymous function (http://10.0.2.2:3000/bundle.js:23415:14)
   at measureLifeCyclePerf (http://10.0.2.2:3000/bundle.js:23225:6)
   at Anonymous function (http://10.0.2.2:3000/bundle.js:23414:12)
   at notifyAll (http://10.0.2.2:3000/bundle.js:15771:10)
   at ON_DOM_READY_QUEUEING.close (http://10.0.2.2:3000/bundle.js:26144:6)
   at Mixin.closeAll (http://10.0.2.2:3000/bundle.js:16942:12)"
   }

https://soundcloud.com/%artistName%/tracks

    state = {
        isReadyToPlay: false
    };

    _setReady = () => {
        this.setState({
            isReadyToPlay: true
        });
    };

// some code before
<SoundPlayerContainer 
  onReady={this._setReady} 
  clientId={getClientID()} 
  resolveUrl={resolveUrl}>
    // Player components code
</SoundPlayerContainer>
// some code after