react-player - npm Package Compare versions

Comparing version 0.15.0 to 0.16.0

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log
 
+#### [v0.16.0](https://github.com/CookPete/react-player/compare/v0.15.0...v0.16.0)
+> 27 April 2017
+
+* Apply all non-valid props to the wrapper element [`#183`](https://github.com/CookPete/react-player/pull/183)
+* Add Facebook player [`#109`](https://github.com/CookPete/react-player/issues/109)
+* Apply all non-valid props to the wrapper element [`#167`](https://github.com/CookPete/react-player/issues/167)
+
+
 #### [v0.15.0](https://github.com/CookPete/react-player/compare/v0.14.3...v0.15.0)
@@ -9,0 +17,0 @@ > 14 April 2017

lib/players/Base.js

@@ -65,2 +65,3 @@ 'use strict';
       _this.isReady = true;
+      _this.loadingSDK = false;
       onReady();
@@ -67,0 +68,0 @@ if (playing || _this.preloading) {

lib/players/FilePlayer.js

@@ -117,2 +117,5 @@ 'use strict';
     value: function seekTo(fraction) {
+      if (fraction === 1) {
+        this.pause();
+      }
       _get(FilePlayer.prototype.__proto__ || Object.getPrototypeOf(FilePlayer.prototype), 'seekTo', this).call(this, fraction);
@@ -119,0 +122,0 @@ this.player.currentTime = this.getDuration() * fraction;

lib/players/Vimeo.js

@@ -17,4 +17,8 @@ 'use strict';
 
-var _queryString = require('query-string');
+var _reactDom = require('react-dom');
 
+var _loadScript = require('load-script');
+
+var _loadScript2 = _interopRequireDefault(_loadScript);
+
 var _Base2 = require('./Base');
@@ -32,16 +36,18 @@
 
-var IFRAME_SRC = 'https://player.vimeo.com/video/';
+var SDK_URL = 'https://player.vimeo.com/api/player.js';
+var SDK_GLOBAL = 'Vimeo';
+var PLAYER_ID = 'vimeo-player';
 var MATCH_URL = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
-var MATCH_MESSAGE_ORIGIN = /^https?:\/\/player.vimeo.com/;
 var BLANK_VIDEO_URL = 'https://vimeo.com/127250231';
-var DEFAULT_IFRAME_PARAMS = {
-  api: 1,
-  autoplay: 0,
-  badge: 0,
-  byline: 0,
-  fullscreen: 1,
-  portrait: 0,
-  title: 0
+
+var DEFAULT_OPTIONS = {
+  autopause: false,
+  autoplay: false,
+  byline: false,
+  portrait: false,
+  title: false
 };
 
+var playerIdCount = 0;
+
 var Vimeo = function (_Base) {
@@ -61,37 +67,3 @@ _inherits(Vimeo, _Base);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Vimeo.__proto__ || Object.getPrototypeOf(Vimeo)).call.apply(_ref, [this].concat(args))), _this), _this.onMessage = function (e) {
-      if (!MATCH_MESSAGE_ORIGIN.test(e.origin)) return;
-      _this.origin = _this.origin || e.origin;
-      var data = JSON.parse(e.data);
-      if (data.event === 'ready') {
-        _this.postMessage('getDuration');
-        _this.postMessage('addEventListener', 'playProgress');
-        _this.postMessage('addEventListener', 'loadProgress');
-        _this.postMessage('addEventListener', 'play');
-        _this.postMessage('addEventListener', 'pause');
-        _this.postMessage('addEventListener', 'finish');
-      }
-      if (data.event === 'playProgress') _this.fractionPlayed = data.data.percent;
-      if (data.event === 'loadProgress') _this.fractionLoaded = data.data.percent;
-      if (data.event === 'play') _this.onPlay();
-      if (data.event === 'pause') _this.props.onPause();
-      if (data.event === 'finish') _this.onEnded();
-      if (data.method === 'getDuration') {
-        _this.duration = data.value; // Store for use later
-        _this.onReady();
-      }
-    }, _this.onEnded = function () {
-      var _this$props = _this.props,
-          loop = _this$props.loop,
-          onEnded = _this$props.onEnded;
-
-      if (loop) {
-        _this.seekTo(0);
-      }
-      onEnded();
-    }, _this.postMessage = function (method, value) {
-      if (!_this.origin) return;
-      var data = JSON.stringify({ method: method, value: value });
-      return _this.iframe.contentWindow && _this.iframe.contentWindow.postMessage(data, _this.origin);
-    }, _this.ref = function (iframe) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Vimeo.__proto__ || Object.getPrototypeOf(Vimeo)).call.apply(_ref, [this].concat(args))), _this), _this.playerId = PLAYER_ID + '-' + playerIdCount++, _this.ref = function (iframe) {
       _this.iframe = iframe;
@@ -108,4 +80,2 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
-      window.addEventListener('message', this.onMessage, false);
-
       if (!url && vimeoConfig.preload) {
@@ -115,21 +85,63 @@ this.preloading = true;
       }
-
       _get(Vimeo.prototype.__proto__ || Object.getPrototypeOf(Vimeo.prototype), 'componentDidMount', this).call(this);
     }
   }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      window.removeEventListener('message', this.onMessage, false);
-      _get(Vimeo.prototype.__proto__ || Object.getPrototypeOf(Vimeo.prototype), 'componentWillUnmount', this).call(this);
+    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: 'getIframeParams',
-    value: function getIframeParams() {
-      return _extends({}, DEFAULT_IFRAME_PARAMS, this.props.vimeoConfig.iframeParams);
-    }
-  }, {
     key: 'load',
     value: function load(url) {
+      var _this2 = this;
+
       var id = url.match(MATCH_URL)[3];
-      this.iframe.src = IFRAME_SRC + id + '?' + (0, _queryString.stringify)(this.getIframeParams());
+      this.duration = null;
+      if (this.isReady) {
+        this.player.loadVideo(id);
+        return;
+      }
+      if (this.loadingSDK) {
+        this.loadOnReady = url;
+        return;
+      }
+      this.loadingSDK = true;
+      this.getSDK().then(function (Vimeo) {
+        _this2.player = new Vimeo.Player(_this2.playerId, _extends({}, DEFAULT_OPTIONS, _this2.props.vimeoConfig.playerOptions, {
+          id: id,
+          loop: _this2.props.loop
+        }));
+        _this2.player.on('loaded', function () {
+          _this2.onReady();
+          var iframe = (0, _reactDom.findDOMNode)(_this2).querySelector('iframe');
+          iframe.style.width = '100%';
+          iframe.style.height = '100%';
+        });
+        _this2.player.on('play', function (_ref2) {
+          var duration = _ref2.duration;
+
+          _this2.duration = duration;
+          _this2.onPlay();
+        });
+        _this2.player.on('pause', _this2.props.onPause);
+        _this2.player.on('ended', _this2.props.onEnded);
+        _this2.player.on('error', _this2.props.onError);
+        _this2.player.on('timeupdate', function (_ref3) {
+          var percent = _ref3.percent;
+
+          _this2.fractionPlayed = percent;
+        });
+        _this2.player.on('progress', function (_ref4) {
+          var percent = _ref4.percent;
+
+          _this2.fractionLoaded = percent;
+        });
+      }, this.props.onError);
     }
@@ -139,3 +151,4 @@ }, {
     value: function play() {
-      this.postMessage('play');
+      if (!this.isReady) return;
+      this.player.play();
     }
@@ -145,3 +158,4 @@ }, {
     value: function pause() {
-      this.postMessage('pause');
+      if (!this.isReady) return;
+      this.player.pause();
     }
@@ -151,3 +165,4 @@ }, {
     value: function stop() {
-      this.iframe.src = '';
+      if (!this.isReady) return;
+      this.player.unload();
     }
@@ -158,3 +173,4 @@ }, {
       _get(Vimeo.prototype.__proto__ || Object.getPrototypeOf(Vimeo.prototype), 'seekTo', this).call(this, fraction);
-      this.postMessage('seekTo', this.duration * fraction);
+      if (!this.isReady || !this.player.setCurrentTime) return;
+      this.player.setCurrentTime(this.duration * fraction);
     }
@@ -164,3 +180,3 @@ }, {
     value: function setVolume(fraction) {
-      this.postMessage('setVolume', fraction);
+      this.player.setVolume(fraction);
     }
@@ -170,3 +186,3 @@ }, {
     value: function setPlaybackRate(rate) {
-      this.postMessage('setPlaybackRate', rate);
+      return null;
     }
@@ -191,16 +207,7 @@ }, {
     value: function render() {
-      var _getIframeParams = this.getIframeParams(),
-          fullscreen = _getIframeParams.fullscreen;
-
       var style = {
-        display: this.props.url ? 'block' : 'none',
-        width: '100%',
-        height: '100%'
+        height: '100%',
+        display: this.props.url ? 'block' : 'none'
       };
-      return _react2['default'].createElement('iframe', {
-        ref: this.ref,
-        frameBorder: '0',
-        style: style,
-        allowFullScreen: fullscreen
-      });
+      return _react2['default'].createElement('div', { style: style, id: this.playerId });
     }
@@ -207,0 +214,0 @@ }], [{

lib/players/Wistia.js

@@ -60,3 +60,2 @@ 'use strict';
           onReady: function onReady(player) {
-            _this2.loadingSDK = false;
             _this2.player = player;
@@ -63,0 +62,0 @@ _this2.player.bind('start', onStart);

lib/players/YouTube.js

@@ -159,6 +159,3 @@ 'use strict';
           events: {
-            onReady: function onReady() {
-              _this2.loadingSDK = false;
-              _this2.onReady();
-            },
+            onReady: _this2.onReady,
             onStateChange: _this2.onStateChange,
@@ -188,2 +185,3 @@ onError: function onError(event) {
       if (!this.isReady || !this.player.stopVideo) return;
+      if (!document.body.contains(this.player.getIframe())) return;
       this.player.stopVideo();
@@ -190,0 +188,0 @@ }

lib/props.js

@@ -30,4 +30,2 @@ 'use strict';
   height: oneOfType([string, number]),
-  hidden: bool,
-  className: string,
   style: object,
@@ -44,2 +42,9 @@ progressFrequency: number,
   }),
+  facebookConfig: shape({
+    appId: string
+  }),
+  dailymotionConfig: shape({
+    params: object,
+    preload: bool
+  }),
   vimeoConfig: shape({
@@ -85,2 +90,9 @@ iframeParams: object,
   },
+  facebookConfig: {
+    appId: '1309697205772819'
+  },
+  dailymotionConfig: {
+    params: {},
+    preload: false
+  },
   vimeoConfig: {
@@ -87,0 +99,0 @@ iframeParams: {},

lib/ReactPlayer.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _lodash = require('lodash.omit');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _props3 = require('./props');
@@ -30,2 +34,6 @@
 
+var _Facebook = require('./players/Facebook');
+
+var _Facebook2 = _interopRequireDefault(_Facebook);
+
 var _FilePlayer = require('./players/FilePlayer');
@@ -47,2 +55,6 @@
 
+var _DailyMotion = require('./players/DailyMotion');
+
+var _DailyMotion2 = _interopRequireDefault(_DailyMotion);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -119,16 +131,14 @@
           youtubeConfig = _this$props.youtubeConfig,
-          soundcloudConfig = _this$props.soundcloudConfig,
           vimeoConfig = _this$props.vimeoConfig,
-          vidmeConfig = _this$props.vidmeConfig,
-          fileConfig = _this$props.fileConfig,
-          activeProps = _objectWithoutProperties(_this$props, ['youtubeConfig', 'soundcloudConfig', 'vimeoConfig', 'vidmeConfig', 'fileConfig']);
+          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({
         key: Player.displayName,
         youtubeConfig: youtubeConfig,
-        soundcloudConfig: soundcloudConfig,
         vimeoConfig: vimeoConfig,
-        vidmeConfig: vidmeConfig,
-        fileConfig: fileConfig
+        dailymotionConfig: dailymotionConfig
       }, props));
@@ -160,3 +170,4 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
           youtubeConfig = _props.youtubeConfig,
-          vimeoConfig = _props.vimeoConfig;
+          vimeoConfig = _props.vimeoConfig,
+          dailymotionConfig = _props.dailymotionConfig;
 
@@ -170,2 +181,6 @@ var players = [];
         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)) {
@@ -188,2 +203,5 @@ players.push(_Streamable2['default']);
       }
+      if (!_DailyMotion2['default'].canPlay(url) && dailymotionConfig.preload) {
+        players.push(_DailyMotion2['default']);
+      }
       return players.map(this.renderPlayer);
@@ -197,10 +215,9 @@ }
           width = _props2.width,
-          height = _props2.height,
-          className = _props2.className,
-          hidden = _props2.hidden;
+          height = _props2.height;
 
+      var otherProps = (0, _lodash2['default'])(this.props, Object.keys(_props3.propTypes));
       var players = this.renderPlayers();
       return _react2['default'].createElement(
         'div',
-        { style: _extends({}, style, { width: width, height: height }), className: className, hidden: hidden },
+        _extends({ style: _extends({}, style, { width: width, height: height }) }, otherProps),
         players
@@ -207,0 +224,0 @@ );

package.json

 {
   "name": "react-player",
-  "version": "0.15.0",
-  "description": "A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable, Vidme, Vimeo and Wistia",
+  "version": "0.16.0",
+  "description": "A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia",
   "main": "lib/ReactPlayer.js",
@@ -53,3 +53,3 @@ "typings": "index.d.ts",
     "babel-eslint": "^7.0.0",
-    "babel-loader": "^6.2.5",
+    "babel-loader": "^7.0.0",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -98,4 +98,4 @@ "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
     "load-script": "^1.0.0",
-    "prop-types": "^15.5.6",
-    "query-string": "^4.2.3"
+    "lodash.omit": "^4.5.0",
+    "prop-types": "^15.5.6"
   },
@@ -102,0 +102,0 @@ "standard": {

README.md

@@ -9,3 +9,3 @@ ReactPlayer
 
-A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable, Vidme, Vimeo and Wistia. 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, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion. Used by [rplayr](http://rplayr.com), an app to generate playlists from Reddit URLs.
 
@@ -87,4 +87,2 @@ 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.
 `height` | Sets the height of the player | `360`
-`hidden` | Set to `true` to hide the player | `false`
-`className` | Pass in a `className` to set on the root element
 `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element
@@ -120,7 +118,9 @@ `progressFrequency` | The time between `onProgress` callbacks, in milliseconds | `1000`
 `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`
+`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).
+`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).
 
 ##### Preloading
 
-Both `youtubeConfig` and `vimeoConfig` 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.
+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.
 
@@ -140,2 +140,3 @@ ### Methods
 * YouTube videos use the [YouTube iFrame Player API](https://developers.google.com/youtube/iframe_api_reference)
+* Facebook videos use the [Facebook Embedded Video Player API](https://developers.facebook.com/docs/plugins/embedded-video-player/api)
 * Soundcloud tracks are [resolved](https://developers.soundcloud.com/docs/api/reference#resolve) and played in an [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) element using the track’s `stream_url`
@@ -146,2 +147,3 @@ * Streamable videos are [resolved](https://streamable.com/documentation#retrieve-video) and played in a [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element using the track’s `mp4` path
 * Wistia videos use the [Wistia Player API](https://wistia.com/doc/player-api)
+* 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
@@ -148,0 +150,0 @@

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

813617

increased by25.5%

Lines of code

1923

increased by28.03%

Number of lines in readme file

154

increased by1.32%

Dependency changes

• + Addedlodash.omit@^4.5.0

• + Addedlodash.omit@4.5.0(transitive)

• - Removedquery-string@^4.2.3

• - Removedquery-string@4.3.4(transitive)

• - Removedstrict-uri-encode@1.1.0(transitive)