react-player - npm Package Compare versions

Comparing version 0.21.0 to 0.22.0

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log
 
+#### [v0.22.0](https://github.com/CookPete/react-player/compare/v0.21.0...v0.22.0)
+> 3 September 2017
+
+* Add Twitch player [`288c18d`](https://github.com/CookPete/react-player/commit/288c18ddd582a9cd8b629216041a0166d4c23987)
+* Add sourcemap config to uglify plugin [`901dfbf`](https://github.com/CookPete/react-player/commit/901dfbf101e0d26f9c685088ad9a9b4d318d9950)
+* Update vidme example URL [`ad7b335`](https://github.com/CookPete/react-player/commit/ad7b3356ec85ba68d6696e867512177efc33beba)
+
+
 #### [v0.21.0](https://github.com/CookPete/react-player/compare/v0.20.0...v0.21.0)
@@ -9,0 +17,0 @@ > 2 September 2017

lib/players/DailyMotion.js

@@ -17,6 +17,2 @@ 'use strict';
 
-var _loadScript = require('load-script');
-
-var _loadScript2 = _interopRequireDefault(_loadScript);
-
 var _Base2 = require('./Base');
@@ -94,21 +90,2 @@
   }, {
-    key: 'getSDK',
-    value: function getSDK() {
-      if (window[SDK_GLOBAL] && window[SDK_GLOBAL].player) {
-        return Promise.resolve(window[SDK_GLOBAL]);
-      }
-      return new Promise(function (resolve, reject) {
-        var previousOnReady = window[SDK_GLOBAL_READY];
-        window[SDK_GLOBAL_READY] = function () {
-          if (previousOnReady) previousOnReady();
-          resolve(window[SDK_GLOBAL]);
-        };
-        (0, _loadScript2['default'])(SDK_URL, function (err) {
-          if (err) {
-            reject(err);
-          }
-        });
-      });
-    }
-  }, {
     key: 'parseId',
@@ -143,3 +120,5 @@ value: function parseId(url) {
       this.loadingSDK = true;
-      this.getSDK().then(function (DM) {
+      (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, function (DM) {
+        return DM.player;
+      }).then(function (DM) {
         var Player = DM.player;
@@ -146,0 +125,0 @@ _this2.player = new Player(_this2.container, {

lib/players/Facebook.js

@@ -15,6 +15,2 @@ 'use strict';
 
-var _loadScript = require('load-script');
-
-var _loadScript2 = _interopRequireDefault(_loadScript);
-
 var _Base2 = require('./Base');
@@ -24,2 +20,4 @@
 
+var _utils = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -53,3 +51,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = YouTube.__proto__ || Object.getPrototypeOf(YouTube)).call.apply(_ref, [this].concat(args))), _this), _this.playerID = PLAYER_ID_PREFIX + randomString(), _this.onEnded = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = YouTube.__proto__ || Object.getPrototypeOf(YouTube)).call.apply(_ref, [this].concat(args))), _this), _this.playerID = PLAYER_ID_PREFIX + (0, _utils.randomString)(), _this.onEnded = function () {
       var _this$props = _this.props,
@@ -67,19 +65,2 @@ loop = _this$props.loop,
   _createClass(YouTube, [{
-    key: 'getSDK',
-    value: function getSDK() {
-      if (window[SDK_GLOBAL]) {
-        return Promise.resolve(window[SDK_GLOBAL]);
-      }
-      return new Promise(function (resolve, reject) {
-        var previousOnReady = window[SDK_GLOBAL_READY];
-        window[SDK_GLOBAL_READY] = function () {
-          if (previousOnReady) previousOnReady();
-          resolve(window[SDK_GLOBAL]);
-        };
-        (0, _loadScript2['default'])(SDK_URL, function (err) {
-          if (err) reject(err);
-        });
-      });
-    }
-  }, {
     key: 'load',
@@ -90,3 +71,3 @@ value: function load(url) {
       if (this.isReady) {
-        this.getSDK().then(function (FB) {
+        (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(function (FB) {
           return FB.XFBML.parse();
@@ -96,3 +77,3 @@ });
       }
-      this.getSDK().then(function (FB) {
+      (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(function (FB) {
         FB.init({
@@ -198,9 +179,3 @@ appId: _this2.props.facebookConfig.appId,
 
-// http://stackoverflow.com/a/38622545
-
-
 YouTube.displayName = 'Facebook';
-exports['default'] = YouTube;
-function randomString() {
-  return Math.random().toString(36).substr(2, 5);
-}
+exports['default'] = YouTube;

lib/players/FilePlayer.js

@@ -21,6 +21,4 @@ 'use strict';
 
-var _loadScript = require('load-script');
+var _utils = require('../utils');
 
-var _loadScript2 = _interopRequireDefault(_loadScript);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -132,3 +130,3 @@
       if (this.shouldUseHLS(url)) {
-        loadSDK(HLS_SDK_URL, HLS_GLOBAL).then(function (Hls) {
+        (0, _utils.getSDK)(HLS_SDK_URL, HLS_GLOBAL).then(function (Hls) {
           _this3.hls = new Hls();
@@ -140,3 +138,3 @@ _this3.hls.loadSource(url);
       if (this.shouldUseDASH(url)) {
-        loadSDK(DASH_SDK_URL, DASH_GLOBAL).then(function (dashjs) {
+        (0, _utils.getSDK)(DASH_SDK_URL, DASH_GLOBAL).then(function (dashjs) {
           var player = dashjs.MediaPlayer().create();
@@ -245,15 +243,2 @@ player.initialize(_this3.player, url, true);
 FilePlayer.displayName = 'FilePlayer';
-exports['default'] = FilePlayer;
-
-
-function loadSDK(url, globalVar) {
-  if (window[globalVar]) {
-    return Promise.resolve(window[globalVar]);
-  }
-  return new Promise(function (resolve, reject) {
-    (0, _loadScript2['default'])(url, function (err) {
-      if (err) reject(err);
-      resolve(window[globalVar]);
-    });
-  });
-}
+exports['default'] = FilePlayer;

lib/players/Vimeo.js

@@ -17,6 +17,2 @@ 'use strict';
 
-var _loadScript = require('load-script');
-
-var _loadScript2 = _interopRequireDefault(_loadScript);
-
 var _Base2 = require('./Base');
@@ -26,2 +22,4 @@
 
+var _utils = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -81,14 +79,2 @@
   }, {
-    key: 'getSDK',
-    value: function getSDK() {
-      if (window[SDK_GLOBAL]) {
-        return Promise.resolve(window[SDK_GLOBAL]);
-      }
-      return new Promise(function (resolve, reject) {
-        (0, _loadScript2['default'])(SDK_URL, function (err) {
-          if (err) reject(err);else resolve(window[SDK_GLOBAL]);
-        });
-      });
-    }
-  }, {
     key: 'load',
@@ -109,3 +95,3 @@ value: function load(url) {
       this.loadingSDK = true;
-      this.getSDK().then(function (Vimeo) {
+      (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL).then(function (Vimeo) {
         _this2.player = new Vimeo.Player(_this2.container, _extends({}, DEFAULT_OPTIONS, _this2.props.vimeoConfig.playerOptions, {
@@ -112,0 +98,0 @@ url: url,

lib/players/Wistia.js

@@ -15,6 +15,2 @@ 'use strict';
 
-var _loadScript = require('load-script');
-
-var _loadScript2 = _interopRequireDefault(_loadScript);
-
 var _Base2 = require('./Base');
@@ -24,2 +20,4 @@
 
+var _utils = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -47,16 +45,2 @@
   _createClass(Wistia, [{
-    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',
@@ -78,3 +62,3 @@ value: function getID(url) {
 
-      this.getSDK().then(function () {
+      (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL).then(function () {
         window._wq = window._wq || [];
@@ -81,0 +65,0 @@ window._wq.push({

lib/players/YouTube.js

@@ -17,6 +17,2 @@ 'use strict';
 
-var _loadScript = require('load-script');
-
-var _loadScript2 = _interopRequireDefault(_loadScript);
-
 var _Base2 = require('./Base');
@@ -108,19 +104,2 @@
   }, {
-    key: 'getSDK',
-    value: function getSDK() {
-      if (window[SDK_GLOBAL] && window[SDK_GLOBAL].loaded) {
-        return Promise.resolve(window[SDK_GLOBAL]);
-      }
-      return new Promise(function (resolve, reject) {
-        var previousOnReady = window[SDK_GLOBAL_READY];
-        window[SDK_GLOBAL_READY] = function () {
-          if (previousOnReady) previousOnReady();
-          resolve(window[SDK_GLOBAL]);
-        };
-        (0, _loadScript2['default'])(SDK_URL, function (err) {
-          if (err) reject(err);
-        });
-      });
-    }
-  }, {
     key: 'load',
@@ -149,3 +128,5 @@ value: function load(url) {
       this.loadingSDK = true;
-      this.getSDK().then(function (YT) {
+      (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, function (YT) {
+        return YT.loaded;
+      }).then(function (YT) {
         _this2.player = new YT.Player(_this2.container, {
@@ -152,0 +133,0 @@ width: '100%',

lib/ReactPlayer.js

@@ -57,2 +57,6 @@ 'use strict';
 
+var _Twitch = require('./players/Twitch');
+
+var _Twitch2 = _interopRequireDefault(_Twitch);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -187,2 +191,4 @@
         players.push(_Wistia2['default']);
+      } else if (_Twitch2['default'].canPlay(url)) {
+        players.push(_Twitch2['default']);
       } else if (url) {
@@ -189,0 +195,0 @@ // Fall back to FilePlayer if nothing else can play the URL

lib/utils.js

@@ -10,2 +10,11 @@ 'use strict';
 exports.parseStartTime = parseStartTime;
+exports.randomString = randomString;
+exports.getSDK = getSDK;
+
+var _loadScript = require('load-script');
+
+var _loadScript2 = _interopRequireDefault(_loadScript);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 var MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/;
@@ -46,2 +55,35 @@ var MATCH_START_STAMP = /(\d+)(h|m|s)/g;
   return seconds;
+}
+
+// http://stackoverflow.com/a/38622545
+function randomString() {
+  return Math.random().toString(36).substr(2, 5);
+}
+
+// Util function to load an external SDK
+// or return the SDK if it is already loaded
+function getSDK(url, sdkGlobal) {
+  var sdkReady = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var isLoaded = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+    return true;
+  };
+
+  if (window[sdkGlobal] && isLoaded(window[sdkGlobal])) {
+    return Promise.resolve(window[sdkGlobal]);
+  }
+  return new Promise(function (resolve, reject) {
+    if (sdkReady) {
+      var previousOnReady = window[sdkReady];
+      window[sdkReady] = function () {
+        if (previousOnReady) previousOnReady();
+        resolve(window[sdkGlobal]);
+      };
+    }
+    (0, _loadScript2['default'])(url, function (err) {
+      if (err) reject(err);
+      if (!sdkReady) {
+        resolve(window[sdkGlobal]);
+      }
+    });
+  });
 }

package.json

 {
   "name": "react-player",
-  "version": "0.21.0",
+  "version": "0.22.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

@@ -9,3 +9,3 @@ ReactPlayer
 
-A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion. Used by [rplayr](http://rplayr.com), an app to generate playlists from Reddit URLs.
+A react component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion.
 
@@ -184,2 +184,3 @@ The component parses a URL and loads in the appropriate markup and external SDKs to play media from [various sources](#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending.
 * Wistia videos use the [Wistia Player API](https://wistia.com/doc/player-api)
+* Twitch videos use the [Twitch Interactive Frames API](https://dev.twitch.tv/docs/embed#interactive-frames-for-live-streams-and-vods)
 * DailyMotion videos use the [DailyMotion Player API](https://developer.dailymotion.com/player)
@@ -186,0 +187,0 @@ * [Supported file types](https://github.com/CookPete/react-player/blob/master/src/players/FilePlayer.js#L5-L6) are playing using [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements

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

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

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

890006

increased by8.14%

Number of lines in readme file

197

increased by0.51%

Worsened metrics

Number of package files

28

decreased by-3.45%

Lines of code

2402

decreased by-60.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes