react-player - npm Package Compare versions

Comparing version 0.23.0 to 0.24.0

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log
 
+#### [v0.24.0](https://github.com/CookPete/react-player/compare/v0.23.0...v0.24.0)
+> 9 September 2017
+
+* Use single config prop [`#71`](https://github.com/CookPete/react-player/issues/71)
+* Fix webpack production config [`#231`](https://github.com/CookPete/react-player/issues/231)
+* Remove legacy Soundcloud player [`a55ef3c`](https://github.com/CookPete/react-player/commit/a55ef3c963d46a2cb1b1a7d71ba0d66ef3edcb20)
+
+
 #### [v0.23.0](https://github.com/CookPete/react-player/compare/v0.22.0...v0.23.0)
@@ -9,0 +17,0 @@ > 8 September 2017

lib/players/DailyMotion.js

@@ -36,7 +36,2 @@ 'use strict';
 var BLANK_VIDEO_URL = 'http://www.dailymotion.com/video/x522udb';
-var DEFAULT_PLAYER_VARS = {
-  autoplay: 0,
-  api: 1,
-  'endscreen-enable': false
-};
 
@@ -81,5 +76,5 @@ var DailyMotion = function (_Base) {
           url = _props.url,
-          dailymotionConfig = _props.dailymotionConfig;
+          config = _props.config;
 
-      if (!url && dailymotionConfig.preload) {
+      if (!url && config.dailymotion.preload) {
         this.preloading = true;
@@ -103,3 +98,3 @@ this.load(BLANK_VIDEO_URL);
           controls = _props2.controls,
-          dailymotionConfig = _props2.dailymotionConfig,
+          config = _props2.config,
           onError = _props2.onError,
@@ -129,3 +124,3 @@ playing = _props2.playing;
           video: id,
-          params: _extends({}, DEFAULT_PLAYER_VARS, {
+          params: _extends({
             controls: controls,
@@ -135,3 +130,3 @@ autoplay: _this2.props.playing,
             origin: window.location.origin
-          }, dailymotionConfig.params),
+          }, config.dailymotion.params),
           events: {
@@ -138,0 +133,0 @@ apiready: function apiready() {

lib/players/Facebook.js

@@ -74,3 +74,3 @@ 'use strict';
         FB.init({
-          appId: _this2.props.facebookConfig.appId,
+          appId: _this2.props.config.facebook.appId,
           xfbml: true,
@@ -77,0 +77,0 @@ version: 'v2.5'

lib/players/FilePlayer.js

@@ -32,2 +32,3 @@ 'use strict';
 var AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
+var VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i;
 var HLS_EXTENSIONS = /\.(m3u8)($|\?)/i;
@@ -117,3 +118,3 @@ var HLS_SDK_URL = 'https://cdn.jsdelivr.net/hls.js/latest/hls.min.js';
     value: function shouldUseHLS(url) {
-      return HLS_EXTENSIONS.test(url) || this.props.fileConfig.forceHLS;
+      return HLS_EXTENSIONS.test(url) || this.props.config.file.forceHLS;
     }
@@ -123,3 +124,3 @@ }, {
     value: function shouldUseDASH(url) {
-      return DASH_EXTENSIONS.test(url) || this.props.fileConfig.forceDASH;
+      return DASH_EXTENSIONS.test(url) || this.props.config.file.forceDASH;
     }
@@ -204,7 +205,7 @@ }, {
           controls = _props3.controls,
-          fileConfig = _props3.fileConfig,
+          config = _props3.config,
           width = _props3.width,
           height = _props3.height;
 
-      var useAudio = AUDIO_EXTENSIONS.test(url) || fileConfig.forceAudio;
+      var useAudio = AUDIO_EXTENSIONS.test(url) || config.file.forceAudio;
       var useHLS = this.shouldUseHLS(url);
@@ -228,5 +229,5 @@ var useDASH = this.shouldUseDASH(url);
           loop: loop
-        }, fileConfig.attributes),
+        }, config.file.attributes),
         url instanceof Array && url.map(this.renderSource),
-        fileConfig.tracks instanceof Array && fileConfig.tracks.map(this.renderTrack)
+        config.file.tracks.map(this.renderTrack)
       );
@@ -237,3 +238,3 @@ }
     value: function canPlay(url) {
-      return true;
+      return AUDIO_EXTENSIONS.test(url) || VIDEO_EXTENSIONS.test(url) || HLS_EXTENSIONS.test(url) || DASH_EXTENSIONS.test(url);
     }
@@ -240,0 +241,0 @@ }]);

lib/players/SoundCloud.js

@@ -79,3 +79,3 @@ 'use strict';
         }
-        _this2.player.load(url, _extends({}, DEFAULT_OPTIONS, _this2.props.soundcloudConfig.options, {
+        _this2.player.load(url, _extends({}, DEFAULT_OPTIONS, _this2.props.config.soundcloud.options, {
           callback: function callback() {
@@ -82,0 +82,0 @@ _this2.player.getDuration(function (duration) {

lib/players/Vidme.js

@@ -57,7 +57,7 @@ 'use strict';
       var video = _ref.video;
-      var vidmeConfig = this.props.vidmeConfig;
+      var config = this.props.config;
 
-      if (vidmeConfig.format && video.formats && video.formats.length !== 0) {
+      if (config.vidme.format && video.formats && video.formats.length !== 0) {
         var index = video.formats.findIndex(function (f) {
-          return f.type === vidmeConfig.format;
+          return f.type === config.vidme.format;
         });
@@ -67,3 +67,3 @@ if (index !== -1) {
         } else {
-          console.warn('Vidme format "' + vidmeConfig.format + '" was not found for ' + video.full_url);
+          console.warn('Vidme format "' + config.vidme.format + '" was not found for ' + video.full_url);
         }
@@ -70,0 +70,0 @@ }

lib/players/Vimeo.js

@@ -36,10 +36,2 @@ 'use strict';
 
-var DEFAULT_OPTIONS = {
-  autopause: false,
-  autoplay: false,
-  byline: false,
-  portrait: false,
-  title: false
-};
-
 var Vimeo = function (_Base) {
@@ -69,5 +61,5 @@ _inherits(Vimeo, _Base);
           url = _props.url,
-          vimeoConfig = _props.vimeoConfig;
+          config = _props.config;
 
-      if (!url && vimeoConfig.preload) {
+      if (!url && config.vimeo.preload) {
         this.preloading = true;
@@ -95,3 +87,3 @@ this.load(BLANK_VIDEO_URL);
       (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL).then(function (Vimeo) {
-        _this2.player = new Vimeo.Player(_this2.container, _extends({}, DEFAULT_OPTIONS, _this2.props.vimeoConfig.playerOptions, {
+        _this2.player = new Vimeo.Player(_this2.container, _extends({}, _this2.props.config.vimeo.playerOptions, {
           url: url,
@@ -98,0 +90,0 @@ loop: _this2.props.loop

lib/players/Wistia.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -54,2 +56,3 @@
       var _props = this.props,
+          controls = _props.controls,
           onStart = _props.onStart,
@@ -59,4 +62,5 @@ onPause = _props.onPause,
           onEnded = _props.onEnded,
-          wistiaConfig = _props.wistiaConfig;
+          config = _props.config;
 
+      this.loadingSDK = true;
       (0, _utils.getSDK)(SDK_URL, SDK_GLOBAL).then(function () {
@@ -66,3 +70,5 @@ window._wq = window._wq || [];
           id: _this2.getID(url),
-          options: wistiaConfig.options,
+          options: _extends({
+            controlsVisibleOnLoad: controls
+          }, config.wistia.options),
           onReady: function onReady(player) {
@@ -69,0 +75,0 @@ _this2.player = player;

lib/players/YouTube.js

@@ -36,9 +36,2 @@ 'use strict';
 var BLANK_VIDEO_URL = 'https://www.youtube.com/watch?v=GlCmAC4MHek';
-var DEFAULT_PLAYER_VARS = {
-  autoplay: 0,
-  playsinline: 1,
-  showinfo: 0,
-  rel: 0,
-  iv_load_policy: 3
-};
 
@@ -95,5 +88,5 @@ var YouTube = function (_Base) {
           url = _props.url,
-          youtubeConfig = _props.youtubeConfig;
+          config = _props.config;
 
-      if (!url && youtubeConfig.preload) {
+      if (!url && config.youtube.preload) {
         this.preloading = true;
@@ -112,3 +105,3 @@ this.load(BLANK_VIDEO_URL);
           controls = _props2.controls,
-          youtubeConfig = _props2.youtubeConfig,
+          config = _props2.config,
           _onError = _props2.onError;
@@ -136,3 +129,3 @@
           videoId: id,
-          playerVars: _extends({}, DEFAULT_PLAYER_VARS, {
+          playerVars: _extends({
             controls: controls ? 1 : 0,
@@ -142,3 +135,3 @@ start: (0, _utils.parseStartTime)(url),
             playsinline: playsinline
-          }, youtubeConfig.playerVars),
+          }, config.youtube.playerVars),
           events: {
@@ -145,0 +138,0 @@ onReady: _this2.onReady,

lib/props.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.defaultProps = exports.propTypes = undefined;
+exports.DEPRECATED_CONFIG_PROPS = exports.defaultProps = exports.propTypes = undefined;
 
@@ -36,37 +36,35 @@ var _propTypes = require('prop-types');
   playsinline: bool,
-  hidden: bool,
-  className: string,
-  soundcloudConfig: shape({
-    options: object,
-    legacy: bool,
-    clientId: string
+  config: shape({
+    soundcloud: shape({
+      options: object
+    }),
+    youtube: shape({
+      playerVars: object,
+      preload: bool
+    }),
+    facebook: shape({
+      appId: string
+    }),
+    dailymotion: shape({
+      params: object,
+      preload: bool
+    }),
+    vimeo: shape({
+      iframeParams: object,
+      preload: bool
+    }),
+    vidme: shape({
+      format: string
+    }),
+    file: shape({
+      attributes: object,
+      tracks: array,
+      forceAudio: bool,
+      forceHLS: bool,
+      forceDASH: bool
+    }),
+    wistia: shape({
+      options: object
+    })
   }),
-  youtubeConfig: shape({
-    playerVars: object,
-    preload: bool
-  }),
-  facebookConfig: shape({
-    appId: string
-  }),
-  dailymotionConfig: shape({
-    params: object,
-    preload: bool
-  }),
-  vimeoConfig: shape({
-    iframeParams: object,
-    preload: bool
-  }),
-  vidmeConfig: shape({
-    format: string
-  }),
-  fileConfig: shape({
-    attributes: object,
-    tracks: array,
-    forceAudio: bool,
-    forceHLS: bool,
-    forceDASH: bool
-  }),
-  wistiaConfig: shape({
-    options: object
-  }),
   onReady: func,
@@ -93,38 +91,62 @@ onStart: func,
   height: 360,
-  hidden: false,
+  style: {},
   progressFrequency: 1000,
   playsinline: false,
-  soundcloudConfig: {
-    options: {},
-    legacy: false,
-    clientId: 'e8b6f84fbcad14c301ca1355cae1dea2'
+  config: {
+    soundcloud: {
+      options: {
+        visual: true, // Undocumented, but makes player fill container and look better
+        buying: false,
+        liking: false,
+        download: false,
+        sharing: false,
+        show_comments: false,
+        show_playcount: false
+      }
+    },
+    youtube: {
+      playerVars: {
+        autoplay: 0,
+        playsinline: 1,
+        showinfo: 0,
+        rel: 0,
+        iv_load_policy: 3
+      },
+      preload: false
+    },
+    facebook: {
+      appId: '1309697205772819'
+    },
+    dailymotion: {
+      params: {
+        autoplay: 0,
+        api: 1,
+        'endscreen-enable': false
+      },
+      preload: false
+    },
+    vimeo: {
+      playerOptions: {
+        autopause: false,
+        autoplay: false,
+        byline: false,
+        portrait: false,
+        title: false
+      },
+      preload: false
+    },
+    vidme: {
+      format: null
+    },
+    file: {
+      attributes: {},
+      tracks: [],
+      forceAudio: false,
+      forceHLS: false,
+      forceDASH: false
+    },
+    wistia: {
+      options: {}
+    }
   },
-  youtubeConfig: {
-    playerVars: {},
-    preload: false
-  },
-  facebookConfig: {
-    appId: '1309697205772819'
-  },
-  dailymotionConfig: {
-    params: {},
-    preload: false
-  },
-  vimeoConfig: {
-    iframeParams: {},
-    preload: false
-  },
-  vidmeConfig: {
-    format: null
-  },
-  fileConfig: {
-    attributes: {},
-    tracks: [],
-    forceAudio: false,
-    forceHLS: false,
-    forceDASH: false
-  },
-  wistiaConfig: {
-    options: {}
-  },
   onReady: function onReady() {},
@@ -140,2 +162,4 @@ onStart: function onStart() {},
   onProgress: function onProgress() {}
-};
+};
+
+var DEPRECATED_CONFIG_PROPS = exports.DEPRECATED_CONFIG_PROPS = ['soundcloudConfig', 'youtubeConfig', 'facebookConfig', 'dailymotionConfig', 'vimeoConfig', 'vidmeConfig', 'fileConfig', 'wistiaConfig'];

lib/ReactPlayer.js

@@ -15,8 +15,6 @@ 'use strict';
 
-var _lodash = require('lodash.omit');
+var _props2 = require('./props');
 
-var _lodash2 = _interopRequireDefault(_lodash);
+var _utils = require('./utils');
 
-var _props3 = require('./props');
-
 var _YouTube = require('./players/YouTube');
@@ -30,6 +28,2 @@
 
-var _SoundCloudLegacy = require('./players/SoundCloudLegacy');
-
-var _SoundCloudLegacy2 = _interopRequireDefault(_SoundCloudLegacy);
-
 var _Vimeo = require('./players/Vimeo');
@@ -69,4 +63,2 @@
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -78,2 +70,5 @@
 
+var SUPPORTED_PROPS = Object.keys(_props2.propTypes);
+var SUPPORTED_PLAYERS = [_YouTube2['default'], _SoundCloud2['default'], _Vimeo2['default'], _Facebook2['default'], _Streamable2['default'], _Vidme2['default'], _Wistia2['default'], _Twitch2['default'], _DailyMotion2['default']];
+
 var ReactPlayer = function (_Component) {
@@ -93,6 +88,5 @@ _inherits(ReactPlayer, _Component);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReactPlayer.__proto__ || Object.getPrototypeOf(ReactPlayer)).call.apply(_ref, [this].concat(args))), _this), _this.seekTo = function (fraction) {
-      if (_this.player) {
-        _this.player.seekTo(fraction);
-      }
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReactPlayer.__proto__ || Object.getPrototypeOf(ReactPlayer)).call.apply(_ref, [this].concat(args))), _this), _this.config = (0, _utils.getConfig)(_this.props, _props2.defaultProps, true), _this.seekTo = function (fraction) {
+      if (!_this.player) return null;
+      _this.player.seekTo(fraction);
     }, _this.getDuration = function () {
@@ -109,2 +103,4 @@ if (!_this.player) return null;
       return fractionPlayed * duration;
+    }, _this.getInternalPlayer = function () {
+      return _this.player.player;
     }, _this.progress = function () {
@@ -139,18 +135,7 @@ if (_this.props.url && _this.player) {
       var active = Player.canPlay(_this.props.url);
-
-      var _this$props = _this.props,
-          youtubeConfig = _this$props.youtubeConfig,
-          vimeoConfig = _this$props.vimeoConfig,
-          dailymotionConfig = _this$props.dailymotionConfig,
-          activeProps = _objectWithoutProperties(_this$props, ['youtubeConfig', 'vimeoConfig', 'dailymotionConfig']);
-
-      var props = active ? _extends({}, activeProps, { ref: _this.ref }) : {};
-      // Only youtube and vimeo config passed to
-      // inactive players due to preload behaviour
-      return _react2['default'].createElement(Player, _extends({
+      var props = active ? _extends({}, _this.props, { ref: _this.ref }) : {};
+      return _react2['default'].createElement(Player, _extends({}, props, {
         key: Player.displayName,
-        youtubeConfig: youtubeConfig,
-        vimeoConfig: vimeoConfig,
-        dailymotionConfig: dailymotionConfig
-      }, props));
+        config: _this.config
+      }));
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -178,47 +163,50 @@ }
       // Build array of players to render based on URL and preload config
-      var _props = this.props,
-          url = _props.url,
-          youtubeConfig = _props.youtubeConfig,
-          vimeoConfig = _props.vimeoConfig,
-          dailymotionConfig = _props.dailymotionConfig,
-          soundcloudConfig = _props.soundcloudConfig;
+      var url = this.props.url;
 
-      var players = [];
-      if (_YouTube2['default'].canPlay(url)) {
-        players.push(_YouTube2['default']);
-      } else if (_SoundCloud2['default'].canPlay(url)) {
-        if (soundcloudConfig.legacy) {
-          players.push(_SoundCloudLegacy2['default']);
-        } else {
-          players.push(_SoundCloud2['default']);
+      if (!url) {
+        return [];
+      }
+      var renderPlayers = [];
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = SUPPORTED_PLAYERS[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var Player = _step.value;
+
+          if (Player.canPlay(url)) {
+            renderPlayers.push(Player);
+          }
         }
-      } else if (_Vimeo2['default'].canPlay(url)) {
-        players.push(_Vimeo2['default']);
-      } else if (_Facebook2['default'].canPlay(url)) {
-        players.push(_Facebook2['default']);
-      } else if (_DailyMotion2['default'].canPlay(url)) {
-        players.push(_DailyMotion2['default']);
-      } else if (_Streamable2['default'].canPlay(url)) {
-        players.push(_Streamable2['default']);
-      } else if (_Vidme2['default'].canPlay(url)) {
-        players.push(_Vidme2['default']);
-      } else if (_Wistia2['default'].canPlay(url)) {
-        players.push(_Wistia2['default']);
-      } else if (_Twitch2['default'].canPlay(url)) {
-        players.push(_Twitch2['default']);
-      } else if (url) {
         // Fall back to FilePlayer if nothing else can play the URL
-        players.push(_FilePlayer2['default']);
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator['return']) {
+            _iterator['return']();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
       }
+
+      if (renderPlayers.length === 0) {
+        renderPlayers.push(_FilePlayer2['default']);
+      }
       // Render additional players if preload config is set
-      if (!_YouTube2['default'].canPlay(url) && youtubeConfig.preload) {
-        players.push(_YouTube2['default']);
+      if (!_YouTube2['default'].canPlay(url) && this.config.youtube.preload) {
+        renderPlayers.push(_YouTube2['default']);
       }
-      if (!_Vimeo2['default'].canPlay(url) && vimeoConfig.preload) {
-        players.push(_Vimeo2['default']);
+      if (!_Vimeo2['default'].canPlay(url) && this.config.vimeo.preload) {
+        renderPlayers.push(_Vimeo2['default']);
       }
-      if (!_DailyMotion2['default'].canPlay(url) && dailymotionConfig.preload) {
-        players.push(_DailyMotion2['default']);
+      if (!_DailyMotion2['default'].canPlay(url) && this.config.dailymotion.preload) {
+        renderPlayers.push(_DailyMotion2['default']);
       }
-      return players.map(this.renderPlayer);
+      return renderPlayers.map(this.renderPlayer);
     }
@@ -228,8 +216,8 @@ }, {
     value: function render() {
-      var _props2 = this.props,
-          style = _props2.style,
-          width = _props2.width,
-          height = _props2.height;
+      var _props = this.props,
+          style = _props.style,
+          width = _props.width,
+          height = _props.height;
 
-      var otherProps = (0, _lodash2['default'])(this.props, Object.keys(_props3.propTypes));
+      var otherProps = (0, _utils.omit)(this.props, SUPPORTED_PROPS, _props2.DEPRECATED_CONFIG_PROPS);
       var players = this.renderPlayers();
@@ -248,4 +236,37 @@ return _react2['default'].createElement(
 ReactPlayer.displayName = 'ReactPlayer';
-ReactPlayer.propTypes = _props3.propTypes;
-ReactPlayer.defaultProps = _props3.defaultProps;
+ReactPlayer.propTypes = _props2.propTypes;
+ReactPlayer.defaultProps = _props2.defaultProps;
+
+ReactPlayer.canPlay = function (url) {
+  var players = [].concat(SUPPORTED_PLAYERS, [_FilePlayer2['default']]);
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = players[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var Player = _step2.value;
+
+      if (Player.canPlay(url)) {
+        return true;
+      }
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2['return']) {
+        _iterator2['return']();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+
+  return false;
+};
+
 exports['default'] = ReactPlayer;

lib/utils.js

@@ -12,2 +12,4 @@ 'use strict';
 exports.getSDK = getSDK;
+exports.getConfig = getConfig;
+exports.omit = omit;
 
@@ -18,4 +20,12 @@ var _loadScript = require('load-script');
 
+var _deepmerge = require('deepmerge');
+
+var _deepmerge2 = _interopRequireDefault(_deepmerge);
+
+var _props = require('./props');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/;
@@ -89,2 +99,80 @@ var MATCH_START_STAMP = /(\d+)(h|m|s)/g;
   });
+}
+
+function getConfig(props, defaultProps, showWarning) {
+  var config = (0, _deepmerge2['default'])(defaultProps.config, props.config);
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = _props.DEPRECATED_CONFIG_PROPS[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var p = _step.value;
+
+      if (props[p]) {
+        var key = p.replace(/Config$/, '');
+        config = (0, _deepmerge2['default'])(config, _defineProperty({}, key, props[p]));
+        if (showWarning) {
+          var link = 'https://github.com/CookPete/react-player#config-prop';
+          var message = 'ReactPlayer: %c' + p + ' %cis deprecated, please use the config prop instead \u2013 ' + link;
+          console.warn(message, 'font-weight: bold', '');
+        }
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator['return']) {
+        _iterator['return']();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  return config;
+}
+
+function omit(object) {
+  var _ref;
+
+  for (var _len = arguments.length, arrays = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    arrays[_key - 1] = arguments[_key];
+  }
+
+  var omitKeys = (_ref = []).concat.apply(_ref, arrays);
+  var output = {};
+  var keys = Object.keys(object);
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = keys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var key = _step2.value;
+
+      if (omitKeys.indexOf(key) === -1) {
+        output[key] = object[key];
+      }
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2['return']) {
+        _iterator2['return']();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+
+  return output;
 }

package.json

 {
   "name": "react-player",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia",
@@ -91,5 +91,4 @@ "main": "lib/ReactPlayer.js",
   "dependencies": {
-    "fetch-jsonp": "^1.0.2",
+    "deepmerge": "^1.5.1",
     "load-script": "^1.0.0",
-    "lodash.omit": "^4.5.0",
     "prop-types": "^15.5.6"
@@ -96,0 +95,0 @@ },

README.md

@@ -8,2 +8,3 @@ ReactPlayer
 [![devDependency Status](https://img.shields.io/david/dev/CookPete/react-player.svg)](https://david-dm.org/CookPete/react-player?type=dev)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/ckpt)
 
@@ -22,2 +23,4 @@ A react component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion.
 npm install react-player --save
+# or
+yarn add react-player
 ```
@@ -65,3 +68,3 @@
 cd react-player
-npm install
+npm install # or yarn
 npm start
@@ -84,3 +87,3 @@ open http://localhost:3000
 `loop` | Set to `true` or `false` to loop the media | `false`
-`controls` | Set to `true` or `false` to display native player controls<br />*Note: Vimeo player controls are not configurable and will always display* | `false`
+`controls` | Set to `true` or `false` to display native player controls<br />*Note: Vimeo, Twitch and Wistia player controls are not configurable and will always display* | `false`
 `volume` | Sets the volume of the appropriate player | `0.8`
@@ -91,5 +94,6 @@ `muted` | Mutes the player | `false`
 `height` | Sets the height of the player | `360`
-`style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element
+`style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}`
 `progressFrequency` | The time between `onProgress` callbacks, in milliseconds | `1000`
 `playsinline` | Applies the `playsinline` attribute where supported | `false`
+`config` | Override options for the various players, see [config prop](#config-prop)
 
@@ -105,3 +109,3 @@ #### Callback props
 `onPlay` | Called when media starts or resumes playing after pausing or buffering
-`onProgress` | Callback containing progress `played`, `loaded` (fraction), `playedSeconds` and `loadedSeconds` (seconds)<br />eg `{ played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }`
+`onProgress` | Callback containing `played` and `loaded` progress as a fraction, and `playedSeconds` and `loadedSeconds` in seconds<br />&nbsp; ◦ &nbsp;eg `{ played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }`
 `onDuration` | Callback containing duration of the media, in seconds
@@ -114,20 +118,46 @@ `onPause` | Called when media is paused
 
-#### Config props
+#### Config prop
 
-These props allow you to override the parameters for the various players:
+As of version `0.24`, there is a single `config` prop to override the settings for the various players. If you are migrating from an earlier version, you must move all the old config props inside `config`:
 
-Prop | Description
----- | -----------
-`soundcloudConfig` | Configuration object for the SoundCloud player.<br />Set `options` to override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params).<br />Set `legacy` to `true` to use the legacy player.<br />Set `clientId` to your own SoundCloud app [client ID](https://soundcloud.com/you/apps) if using the legacy player.
-`vimeoConfig` | Configuration object for the Vimeo player.<br />Set `iframeParams` to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters).<br />Set `preload` for [preloading](#preloading).
-`youtubeConfig` | Configuration object for the YouTube player.<br />Set `playerVars` to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5).<br />Set `preload` for [preloading](#preloading).
-`vidmeConfig` | Configuration object for the Vidme player.<br />Set `format` to use a certain quality of video, when available.<br />Possible values: `240p`, `480p`, `720p`, `1080p`, `dash`, `hls`
-`wistiaConfig` | Configuration object for the Wistia player.<br />Set `options` to override the [default player options](https://wistia.com/doc/embed-options#options_list)
-`dailymotionConfig` | Configuration object for the DailyMotion player.<br />Set `params` to override the [default player vars](https://developer.dailymotion.com/player#player-parameters).<br />Set `preload` for [preloading](#preloading).
-`fileConfig` | Configuration object for the file player.<br />Set `attributes` to apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes).<br />Set `forceAudio` to always render an `<audio>` element.<br />Set `forceHLS` to use [hls.js](https://github.com/video-dev/hls.js) for HLS streams.<br />Set `forceDASH` to always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams.
-`facebookConfig` | Configuration object for the Facebook player.<br />Set `appId` to your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id).
+```js
+<ReactPlayer
+  url={url}
+  config={{
+    youtube: {
+      playerVars: { showinfo: 1 }
+    },
+    facebook: {
+      appId: '12345'
+    }
+  }}
+/>
+```
 
+The old style [config props](https://github.com/CookPete/react-player/tree/v0.23.0#config-props) still work but will produce a console warning:
+
+```js
+<ReactPlayer
+  url={url}
+  youtubeConfig={{ playerVars: { showinfo: 1 } }}
+  facebookConfig={{ appId: '12345' }}
+/>
+```
+
+Settings for each player live under different keys:
+
+Key | Options
+--- | -------
+`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)<br />`preload`: Used for [preloading](#preloading)
+`facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)
+`soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)
+`vimeo` | `iframeParams`: Override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters)<br />`preload`: Used for [preloading](#preloading).
+`vidme` | `format`: Use a certain quality of video, when available<br />&nbsp; ◦ &nbsp;Possible values: `240p`, `480p`, `720p`, `1080p`, `dash`, `hls`
+`wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
+`dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)<br />`preload`: Used for [preloading](#preloading)
+`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams
+
 ##### Preloading
 
-Both `youtubeConfig`, `vimeoConfig`, `dailymotionConfig` props can take a `preload` value. Setting this to `true` will play a short, silent video in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab.
+When `preload` is set to `true` for players that support it, a short, silent video is played in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab.
 
@@ -160,3 +190,3 @@ #### Multiple Sources and Tracks
   url='foo.webm'
-  fileConfig={{
+  config={{ file: {
     tracks: [
@@ -167,3 +197,3 @@ {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
     ]
-  }}
+  }}}
 />
@@ -175,10 +205,19 @@ ```
 
-Use [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to call methods on the player. See [the demo app](src/demo/App.js) for an example of this.
+#### Static Methods
 
-Prop | Description
+Method | Description
 ---- | -----------
-`seekTo(amount)` | Seek to the given number of seconds, or fraction if `amount` is between `0` and `1`.
-`getCurrentTime()` | Returns the number of seconds that has been played.<br >Returns `null` if duration is unavailable.
-`getDuration()` | Returns the duration (in seconds) of the currently playing media.<br >Returns `null` if duration is unavailable.
+`ReactPlayer.canPlay(url)` | Determine if a URL can be played. This does *not* detect media that is unplayable due to privacy settings, streaming permissions, etc. In that case, the `onError` prop will be invoked after attemping to play. Any URL that does not match any patterns will fall back to a native HTML5 media player.
 
+#### Instance Methods
+
+Use [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to call instance methods on the player. See [the demo app](src/demo/App.js) for an example of this.
+
+Method | Description
+---- | -----------
+`seekTo(amount)` | Seek to the given number of seconds, or fraction if `amount` is between `0` and `1`
+`getCurrentTime()` | Returns the number of seconds that has been played<br />&nbsp; ◦ &nbsp;Returns `null` if duration is unavailable
+`getDuration()` | Returns the duration (in seconds) of the currently playing media<br />&nbsp; ◦ &nbsp;Returns `null` if duration is unavailable
+`getInternalPlayer()` | Returns the internal player of whatever is currently playing<br />&nbsp; ◦ &nbsp;eg the [YouTube player instance](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player), or the [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element when playing a video file
+
 ### Supported media
@@ -195,3 +234,3 @@
 * DailyMotion videos use the [DailyMotion Player API](https://developer.dailymotion.com/player)
-* [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
+* [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) 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
   * HLS streams are played using [hls.js](https://github.com/video-dev/hls.js)
@@ -206,3 +245,2 @@ * DASH streams are played using [dash.js](https://github.com/Dash-Industry-Forum/dash.js)
 
-* Anyone who has [contributed](https://github.com/CookPete/react-player/graphs/contributors)
-* [gaearon](https://github.com/gaearon) for his [react-transform-boilerplate](https://github.com/gaearon/react-transform-boilerplate), which this repo is roughly based on.
+Huge thanks to anyone who has [contributed](https://github.com/CookPete/react-player/graphs/contributors)

webpack.production.babel.js

@@ -6,2 +6,7 @@ import webpack from 'webpack'
 export const minifyPlugins = [
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: JSON.stringify('production')
+    }
+  }),
   new webpack.optimize.UglifyJsPlugin({
@@ -8,0 +13,0 @@ sourceMap: true,

No alert changes

Improved metrics

Total package byte prevSize

3083857

increased by215.3%

Dependency count

4

decreased by-20%

Number of package files

35

increased by16.67%

Lines of code

3589

increased by33.92%

Number of lines in readme file

235

increased by19.29%

Dependency changes

• + Addeddeepmerge@^1.5.1

• + Addeddeepmerge@1.5.2(transitive)

• - Removedfetch-jsonp@^1.0.2

• - Removedlodash.omit@^4.5.0

• - Removedfetch-jsonp@1.3.0(transitive)

• - Removedlodash.omit@4.5.0(transitive)