import React from 'react';
import { Gui, SeekBar, BufferBar,
  Poster, Audio, Title, Mute, Play, PlayBar,
  VolumeBar, Duration, CurrentTime, Download, BrowserUnsupported,
} from 'react-jplayer';
import JPlaylist, { connect, Playlist, Shuffle, Next, Previous, Repeat,
  MediaLink, Title as PlaylistTitle } from 'react-jplaylist';

const options = {
  id: 'JPlayer',
  verticalVolume: true,
};

const jPlaylistOptions = {
  hidePlaylist: false,
  playlist: INIT_FROM_PARENT,
};

const JPlayer = () => {
  return (<JPlaylist className='jp-sleek'>
    code here...
  </JPlaylist>);
};

export default connect(JPlayer, options, jPlaylistOptions);

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { initialState as jPlayerInitialState, reducer as jPlayers } from 'react-jplayer';
import { initialState as jPlaylistInitialState, reducer as jPlaylists } from 'react-jplaylist';
import JPlayer from './JPlayer';

const store = createStore(combineReducers({
  jPlayers,
  jPlaylists,
}), {
  jPlayers: jPlayerInitialState(JPlayer),
  jPlaylists: jPlaylistInitialState(JPlayer),
}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

class JPlaylist extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const playlist = this.props.tracks.map(track => {
      return {
        title: track.title,
        artist: track.performer,
        sources: {
          mp3: track.url,
        },
      }
    });
    return (<div className='audio-list'>
      <Provider store={store}>
        <JPlayer playlist={playlist}/>
      </Provider>
    </div>
    );
  }
}

export default JPlaylist;