react-player - npm Package Compare versions

Comparing version 0.17.2 to 0.18.0

CHANGELOG.md

@@ -7,2 +7,9 @@ # Change Log
 
+#### [v0.18.0](https://github.com/CookPete/react-player/compare/v0.17.2...v0.18.0)
+> 9 May 2017
+
+* Add support for HLS and DASH streams [`c28c7ff`](https://github.com/CookPete/react-player/commit/c28c7ff637298e6d9ecee588741980b9e0481bfc)
+* Bump packages [`6f8da1f`](https://github.com/CookPete/react-player/commit/6f8da1f1f6f643953d0e5c97635addf320c80da7)
+
+
 #### [v0.17.2](https://github.com/CookPete/react-player/compare/v0.17.1...v0.17.2)
@@ -9,0 +16,0 @@ > 7 May 2017

lib/players/FilePlayer.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _loadScript = require('load-script');
+
+var _loadScript2 = _interopRequireDefault(_loadScript);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -31,2 +35,8 @@
 var AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
+var HLS_EXTENSIONS = /\.(m3u8)($|\?)/i;
+var HLS_SDK_URL = 'https://cdn.jsdelivr.net/hls.js/latest/hls.min.js';
+var HLS_GLOBAL = 'Hls';
+var DASH_EXTENSIONS = /\.(mpd)($|\?)/i;
+var DASH_SDK_URL = 'https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js';
+var DASH_GLOBAL = 'dashjs';
 
@@ -55,7 +65,2 @@ var FilePlayer = function (_Base) {
       return _react2['default'].createElement('source', { key: src, src: src, type: type });
-    }, _this.renderSources = function (url) {
-      if (url instanceof Array === false) {
-        return null;
-      }
-      return url.map(_this.renderSource);
     }, _this.ref = function (player) {
@@ -108,5 +113,29 @@ _this.player = player;
   }, {
+    key: 'shouldUseHLS',
+    value: function shouldUseHLS(url) {
+      return HLS_EXTENSIONS.test(url) || this.props.fileConfig.forceHLS;
+    }
+  }, {
+    key: 'shouldUseDASH',
+    value: function shouldUseDASH(url) {
+      return DASH_EXTENSIONS.test(url) || this.props.fileConfig.forceDASH;
+    }
+  }, {
     key: 'load',
-    value: function load() {
-      // Setting the src is handled by render
+    value: function load(url) {
+      var _this3 = this;
+
+      if (this.shouldUseHLS(url)) {
+        loadSDK(HLS_SDK_URL, HLS_GLOBAL).then(function (Hls) {
+          var hls = new Hls();
+          hls.loadSource(url);
+          hls.attachMedia(_this3.player);
+        });
+      }
+      if (this.shouldUseDASH(url)) {
+        loadSDK(DASH_SDK_URL, DASH_GLOBAL).then(function (dashjs) {
+          var player = dashjs.MediaPlayer().create();
+          player.initialize(_this3.player, url, true);
+        });
+      }
     }
@@ -174,3 +203,7 @@ }, {
 
-      var Media = AUDIO_EXTENSIONS.test(url) || fileConfig.forceAudio ? 'audio' : 'video';
+      var useAudio = AUDIO_EXTENSIONS.test(url) || fileConfig.forceAudio;
+      var useHLS = this.shouldUseHLS(url);
+      var useDASH = this.shouldUseDASH(url);
+      var Element = useAudio ? 'audio' : 'video';
+      var src = url instanceof Array || useHLS || useDASH ? undefined : url;
       var style = {
@@ -182,6 +215,6 @@ width: '100%',
       return _react2['default'].createElement(
-        Media,
+        Element,
         _extends({
           ref: this.ref,
-          src: url instanceof Array ? undefined : url,
+          src: src,
           style: style,
@@ -192,3 +225,3 @@ preload: 'auto',
         }, fileConfig.attributes),
-        this.renderSources(url)
+        url instanceof Array && url.map(this.renderSource)
       );
@@ -208,2 +241,15 @@ }
 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]);
+    });
+  });
+}
 module.exports = exports['default'];

lib/props.js

@@ -58,3 +58,5 @@ 'use strict';
     attributes: object,
-    forceAudio: bool
+    forceAudio: bool,
+    forceHLS: bool,
+    forceDASH: bool
   }),
@@ -107,3 +109,5 @@ onReady: func,
     attributes: {},
-    forceAudio: false
+    forceAudio: false,
+    forceHLS: false,
+    forceDASH: false
   },
@@ -110,0 +114,0 @@ onReady: function onReady() {},

package.json

 {
   "name": "react-player",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia",
@@ -80,3 +80,3 @@ "main": "lib/ReactPlayer.js",
     "node-sass": "^4.1.1",
-    "normalize.css": "^6.0.0",
+    "normalize.css": "^7.0.0",
     "react": "^15.3.2",
@@ -89,3 +89,3 @@ "react-dom": "^15.3.2",
     "standard": "^10.0.0",
-    "style-loader": "^0.16.1",
+    "style-loader": "^0.17.0",
     "webpack": "^2.2.1",
@@ -92,0 +92,0 @@ "webpack-dev-middleware": "^1.8.3",

README.md

@@ -117,3 +117,3 @@ ReactPlayer
 `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.
+`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).
@@ -120,0 +120,0 @@

No alert changes

Improved metrics

Total package byte prevSize

952916

increased by0.3%

Lines of code

6046

increased by0.75%

No dependency changes