react-soundplayer - npm Package Compare versions

Comparing version 1.0.0-rc2 to 1.0.0-rc4

lib/addons/SoundPlayerContainer.js

@@ -35,3 +35,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(SoundPlayerContainer).apply(this, arguments));
+        return _possibleConstructorReturn(this, (SoundPlayerContainer.__proto__ || Object.getPrototypeOf(SoundPlayerContainer)).apply(this, arguments));
     }
@@ -76,5 +76,6 @@
     onStopTrack: _react.PropTypes.func,
-    onPauseTrack: _react.PropTypes.func
+    onPauseTrack: _react.PropTypes.func,
+    onVolumeChange: _react.PropTypes.func
 };
 
 exports.default = (0, _withSoundCloudAudio2.default)(SoundPlayerContainer);

lib/addons/withSoundCloudAudio.js

@@ -48,3 +48,3 @@ 'use strict';
 
-            var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(WithSoundCloudAudio).call(this, props, context));
+            var _this = _possibleConstructorReturn(this, (WithSoundCloudAudio.__proto__ || Object.getPrototypeOf(WithSoundCloudAudio)).call(this, props, context));
 
@@ -69,3 +69,5 @@ if (!props.clientId && !props.soundCloudAudio) {
                 seeking: false,
-                playing: false
+                playing: false,
+                volume: 1,
+                isMuted: false
             };
@@ -94,5 +96,5 @@ return _this;
                 var soundCloudAudio = this.soundCloudAudio;
-                var _props = this.props;
-                var resolveUrl = _props.resolveUrl;
-                var streamUrl = _props.streamUrl;
+                var _props = this.props,
+                    resolveUrl = _props.resolveUrl,
+                    streamUrl = _props.streamUrl;
 
@@ -125,2 +127,3 @@
                 soundCloudAudio.on('ended', this.onAudioEnded.bind(this));
+                soundCloudAudio.on('volumechange', this.onVolumeChange.bind(this));
             }
@@ -172,2 +175,10 @@ }, {
         }, {
+            key: 'onVolumeChange',
+            value: function onVolumeChange() {
+                this.setState({
+                    volume: this.soundCloudAudio.audio.volume,
+                    isMuted: this.soundCloudAudio.audio.muted
+                });
+            }
+        }, {
             key: 'getCurrentTime',
@@ -174,0 +185,0 @@ value: function getCurrentTime() {

lib/components/Cover.js

@@ -35,3 +35,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(Cover).apply(this, arguments));
+        return _possibleConstructorReturn(this, (Cover.__proto__ || Object.getPrototypeOf(Cover)).apply(this, arguments));
     }
@@ -42,9 +42,9 @@
         value: function render() {
-            var _props = this.props;
-            var backgroundUrl = _props.backgroundUrl;
-            var trackName = _props.trackName;
-            var artistName = _props.artistName;
-            var className = _props.className;
-            var style = _props.style;
-            var children = _props.children;
+            var _props = this.props,
+                backgroundUrl = _props.backgroundUrl,
+                trackName = _props.trackName,
+                artistName = _props.artistName,
+                className = _props.className,
+                style = _props.style,
+                children = _props.children;
 
@@ -51,0 +51,0 @@ var classNames = (0, _classnames2.default)('sb-soundplayer-cover', className);

lib/components/Icons.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.PrevIconSVG = exports.NextIconSVG = exports.PauseIconSVG = exports.PlayIconSVG = exports.ButtonIconSVG = exports.SoundCloudLogoSVG = undefined;
+exports.VolumeIconMuteSVG = exports.VolumeIconLoudSVG = exports.VolumeIconSVG = exports.PrevIconSVG = exports.NextIconSVG = exports.PauseIconSVG = exports.PlayIconSVG = exports.ButtonIconSVG = exports.SoundCloudLogoSVG = undefined;
 
@@ -76,2 +76,37 @@ var _react = require("react");
     );
+};
+
+// Volume
+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
+    );
+};
+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' } })
+    );
+};
+
+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' } })
+    );
 };

lib/components/index.js

@@ -6,4 +6,8 @@ 'use strict';
 });
-exports.Icons = exports.Cover = exports.Timer = exports.Progress = exports.PrevButton = exports.NextButton = exports.PlayButton = undefined;
+exports.Icons = exports.Cover = exports.Timer = exports.Progress = exports.PrevButton = exports.NextButton = exports.PlayButton = exports.VolumeControl = undefined;
 
+var _VolumeControl2 = require('./VolumeControl');
+
+var _VolumeControl3 = _interopRequireDefault(_VolumeControl2);
+
 var _PlayButton2 = require('./PlayButton');
@@ -39,2 +43,3 @@
 
+exports.VolumeControl = _VolumeControl3.default;
 exports.PlayButton = _PlayButton3.default;
@@ -41,0 +46,0 @@ exports.NextButton = _NextButton3.default;

lib/components/NextButton.js

@@ -37,3 +37,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(NextButton).apply(this, arguments));
+        return _possibleConstructorReturn(this, (NextButton.__proto__ || Object.getPrototypeOf(NextButton)).apply(this, arguments));
     }
@@ -49,5 +49,5 @@
         value: function handleClick(e) {
-            var _props = this.props;
-            var soundCloudAudio = _props.soundCloudAudio;
-            var onNextClick = _props.onNextClick;
+            var _props = this.props,
+                soundCloudAudio = _props.soundCloudAudio,
+                onNextClick = _props.onNextClick;
 
@@ -61,5 +61,5 @@
         value: function render() {
-            var _props2 = this.props;
-            var className = _props2.className;
-            var style = _props2.style;
+            var _props2 = this.props,
+                className = _props2.className,
+                style = _props2.style;
 
@@ -66,0 +66,0 @@ var classNames = (0, _classnames2.default)('sb-soundplayer-play-btn', className);

lib/components/PlayButton.js

@@ -37,3 +37,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(PlayButton).apply(this, arguments));
+        return _possibleConstructorReturn(this, (PlayButton.__proto__ || Object.getPrototypeOf(PlayButton)).apply(this, arguments));
     }
@@ -44,5 +44,5 @@
         value: function shouldComponentUpdate(nextProps) {
-            var _props = this.props;
-            var playing = _props.playing;
-            var seeking = _props.seeking;
+            var _props = this.props,
+                playing = _props.playing,
+                seeking = _props.seeking;
 
@@ -54,6 +54,6 @@ return playing !== nextProps.playing || seeking !== nextProps.seeking;
         value: function handleClick(e) {
-            var _props2 = this.props;
-            var playing = _props2.playing;
-            var soundCloudAudio = _props2.soundCloudAudio;
-            var onTogglePlay = _props2.onTogglePlay;
+            var _props2 = this.props,
+                playing = _props2.playing,
+                soundCloudAudio = _props2.soundCloudAudio,
+                onTogglePlay = _props2.onTogglePlay;
 
@@ -72,8 +72,8 @@
         value: function render() {
-            var _props3 = this.props;
-            var playing = _props3.playing;
-            var seekingIcon = _props3.seekingIcon;
-            var seeking = _props3.seeking;
-            var className = _props3.className;
-            var style = _props3.style;
+            var _props3 = this.props,
+                playing = _props3.playing,
+                seekingIcon = _props3.seekingIcon,
+                seeking = _props3.seeking,
+                className = _props3.className,
+                style = _props3.style;
 
@@ -80,0 +80,0 @@

lib/components/PrevButton.js

@@ -37,3 +37,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(PrevButton).apply(this, arguments));
+        return _possibleConstructorReturn(this, (PrevButton.__proto__ || Object.getPrototypeOf(PrevButton)).apply(this, arguments));
     }
@@ -49,5 +49,5 @@
         value: function handleClick(e) {
-            var _props = this.props;
-            var soundCloudAudio = _props.soundCloudAudio;
-            var onPrevClick = _props.onPrevClick;
+            var _props = this.props,
+                soundCloudAudio = _props.soundCloudAudio,
+                onPrevClick = _props.onPrevClick;
 
@@ -61,5 +61,5 @@
         value: function render() {
-            var _props2 = this.props;
-            var className = _props2.className;
-            var style = _props2.style;
+            var _props2 = this.props,
+                className = _props2.className,
+                style = _props2.style;
 
@@ -66,0 +66,0 @@ var classNames = (0, _classnames2.default)('sb-soundplayer-play-btn', className);

lib/components/Progress.js

@@ -37,3 +37,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(Progress).apply(this, arguments));
+        return _possibleConstructorReturn(this, (Progress.__proto__ || Object.getPrototypeOf(Progress)).apply(this, arguments));
     }
@@ -44,5 +44,5 @@
         value: function handleSeekTrack(e) {
-            var _props = this.props;
-            var onSeekTrack = _props.onSeekTrack;
-            var soundCloudAudio = _props.soundCloudAudio;
+            var _props = this.props,
+                onSeekTrack = _props.onSeekTrack,
+                soundCloudAudio = _props.soundCloudAudio;
 
@@ -60,11 +60,11 @@ var xPos = (e.pageX - e.currentTarget.getBoundingClientRect().left) / e.currentTarget.offsetWidth;
         value: function render() {
-            var _props2 = this.props;
-            var className = _props2.className;
-            var innerClassName = _props2.innerClassName;
-            var style = _props2.style;
-            var currentTime = _props2.currentTime;
-            var duration = _props2.duration;
-            var _props3 = this.props;
-            var value = _props3.value;
-            var innerStyle = _props3.innerStyle;
+            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;
 
@@ -71,0 +71,0 @@

lib/components/Timer.js

@@ -31,3 +31,3 @@ 'use strict';
 
-        return _possibleConstructorReturn(this, Object.getPrototypeOf(Timer).apply(this, arguments));
+        return _possibleConstructorReturn(this, (Timer.__proto__ || Object.getPrototypeOf(Timer)).apply(this, arguments));
     }
@@ -38,7 +38,7 @@
         value: function render() {
-            var _props = this.props;
-            var currentTime = _props.currentTime;
-            var className = _props.className;
-            var style = _props.style;
-            var soundCloudAudio = _props.soundCloudAudio;
+            var _props = this.props,
+                currentTime = _props.currentTime,
+                className = _props.className,
+                style = _props.style,
+                soundCloudAudio = _props.soundCloudAudio;
             var duration = this.props.duration;
@@ -45,0 +45,0 @@

package.json

 {
   "name": "react-soundplayer",
-  "version": "1.0.0-rc2",
+  "version": "1.0.0-rc4",
   "description": "Create custom SoundCloud players with React",
@@ -36,3 +36,3 @@ "main": "index.js",
     "react": "^15.3.0",
-    "soundcloud-audio": "^1.0.3"
+    "soundcloud-audio": "^1.0.4"
   },
@@ -46,3 +46,2 @@ "devDependencies": {
     "babel-preset-stage-0": "^6.5.0",
-    "cssnext": "^1.2.3",
     "eslint": "^3.2.2",
@@ -54,4 +53,7 @@ "eslint-config-airbnb": "^10.0.0",
     "eslint-plugin-react": "^6.0.0",
-    "husky": "^0.11.6"
+    "husky": "^0.11.6",
+    "postcss": "^5.2.5",
+    "postcss-cssnext": "^2.8.0",
+    "postcss-import": "^8.1.2"
   }
 }

README.md

@@ -104,2 +104,18 @@ # <img src="http://www.officialpsds.com/images/thumbs/Soundcloud-Logo-psd47614.png" width="75" align="left">&nbsp;react-soundplayer
 
+### 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
@@ -106,0 +122,0 @@

No alert changes

Improved metrics

Total package byte prevSize

77765

increased by20.08%

Number of package files

32

increased by10.34%

Lines of code

1325

increased by30.8%

Number of lines in readme file

334

increased by5.03%

Worsened metrics

Dev dependency count

16

increased by14.29%

Dependency changes

• Updatedsoundcloud-audio@^1.0.4