react-player - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log
 
+#### [v0.21.0](https://github.com/CookPete/react-player/compare/v0.20.0...v0.21.0)
+> 2 September 2017
+
+* Add muted prop [`#221`](https://github.com/CookPete/react-player/issues/221)
+* Add onSeek prop [`#222`](https://github.com/CookPete/react-player/issues/222)
+* Tweak Wistia player load logic [`b0e725c`](https://github.com/CookPete/react-player/commit/b0e725cc7a5c964ba17f3422ebf7406f409f0a60)
+
+
 #### [v0.20.0](https://github.com/CookPete/react-player/compare/v0.19.1...v0.20.0)
@@ -9,0 +17,0 @@ > 27 July 2017

index.d.ts

 import * as React from 'react';
 
 export interface ReactPlayerProps {
-  url?: string;
+  url?: string|array;
   playing?: boolean;
@@ -9,9 +9,11 @@ loop?: boolean;
   volume?: number;
+  muted?: boolean;
   playbackRate?: number;
   width?: string|number;
   height?: string|number;
+  style?: Object;
+  progressFrequency?: number;
+  playsinline?: boolean;
   hidden?: boolean;
   className?: string;
-  style?: Object;
-  progressFrequency?: number;
   soundcloudConfig?: {
@@ -25,2 +27,9 @@ clientId: string,
   };
+  facebookConfig?: {
+    appId: string
+  };
+  dailymotionConfig?: {
+    params: Object,
+    preload: boolean
+  }),
   vimeoConfig?: {
@@ -30,5 +39,15 @@ iframeParams: Object,
   };
+  vidmeConfig?: {
+    format: string
+  }),
   fileConfig?: {
-    attributes: Object
-  };
+    attributes: Object,
+    tracks: array,
+    forceAudio: boolean,
+    forceHLS: boolean,
+    forceDASH: boolean
+  }),
+  wistiaConfig?: {
+    options: Object
+  }),
   onReady?(): void;
@@ -42,2 +61,3 @@ onStart?(): void;
   onDuration?(duration: number): void;
+  onSeek?(seconds: number): void;
   onProgress?(state: { played: number, loaded: number }): void;
@@ -44,0 +64,0 @@ }

lib/players/Base.js

@@ -38,2 +38,3 @@ 'use strict';
           volume = _this$props.volume,
+          muted = _this$props.muted,
           onStart = _this$props.onStart,
@@ -46,3 +47,3 @@ onPlay = _this$props.onPlay,
         _this.setPlaybackRate(playbackRate);
-        _this.setVolume(volume);
+        _this.setVolume(muted ? 0 : volume);
         onStart();
@@ -110,2 +111,3 @@ _this.startOnPlay = false;
           volume = _props.volume,
+          muted = _props.muted,
           playbackRate = _props.playbackRate;
@@ -125,4 +127,6 @@ // Invoke player methods based on incoming props
         this.pause();
-      } else if (volume !== nextProps.volume) {
+      } else if (volume !== nextProps.volume && !nextProps.muted) {
         this.setVolume(nextProps.volume);
+      } else if (muted !== nextProps.muted) {
+        this.setVolume(nextProps.muted ? 0 : nextProps.volume);
       } else if (playbackRate !== nextProps.playbackRate) {
@@ -129,0 +133,0 @@ this.setPlaybackRate(nextProps.playbackRate);

lib/players/DailyMotion.js

@@ -157,2 +157,5 @@ 'use strict';
             },
+            seeked: function seeked() {
+              return _this2.props.onSeek(_this2.player.currentTime);
+            },
             video_end: _this2.onEnded,
@@ -159,0 +162,0 @@ durationchange: _this2.onDurationChange,

lib/players/FilePlayer.js

@@ -55,3 +55,5 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FilePlayer.__proto__ || Object.getPrototypeOf(FilePlayer)).call.apply(_ref, [this].concat(args))), _this), _this.renderSource = function (source) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FilePlayer.__proto__ || Object.getPrototypeOf(FilePlayer)).call.apply(_ref, [this].concat(args))), _this), _this.onSeek = function (e) {
+      _this.props.onSeek(e.target.currentTime);
+    }, _this.renderSource = function (source) {
       if (typeof source === 'string') {
@@ -89,2 +91,3 @@ return _react2['default'].createElement('source', { key: source, src: source });
       });
+      this.player.addEventListener('seeked', this.onSeek);
       this.player.addEventListener('ended', onEnded);
@@ -109,2 +112,3 @@ this.player.addEventListener('error', onError);
       this.player.removeEventListener('pause', onPause);
+      this.player.removeEventListener('seeked', this.onSeek);
       this.player.removeEventListener('ended', onEnded);
@@ -111,0 +115,0 @@ this.player.removeEventListener('error', onError);

lib/players/Vimeo.js

@@ -124,2 +124,5 @@ 'use strict';
         _this2.player.on('pause', _this2.props.onPause);
+        _this2.player.on('seeked', function (e) {
+          return _this2.props.onSeek(e.seconds);
+        });
         _this2.player.on('ended', _this2.props.onEnded);
@@ -126,0 +129,0 @@ _this2.player.on('error', _this2.props.onError);

lib/players/Wistia.js

@@ -45,4 +45,23 @@ 'use strict';
   _createClass(Wistia, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
+    key: 'getSDK',
+    value: function getSDK() {
+      return new Promise(function (resolve, reject) {
+        if (window[SDK_GLOBAL]) {
+          resolve();
+        } else {
+          (0, _loadScript2['default'])(SDK_URL, function (err, script) {
+            if (err) reject(err);
+            resolve(script);
+          });
+        }
+      });
+    }
+  }, {
+    key: 'getID',
+    value: function getID(url) {
+      return url && url.match(MATCH_URL)[4];
+    }
+  }, {
+    key: 'load',
+    value: function load(url) {
       var _this2 = this;
@@ -53,10 +72,10 @@
           onPause = _props.onPause,
+          onSeek = _props.onSeek,
           onEnded = _props.onEnded,
           wistiaConfig = _props.wistiaConfig;
 
-      this.loadingSDK = true;
       this.getSDK().then(function () {
         window._wq = window._wq || [];
         window._wq.push({
-          id: _this2.getID(_this2.props.url),
+          id: _this2.getID(url),
           options: wistiaConfig.options,
@@ -68,2 +87,3 @@ onReady: function onReady(player) {
             _this2.player.bind('pause', onPause);
+            _this2.player.bind('seek', onSeek);
             _this2.player.bind('end', onEnded);
@@ -76,31 +96,2 @@ _this2.onReady();
   }, {
-    key: 'getSDK',
-    value: function getSDK() {
-      return new Promise(function (resolve, reject) {
-        if (window[SDK_GLOBAL]) {
-          resolve();
-        } else {
-          (0, _loadScript2['default'])(SDK_URL, function (err, script) {
-            if (err) reject(err);
-            resolve(script);
-          });
-        }
-      });
-    }
-  }, {
-    key: 'getID',
-    value: function getID(url) {
-      return url && url.match(MATCH_URL)[4];
-    }
-  }, {
-    key: 'load',
-    value: function load(url) {
-      var id = this.getID(url);
-      if (this.isReady) {
-        this.player.replaceWith(id);
-        this.props.onReady();
-        this.onReady();
-      }
-    }
-  }, {
     key: 'play',
@@ -169,3 +160,3 @@ value: function play() {
       };
-      return _react2['default'].createElement('div', { className: className, style: style });
+      return _react2['default'].createElement('div', { key: id, className: className, style: style });
     }
@@ -172,0 +163,0 @@ }], [{

lib/props.js

@@ -28,2 +28,3 @@ 'use strict';
   volume: number,
+  muted: bool,
   playbackRate: number,
@@ -35,2 +36,4 @@ width: oneOfType([string, number]),
   playsinline: bool,
+  hidden: bool,
+  className: string,
   soundcloudConfig: shape({
@@ -76,2 +79,3 @@ clientId: string,
   onDuration: func,
+  onSeek: func,
   onProgress: func
@@ -85,2 +89,3 @@ };
   volume: 0.8,
+  muted: false,
   playbackRate: 1,
@@ -132,3 +137,4 @@ width: 640,
   onDuration: function onDuration() {},
+  onSeek: function onSeek() {},
   onProgress: function onProgress() {}
 };

lib/ReactPlayer.js

@@ -157,3 +157,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps) {
-      return this.props.url !== nextProps.url || this.props.playing !== nextProps.playing || this.props.volume !== nextProps.volume || this.props.playbackRate !== nextProps.playbackRate || this.props.height !== nextProps.height || this.props.width !== nextProps.width || this.props.hidden !== nextProps.hidden;
+      return this.props.url !== nextProps.url || this.props.playing !== nextProps.playing || this.props.volume !== nextProps.volume || this.props.muted !== nextProps.muted || this.props.playbackRate !== nextProps.playbackRate || this.props.height !== nextProps.height || this.props.width !== nextProps.width || this.props.hidden !== nextProps.hidden;
     }
@@ -160,0 +160,0 @@ }, {

package.json

 {
   "name": "react-player",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia",
@@ -5,0 +5,0 @@ "main": "lib/ReactPlayer.js",

README.md

@@ -83,2 +83,3 @@ ReactPlayer
 `volume` | Sets the volume of the appropriate player | `0.8`
+`muted` | Mutes the player | `false`
 `playbackRate` | Sets the playback rate of the appropriate player | `1`
@@ -104,2 +105,3 @@ `width` | Sets the width of the player | `640`
 `onBuffer` | Called when media starts buffering
+`onSeek` | Called when media seeks with `seconds` parameter
 `onEnded` | Called when media finishes playing
@@ -106,0 +108,0 @@ `onError` | Called when an error occurs whilst attempting to play media

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

822996

increased by0.34%

Number of package files

29

increased by3.57%

Lines of code

6089

increased by0.51%

Number of lines in readme file

196

increased by1.03%

No dependency changes