react-player - npm Package Compare versions

Comparing version 1.11.0 to 1.11.1

CHANGELOG.md

@@ -7,2 +7,18 @@ ### Changelog
 
+#### [v1.11.1](https://github.com/CookPete/react-player/compare/v1.11.0...v1.11.1)
+
+> 13 June 2019
+
+- Do not use vimeo API to play vimeo hosted video files. [`#597`](https://github.com/CookPete/react-player/pull/597)
+- Catches error on Vimeo play() [`#645`](https://github.com/CookPete/react-player/pull/645)
+- Update Meteor section in readme [`#647`](https://github.com/CookPete/react-player/pull/647)
+- [d.ts] Fix typing of arguments of onError handler [`#655`](https://github.com/CookPete/react-player/pull/655)
+- Fix twitch permanent loading state when stream is offline [`#657`](https://github.com/CookPete/react-player/pull/657)
+- Fix an issue with setting state in the Preview component after being unmounted. [`#658`](https://github.com/CookPete/react-player/pull/658)
+- Prevent double inline styles being applied [`#609`](https://github.com/CookPete/react-player/issues/609)
+- Fix onProgress for infinite duration streams [`#503`](https://github.com/CookPete/react-player/issues/503)
+- Fix light mode poster not updating [`#646`](https://github.com/CookPete/react-player/issues/646)
+- Fix youtube looping [`#530`](https://github.com/CookPete/react-player/issues/530) [`#639`](https://github.com/CookPete/react-player/issues/639) [`#662`](https://github.com/CookPete/react-player/pull/662)
+- Fix multiple onError params not being passed through [`#627`](https://github.com/CookPete/react-player/issues/627)
+
 #### [v1.11.0](https://github.com/CookPete/react-player/compare/v1.10.0...v1.11.0)
@@ -9,0 +25,0 @@

index.d.ts

@@ -105,3 +105,3 @@ import * as React from 'react';
   onDisablePIP?(): void;
-  onError?(error: any): void;
+  onError?(error: any, data?: any, hlsInstance?: any, hlsGlobal?: any): void;
   onDuration?(duration: number): void;
@@ -108,0 +108,0 @@ onSeek?(seconds: number): void;

lib/Player.js

@@ -15,3 +15,3 @@ 'use strict';
 
-var _props2 = require('./props');
+var _props6 = require('./props');
 
@@ -44,111 +44,3 @@ var _utils = require('./utils');
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Player.__proto__ || Object.getPrototypeOf(Player)).call.apply(_ref, [this].concat(args))), _this), _this.mounted = false, _this.isReady = false, _this.isPlaying = false, _this.isLoading = true, _this.loadOnReady = null, _this.startOnPlay = true, _this.seekOnPlay = null, _this.onDurationCalled = false, _this.getInternalPlayer = function (key) {
-      if (!_this.player) return null;
-      return _this.player[key];
-    }, _this.progress = function () {
-      if (_this.props.url && _this.player && _this.isReady) {
-        var playedSeconds = _this.getCurrentTime() || 0;
-        var loadedSeconds = _this.getSecondsLoaded();
-        var duration = _this.getDuration();
-        if (duration) {
-          var progress = {
-            playedSeconds: playedSeconds,
-            played: playedSeconds / duration
-          };
-          if (loadedSeconds !== null) {
-            progress.loadedSeconds = loadedSeconds;
-            progress.loaded = loadedSeconds / duration;
-          }
-          // Only call onProgress if values have changed
-          if (progress.played !== _this.prevPlayed || progress.loaded !== _this.prevLoaded) {
-            _this.props.onProgress(progress);
-          }
-          _this.prevPlayed = progress.played;
-          _this.prevLoaded = progress.loaded;
-        }
-      }
-      _this.progressTimeout = setTimeout(_this.progress, _this.props.progressFrequency || _this.props.progressInterval);
-    }, _this.onReady = function () {
-      if (!_this.mounted) return;
-      _this.isReady = true;
-      _this.isLoading = false;
-      var _this$props = _this.props,
-          onReady = _this$props.onReady,
-          playing = _this$props.playing,
-          volume = _this$props.volume,
-          muted = _this$props.muted;
-
-      onReady();
-      if (!muted && volume !== null) {
-        _this.player.setVolume(volume);
-      }
-      if (_this.loadOnReady) {
-        _this.player.load(_this.loadOnReady, true);
-        _this.loadOnReady = null;
-      } else if (playing) {
-        _this.player.play();
-      }
-      _this.onDurationCheck();
-    }, _this.onPlay = function () {
-      _this.isPlaying = true;
-      _this.isLoading = false;
-      var _this$props2 = _this.props,
-          onStart = _this$props2.onStart,
-          onPlay = _this$props2.onPlay,
-          playbackRate = _this$props2.playbackRate;
-
-      if (_this.startOnPlay) {
-        if (_this.player.setPlaybackRate) {
-          _this.player.setPlaybackRate(playbackRate);
-        }
-        onStart();
-        _this.startOnPlay = false;
-      }
-      onPlay();
-      if (_this.seekOnPlay) {
-        _this.seekTo(_this.seekOnPlay);
-        _this.seekOnPlay = null;
-      }
-      _this.onDurationCheck();
-    }, _this.onPause = function (e) {
-      _this.isPlaying = false;
-      if (!_this.isLoading) {
-        _this.props.onPause(e);
-      }
-    }, _this.onEnded = function () {
-      var _this$props3 = _this.props,
-          activePlayer = _this$props3.activePlayer,
-          loop = _this$props3.loop,
-          onEnded = _this$props3.onEnded;
-
-      if (activePlayer.loopOnEnded && loop) {
-        _this.seekTo(0);
-      }
-      if (!loop) {
-        _this.isPlaying = false;
-        onEnded();
-      }
-    }, _this.onError = function (e) {
-      _this.isLoading = false;
-      _this.props.onError(e);
-    }, _this.onDurationCheck = function () {
-      clearTimeout(_this.durationCheckTimeout);
-      var duration = _this.getDuration();
-      if (duration) {
-        if (!_this.onDurationCalled) {
-          _this.props.onDuration(duration);
-          _this.onDurationCalled = true;
-        }
-      } else {
-        _this.durationCheckTimeout = setTimeout(_this.onDurationCheck, 100);
-      }
-    }, _this.onLoaded = function () {
-      // Sometimes we know loading has stopped but onReady/onPlay are never called
-      // so this provides a way for players to avoid getting stuck
-      _this.isLoading = false;
-    }, _this.ref = function (player) {
-      if (player) {
-        _this.player = player;
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Player.__proto__ || Object.getPrototypeOf(Player)).call.apply(_ref, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), _possibleConstructorReturn(_this, _ret);
   } // Track playing state internally to prevent bugs
@@ -305,4 +197,148 @@ // Use isLoading to prevent onPause when switching URL
 Player.displayName = 'Player';
-Player.propTypes = _props2.propTypes;
-Player.defaultProps = _props2.defaultProps;
+Player.propTypes = _props6.propTypes;
+Player.defaultProps = _props6.defaultProps;
+
+var _initialiseProps = function _initialiseProps() {
+  var _this4 = this;
+
+  this.mounted = false;
+  this.isReady = false;
+  this.isPlaying = false;
+  this.isLoading = true;
+  this.loadOnReady = null;
+  this.startOnPlay = true;
+  this.seekOnPlay = null;
+  this.onDurationCalled = false;
+
+  this.getInternalPlayer = function (key) {
+    if (!_this4.player) return null;
+    return _this4.player[key];
+  };
+
+  this.progress = function () {
+    if (_this4.props.url && _this4.player && _this4.isReady) {
+      var playedSeconds = _this4.getCurrentTime() || 0;
+      var loadedSeconds = _this4.getSecondsLoaded();
+      var duration = _this4.getDuration();
+      if (duration) {
+        var progress = {
+          playedSeconds: playedSeconds,
+          played: playedSeconds / duration
+        };
+        if (loadedSeconds !== null) {
+          progress.loadedSeconds = loadedSeconds;
+          progress.loaded = loadedSeconds / duration;
+        }
+        // Only call onProgress if values have changed
+        if (progress.playedSeconds !== _this4.prevPlayed || progress.loadedSeconds !== _this4.prevLoaded) {
+          _this4.props.onProgress(progress);
+        }
+        _this4.prevPlayed = progress.playedSeconds;
+        _this4.prevLoaded = progress.loadedSeconds;
+      }
+    }
+    _this4.progressTimeout = setTimeout(_this4.progress, _this4.props.progressFrequency || _this4.props.progressInterval);
+  };
+
+  this.onReady = function () {
+    if (!_this4.mounted) return;
+    _this4.isReady = true;
+    _this4.isLoading = false;
+    var _props2 = _this4.props,
+        onReady = _props2.onReady,
+        playing = _props2.playing,
+        volume = _props2.volume,
+        muted = _props2.muted;
+
+    onReady();
+    if (!muted && volume !== null) {
+      _this4.player.setVolume(volume);
+    }
+    if (_this4.loadOnReady) {
+      _this4.player.load(_this4.loadOnReady, true);
+      _this4.loadOnReady = null;
+    } else if (playing) {
+      _this4.player.play();
+    }
+    _this4.onDurationCheck();
+  };
+
+  this.onPlay = function () {
+    _this4.isPlaying = true;
+    _this4.isLoading = false;
+    var _props3 = _this4.props,
+        onStart = _props3.onStart,
+        onPlay = _props3.onPlay,
+        playbackRate = _props3.playbackRate;
+
+    if (_this4.startOnPlay) {
+      if (_this4.player.setPlaybackRate) {
+        _this4.player.setPlaybackRate(playbackRate);
+      }
+      onStart();
+      _this4.startOnPlay = false;
+    }
+    onPlay();
+    if (_this4.seekOnPlay) {
+      _this4.seekTo(_this4.seekOnPlay);
+      _this4.seekOnPlay = null;
+    }
+    _this4.onDurationCheck();
+  };
+
+  this.onPause = function (e) {
+    _this4.isPlaying = false;
+    if (!_this4.isLoading) {
+      _this4.props.onPause(e);
+    }
+  };
+
+  this.onEnded = function () {
+    var _props4 = _this4.props,
+        activePlayer = _props4.activePlayer,
+        loop = _props4.loop,
+        onEnded = _props4.onEnded;
+
+    if (activePlayer.loopOnEnded && loop) {
+      _this4.seekTo(0);
+    }
+    if (!loop) {
+      _this4.isPlaying = false;
+      onEnded();
+    }
+  };
+
+  this.onError = function () {
+    var _props5;
+
+    _this4.isLoading = false;
+    (_props5 = _this4.props).onError.apply(_props5, arguments);
+  };
+
+  this.onDurationCheck = function () {
+    clearTimeout(_this4.durationCheckTimeout);
+    var duration = _this4.getDuration();
+    if (duration) {
+      if (!_this4.onDurationCalled) {
+        _this4.props.onDuration(duration);
+        _this4.onDurationCalled = true;
+      }
+    } else {
+      _this4.durationCheckTimeout = setTimeout(_this4.onDurationCheck, 100);
+    }
+  };
+
+  this.onLoaded = function () {
+    // Sometimes we know loading has stopped but onReady/onPlay are never called
+    // so this provides a way for players to avoid getting stuck
+    _this4.isLoading = false;
+  };
+
+  this.ref = function (player) {
+    if (player) {
+      _this4.player = player;
+    }
+  };
+};
+
 exports['default'] = Player;

lib/players/DailyMotion.js

@@ -161,7 +161,7 @@ 'use strict';
     value: function render() {
-      var style = _extends({
+      var style = {
         width: '100%',
         height: '100%',
         backgroundColor: 'black'
-      }, this.props.style);
+      };
       return _react2['default'].createElement(
@@ -168,0 +168,0 @@ 'div',

lib/players/SoundCloud.js

@@ -141,6 +141,6 @@ 'use strict';
     value: function render() {
-      var style = _extends({
+      var style = {
         width: '100%',
         height: '100%'
-      }, this.props.style);
+      };
       return _react2['default'].createElement('iframe', {
@@ -147,0 +147,0 @@ ref: this.ref,

lib/players/Twitch.js

@@ -91,3 +91,5 @@ 'use strict';
             PAUSE = _Twitch$Player.PAUSE,
-            ENDED = _Twitch$Player.ENDED;
+            ENDED = _Twitch$Player.ENDED,
+            ONLINE = _Twitch$Player.ONLINE,
+            OFFLINE = _Twitch$Player.OFFLINE;
 
@@ -98,2 +100,6 @@ _this2.player.addEventListener(READY, _this2.props.onReady);
         _this2.player.addEventListener(ENDED, _this2.props.onEnded);
+
+        // Prevent weird isLoading behaviour when streams are offline
+        _this2.player.addEventListener(ONLINE, _this2.props.onLoaded);
+        _this2.player.addEventListener(OFFLINE, _this2.props.onLoaded);
       }, onError);
@@ -100,0 +106,0 @@ }

lib/players/Vimeo.js

@@ -33,3 +33,3 @@ 'use strict';
 var MATCH_URL = /vimeo\.com\/.+/;
-var MATCH_FILE_URL = /vimeo\.com\/external\/.+\.mp4/;
+var MATCH_FILE_URL = /vimeo\.com\/external\/[0-9]+\..+/;
 
@@ -119,3 +119,6 @@ var Vimeo = exports.Vimeo = function (_Component) {
     value: function play() {
-      this.callPlayer('play');
+      var promise = this.callPlayer('play');
+      if (promise) {
+        promise['catch'](this.props.onError);
+      }
     }
@@ -165,3 +168,3 @@ }, {
     value: function render() {
-      var style = _extends({
+      var style = {
         width: '100%',
@@ -171,3 +174,3 @@ height: '100%',
         backgroundColor: 'black'
-      }, this.props.style);
+      };
       return _react2['default'].createElement('div', {
@@ -174,0 +177,0 @@ key: this.props.url,

lib/players/YouTube.js

@@ -154,3 +154,8 @@ 'use strict';
           events: {
-            onReady: _this2.props.onReady,
+            onReady: function onReady() {
+              if (loop) {
+                _this2.player.setLoop(true); // Enable playlist looping
+              }
+              _this2.props.onReady();
+            },
             onStateChange: _this2.onStateChange,
@@ -162,5 +167,2 @@ onError: function onError(event) {
         }, embedOptions));
-        if (loop) {
-          _this2.player.setLoop(true); // Enable playlist looping
-        }
       }, _onError);
@@ -225,6 +227,6 @@ }
     value: function render() {
-      var style = _extends({
+      var style = {
         width: '100%',
         height: '100%'
-      }, this.props.style);
+      };
       return _react2['default'].createElement(
@@ -231,0 +233,0 @@ 'div',

lib/Preview.js

@@ -39,3 +39,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Preview.__proto__ || Object.getPrototypeOf(Preview)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Preview.__proto__ || Object.getPrototypeOf(Preview)).call.apply(_ref, [this].concat(args))), _this), _this.mounted = false, _this.state = {
       image: null
@@ -48,2 +48,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
     value: function componentDidMount() {
+      this.mounted = true;
       this.fetchImage(this.props);
@@ -54,3 +55,7 @@ }
     value: function componentWillReceiveProps(nextProps) {
-      if (this.props.url !== nextProps.url) {
+      var _props = this.props,
+          url = _props.url,
+          light = _props.light;
+
+      if (url !== nextProps.url || light !== nextProps.light) {
         this.fetchImage(nextProps);
@@ -60,2 +65,7 @@ }
   }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.mounted = false;
+    }
+  }, {
     key: 'fetchImage',
@@ -76,3 +86,3 @@ value: function fetchImage(_ref2) {
       }).then(function (data) {
-        if (data.thumbnail_url) {
+        if (data.thumbnail_url && _this2.mounted) {
           var image = data.thumbnail_url.replace('height=100', 'height=480');
@@ -79,0 +89,0 @@ _this2.setState({ image: image });

package.json

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

README.md

@@ -50,3 +50,3 @@ <h1 align='center'>
 
-For platforms like [Meteor](https://www.meteor.com) without direct use of `npm` modules, a minified version of `ReactPlayer` is located in `dist` after installing. To generate this file yourself, checkout the repo and run `npm run build:dist`.
+For platforms without direct use of `npm` modules, a minified version of `ReactPlayer` is located in `dist` after installing. To generate this file yourself, checkout the repo and run `npm run build:dist`.
 
@@ -53,0 +53,0 @@ #### Polyfills

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

1827748

increased by5.09%

Lines of code

4190

increased by2.95%

No dependency changes