react-soundplayer - npm Package Compare versions

Comparing version 1.0.0-rc4 to 1.0.0

index.js

 module.exports = {
-    components: require('./components'),
-    addons: require('./addons')
+  components: require('./components'),
+  addons: require('./addons')
 };

lib/addons/SoundPlayerContainer.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _soundcloudAudio = require('soundcloud-audio');
@@ -28,54 +32,62 @@
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // IMPORTANT NOTE!
+// This container is deprecated, please use `withSoundCloudAudio` instead
+// HOC pattern docs - https://reactjs.org/docs/higher-order-components.html
 
 var SoundPlayerContainer = function (_Component) {
-    _inherits(SoundPlayerContainer, _Component);
+  _inherits(SoundPlayerContainer, _Component);
 
-    function SoundPlayerContainer() {
-        _classCallCheck(this, SoundPlayerContainer);
+  function SoundPlayerContainer() {
+    _classCallCheck(this, SoundPlayerContainer);
 
-        return _possibleConstructorReturn(this, (SoundPlayerContainer.__proto__ || Object.getPrototypeOf(SoundPlayerContainer)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (SoundPlayerContainer.__proto__ || Object.getPrototypeOf(SoundPlayerContainer)).apply(this, arguments));
+  }
+
+  _createClass(SoundPlayerContainer, [{
+    key: 'wrapChild',
+    value: function wrapChild(child) {
+      return _react2.default.cloneElement(child, this.props);
     }
+  }, {
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      console.warn('\n      <SoundPlayerContainer /> is deprecated! Please use HOC withSoundCloudAudio instead.\n      https://reactjs.org/docs/higher-order-components.html\n      https://labs.voronianski.com/react-soundplayer/#Containers\n    ');
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var children = this.props.children;
 
-    _createClass(SoundPlayerContainer, [{
-        key: 'wrapChild',
-        value: function wrapChild(child) {
-            return _react2.default.cloneElement(child, this.props);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var children = this.props.children;
 
+      if (!children) {
+        return;
+      }
 
-            if (!children) {
-                return;
-            }
+      if (!Array.isArray(children)) {
+        return this.wrapChild(children);
+      }
 
-            if (!Array.isArray(children)) {
-                return this.wrapChild(children);
-            }
+      return _react2.default.createElement(
+        'span',
+        null,
+        _react2.default.Children.map(children, this.wrapChild.bind(this))
+      );
+    }
+  }]);
 
-            return _react2.default.createElement(
-                'span',
-                null,
-                _react2.default.Children.map(children, this.wrapChild.bind(this))
-            );
-        }
-    }]);
-
-    return SoundPlayerContainer;
+  return SoundPlayerContainer;
 }(_react.Component);
 
 SoundPlayerContainer.propTypes = {
-    streamUrl: _react.PropTypes.string,
-    resolveUrl: _react.PropTypes.string,
-    clientId: _react.PropTypes.string,
-    soundCloudAudio: _react.PropTypes.instanceOf(_soundcloudAudio2.default),
-    onStartTrack: _react.PropTypes.func,
-    onStopTrack: _react.PropTypes.func,
-    onPauseTrack: _react.PropTypes.func,
-    onVolumeChange: _react.PropTypes.func
+  streamUrl: _propTypes2.default.string,
+  resolveUrl: _propTypes2.default.string,
+  clientId: _propTypes2.default.string,
+  soundCloudAudio: _propTypes2.default.instanceOf(_soundcloudAudio2.default),
+  onStartTrack: _propTypes2.default.func,
+  onStopTrack: _propTypes2.default.func,
+  onPauseTrack: _propTypes2.default.func,
+  onVolumeChange: _propTypes2.default.func,
+  onReady: _propTypes2.default.func
 };
 
 exports.default = (0, _withSoundCloudAudio2.default)(SoundPlayerContainer);

lib/addons/withSoundCloudAudio.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -38,172 +38,176 @@
 function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }
 
 function withSoundCloudAudio(WrappedComponent) {
-    var WithSoundCloudAudio = function (_Component) {
-        _inherits(WithSoundCloudAudio, _Component);
+  var WithSoundCloudAudio = function (_Component) {
+    _inherits(WithSoundCloudAudio, _Component);
 
-        function WithSoundCloudAudio(props, context) {
-            _classCallCheck(this, WithSoundCloudAudio);
+    function WithSoundCloudAudio(props, context) {
+      _classCallCheck(this, WithSoundCloudAudio);
 
-            var _this = _possibleConstructorReturn(this, (WithSoundCloudAudio.__proto__ || Object.getPrototypeOf(WithSoundCloudAudio)).call(this, props, context));
+      var _this = _possibleConstructorReturn(this, (WithSoundCloudAudio.__proto__ || Object.getPrototypeOf(WithSoundCloudAudio)).call(this, props, context));
 
-            if (!props.clientId && !props.soundCloudAudio) {
-                throw new Error('You need to get a clientId from SoundCloud,\n                    or pass in an instance of SoundCloudAudio.\n                    https://github.com/soundblogs/react-soundplayer#usage');
-            }
+      if (!props.clientId && !props.soundCloudAudio && !props.streamUrl) {
+        console.warn('You need to get a clientId from SoundCloud,\n          pass in an instance of SoundCloudAudio\n          or use streamUrl with audio source instead\n          https://github.com/soundblogs/react-soundplayer#examples');
+      }
 
-            // Don't create a SoundCloudAudio instance
-            // if there is no `window`
-            if ('undefined' !== typeof window) {
-                if (props.soundCloudAudio) {
-                    _this.soundCloudAudio = props.soundCloudAudio;
-                } else {
-                    _this.soundCloudAudio = new _soundcloudAudio2.default(props.clientId);
-                }
-            }
-
-            _this.state = {
-                duration: 0,
-                currentTime: 0,
-                seeking: false,
-                playing: false,
-                volume: 1,
-                isMuted: false
-            };
-            return _this;
+      // Don't create a SoundCloudAudio instance
+      // if there is no `window`
+      if ('undefined' !== typeof window) {
+        if (props.soundCloudAudio) {
+          _this.soundCloudAudio = props.soundCloudAudio;
+        } else {
+          _this.soundCloudAudio = new _soundcloudAudio2.default(props.clientId);
         }
+      }
 
-        _createClass(WithSoundCloudAudio, [{
-            key: 'componentDidMount',
-            value: function componentDidMount() {
-                this.mounted = true;
-                this.requestAudio();
-                this.listenAudioEvents();
-            }
-        }, {
-            key: 'componentWillUnmount',
-            value: function componentWillUnmount() {
-                this.mounted = false;
-                this.soundCloudAudio.unbindAll();
-            }
-        }, {
-            key: 'requestAudio',
-            value: function requestAudio() {
-                var _this2 = this;
+      _this.state = {
+        duration: 0,
+        currentTime: 0,
+        seeking: false,
+        playing: false,
+        volume: 1,
+        isMuted: false
+      };
+      return _this;
+    }
 
-                var soundCloudAudio = this.soundCloudAudio;
-                var _props = this.props,
-                    resolveUrl = _props.resolveUrl,
-                    streamUrl = _props.streamUrl;
+    _createClass(WithSoundCloudAudio, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.mounted = true;
+        this.requestAudio();
+        this.listenAudioEvents();
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        this.mounted = false;
+        this.soundCloudAudio.unbindAll();
+      }
+    }, {
+      key: 'requestAudio',
+      value: function requestAudio() {
+        var _this2 = this;
 
+        var soundCloudAudio = this.soundCloudAudio;
+        var _props = this.props,
+            resolveUrl = _props.resolveUrl,
+            streamUrl = _props.streamUrl,
+            onReady = _props.onReady;
 
-                if (streamUrl) {
-                    soundCloudAudio.preload(streamUrl);
-                } else if (resolveUrl) {
-                    soundCloudAudio.resolve(resolveUrl, function (data) {
-                        if (!_this2.mounted) {
-                            return;
-                        }
-                        _this2.setState(_defineProperty({}, data.tracks ? 'playlist' : 'track', data));
-                    });
-                }
+
+        if (streamUrl) {
+          soundCloudAudio.preload(streamUrl);
+        } else if (resolveUrl) {
+          soundCloudAudio.resolve(resolveUrl, function (data) {
+            if (!_this2.mounted) {
+              return;
             }
-        }, {
-            key: 'listenAudioEvents',
-            value: function listenAudioEvents() {
-                var soundCloudAudio = this.soundCloudAudio;
 
-                // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
+            _this2.setState(_defineProperty({}, data.tracks ? 'playlist' : 'track', data), function () {
+              return onReady && onReady();
+            });
+          });
+        }
+      }
+    }, {
+      key: 'listenAudioEvents',
+      value: function listenAudioEvents() {
+        var soundCloudAudio = this.soundCloudAudio;
 
-                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));
-                soundCloudAudio.on('volumechange', this.onVolumeChange.bind(this));
-            }
-        }, {
-            key: 'onSeekingTrack',
-            value: function onSeekingTrack() {
-                this.setState({ seeking: true });
-            }
-        }, {
-            key: 'onSeekedTrack',
-            value: function onSeekedTrack() {
-                this.setState({ seeking: false });
-            }
-        }, {
-            key: 'onAudioStarted',
-            value: function onAudioStarted() {
-                var soundCloudAudio = this.soundCloudAudio;
-                var onStartTrack = this.props.onStartTrack;
+        // 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));
+        soundCloudAudio.on('volumechange', this.onVolumeChange.bind(this));
+      }
+    }, {
+      key: 'onSeekingTrack',
+      value: function onSeekingTrack() {
+        this.setState({ seeking: true });
+      }
+    }, {
+      key: 'onSeekedTrack',
+      value: function onSeekedTrack() {
+        this.setState({ seeking: false });
+      }
+    }, {
+      key: 'onAudioStarted',
+      value: function onAudioStarted() {
+        var soundCloudAudio = this.soundCloudAudio;
+        var onStartTrack = this.props.onStartTrack;
 
-                this.setState({ playing: true });
 
-                (0, _audioStore.stopAllOther)(soundCloudAudio.playing);
-                (0, _audioStore.addToPlayedStore)(soundCloudAudio);
+        this.setState({ playing: true });
 
-                onStartTrack && onStartTrack(soundCloudAudio, soundCloudAudio.playing);
-            }
-        }, {
-            key: 'onAudioPaused',
-            value: function onAudioPaused() {
-                var onPauseTrack = this.props.onPauseTrack;
+        (0, _audioStore.stopAllOther)(soundCloudAudio.playing);
+        (0, _audioStore.addToPlayedStore)(soundCloudAudio);
 
+        onStartTrack && onStartTrack(soundCloudAudio, soundCloudAudio.playing);
+      }
+    }, {
+      key: 'onAudioPaused',
+      value: function onAudioPaused() {
+        var onPauseTrack = this.props.onPauseTrack;
 
-                this.setState({ playing: false });
 
-                onPauseTrack && onPauseTrack(this.soundCloudAudio);
-            }
-        }, {
-            key: 'onAudioEnded',
-            value: function onAudioEnded() {
-                var onStopTrack = this.props.onStopTrack;
+        this.setState({ playing: false });
 
+        onPauseTrack && onPauseTrack(this.soundCloudAudio);
+      }
+    }, {
+      key: 'onAudioEnded',
+      value: function onAudioEnded() {
+        var onStopTrack = this.props.onStopTrack;
 
-                this.setState({ playing: false });
 
-                onStopTrack && onStopTrack(this.soundCloudAudio);
-            }
-        }, {
-            key: 'onVolumeChange',
-            value: function onVolumeChange() {
-                this.setState({
-                    volume: this.soundCloudAudio.audio.volume,
-                    isMuted: this.soundCloudAudio.audio.muted
-                });
-            }
-        }, {
-            key: 'getCurrentTime',
-            value: function getCurrentTime() {
-                this.setState({
-                    currentTime: this.soundCloudAudio.audio.currentTime
-                });
-            }
-        }, {
-            key: 'getDuration',
-            value: function getDuration() {
-                this.setState({
-                    duration: this.soundCloudAudio.audio.duration
-                });
-            }
-        }, {
-            key: 'render',
-            value: function render() {
-                return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
-                    soundCloudAudio: this.soundCloudAudio
-                }, this.state));
-            }
-        }]);
+        this.setState({ playing: false });
 
-        return WithSoundCloudAudio;
-    }(_react.Component);
+        onStopTrack && onStopTrack(this.soundCloudAudio);
+      }
+    }, {
+      key: 'onVolumeChange',
+      value: function onVolumeChange() {
+        this.setState({
+          volume: this.soundCloudAudio.audio.volume,
+          isMuted: this.soundCloudAudio.audio.muted
+        });
+      }
+    }, {
+      key: 'getCurrentTime',
+      value: function getCurrentTime() {
+        this.setState({
+          currentTime: this.soundCloudAudio.audio.currentTime
+        });
+      }
+    }, {
+      key: 'getDuration',
+      value: function getDuration() {
+        this.setState({
+          duration: this.soundCloudAudio.audio.duration
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
+          soundCloudAudio: this.soundCloudAudio
+        }, this.state));
+      }
+    }]);
 
-    WithSoundCloudAudio.displayName = 'withSoundCloudAudio(' + getDisplayName(WrappedComponent) + ')';
-    WithSoundCloudAudio.WrappedComponent = WrappedComponent;
+    return WithSoundCloudAudio;
+  }(_react.Component);
 
-    return (0, _hoistNonReactStatics2.default)(WithSoundCloudAudio, WrappedComponent);
+  WithSoundCloudAudio.displayName = 'withSoundCloudAudio(' + getDisplayName(WrappedComponent) + ')';
+  WithSoundCloudAudio.WrappedComponent = WrappedComponent;
+
+  return (0, _hoistNonReactStatics2.default)(WithSoundCloudAudio, WrappedComponent);
 }

lib/components/Cover.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -15,2 +15,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -31,68 +35,70 @@
 var Cover = function (_Component) {
-    _inherits(Cover, _Component);
+  _inherits(Cover, _Component);
 
-    function Cover() {
-        _classCallCheck(this, Cover);
+  function Cover() {
+    _classCallCheck(this, Cover);
 
-        return _possibleConstructorReturn(this, (Cover.__proto__ || Object.getPrototypeOf(Cover)).apply(this, arguments));
-    }
+    return _possibleConstructorReturn(this, (Cover.__proto__ || Object.getPrototypeOf(Cover)).apply(this, arguments));
+  }
 
-    _createClass(Cover, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                backgroundUrl = _props.backgroundUrl,
-                trackName = _props.trackName,
-                artistName = _props.artistName,
-                className = _props.className,
-                style = _props.style,
-                children = _props.children;
+  _createClass(Cover, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          backgroundUrl = _props.backgroundUrl,
+          trackName = _props.trackName,
+          artistName = _props.artistName,
+          className = _props.className,
+          style = _props.style,
+          children = _props.children;
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-cover', className);
+      var classNames = (0, _classnames2.default)('sb-soundplayer-cover', className);
 
-            return _react2.default.createElement(
-                'div',
-                { className: classNames, style: _extends(style, { backgroundImage: 'url(' + backgroundUrl + ')' }) },
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement(_Icons.SoundCloudLogoSVG, null)
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement(
-                        'span',
-                        { className: 'sb-soundplayer-track sb-soundplayer-info-box' },
-                        trackName
-                    )
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement(
-                        'span',
-                        { className: 'sb-soundplayer-artist sb-soundplayer-info-box' },
-                        'by ',
-                        artistName
-                    )
-                ),
-                _react2.default.Children.map(children, _react2.default.cloneElement)
-            );
-        }
-    }]);
+      return _react2.default.createElement(
+        'div',
+        {
+          className: classNames,
+          style: _extends({}, style, { backgroundImage: 'url(' + backgroundUrl + ')' }) },
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(_Icons.SoundCloudLogoSVG, null)
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'span',
+            { className: 'sb-soundplayer-track sb-soundplayer-info-box' },
+            trackName
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'span',
+            { className: 'sb-soundplayer-artist sb-soundplayer-info-box' },
+            'by ',
+            artistName
+          )
+        ),
+        _react2.default.Children.map(children, _react2.default.cloneElement)
+      );
+    }
+  }]);
 
-    return Cover;
+  return Cover;
 }(_react.Component);
 
 Cover.propTypes = {
-    className: _react.PropTypes.string,
-    backgroundUrl: _react.PropTypes.string.isRequired,
-    trackName: _react.PropTypes.string.isRequired,
-    artistName: _react.PropTypes.string.isRequired
+  className: _propTypes2.default.string,
+  backgroundUrl: _propTypes2.default.string.isRequired,
+  trackName: _propTypes2.default.string.isRequired,
+  artistName: _propTypes2.default.string.isRequired
 };
 Cover.defaultProps = {
-    style: {}
+  style: {}
 };
 
 exports.default = Cover;

lib/components/Icons.js

 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -16,11 +16,11 @@ exports.VolumeIconMuteSVG = exports.VolumeIconLoudSVG = exports.VolumeIconSVG = exports.PrevIconSVG = exports.NextIconSVG = exports.PauseIconSVG = exports.PlayIconSVG = exports.ButtonIconSVG = exports.SoundCloudLogoSVG = undefined;
 var SoundCloudLogoSVG = exports.SoundCloudLogoSVG = function SoundCloudLogoSVG() {
-    return _react2.default.createElement(
-        "svg",
-        {
-            className: "sb-soundplayer-cover-logo",
-            xmlns: "http://www.w3.org/2000/svg",
-            fill: "currentColor"
-        },
-        _react2.default.createElement("path", { d: "M10.517 3.742c-.323 0-.49.363-.49.582 0 0-.244 3.591-.244 4.641 0 1.602.15 2.621.15 2.621 0 .222.261.401.584.401.321 0 .519-.179.519-.401 0 0 .398-1.038.398-2.639 0-1.837-.153-4.127-.284-4.592-.112-.395-.313-.613-.633-.613zm-1.996.268c-.323 0-.49.363-.49.582 0 0-.244 3.322-.244 4.372 0 1.602.119 2.621.119 2.621 0 .222.26.401.584.401.321 0 .581-.179.581-.401 0 0 .081-1.007.081-2.608 0-1.837-.206-4.386-.206-4.386 0-.218-.104-.581-.425-.581zm-2.021 1.729c-.324 0-.49.362-.49.582 0 0-.272 1.594-.272 2.644 0 1.602.179 2.559.179 2.559 0 .222.229.463.552.463.321 0 .519-.241.519-.463 0 0 .19-.944.19-2.546 0-1.837-.253-2.657-.253-2.657 0-.22-.104-.582-.425-.582zm-2.046-.358c-.323 0-.49.363-.49.582 0 0-.162 1.92-.162 2.97 0 1.602.069 2.496.069 2.496 0 .222.26.557.584.557.321 0 .581-.304.581-.526 0 0 .143-.936.143-2.538 0-1.837-.206-2.96-.206-2.96 0-.218-.198-.581-.519-.581zm-2.169 1.482c-.272 0-.232.218-.232.218v3.982s-.04.335.232.335c.351 0 .716-.832.716-2.348 0-1.245-.436-2.187-.716-2.187zm18.715-.976c-.289 0-.567.042-.832.116-.417-2.266-2.806-3.989-5.263-3.989-1.127 0-2.095.705-2.931 1.316v8.16s0 .484.5.484h8.526c1.655 0 3-1.55 3-3.155 0-1.607-1.346-2.932-3-2.932zm10.17.857c-1.077-.253-1.368-.389-1.368-.815 0-.3.242-.611.97-.611.621 0 1.106.253 1.542.699l.981-.951c-.641-.669-1.417-1.067-2.474-1.067-1.339 0-2.425.757-2.425 1.99 0 1.338.873 1.736 2.124 2.026 1.281.291 1.513.486 1.513.923 0 .514-.379.738-1.184.738-.65 0-1.26-.223-1.736-.777l-.98.873c.514.757 1.504 1.232 2.639 1.232 1.853 0 2.668-.873 2.668-2.163 0-1.477-1.193-1.845-2.27-2.097zm6.803-2.745c-1.853 0-2.949 1.435-2.949 3.502s1.096 3.501 2.949 3.501c1.852 0 2.949-1.434 2.949-3.501s-1.096-3.502-2.949-3.502zm0 5.655c-1.097 0-1.553-.941-1.553-2.153 0-1.213.456-2.153 1.553-2.153 1.096 0 1.551.94 1.551 2.153.001 1.213-.454 2.153-1.551 2.153zm8.939-1.736c0 1.086-.533 1.756-1.396 1.756-.864 0-1.388-.689-1.388-1.775v-3.897h-1.358v3.916c0 1.978 1.106 3.084 2.746 3.084 1.726 0 2.754-1.136 2.754-3.103v-3.897h-1.358v3.916zm8.142-.89l.019 1.485c-.087-.174-.31-.515-.475-.768l-2.703-3.692h-1.362v6.894h1.401v-2.988l-.02-1.484c.088.175.311.514.475.767l2.79 3.705h1.213v-6.894h-1.339v2.975zm5.895-2.923h-2.124v6.791h2.027c1.746 0 3.474-1.01 3.474-3.395 0-2.484-1.437-3.396-3.377-3.396zm-.097 5.472h-.67v-4.152h.719c1.436 0 2.028.688 2.028 2.076 0 1.242-.651 2.076-2.077 2.076zm7.909-4.229c.611 0 1 .271 1.242.737l1.26-.582c-.426-.883-1.202-1.503-2.483-1.503-1.775 0-3.016 1.435-3.016 3.502 0 2.143 1.191 3.501 2.968 3.501 1.232 0 2.047-.572 2.513-1.533l-1.145-.68c-.358.602-.718.864-1.329.864-1.019 0-1.611-.932-1.611-2.153-.001-1.261.583-2.153 1.601-2.153zm5.17-1.192h-1.359v6.791h4.083v-1.338h-2.724v-5.453zm6.396-.157c-1.854 0-2.949 1.435-2.949 3.502s1.095 3.501 2.949 3.501c1.853 0 2.95-1.434 2.95-3.501s-1.097-3.502-2.95-3.502zm0 5.655c-1.097 0-1.553-.941-1.553-2.153 0-1.213.456-2.153 1.553-2.153 1.095 0 1.55.94 1.55 2.153.001 1.213-.454 2.153-1.55 2.153zm8.557-1.736c0 1.086-.532 1.756-1.396 1.756-.864 0-1.388-.689-1.388-1.775v-3.794h-1.358v3.813c0 1.978 1.106 3.084 2.746 3.084 1.726 0 2.755-1.136 2.755-3.103v-3.794h-1.36v3.813zm5.449-3.907h-2.318v6.978h2.211c1.908 0 3.789-1.037 3.789-3.489 0-2.552-1.565-3.489-3.682-3.489zm-.108 5.623h-.729v-4.266h.783c1.565 0 2.21.706 2.21 2.133.001 1.276-.707 2.133-2.264 2.133z" })
-    );
+  return _react2.default.createElement(
+    "svg",
+    {
+      className: "sb-soundplayer-cover-logo",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor"
+    },
+    _react2.default.createElement("path", { d: "M10.517 3.742c-.323 0-.49.363-.49.582 0 0-.244 3.591-.244 4.641 0 1.602.15 2.621.15 2.621 0 .222.261.401.584.401.321 0 .519-.179.519-.401 0 0 .398-1.038.398-2.639 0-1.837-.153-4.127-.284-4.592-.112-.395-.313-.613-.633-.613zm-1.996.268c-.323 0-.49.363-.49.582 0 0-.244 3.322-.244 4.372 0 1.602.119 2.621.119 2.621 0 .222.26.401.584.401.321 0 .581-.179.581-.401 0 0 .081-1.007.081-2.608 0-1.837-.206-4.386-.206-4.386 0-.218-.104-.581-.425-.581zm-2.021 1.729c-.324 0-.49.362-.49.582 0 0-.272 1.594-.272 2.644 0 1.602.179 2.559.179 2.559 0 .222.229.463.552.463.321 0 .519-.241.519-.463 0 0 .19-.944.19-2.546 0-1.837-.253-2.657-.253-2.657 0-.22-.104-.582-.425-.582zm-2.046-.358c-.323 0-.49.363-.49.582 0 0-.162 1.92-.162 2.97 0 1.602.069 2.496.069 2.496 0 .222.26.557.584.557.321 0 .581-.304.581-.526 0 0 .143-.936.143-2.538 0-1.837-.206-2.96-.206-2.96 0-.218-.198-.581-.519-.581zm-2.169 1.482c-.272 0-.232.218-.232.218v3.982s-.04.335.232.335c.351 0 .716-.832.716-2.348 0-1.245-.436-2.187-.716-2.187zm18.715-.976c-.289 0-.567.042-.832.116-.417-2.266-2.806-3.989-5.263-3.989-1.127 0-2.095.705-2.931 1.316v8.16s0 .484.5.484h8.526c1.655 0 3-1.55 3-3.155 0-1.607-1.346-2.932-3-2.932zm10.17.857c-1.077-.253-1.368-.389-1.368-.815 0-.3.242-.611.97-.611.621 0 1.106.253 1.542.699l.981-.951c-.641-.669-1.417-1.067-2.474-1.067-1.339 0-2.425.757-2.425 1.99 0 1.338.873 1.736 2.124 2.026 1.281.291 1.513.486 1.513.923 0 .514-.379.738-1.184.738-.65 0-1.26-.223-1.736-.777l-.98.873c.514.757 1.504 1.232 2.639 1.232 1.853 0 2.668-.873 2.668-2.163 0-1.477-1.193-1.845-2.27-2.097zm6.803-2.745c-1.853 0-2.949 1.435-2.949 3.502s1.096 3.501 2.949 3.501c1.852 0 2.949-1.434 2.949-3.501s-1.096-3.502-2.949-3.502zm0 5.655c-1.097 0-1.553-.941-1.553-2.153 0-1.213.456-2.153 1.553-2.153 1.096 0 1.551.94 1.551 2.153.001 1.213-.454 2.153-1.551 2.153zm8.939-1.736c0 1.086-.533 1.756-1.396 1.756-.864 0-1.388-.689-1.388-1.775v-3.897h-1.358v3.916c0 1.978 1.106 3.084 2.746 3.084 1.726 0 2.754-1.136 2.754-3.103v-3.897h-1.358v3.916zm8.142-.89l.019 1.485c-.087-.174-.31-.515-.475-.768l-2.703-3.692h-1.362v6.894h1.401v-2.988l-.02-1.484c.088.175.311.514.475.767l2.79 3.705h1.213v-6.894h-1.339v2.975zm5.895-2.923h-2.124v6.791h2.027c1.746 0 3.474-1.01 3.474-3.395 0-2.484-1.437-3.396-3.377-3.396zm-.097 5.472h-.67v-4.152h.719c1.436 0 2.028.688 2.028 2.076 0 1.242-.651 2.076-2.077 2.076zm7.909-4.229c.611 0 1 .271 1.242.737l1.26-.582c-.426-.883-1.202-1.503-2.483-1.503-1.775 0-3.016 1.435-3.016 3.502 0 2.143 1.191 3.501 2.968 3.501 1.232 0 2.047-.572 2.513-1.533l-1.145-.68c-.358.602-.718.864-1.329.864-1.019 0-1.611-.932-1.611-2.153-.001-1.261.583-2.153 1.601-2.153zm5.17-1.192h-1.359v6.791h4.083v-1.338h-2.724v-5.453zm6.396-.157c-1.854 0-2.949 1.435-2.949 3.502s1.095 3.501 2.949 3.501c1.853 0 2.95-1.434 2.95-3.501s-1.097-3.502-2.95-3.502zm0 5.655c-1.097 0-1.553-.941-1.553-2.153 0-1.213.456-2.153 1.553-2.153 1.095 0 1.55.94 1.55 2.153.001 1.213-.454 2.153-1.55 2.153zm8.557-1.736c0 1.086-.532 1.756-1.396 1.756-.864 0-1.388-.689-1.388-1.775v-3.794h-1.358v3.813c0 1.978 1.106 3.084 2.746 3.084 1.726 0 2.755-1.136 2.755-3.103v-3.794h-1.36v3.813zm5.449-3.907h-2.318v6.978h2.211c1.908 0 3.789-1.037 3.789-3.489 0-2.552-1.565-3.489-3.682-3.489zm-.108 5.623h-.729v-4.266h.783c1.565 0 2.21.706 2.21 2.133.001 1.276-.707 2.133-2.264 2.133z" })
+  );
 };
@@ -30,12 +30,12 @@
 var ButtonIconSVG = exports.ButtonIconSVG = function ButtonIconSVG(props) {
-    return _react2.default.createElement(
-        "svg",
-        {
-            className: "sb-soundplayer-play-icon",
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 32 32",
-            fill: "currentColor"
-        },
-        props.children
-    );
+  return _react2.default.createElement(
+    "svg",
+    {
+      className: "sb-soundplayer-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      fill: "currentColor"
+    },
+    props.children
+  );
 };
@@ -45,7 +45,7 @@
 var PlayIconSVG = exports.PlayIconSVG = function PlayIconSVG() {
-    return _react2.default.createElement(
-        ButtonIconSVG,
-        null,
-        _react2.default.createElement("path", { d: "M0 0 L32 16 L0 32 z" })
-    );
+  return _react2.default.createElement(
+    ButtonIconSVG,
+    null,
+    _react2.default.createElement("path", { d: "M0 0 L32 16 L0 32 z" })
+  );
 };
@@ -55,7 +55,7 @@
 var PauseIconSVG = exports.PauseIconSVG = function PauseIconSVG() {
-    return _react2.default.createElement(
-        ButtonIconSVG,
-        null,
-        _react2.default.createElement("path", { d: "M0 0 H12 V32 H0 z M20 0 H32 V32 H20 z" })
-    );
+  return _react2.default.createElement(
+    ButtonIconSVG,
+    null,
+    _react2.default.createElement("path", { d: "M0 0 H12 V32 H0 z M20 0 H32 V32 H20 z" })
+  );
 };
@@ -65,7 +65,7 @@
 var NextIconSVG = exports.NextIconSVG = function NextIconSVG() {
-    return _react2.default.createElement(
-        ButtonIconSVG,
-        null,
-        _react2.default.createElement("path", { d: "M4 4 L24 14 V4 H28 V28 H24 V18 L4 28 z " })
-    );
+  return _react2.default.createElement(
+    ButtonIconSVG,
+    null,
+    _react2.default.createElement("path", { d: "M4 4 L24 14 V4 H28 V28 H24 V18 L4 28 z " })
+  );
 };
@@ -75,7 +75,7 @@
 var PrevIconSVG = exports.PrevIconSVG = function PrevIconSVG() {
-    return _react2.default.createElement(
-        ButtonIconSVG,
-        null,
-        _react2.default.createElement("path", { d: "M4 4 H8 V14 L28 4 V28 L8 18 V28 H4 z " })
-    );
+  return _react2.default.createElement(
+    ButtonIconSVG,
+    null,
+    _react2.default.createElement("path", { d: "M4 4 H8 V14 L28 4 V28 L8 18 V28 H4 z " })
+  );
 };
@@ -85,33 +85,33 @@
 var VolumeIconSVG = exports.VolumeIconSVG = function VolumeIconSVG(props) {
-    return _react2.default.createElement(
-        "svg",
-        {
-            className: "sb-soundplayer-play-icon",
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 75 75",
-            fill: "currentColor",
-            stroke: "currentColor"
-        },
-        props.children
-    );
+  return _react2.default.createElement(
+    "svg",
+    {
+      className: "sb-soundplayer-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 75 75",
+      fill: "currentColor",
+      stroke: "currentColor"
+    },
+    props.children
+  );
 };
 var VolumeIconLoudSVG = exports.VolumeIconLoudSVG = function VolumeIconLoudSVG() {
-    return _react2.default.createElement(
-        VolumeIconSVG,
-        null,
-        _react2.default.createElement("polygon", { points: "39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769", style: { strokeWidth: 5, strokeLinejoin: 'round' } }),
-        _react2.default.createElement("path", { d: "M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } }),
-        _react2.default.createElement("path", { d: "M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } }),
-        _react2.default.createElement("path", { d: "M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } })
-    );
+  return _react2.default.createElement(
+    VolumeIconSVG,
+    null,
+    _react2.default.createElement("polygon", { points: "39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769", style: { strokeWidth: 5, strokeLinejoin: 'round' } }),
+    _react2.default.createElement("path", { d: "M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } }),
+    _react2.default.createElement("path", { d: "M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } }),
+    _react2.default.createElement("path", { d: "M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } })
+  );
 };
 
 var VolumeIconMuteSVG = exports.VolumeIconMuteSVG = function VolumeIconMuteSVG() {
-    return _react2.default.createElement(
-        VolumeIconSVG,
-        null,
-        _react2.default.createElement("polygon", { points: "39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769", style: { stroke: '#11111', strokeWidth: 5, strokeLinejoin: 'round' } }),
-        _react2.default.createElement("path", { d: "M 48.651772,50.269646 69.395223,25.971024", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } }),
-        _react2.default.createElement("path", { d: "M 69.395223,50.269646 48.651772,25.971024", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } })
-    );
+  return _react2.default.createElement(
+    VolumeIconSVG,
+    null,
+    _react2.default.createElement("polygon", { points: "39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769", style: { stroke: '#11111', strokeWidth: 5, strokeLinejoin: 'round' } }),
+    _react2.default.createElement("path", { d: "M 48.651772,50.269646 69.395223,25.971024", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } }),
+    _react2.default.createElement("path", { d: "M 69.395223,50.269646 48.651772,25.971024", style: { fill: 'none', strokeWidth: 5, strokeLinecap: 'round' } })
+  );
 };

lib/components/NextButton.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -33,52 +37,52 @@
 var NextButton = function (_Component) {
-    _inherits(NextButton, _Component);
+  _inherits(NextButton, _Component);
 
-    function NextButton() {
-        _classCallCheck(this, NextButton);
+  function NextButton() {
+    _classCallCheck(this, NextButton);
 
-        return _possibleConstructorReturn(this, (NextButton.__proto__ || Object.getPrototypeOf(NextButton)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (NextButton.__proto__ || Object.getPrototypeOf(NextButton)).apply(this, arguments));
+  }
+
+  _createClass(NextButton, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate() {
+      return false;
     }
+  }, {
+    key: 'handleClick',
+    value: function handleClick(e) {
+      var _props = this.props,
+          soundCloudAudio = _props.soundCloudAudio,
+          onNextClick = _props.onNextClick;
 
-    _createClass(NextButton, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate() {
-            return false;
-        }
-    }, {
-        key: 'handleClick',
-        value: function handleClick(e) {
-            var _props = this.props,
-                soundCloudAudio = _props.soundCloudAudio,
-                onNextClick = _props.onNextClick;
 
+      soundCloudAudio && soundCloudAudio.next();
+      onNextClick && onNextClick(e);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          className = _props2.className,
+          style = _props2.style;
 
-            soundCloudAudio && soundCloudAudio.next();
-            onNextClick && onNextClick(e);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _props2 = this.props,
-                className = _props2.className,
-                style = _props2.style;
+      var classNames = (0, _classnames2.default)('sb-soundplayer-btn sb-soundplayer-next-btn', className);
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-play-btn', className);
+      return _react2.default.createElement(
+        'button',
+        { type: 'button', className: classNames, style: style, onClick: this.handleClick.bind(this) },
+        _react2.default.createElement(_Icons.NextIconSVG, null)
+      );
+    }
+  }]);
 
-            return _react2.default.createElement(
-                'button',
-                { type: 'button', className: classNames, style: style, onClick: this.handleClick.bind(this) },
-                _react2.default.createElement(_Icons.NextIconSVG, null)
-            );
-        }
-    }]);
-
-    return NextButton;
+  return NextButton;
 }(_react.Component);
 
 NextButton.propTypes = {
-    className: _react.PropTypes.string,
-    onNextClick: _react.PropTypes.func,
-    soundCloudAudio: _react.PropTypes.instanceOf(_soundcloudAudio2.default)
+  className: _propTypes2.default.string,
+  onNextClick: _propTypes2.default.func,
+  soundCloudAudio: _propTypes2.default.instanceOf(_soundcloudAudio2.default)
 };
 
 exports.default = NextButton;

lib/components/PlayButton.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -33,83 +37,87 @@
 var PlayButton = function (_Component) {
-    _inherits(PlayButton, _Component);
+  _inherits(PlayButton, _Component);
 
-    function PlayButton() {
-        _classCallCheck(this, PlayButton);
+  function PlayButton() {
+    _classCallCheck(this, PlayButton);
 
-        return _possibleConstructorReturn(this, (PlayButton.__proto__ || Object.getPrototypeOf(PlayButton)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (PlayButton.__proto__ || Object.getPrototypeOf(PlayButton)).apply(this, arguments));
+  }
+
+  _createClass(PlayButton, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      var _props = this.props,
+          playing = _props.playing,
+          seeking = _props.seeking;
+
+
+      return playing !== nextProps.playing || seeking !== nextProps.seeking;
     }
+  }, {
+    key: 'handleClick',
+    value: function handleClick(e) {
+      var _props2 = this.props,
+          playing = _props2.playing,
+          soundCloudAudio = _props2.soundCloudAudio,
+          onTogglePlay = _props2.onTogglePlay;
 
-    _createClass(PlayButton, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps) {
-            var _props = this.props,
-                playing = _props.playing,
-                seeking = _props.seeking;
 
-            return playing !== nextProps.playing || seeking !== nextProps.seeking;
-        }
-    }, {
-        key: 'handleClick',
-        value: function handleClick(e) {
-            var _props2 = this.props,
-                playing = _props2.playing,
-                soundCloudAudio = _props2.soundCloudAudio,
-                onTogglePlay = _props2.onTogglePlay;
+      if (!playing) {
+        soundCloudAudio && soundCloudAudio.play({
+          playlistIndex: soundCloudAudio._playlistIndex
+        });
+      } else {
+        soundCloudAudio && soundCloudAudio.pause();
+      }
 
+      onTogglePlay && onTogglePlay(e);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props3 = this.props,
+          playing = _props3.playing,
+          seekingIcon = _props3.seekingIcon,
+          seeking = _props3.seeking,
+          className = _props3.className,
+          style = _props3.style;
 
-            if (!playing) {
-                soundCloudAudio && soundCloudAudio.play({ playlistIndex: soundCloudAudio._playlistIndex });
-            } else {
-                soundCloudAudio && soundCloudAudio.pause();
-            }
 
-            onTogglePlay && onTogglePlay(e);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _props3 = this.props,
-                playing = _props3.playing,
-                seekingIcon = _props3.seekingIcon,
-                seeking = _props3.seeking,
-                className = _props3.className,
-                style = _props3.style;
+      var iconNode = void 0;
 
+      if (seeking && seekingIcon) {
+        iconNode = _react2.default.cloneElement(seekingIcon);
+      } else if (playing) {
+        iconNode = _react2.default.createElement(_Icons.PauseIconSVG, null);
+      } else {
+        iconNode = _react2.default.createElement(_Icons.PlayIconSVG, null);
+      }
 
-            var iconNode = void 0;
-            if (seeking && seekingIcon) {
-                iconNode = _react2.default.cloneElement(seekingIcon);
-            } else if (playing) {
-                iconNode = _react2.default.createElement(_Icons.PauseIconSVG, null);
-            } else {
-                iconNode = _react2.default.createElement(_Icons.PlayIconSVG, null);
-            }
+      var classNames = (0, _classnames2.default)('sb-soundplayer-btn sb-soundplayer-play-btn', className);
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-play-btn', className);
+      return _react2.default.createElement(
+        'button',
+        { type: 'button', className: classNames, style: style, onClick: this.handleClick.bind(this) },
+        iconNode
+      );
+    }
+  }]);
 
-            return _react2.default.createElement(
-                'button',
-                { type: 'button', className: classNames, style: style, onClick: this.handleClick.bind(this) },
-                iconNode
-            );
-        }
-    }]);
-
-    return PlayButton;
+  return PlayButton;
 }(_react.Component);
 
 PlayButton.propTypes = {
-    className: _react.PropTypes.string,
-    seeking: _react.PropTypes.bool,
-    playing: _react.PropTypes.bool,
-    onTogglePlay: _react.PropTypes.func,
-    seekingIcon: _react.PropTypes.node,
-    soundCloudAudio: _react.PropTypes.instanceOf(_soundcloudAudio2.default)
+  className: _propTypes2.default.string,
+  seeking: _propTypes2.default.bool,
+  playing: _propTypes2.default.bool,
+  onTogglePlay: _propTypes2.default.func,
+  seekingIcon: _propTypes2.default.node,
+  soundCloudAudio: _propTypes2.default.instanceOf(_soundcloudAudio2.default)
 };
 
 PlayButton.defaultProps = {
-    playing: false,
-    seeking: false
+  playing: false,
+  seeking: false
 };
 
 exports.default = PlayButton;

lib/components/PrevButton.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -33,52 +37,52 @@
 var PrevButton = function (_Component) {
-    _inherits(PrevButton, _Component);
+  _inherits(PrevButton, _Component);
 
-    function PrevButton() {
-        _classCallCheck(this, PrevButton);
+  function PrevButton() {
+    _classCallCheck(this, PrevButton);
 
-        return _possibleConstructorReturn(this, (PrevButton.__proto__ || Object.getPrototypeOf(PrevButton)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (PrevButton.__proto__ || Object.getPrototypeOf(PrevButton)).apply(this, arguments));
+  }
+
+  _createClass(PrevButton, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate() {
+      return false;
     }
+  }, {
+    key: 'handleClick',
+    value: function handleClick(e) {
+      var _props = this.props,
+          soundCloudAudio = _props.soundCloudAudio,
+          onPrevClick = _props.onPrevClick;
 
-    _createClass(PrevButton, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate() {
-            return false;
-        }
-    }, {
-        key: 'handleClick',
-        value: function handleClick(e) {
-            var _props = this.props,
-                soundCloudAudio = _props.soundCloudAudio,
-                onPrevClick = _props.onPrevClick;
 
+      soundCloudAudio && soundCloudAudio.previous();
+      onPrevClick && onPrevClick(e);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          className = _props2.className,
+          style = _props2.style;
 
-            soundCloudAudio && soundCloudAudio.previous();
-            onPrevClick && onPrevClick(e);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _props2 = this.props,
-                className = _props2.className,
-                style = _props2.style;
+      var classNames = (0, _classnames2.default)('sb-soundplayer-btn sb-soundplayer-prev-btn', className);
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-play-btn', className);
+      return _react2.default.createElement(
+        'button',
+        { type: 'button', className: classNames, style: style, onClick: this.handleClick.bind(this) },
+        _react2.default.createElement(_Icons.PrevIconSVG, null)
+      );
+    }
+  }]);
 
-            return _react2.default.createElement(
-                'button',
-                { type: 'button', className: classNames, style: style, onClick: this.handleClick.bind(this) },
-                _react2.default.createElement(_Icons.PrevIconSVG, null)
-            );
-        }
-    }]);
-
-    return PrevButton;
+  return PrevButton;
 }(_react.Component);
 
 PrevButton.propTypes = {
-    className: _react.PropTypes.string,
-    onPrevClick: _react.PropTypes.func,
-    soundCloudAudio: _react.PropTypes.instanceOf(_soundcloudAudio2.default)
+  className: _propTypes2.default.string,
+  onPrevClick: _propTypes2.default.func,
+  soundCloudAudio: _propTypes2.default.instanceOf(_soundcloudAudio2.default)
 };
 
 exports.default = PrevButton;

lib/components/Progress.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -15,2 +15,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _soundcloudAudio = require('soundcloud-audio');
@@ -33,84 +37,84 @@
 var Progress = function (_Component) {
-    _inherits(Progress, _Component);
+  _inherits(Progress, _Component);
 
-    function Progress() {
-        _classCallCheck(this, Progress);
+  function Progress() {
+    _classCallCheck(this, Progress);
 
-        return _possibleConstructorReturn(this, (Progress.__proto__ || Object.getPrototypeOf(Progress)).apply(this, arguments));
-    }
+    return _possibleConstructorReturn(this, (Progress.__proto__ || Object.getPrototypeOf(Progress)).apply(this, arguments));
+  }
 
-    _createClass(Progress, [{
-        key: 'handleSeekTrack',
-        value: function handleSeekTrack(e) {
-            var _props = this.props,
-                onSeekTrack = _props.onSeekTrack,
-                soundCloudAudio = _props.soundCloudAudio;
+  _createClass(Progress, [{
+    key: 'handleSeekTrack',
+    value: function handleSeekTrack(e) {
+      var _props = this.props,
+          onSeekTrack = _props.onSeekTrack,
+          soundCloudAudio = _props.soundCloudAudio;
 
-            var xPos = (e.pageX - e.currentTarget.getBoundingClientRect().left) / e.currentTarget.offsetWidth;
+      var xPos = (e.pageX - e.currentTarget.getBoundingClientRect().left) / e.currentTarget.offsetWidth;
 
-            if (soundCloudAudio && !isNaN(soundCloudAudio.audio.duration)) {
-                soundCloudAudio.audio.currentTime = xPos * soundCloudAudio.audio.duration;
-            }
+      if (soundCloudAudio && !isNaN(soundCloudAudio.audio.duration)) {
+        soundCloudAudio.audio.currentTime = xPos * soundCloudAudio.audio.duration;
+      }
 
-            onSeekTrack && onSeekTrack.call(this, xPos, e);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _props2 = this.props,
-                className = _props2.className,
-                innerClassName = _props2.innerClassName,
-                style = _props2.style,
-                currentTime = _props2.currentTime,
-                duration = _props2.duration;
-            var _props3 = this.props,
-                value = _props3.value,
-                innerStyle = _props3.innerStyle;
+      onSeekTrack && onSeekTrack.call(this, xPos, e);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          className = _props2.className,
+          innerClassName = _props2.innerClassName,
+          style = _props2.style,
+          currentTime = _props2.currentTime,
+          duration = _props2.duration;
+      var _props3 = this.props,
+          value = _props3.value,
+          innerStyle = _props3.innerStyle;
 
 
-            if (!value && currentTime && duration) {
-                value = currentTime / duration * 100 || 0;
-            }
+      if (!value && currentTime && duration) {
+        value = currentTime / duration * 100 || 0;
+      }
 
-            if (value < 0) {
-                value = 0;
-            }
+      if (value < 0) {
+        value = 0;
+      }
 
-            if (value > 100) {
-                value = 100;
-            }
+      if (value > 100) {
+        value = 100;
+      }
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-progress-container', className);
-            var innerClassNames = (0, _classnames2.default)('sb-soundplayer-progress-inner', innerClassName);
+      var classNames = (0, _classnames2.default)('sb-soundplayer-progress-container', className);
+      var innerClassNames = (0, _classnames2.default)('sb-soundplayer-progress-inner', innerClassName);
 
-            if (!innerStyle) {
-                innerStyle = {};
-            }
+      if (!innerStyle) {
+        innerStyle = {};
+      }
 
-            innerStyle = _extends(innerStyle, { width: value + '%' });
+      innerStyle = _extends({}, innerStyle, { width: value + '%' });
 
-            return _react2.default.createElement(
-                'div',
-                { className: classNames, style: style, onClick: this.handleSeekTrack.bind(this) },
-                _react2.default.createElement('div', { className: innerClassNames, style: innerStyle })
-            );
-        }
-    }]);
+      return _react2.default.createElement(
+        'div',
+        { className: classNames, style: style, onClick: this.handleSeekTrack.bind(this) },
+        _react2.default.createElement('div', { className: innerClassNames, style: innerStyle })
+      );
+    }
+  }]);
 
-    return Progress;
+  return Progress;
 }(_react.Component);
 
 Progress.propTypes = {
-    className: _react.PropTypes.string,
-    innerClassName: _react.PropTypes.string,
-    innerStyle: _react.PropTypes.object,
-    value: _react.PropTypes.number,
-    onSeekTrack: _react.PropTypes.func,
-    soundCloudAudio: _react.PropTypes.instanceOf(_soundcloudAudio2.default)
+  className: _propTypes2.default.string,
+  innerClassName: _propTypes2.default.string,
+  innerStyle: _propTypes2.default.object,
+  value: _propTypes2.default.number,
+  onSeekTrack: _propTypes2.default.func,
+  soundCloudAudio: _propTypes2.default.instanceOf(_soundcloudAudio2.default)
 };
 
 Progress.defaultProps = {
-    value: 0
+  value: 0
 };
 
 exports.default = Progress;

lib/components/Timer.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -27,68 +31,68 @@
 var Timer = function (_Component) {
-    _inherits(Timer, _Component);
+  _inherits(Timer, _Component);
 
-    function Timer() {
-        _classCallCheck(this, Timer);
+  function Timer() {
+    _classCallCheck(this, Timer);
 
-        return _possibleConstructorReturn(this, (Timer.__proto__ || Object.getPrototypeOf(Timer)).apply(this, arguments));
-    }
+    return _possibleConstructorReturn(this, (Timer.__proto__ || Object.getPrototypeOf(Timer)).apply(this, arguments));
+  }
 
-    _createClass(Timer, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                currentTime = _props.currentTime,
-                className = _props.className,
-                style = _props.style,
-                soundCloudAudio = _props.soundCloudAudio;
-            var duration = this.props.duration;
+  _createClass(Timer, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          currentTime = _props.currentTime,
+          className = _props.className,
+          style = _props.style,
+          soundCloudAudio = _props.soundCloudAudio;
+      var duration = this.props.duration;
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-timer', className);
+      var classNames = (0, _classnames2.default)('sb-soundplayer-timer', className);
 
-            if (!duration && soundCloudAudio && soundCloudAudio.duration) {
-                duration = soundCloudAudio.duration;
-            }
+      if (!duration && soundCloudAudio && soundCloudAudio.duration) {
+        duration = soundCloudAudio.duration;
+      }
 
-            return _react2.default.createElement(
-                'div',
-                { className: classNames, style: style },
-                Timer.prettyTime(currentTime),
-                ' / ',
-                Timer.prettyTime(duration)
-            );
-        }
-    }], [{
-        key: 'prettyTime',
-        value: function prettyTime(time) {
-            var hours = Math.floor(time / 3600);
-            var mins = '0' + Math.floor(time % 3600 / 60);
-            var secs = '0' + Math.floor(time % 60);
+      return _react2.default.createElement(
+        'div',
+        { className: classNames, style: style },
+        Timer.prettyTime(currentTime),
+        ' / ',
+        Timer.prettyTime(duration)
+      );
+    }
+  }], [{
+    key: 'prettyTime',
+    value: function prettyTime(time) {
+      var hours = Math.floor(time / 3600);
+      var mins = '0' + Math.floor(time % 3600 / 60);
+      var secs = '0' + Math.floor(time % 60);
 
-            mins = mins.substr(mins.length - 2);
-            secs = secs.substr(secs.length - 2);
+      mins = mins.substr(mins.length - 2);
+      secs = secs.substr(secs.length - 2);
 
-            if (!isNaN(secs)) {
-                if (hours) {
-                    return hours + ':' + mins + ':' + secs;
-                }
-                return mins + ':' + secs;
-            }
-            return '00:00';
+      if (!isNaN(secs)) {
+        if (hours) {
+          return hours + ':' + mins + ':' + secs;
         }
-    }]);
+        return mins + ':' + secs;
+      }
+      return '00:00';
+    }
+  }]);
 
-    return Timer;
+  return Timer;
 }(_react.Component);
 
 Timer.propTypes = {
-    className: _react.PropTypes.string,
-    duration: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
-    currentTime: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
+  className: _propTypes2.default.string,
+  duration: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  currentTime: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
 };
 
 Timer.defaultProps = {
-    duration: 0,
-    currentTime: 0
+  duration: 0,
+  currentTime: 0
 };
 
 exports.default = Timer;

lib/components/VolumeControl.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _soundcloudAudio = require('soundcloud-audio');
@@ -33,103 +37,107 @@
 var VolumeControl = function (_Component) {
-    _inherits(VolumeControl, _Component);
+  _inherits(VolumeControl, _Component);
 
-    function VolumeControl() {
-        _classCallCheck(this, VolumeControl);
+  function VolumeControl() {
+    _classCallCheck(this, VolumeControl);
 
-        return _possibleConstructorReturn(this, (VolumeControl.__proto__ || Object.getPrototypeOf(VolumeControl)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (VolumeControl.__proto__ || Object.getPrototypeOf(VolumeControl)).apply(this, arguments));
+  }
+
+  _createClass(VolumeControl, [{
+    key: 'handleVolumeChange',
+    value: function handleVolumeChange(e) {
+      var _props = this.props,
+          onVolumeChange = _props.onVolumeChange,
+          onToggleMute = _props.onToggleMute,
+          soundCloudAudio = _props.soundCloudAudio,
+          isMuted = _props.isMuted;
+
+      var xPos = e.target.value / 100;
+      var mute = xPos <= 0 && !isMuted;
+
+      if (soundCloudAudio && !isNaN(soundCloudAudio.audio.volume)) {
+        soundCloudAudio.audio.volume = xPos;
+        soundCloudAudio.audio.muted = mute;
+      }
+
+      if (mute !== isMuted) {
+        onToggleMute && onToggleMute.call(this, mute, e);
+      }
+
+      onVolumeChange && onVolumeChange.call(this, xPos, e);
     }
+  }, {
+    key: 'handleMute',
+    value: function handleMute(e) {
+      var _props2 = this.props,
+          onToggleMute = _props2.onToggleMute,
+          soundCloudAudio = _props2.soundCloudAudio;
 
-    _createClass(VolumeControl, [{
-        key: 'handleVolumeChange',
-        value: function handleVolumeChange(e) {
-            var _props = this.props,
-                onVolumeChange = _props.onVolumeChange,
-                onToggleMute = _props.onToggleMute,
-                soundCloudAudio = _props.soundCloudAudio,
-                isMuted = _props.isMuted;
 
-            var xPos = e.target.value / 100;
-            var mute = xPos <= 0 && !isMuted;
+      if (soundCloudAudio && !isNaN(soundCloudAudio.audio.muted)) {
+        soundCloudAudio.audio.muted = !soundCloudAudio.audio.muted;
+      }
 
-            if (soundCloudAudio && !isNaN(soundCloudAudio.audio.volume)) {
-                soundCloudAudio.audio.volume = xPos;
-                soundCloudAudio.audio.muted = mute;
-            }
-            if (mute !== isMuted) {
-                onToggleMute && onToggleMute.call(this, mute, e);
-            }
-            onVolumeChange && onVolumeChange.call(this, xPos, e);
-        }
-    }, {
-        key: 'handleMute',
-        value: function handleMute(e) {
-            var _props2 = this.props,
-                onToggleMute = _props2.onToggleMute,
-                soundCloudAudio = _props2.soundCloudAudio;
+      onToggleMute && onToggleMute.call(this, !this.props.isMuted, e);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props3 = this.props,
+          className = _props3.className,
+          buttonClassName = _props3.buttonClassName,
+          rangeClassName = _props3.rangeClassName,
+          volume = _props3.volume,
+          isMuted = _props3.isMuted;
 
-            if (soundCloudAudio && !isNaN(soundCloudAudio.audio.muted)) {
-                soundCloudAudio.audio.muted = !soundCloudAudio.audio.muted;
-            }
-            onToggleMute && onToggleMute.call(this, !this.props.isMuted, e);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _props3 = this.props,
-                className = _props3.className,
-                buttonClassName = _props3.buttonClassName,
-                rangeClassName = _props3.rangeClassName,
-                volume = _props3.volume,
-                isMuted = _props3.isMuted;
 
+      var value = volume * 100 || 0;
 
-            var value = volume * 100 || 0;
+      if (value < 0 || isMuted) {
+        value = 0;
+      }
 
-            if (value < 0 || isMuted) {
-                value = 0;
-            }
+      if (value > 100) {
+        value = 100;
+      }
 
-            if (value > 100) {
-                value = 100;
-            }
+      var classNames = (0, _classnames2.default)('sb-soundplayer-volume', className);
+      var buttonClassNames = (0, _classnames2.default)('sb-soundplayer-btn sb-soundplayer-volume-btn', buttonClassName);
+      var rangeClassNames = (0, _classnames2.default)('sb-soundplayer-volume-range', rangeClassName);
 
-            var classNames = (0, _classnames2.default)('sb-soundplayer-volume', className);
-            var buttonClassNames = (0, _classnames2.default)(buttonClassName);
-            var rangeClassNames = (0, _classnames2.default)('sb-soundplayer-volume-range', rangeClassName);
+      return _react2.default.createElement(
+        'div',
+        { className: classNames },
+        _react2.default.createElement(
+          'button',
+          { className: buttonClassNames, onClick: this.handleMute.bind(this) },
+          isMuted ? _react2.default.createElement(_Icons.VolumeIconMuteSVG, null) : _react2.default.createElement(_Icons.VolumeIconLoudSVG, null)
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement('input', { className: rangeClassNames, type: 'range', min: '0', max: '100', step: '1', value: value, onChange: this.handleVolumeChange.bind(this) })
+        )
+      );
+    }
+  }]);
 
-            return _react2.default.createElement(
-                'div',
-                { className: classNames },
-                _react2.default.createElement(
-                    'button',
-                    { className: buttonClassNames, onClick: this.handleMute.bind(this) },
-                    isMuted ? _react2.default.createElement(_Icons.VolumeIconMuteSVG, null) : _react2.default.createElement(_Icons.VolumeIconLoudSVG, null)
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement('input', { className: rangeClassNames, type: 'range', min: '0', max: '100', step: '1', value: value, onChange: this.handleVolumeChange.bind(this) })
-                )
-            );
-        }
-    }]);
-
-    return VolumeControl;
+  return VolumeControl;
 }(_react.Component);
 
 VolumeControl.propTypes = {
-    className: _react.PropTypes.string,
-    buttonClassName: _react.PropTypes.string,
-    rangeClassName: _react.PropTypes.string,
-    volume: _react.PropTypes.number,
-    onVolumeChange: _react.PropTypes.func,
-    onToggleMute: _react.PropTypes.func,
-    soundCloudAudio: _react.PropTypes.instanceOf(_soundcloudAudio2.default)
+  className: _propTypes2.default.string,
+  buttonClassName: _propTypes2.default.string,
+  rangeClassName: _propTypes2.default.string,
+  volume: _propTypes2.default.number,
+  onVolumeChange: _propTypes2.default.func,
+  onToggleMute: _propTypes2.default.func,
+  soundCloudAudio: _propTypes2.default.instanceOf(_soundcloudAudio2.default)
 };
 
 VolumeControl.defaultProps = {
-    volume: 1,
-    isMuted: 0
+  volume: 1,
+  isMuted: 0
 };
 
 exports.default = VolumeControl;

lib/utils/audioStore.js

 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -12,32 +12,32 @@ exports.stopAllOther = stopAllOther;
 function each(arr, cb) {
-    if (arr) {
-        for (var i = 0, len = arr.length; i < len; i++) {
-            if (arr[i] && cb(arr[i], i, arr)) {
-                break;
-            }
-        }
+  if (arr) {
+    for (var i = 0, len = arr.length; i < len; i++) {
+      if (arr[i] && cb(arr[i], i, arr)) {
+        break;
+      }
     }
+  }
 }
 
 function stopAllOther(playing) {
-    each(_playedAudios, function (soundCloudAudio) {
-        if (soundCloudAudio.playing && soundCloudAudio.playing !== playing) {
-            soundCloudAudio.stop();
-        }
-    });
+  each(_playedAudios, function (soundCloudAudio) {
+    if (soundCloudAudio.playing && soundCloudAudio.playing !== playing) {
+      soundCloudAudio.stop();
+    }
+  });
 }
 
 function addToPlayedStore(soundCloudAudio) {
-    var isPresent = false;
+  var isPresent = false;
 
-    each(_playedAudios, function (_soundCloudAudio) {
-        if (_soundCloudAudio.playing === soundCloudAudio.playing) {
-            isPresent = true;
-            return true;
-        }
-    });
+  each(_playedAudios, function (_soundCloudAudio) {
+    if (_soundCloudAudio.playing === soundCloudAudio.playing) {
+      isPresent = true;
+      return true;
+    }
+  });
 
-    if (!isPresent) {
-        _playedAudios.push(soundCloudAudio);
-    }
+  if (!isPresent) {
+    _playedAudios.push(soundCloudAudio);
+  }
 }

package.json

 {
   "name": "react-soundplayer",
-  "version": "1.0.0-rc4",
+  "version": "1.0.0",
   "description": "Create custom SoundCloud players with React",
@@ -32,26 +32,25 @@ "main": "index.js",
   "dependencies": {
-    "classnames": "^2.1.2",
-    "hoist-non-react-statics": "^1.2.0",
-    "object-assign": "^4.0.1",
-    "react": "^15.3.0",
-    "soundcloud-audio": "^1.0.4"
+    "classnames": "^2.2.5",
+    "hoist-non-react-statics": "^2.3.1",
+    "object-assign": "^4.1.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "soundcloud-audio": "^1.2.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.11.4",
-    "babel-eslint": "^6.1.2",
-    "babel-plugin-transform-object-assign": "^6.8.0",
-    "babel-preset-es2015": "^6.13.1",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-0": "^6.5.0",
-    "eslint": "^3.2.2",
-    "eslint-config-airbnb": "^10.0.0",
-    "eslint-import-resolver-node": "^0.2.2",
-    "eslint-plugin-import": "^1.12.0",
-    "eslint-plugin-jsx-a11y": "^2.0.1",
-    "eslint-plugin-react": "^6.0.0",
-    "husky": "^0.11.6",
-    "postcss": "^5.2.5",
-    "postcss-cssnext": "^2.8.0",
-    "postcss-import": "^8.1.2"
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^4.7.2",
+    "eslint-import-resolver-node": "^0.3.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-react": "^7.4.0",
+    "husky": "^0.14.3",
+    "postcss": "^6.0.12",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-import": "^11.0.0"
   }
 }

README.md

@@ -1,17 +0,14 @@
-# <img src="http://www.officialpsds.com/images/thumbs/Soundcloud-Logo-psd47614.png" width="75" align="left">&nbsp;react-soundplayer
-
-[![npm version](http://badge.fury.io/js/react-soundplayer.svg)](http://badge.fury.io/js/react-soundplayer)
-[![Dependency Status](http://david-dm.org/soundblogs/react-soundplayer.svg)](http://david-dm.org/soundblogs/react-soundplayer)
+# <img src="http://www.officialpsds.com/images/thumbs/Soundcloud-Logo-psd47614.png" width="75" align="left">&nbsp;[react-soundplayer](http://labs.voronianski.com/react-soundplayer) 
+[![npm version](http://badge.fury.io/js/react-soundplayer.svg)](http://badge.fury.io/js/react-soundplayer) 
+[![Dependency Status](http://david-dm.org/soundblogs/react-soundplayer.svg)](http://david-dm.org/soundblogs/react-soundplayer) 
 [![Download Count](http://img.shields.io/npm/dm/react-soundplayer.svg?style=flat)](http://www.npmjs.com/package/react-soundplayer)
 
-> Create highly-customizable SoundCloud players with React.
+> Create highly-customizable SoundCloud (or any audio) players with React.js.
 
-[![](https://dl.dropboxusercontent.com/u/100463011/react-soundplayer-example.png)](http://labs.voronianski.com/react-soundplayer#ExamplePlayers)
+[<img src="https://user-images.githubusercontent.com/974035/31037146-c21d53e2-a56f-11e7-9cd4-b4784f99040c.png" width="600" />](http://labs.voronianski.com/react-soundplayer#ExamplePlayers)
 
-### [Demo](http://labs.voronianski.com/react-soundplayer)
+### [Documentation](http://labs.voronianski.com/react-soundplayer)
 
-<!-- ![](https://dl.dropboxusercontent.com/u/100463011/react-soundplayer-screen.png) -->
+## Install
 
-## Usage
-
 ```
@@ -21,310 +18,100 @@ npm install react-soundplayer --save
 
-ReactSoundPlayer is bundled with **[components](https://github.com/soundblogs/react-soundplayer#pure-components)** and **[addons](https://github.com/soundblogs/react-soundplayer#soundplayercontainer)** inside. You can require them in..
+## Examples
 
-..plain-old ES5:
+There are several examples [on the website](http://labs.voronianski.com/react-soundplayer/#ExamplePlayers). Here is the basic one to get you started:
 
 ```javascript
-// require components and addons
-var SoundPlayerComponents = require('react-soundplayer/components');
-var SoundPlayerAddons = require('react-soundplayer/addons');
-
-var PlayButton = SoundPlayerComponents.PlayButton;
-var Progress = SoundPlayerComponents.Progress;
-
-// icons are components too!
-var SoundCloudLogoSVG = SoundPlayerComponents.Icons.SoundCloudLogoSVG
-
-var SoundPlayerContainer = SoundPlayerAddons.SoundPlayerContainer;
-
-// ...
-```
-
-..or ES6 syntax:
-
-```javascript
-import { PlayButton, Progress, Icons } from 'react-soundplayer/components';
-import { SoundPlayerContainer } from 'react-soundplayer/addons';
-
-const { SoundCloudLogoSVG } = Icons;
-
-// ...
-```
-
-ReactSoundPlayer depends on [React.js](http://facebook.github.io/react/index.html) 0.13.x (or higher) and [SoundCloudAudio](https://github.com/voronianski/soundcloud-audio.js) for managing HTML5 Audio.
-
-# API
-
-## Pure Components
-
-With **ReactSoundPlayer** creation of SoundCloud players becomes as easy as pointing different controls in the right places. Here is the list of available pure so-called ["dumb"](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) components that accept data and callbacks only as `props`:
-
-### PlayButton
-
-Play or pause track.
-
-```javascript
-<PlayButton
-    className={String}
-    playing={Boolean}
-    seeking={Boolean}
-    seekingIcon={
-        ReactElement
-        /*optional icon that will be showed when track is seeking new position to play*/
-    }
-    onTogglePlay={Function}
-    soundCloudAudio={instanceof SoundCloudAudio}
-/>
-```
-
-### NextButton
-
-Switch to the next track in a playlist.
-
-```javascript
-<NextButton
-    className={String}
-    onNextClick={Function}
-    soundCloudAudio={instanceof SoundCloudAudio}
-/>
-```
-
-### PrevButton
-
-Return to the previous track in the playlist.
-
-```javascript
-<PrevButton
-    className={String}
-    onPrevClick={Function}
-    soundCloudAudio={instanceof SoundCloudAudio}
-/>
-```
-
-_Important note:_ All buttons accept `soundCloudAudio` prop which when passed will add actions to buttons automagically (e.g. play/pause, go to prev/next track), callback function used in `onTogglePlay`, `onNextClick` and `onPrevClick` will still be called after.
-
-### VolumeControl
-
-Adjust volume or mute sound output.
-
-```javascript
-<VolumeControl
-    className={String}
-    buttonClassName={String}
-    rangeClassName={String}
-    volume={Number}
-    onVolumeChange={Function}
-    onToggleMute={Function}
-    soundCloudAudio={instanceof SoundCloudAudio}
-/>
-```
-
-### Progress
-
-Component that replaces native [`<progress>` DOM element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).  If `soundCloudAudio` prop is passed it automagically updates track audio time due to clicked progress position.
-
-```javascript
-<Progress
-    className={String}
-    innerClassName={String}
-    value={Number}
-    onSeekTrack={
-        Function
-        /*receives `x` position as first argument and `event` as second*/
-    }
-/>
-```
-
-### Timer
-
-Shows current time of the track and its' duration in `(hh:)mm:ss/(hh:)mm:ss` format.
-
-```javascript
-<Timer
-    className={String}
-    duration={Number}
-    currentTime={Number}
-/>
-```
-
-### Cover
-
-Nice looking cover box inspired by original SoundCloud players.
-
-```javascript
-<Cover
-    className={String}
-    trackName={String}
-    artistName={String}
-    backgroundUrl={String}
-/>
-```
-
-As you see each component contains a set of self-descriptive properties. One of them is `className` which allows you to setup custom class names as on regular DOM elements and style components as you wish.
-
-## SoundPlayerContainer
-
-`<SoundPlayerContainer />` is higher level container that propagates its' children with all necessary [props](https://github.com/soundblogs/react-soundplayer#state) which you might need in order to design an audio player.
-
-When using it, just choose what kind of SoundCloud data you're consuming (via `resolveUrl` or `streamUrl`)
-
-_If you're wondering "Why not mixin?", please read ["Why Component Is Better Than Mixin"](https://github.com/acdlite/flummox/blob/master/docs/docs/guides/why-flux-component-is-better-than-flux-mixin.md) by [@acdlite](https://github.com/acdlite)._
-
-### Props
-
-##### `resolveUrl`
-
-_(String)_ - this could be regular link from SoundCloud web app which points to track or playlist, example urls:
-
-```javascript
-// track
-"https://soundcloud.com/thrilljockey/future-islands-balance"
-
-// playlist
-"https://soundcloud.com/stepan-i-meduza-official/sets/dolgo-obyasnyat-ep"
-```
-
-##### `streamUrl`
-
-_(String)_ - pass here pure stream url as it's returned by [SoundCloud API](https://developers.soundcloud.com/docs/api/reference#tracks), it has higher priority than `resolveUrl`, example:
-
-```javascript
-"https://api.soundcloud.com/tracks/200494743/stream"
-```
-
-##### `clientId`
-
-_(String)_ - your SoundCloud app's client ID, get it at https://developers.soundcloud.com
-
-[SoundCloudAudio](https://github.com/voronianski/soundcloud-audio.js) will be created per each component instance:
-
-```javascript
 import React from 'react';
-import { SoundPlayerContainer } from 'react-soundplayer/addons';
+import ReactDOM from 'react-dom';
+import { PlayButton, Timer } from 'react-soundplayer/components';
+import { withSoundCloudAudio } from 'react-soundplayer/addons';
 
 const clientId = 'YOUR CLIENT ID';
-const streamUrl = 'https://api.soundcloud.com/tracks/200494743/stream';
+const resolveUrl = 'https://soundcloud.com/ksmtk/chronemics';
 
-class AppPlayer extends React.Component {
-    render() {
-        <div>
-            <SoundPlayerContainer streamUrl={streamUrl} clientId={clientId}>
-                {/* your custom player components */}
-            </SoundPlayerContainer>
-        </div>
-    }
-}
+const Player = withSoundCloudAudio(props => {
+    let { track, currentTime } = props;
 
-React.render(<AppPlayer />, document.body);
-```
-##### `soundCloudAudio`
-_(object)_ - Use instead of `clientId` to pass in a pre-existing instance of `soundCloudAudio` for `SoundPlayerContainer` to wrap.
+    return (
+      <div className="custom-player">
+        <PlayButton
+          className="custom-player-btn"
+          onPlayClick={() => {
+            console.log('play button clicked!');
+          }}
+          {...props} />
+        <h2 className="custom-player-title">
+          {track ? track.title : 'Loading...'}
+        </h2>
+        <Timer 
+          className="custom-player-timer"
+          duration={track ? track.duration / 1000 : 0} 
+          currentTime={currentTime} 
+          {...props} />
+      </div>
+    );
+});
 
-### Children Props
+const App = () => {
+  return (
+    <Player
+      clientId={clientId}
+      resolveUrl={resolveUrl}
+      onReady={() => console.log('track is loaded!')} />
+  );
+};
 
-All of these self-descriptive state properties are passed into `<SoundPlayerContainer />` children components as `props`:
+ReactDOM.render(
+  <App />, 
+  document.getElementById('#app')
+);
+```
 
-- `playing` _(Boolean)_ - `true` if audio is playing currently
-- `seeking` _(Boolean)_ - `true` if audio is seeking for position
-- `track` _(Object)_ or `tracks` _(Array)_ - data object or array of such objects depends whether the url was pointing to track or playlist, see - https://developers.soundcloud.com/docs/api/reference#tracks (**will be available only while using [`resolveUrl` prop](https://github.com/soundblogs/react-soundplayer#resolveurl)**)
-- `duration` _(Number)_ - audio duration in seconds
-- `currentTime` _(Number)_ - audio current time in seconds
-- `soundCloudAudio` _(instance of [SoundCloudAudio](https://github.com/voronianski/soundcloud-audio.js))_
+### Custom Audio Example
 
-As you can see it's really easy to create your own components from scratch and wrap them with `SoundPlayerContainer` which will provide all the necessary data to them.
+It is also easy to built players **without** using SoundCloud API. You just need to pass audio source via `streamUrl` and all other necessary track meta information can be passed as custom props.
 
-```javascript
+```js
 import React from 'react';
-import { SoundPlayerContainer } from 'react-soundplayer/addons';
+import { withSoundCloudAudio } from 'react-soundplayer/addons';
+import { PlayButton, Timer } from 'react-soundplayer/components';
 
-const clientId = 'YOUR CLIENT ID';
-const resolveUrl = 'https://soundcloud.com/stepan-i-meduza-official/dolgo-obyasnyat';
+// audio source
+const streamUrl = 'https://s3-eu-west-1.amazonaws.com/react-soundplayer-examples/ksmtk-reborn-edit.mp3';
 
-class TrackInfo extends React.Component {
-    render() {
-        let { track } = this.props;
+// some track meta information
+const trackTitle = 'Ksmtk - Reborn';
 
-        if (!track) {
-            return <div>Loading...</div>;
-        }
+const AWSSoundPlayer = withSoundCloudAudio(props => {
+  const { trackTitle } = props;
 
-        return (
-            <div>
-                <h2>{track.title}</h2>
-                <h3>{track.user.username}</h3>
-            </div>
-        );
-    }
-}
+  return (
+    <div>
+      <PlayButton {...this.props} />
+      <h2>{trackTitle}</h2>
+      <Timer {...this.props} />
+    </div>
+  );
+});
 
-class PlayPause extends React.Component {
-    togglePlay() {
-        let { playing, soundCloudAudio } = this.props;
-        if (playing) {
-            soundCloudAudio.pause();
-        } else {
-            soundCloudAudio.play();
-        }
-    }
-
-    render() {
-        let { playing } = this.props;
-        let text = playing ? 'Pause' : 'Play';
-
-        if (!track) {
-            return <div>Loading...</div>;
-        }
-
-        return (
-            <button onClick={this.togglePlay.bind(this)}>
-                {text}
-            </button>
-        );
-    }
+class App extends React.Component {
+  render() {
+    return (
+      <AWSSoundPlayer
+        streamUrl={streamUrl}
+        trackTitle={trackTitle} />
+    );
+  }
 }
 
-class CustomPlayer extends React.Component {
-    render() {
-        return (
-            <SoundPlayerContainer resolveUrl={resolveUrl} clientId={clientId}>
-                <TrackInfo />
-                <PlayPause />
-            </SoundPlayerContainer>
-        );
-    }
-}
-
-React.render(<CustomPlayer />, document.body);
+React.render(<App />, document.getElementById('app'));
 ```
 
-## Icon Components
-
-Icons for buttons and SoundCloud logo can be used on their own as well. All of them are pure [**SVG**](http://caniuse.com/#search=svg).
-
-```javascript
-import { Icons } from 'react-soundplayer/components';
-
-// the list of available icons:
-const {
-    SoundCloudLogoSVG,
-    PlayIconSVG,
-    PauseIconSVG,
-    NextIconSVG,
-    PrevIconSVG
-} = Icons;
-```
-
-## SoundCloud API
-
-If you're curious what data you can use inside player just take a look into official SoundCloud Developers docs for [tracks](https://developers.soundcloud.com/docs/api/reference#tracks).
-
-## Troubleshooting
-
-Please keep in mind that SoundCloud provides an option for users to prevent streaming to third-party apps. If your sound isn't playing check the [track](https://developers.soundcloud.com/docs/api/reference#tracks)'s `streamable` property. If it's set to `false`, there is no way to play that sound with the API.
-
 ## References
 
 - simply the best CSS modular toolkit on the web - [BASSCSS](http://www.basscss.com/)
-- easy management of HTML5 Audio API by [SoundCloudAudio](https://github.com/voronianski/soundcloud-audio.js/)
+- easy management of HTML5 Audio API by [SoundCloudAudio.js](https://github.com/voronianski/soundcloud-audio.js/)
 - inspired by [Plangular](http://jxnblk.com/plangular/)
 - we all :heart: [SoundCloud API](https://developers.soundcloud.com/docs/api/reference)!
+- generate standalone "copy-paste" version with [Soundplayer.js](labs.voronianski.com/get-soundplayer)
 - follow updates on [Twitter](https://twitter.com/voronianski)
@@ -331,0 +118,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

257661

increased by231.33%

Dev dependency count

14

decreased by-12.5%

Number of package files

46

increased by43.75%

Lines of code

6057

increased by357.13%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dependency count

6

increased by20%

Number of lines in readme file

121

decreased by-63.77%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.0

• + Addedhoist-non-react-statics@2.5.5(transitive)

• + Addedreact@16.14.0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedhoist-non-react-statics@1.2.0(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedclassnames@^2.2.5

• Updatedhoist-non-react-statics@^2.3.1

• Updatedobject-assign@^4.1.1

• Updatedreact@^16.0.0

• Updatedsoundcloud-audio@^1.2.0