react-player - npm Package Compare versions

Comparing version 0.24.2 to 0.24.3

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log
 
+#### [v0.24.3](https://github.com/CookPete/react-player/compare/v0.24.2...v0.24.3)
+> 14 September 2017
+
+* update of DOM listeners in FilePlayer when audio/video tags was switched [`#234`](https://github.com/CookPete/react-player/pull/234)
+* Clean up tests [`717397e`](https://github.com/CookPete/react-player/commit/717397e2010a7c2a9d2bbb543e3390ee9be94e9c)
+* Bump packages [`aa2c174`](https://github.com/CookPete/react-player/commit/aa2c1746774266502031d10aff5331ecb6cc491a)
+
+
 #### [v0.24.2](https://github.com/CookPete/react-player/compare/v0.24.1...v0.24.2)
@@ -9,0 +17,0 @@ > 11 September 2017

lib/players/Base.js

@@ -44,3 +44,5 @@ 'use strict';
       if (_this.startOnPlay) {
-        _this.setPlaybackRate(playbackRate);
+        if (_this.setPlaybackRate) {
+          _this.setPlaybackRate(playbackRate);
+        }
         _this.setVolume(muted ? 0 : volume);
@@ -116,14 +118,20 @@ onStart();
         this.load(nextProps.url);
-      } else if (url && !nextProps.url) {
+      }
+      if (url && !nextProps.url) {
         this.stop();
         clearTimeout(this.updateTimeout);
-      } else if (!playing && nextProps.playing) {
+      }
+      if (!playing && nextProps.playing) {
         this.play();
-      } else if (playing && !nextProps.playing) {
+      }
+      if (playing && !nextProps.playing) {
         this.pause();
-      } else if (volume !== nextProps.volume && !nextProps.muted) {
+      }
+      if (volume !== nextProps.volume && !nextProps.muted) {
         this.setVolume(nextProps.volume);
-      } else if (muted !== nextProps.muted) {
+      }
+      if (muted !== nextProps.muted) {
         this.setVolume(nextProps.muted ? 0 : nextProps.volume);
-      } else if (playbackRate !== nextProps.playbackRate) {
+      }
+      if (playbackRate !== nextProps.playbackRate && this.setPlaybackRate) {
         this.setPlaybackRate(nextProps.playbackRate);
@@ -138,2 +146,28 @@ }
   }, {
+    key: 'callPlayer',
+    value: function callPlayer(method) {
+      var _player;
+
+      // Util method for calling a method on this.player
+      // but guard against errors and console.warn instead
+      if (!this.isReady || !this.player || !this.player[method]) {
+        var message = 'ReactPlayer: ' + this.constructor.displayName + ' player could not call %c' + method + '%c \u2013 ';
+        if (!this.isReady) {
+          message += 'The player was not ready';
+        } else if (!this.player) {
+          message += 'The player was not available';
+        } else if (!this.player[method]) {
+          message += 'The method was not available';
+        }
+        console.warn(message, 'font-weight: bold', '');
+        return null;
+      }
+
+      for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      return (_player = this.player)[method].apply(_player, args);
+    }
+  }, {
     key: 'seekTo',
@@ -140,0 +174,0 @@ value: function seekTo(amount) {

lib/players/DailyMotion.js

@@ -150,4 +150,3 @@ 'use strict';
     value: function play() {
-      if (!this.isReady || !this.player.play) return;
-      this.player.play();
+      this.callPlayer('play');
     }
@@ -157,4 +156,3 @@ }, {
     value: function pause() {
-      if (!this.isReady || !this.player.pause) return;
-      this.player.pause();
+      this.callPlayer('pause');
     }
@@ -170,4 +168,3 @@ }, {
       var seconds = _get(DailyMotion.prototype.__proto__ || Object.getPrototypeOf(DailyMotion.prototype), 'seekTo', this).call(this, amount);
-      if (!this.isReady || !this.player.seek) return;
-      this.player.seek(seconds);
+      this.callPlayer('seek', seconds);
     }
@@ -177,27 +174,19 @@ }, {
     value: function setVolume(fraction) {
-      if (!this.isReady || !this.player.setVolume) return;
-      this.player.setVolume(fraction);
+      this.callPlayer('setVolume', fraction);
     }
   }, {
-    key: 'setPlaybackRate',
-    value: function setPlaybackRate() {
-      return null;
-    }
-  }, {
     key: 'getDuration',
     value: function getDuration() {
-      if (!this.isReady || !this.player.duration) return null;
-      return this.player.duration;
+      if (!this.isReady) return null;
+      return this.player.duration || null;
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      if (!this.isReady || !this.getDuration()) return null;
-      return this.player.currentTime / this.getDuration();
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.player.currentTime;
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
-      if (!this.isReady || !this.getDuration() || !this.player.bufferedTime) return null;
-      return this.player.bufferedTime / this.getDuration();
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
+      return this.player.bufferedTime;
     }
@@ -204,0 +193,0 @@ }, {

lib/players/Facebook.js

@@ -35,6 +35,6 @@ 'use strict';
 
-var YouTube = function (_Base) {
-  _inherits(YouTube, _Base);
+var Facebook = function (_Base) {
+  _inherits(Facebook, _Base);
 
-  function YouTube() {
+  function Facebook() {
     var _ref;
@@ -44,3 +44,3 @@
 
-    _classCallCheck(this, YouTube);
+    _classCallCheck(this, Facebook);
 
@@ -51,3 +51,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    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 () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Facebook.__proto__ || Object.getPrototypeOf(Facebook)).call.apply(_ref, [this].concat(args))), _this), _this.playerID = PLAYER_ID_PREFIX + (0, _utils.randomString)(), _this.onEnded = function () {
       var _this$props = _this.props,
@@ -64,3 +64,3 @@ loop = _this$props.loop,
 
-  _createClass(YouTube, [{
+  _createClass(Facebook, [{
     key: 'load',
@@ -98,4 +98,3 @@ value: function load(url) {
     value: function play() {
-      if (!this.isReady) return;
-      this.player.play();
+      this.callPlayer('play');
     }
@@ -105,4 +104,3 @@ }, {
     value: function pause() {
-      if (!this.isReady) return;
-      this.player.pause();
+      this.callPlayer('pause');
     }
@@ -117,4 +115,3 @@ }, {
     value: function seekTo(amount) {
-      var seconds = _get(YouTube.prototype.__proto__ || Object.getPrototypeOf(YouTube.prototype), 'seekTo', this).call(this, amount);
-      if (!this.isReady) return;
+      var seconds = _get(Facebook.prototype.__proto__ || Object.getPrototypeOf(Facebook.prototype), 'seekTo', this).call(this, amount);
       this.player.seek(seconds);
@@ -125,5 +122,4 @@ }
     value: function setVolume(fraction) {
-      if (!this.isReady) return;
       if (fraction !== 0) {
-        this.player.unmute();
+        this.callPlayer('unmute');
       }
@@ -133,21 +129,14 @@ this.player.setVolume(fraction);
   }, {
-    key: 'setPlaybackRate',
-    value: function setPlaybackRate() {
-      return null;
-    }
-  }, {
     key: 'getDuration',
     value: function getDuration() {
-      if (!this.isReady) return null;
-      return this.player.getDuration();
+      return this.callPlayer('getDuration');
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      if (!this.isReady || !this.getDuration()) return null;
-      return this.player.getCurrentPosition() / this.getDuration();
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.callPlayer('getCurrentPosition');
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
       return null;
@@ -179,6 +168,6 @@ }
 
-  return YouTube;
+  return Facebook;
 }(_Base3['default']);
 
-YouTube.displayName = 'Facebook';
-exports['default'] = YouTube;
+Facebook.displayName = 'Facebook';
+exports['default'] = Facebook;

lib/players/FilePlayer.js

@@ -74,4 +74,29 @@ 'use strict';
     value: function componentDidMount() {
-      var _this2 = this;
-
+      this.addListeners();
+      _get(FilePlayer.prototype.__proto__ || Object.getPrototypeOf(FilePlayer.prototype), 'componentDidMount', this).call(this);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(nextProps)) {
+        this.removeListeners();
+      }
+      _get(FilePlayer.prototype.__proto__ || Object.getPrototypeOf(FilePlayer.prototype), 'componentWillReceiveProps', this).call(this, nextProps);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(prevProps)) {
+        this.addListeners();
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.removeListeners();
+      _get(FilePlayer.prototype.__proto__ || Object.getPrototypeOf(FilePlayer.prototype), 'componentWillUnmount', this).call(this);
+    }
+  }, {
+    key: 'addListeners',
+    value: function addListeners() {
       var _props = this.props,
@@ -85,7 +110,3 @@ playsinline = _props.playsinline,
       this.player.addEventListener('play', this.onPlay);
-      this.player.addEventListener('pause', function () {
-        if (_this2.mounted) {
-          onPause();
-        }
-      });
+      this.player.addEventListener('pause', onPause);
       this.player.addEventListener('seeked', this.onSeek);
@@ -98,7 +119,6 @@ this.player.addEventListener('ended', onEnded);
       }
-      _get(FilePlayer.prototype.__proto__ || Object.getPrototypeOf(FilePlayer.prototype), 'componentDidMount', this).call(this);
     }
   }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
+    key: 'removeListeners',
+    value: function removeListeners() {
       var _props2 = this.props,
@@ -115,5 +135,9 @@ onPause = _props2.onPause,
       this.player.removeEventListener('error', onError);
-      _get(FilePlayer.prototype.__proto__ || Object.getPrototypeOf(FilePlayer.prototype), 'componentWillUnmount', this).call(this);
     }
   }, {
+    key: 'shouldUseAudio',
+    value: function shouldUseAudio(props) {
+      return AUDIO_EXTENSIONS.test(props.url) || props.config.file.forceAudio;
+    }
+  }, {
     key: 'shouldUseHLS',
@@ -131,9 +155,9 @@ value: function shouldUseHLS(url) {
     value: function load(url) {
-      var _this3 = this;
+      var _this2 = this;
 
       if (this.shouldUseHLS(url)) {
         (0, _utils.getSDK)(HLS_SDK_URL, HLS_GLOBAL).then(function (Hls) {
-          _this3.hls = new Hls();
-          _this3.hls.loadSource(url);
-          _this3.hls.attachMedia(_this3.player);
+          _this2.hls = new Hls();
+          _this2.hls.loadSource(url);
+          _this2.hls.attachMedia(_this2.player);
         });
@@ -144,3 +168,3 @@ }
           var player = dashjs.MediaPlayer().create();
-          player.initialize(_this3.player, url, true);
+          player.initialize(_this2.player, url, true);
           player.getDebug().setLogToBrowserConsole(false);
@@ -187,16 +211,14 @@ });
     value: function getDuration() {
-      if (!this.isReady) return null;
       return this.player.duration;
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      if (!this.isReady) return null;
-      return this.player.currentTime / this.getDuration();
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.player.currentTime;
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
-      if (!this.isReady || this.player.buffered.length === 0) return null;
-      return this.player.buffered.end(0) / this.getDuration();
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
+      if (this.player.buffered.length === 0) return 0;
+      return this.player.buffered.end(0);
     }
@@ -214,3 +236,3 @@ }, {
 
-      var useAudio = AUDIO_EXTENSIONS.test(url) || config.file.forceAudio;
+      var useAudio = this.shouldUseAudio(this.props);
       var useHLS = this.shouldUseHLS(url);
@@ -242,2 +264,35 @@ var useDASH = this.shouldUseDASH(url);
     value: function canPlay(url) {
+      if (url instanceof Array) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = url[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var item = _step.value;
+
+            if (typeof item === 'string' && this.canPlay(item)) {
+              return true;
+            }
+            if (this.canPlay(item.src)) {
+              return true;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator['return']) {
+              _iterator['return']();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        return false;
+      }
       return AUDIO_EXTENSIONS.test(url) || VIDEO_EXTENSIONS.test(url) || HLS_EXTENSIONS.test(url) || DASH_EXTENSIONS.test(url);
@@ -244,0 +299,0 @@ }

lib/players/SoundCloud.js

@@ -58,3 +58,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SoundCloud.__proto__ || Object.getPrototypeOf(SoundCloud)).call.apply(_ref, [this].concat(args))), _this), _this.player = null, _this.duration = null, _this.fractionPlayed = null, _this.fractionLoaded = null, _this.ref = function (iframe) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SoundCloud.__proto__ || Object.getPrototypeOf(SoundCloud)).call.apply(_ref, [this].concat(args))), _this), _this.duration = null, _this.currentTime = null, _this.fractionLoaded = null, _this.ref = function (iframe) {
       _this.iframe = iframe;
@@ -79,10 +79,16 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
           _this2.player = SC.Widget(_this2.iframe);
-          _this2.player.bind(PLAY, _this2.onPlay);
+          _this2.player.bind(PLAY, function () {
+            // Use widgetIsPlaying to prevent calling play() when widget
+            // is playing, which causes bugs with the SC widget
+            _this2.widgetIsPlaying = true;
+            _this2.onPlay();
+          });
+          _this2.player.bind(PAUSE, function () {
+            _this2.widgetIsPlaying = false;
+            _this2.props.onPause();
+          });
           _this2.player.bind(PLAY_PROGRESS, function (e) {
-            _this2.fractionPlayed = e.relativePosition;
+            _this2.currentTime = e.currentPosition / 1000;
             _this2.fractionLoaded = e.loadedProgress;
           });
-          _this2.player.bind(PAUSE, function () {
-            return _this2.props.onPause();
-          });
           _this2.player.bind(FINISH, function () {
@@ -97,2 +103,3 @@ return _this2.props.onEnded();
           callback: function callback() {
+            _this2.widgetIsPlaying = false;
             _this2.player.getDuration(function (duration) {
@@ -107,18 +114,7 @@ _this2.duration = duration / 1000;
   }, {
-    key: 'call',
-    value: function call(method) {
-      var _player;
-
-      if (!this.isReady || !this.player || !this.player[method]) return;
-
-      for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      return (_player = this.player)[method].apply(_player, args);
-    }
-  }, {
     key: 'play',
     value: function play() {
-      this.call('play');
+      if (!this.widgetIsPlaying) {
+        this.callPlayer('play');
+      }
     }
@@ -128,3 +124,5 @@ }, {
     value: function pause() {
-      this.call('pause');
+      if (this.widgetIsPlaying) {
+        this.callPlayer('pause');
+      }
     }
@@ -135,3 +133,3 @@ }, {
       this.pause();
-      this.call('seekTo', 0);
+      this.callPlayer('seekTo', 0);
     }
@@ -142,3 +140,3 @@ }, {
       var seconds = _get(SoundCloud.prototype.__proto__ || Object.getPrototypeOf(SoundCloud.prototype), 'seekTo', this).call(this, amount);
-      this.call('seekTo', seconds * 1000);
+      this.callPlayer('seekTo', seconds * 1000);
     }
@@ -148,8 +146,5 @@ }, {
     value: function setVolume(fraction) {
-      this.call('setVolume', fraction * 100);
+      this.callPlayer('setVolume', fraction * 100);
     }
   }, {
-    key: 'setPlaybackRate',
-    value: function setPlaybackRate() {}
-  }, {
     key: 'getDuration',
@@ -160,10 +155,10 @@ value: function getDuration() {
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
-      return this.fractionLoaded;
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.currentTime;
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      return this.fractionPlayed;
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
+      return this.fractionLoaded * this.duration;
     }
@@ -170,0 +165,0 @@ }, {

lib/players/Twitch.js

@@ -35,6 +35,6 @@ 'use strict';
 
-var YouTube = function (_Base) {
-  _inherits(YouTube, _Base);
+var Twitch = function (_Base) {
+  _inherits(Twitch, _Base);
 
-  function YouTube() {
+  function Twitch() {
     var _ref;
@@ -44,3 +44,3 @@
 
-    _classCallCheck(this, YouTube);
+    _classCallCheck(this, Twitch);
 
@@ -51,3 +51,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    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 () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Twitch.__proto__ || Object.getPrototypeOf(Twitch)).call.apply(_ref, [this].concat(args))), _this), _this.playerID = PLAYER_ID_PREFIX + (0, _utils.randomString)(), _this.onEnded = function () {
       var _this$props = _this.props,
@@ -64,3 +64,3 @@ loop = _this$props.loop,
 
-  _createClass(YouTube, [{
+  _createClass(Twitch, [{
     key: 'load',
@@ -110,18 +110,5 @@ value: function load(url) {
   }, {
-    key: 'call',
-    value: function call(method) {
-      var _player;
-
-      if (!this.isReady || !this.player || !this.player[method]) return;
-
-      for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      return (_player = this.player)[method].apply(_player, args);
-    }
-  }, {
     key: 'play',
     value: function play() {
-      this.call('play');
+      this.callPlayer('play');
     }
@@ -131,3 +118,3 @@ }, {
     value: function pause() {
-      this.call('pause');
+      this.callPlayer('pause');
     }
@@ -137,3 +124,3 @@ }, {
     value: function stop() {
-      this.call('pause');
+      this.callPlayer('pause');
     }
@@ -143,4 +130,4 @@ }, {
     value: function seekTo(amount) {
-      var seconds = _get(YouTube.prototype.__proto__ || Object.getPrototypeOf(YouTube.prototype), 'seekTo', this).call(this, amount);
-      this.call('seek', seconds);
+      var seconds = _get(Twitch.prototype.__proto__ || Object.getPrototypeOf(Twitch.prototype), 'seekTo', this).call(this, amount);
+      this.callPlayer('seek', seconds);
     }
@@ -150,27 +137,17 @@ }, {
     value: function setVolume(fraction) {
-      this.call('setVolume', fraction);
+      this.callPlayer('setVolume', fraction);
     }
   }, {
-    key: 'setPlaybackRate',
-    value: function setPlaybackRate(rate) {
-      return null;
-    }
-  }, {
     key: 'getDuration',
     value: function getDuration() {
-      return this.call('getDuration');
+      return this.callPlayer('getDuration');
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      var time = this.call('getCurrentTime');
-      var duration = this.getDuration();
-      if (time && duration) {
-        return time / duration;
-      }
-      return null;
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.callPlayer('getCurrentTime');
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
       return null;
@@ -194,6 +171,6 @@ }
 
-  return YouTube;
+  return Twitch;
 }(_Base3['default']);
 
-YouTube.displayName = 'Twitch';
-exports['default'] = YouTube;
+Twitch.displayName = 'Twitch';
+exports['default'] = Twitch;

lib/players/Vimeo.js

@@ -108,10 +108,10 @@ 'use strict';
         _this2.player.on('timeupdate', function (_ref3) {
-          var percent = _ref3.percent;
+          var seconds = _ref3.seconds;
 
-          _this2.fractionPlayed = percent;
+          _this2.currentTime = seconds;
         });
         _this2.player.on('progress', function (_ref4) {
-          var percent = _ref4.percent;
+          var seconds = _ref4.seconds;
 
-          _this2.fractionLoaded = percent;
+          _this2.secondsLoaded = seconds;
         });
@@ -123,4 +123,3 @@ }, this.props.onError);
     value: function play() {
-      if (!this.isReady) return;
-      this.player.play();
+      this.callPlayer('play');
     }
@@ -130,4 +129,3 @@ }, {
     value: function pause() {
-      if (!this.isReady) return;
-      this.player.pause();
+      this.callPlayer('pause');
     }
@@ -137,4 +135,3 @@ }, {
     value: function stop() {
-      if (!this.isReady) return;
-      this.player.unload();
+      this.callPlayer('unload');
     }
@@ -145,4 +142,3 @@ }, {
       var seconds = _get(Vimeo.prototype.__proto__ || Object.getPrototypeOf(Vimeo.prototype), 'seekTo', this).call(this, amount);
-      if (!this.isReady || !this.player.setCurrentTime) return;
-      this.player.setCurrentTime(seconds);
+      this.callPlayer('setCurrentTime', seconds);
     }
@@ -152,10 +148,5 @@ }, {
     value: function setVolume(fraction) {
-      this.player.setVolume(fraction);
+      this.callPlayer('setVolume', fraction);
     }
   }, {
-    key: 'setPlaybackRate',
-    value: function setPlaybackRate(rate) {
-      return null;
-    }
-  }, {
     key: 'getDuration',
@@ -166,10 +157,10 @@ value: function getDuration() {
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      return this.fractionPlayed || null;
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.currentTime;
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
-      return this.fractionLoaded || null;
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
+      return this.secondsLoaded;
     }
@@ -176,0 +167,0 @@ }, {

lib/players/Wistia.js

@@ -85,4 +85,3 @@ 'use strict';
     value: function play() {
-      if (!this.isReady || !this.player) return;
-      this.player.play();
+      this.callPlayer('play');
     }
@@ -92,4 +91,3 @@ }, {
     value: function pause() {
-      if (!this.isReady || !this.player) return;
-      this.player && this.player.pause();
+      this.callPlayer('pause');
     }
@@ -99,4 +97,3 @@ }, {
     value: function stop() {
-      if (!this.isReady || !this.player) return;
-      this.player.pause();
+      this.callPlayer('remove');
     }
@@ -107,4 +104,3 @@ }, {
       var seconds = _get(Wistia.prototype.__proto__ || Object.getPrototypeOf(Wistia.prototype), 'seekTo', this).call(this, amount);
-      if (!this.isReady || !this.player) return;
-      this.player.time(seconds);
+      this.callPlayer('time', seconds);
     }
@@ -114,4 +110,3 @@ }, {
     value: function setVolume(fraction) {
-      if (!this.isReady || !this.player || !this.player.volume) return;
-      this.player.volume(fraction);
+      this.callPlayer('volume', fraction);
     }
@@ -121,4 +116,3 @@ }, {
     value: function setPlaybackRate(rate) {
-      if (!this.isReady || !this.player || !this.player.playbackRate) return;
-      this.player.playbackRate(rate);
+      this.callPlayer('playbackRate', rate);
     }
@@ -128,14 +122,12 @@ }, {
     value: function getDuration() {
-      if (!this.isReady || !this.player || !this.player.duration) return;
-      return this.player.duration();
+      return this.callPlayer('duration');
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      if (!this.isReady || !this.player || !this.player.percentWatched) return null;
-      return this.player.time() / this.player.duration();
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.callPlayer('time');
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
       return null;
@@ -142,0 +134,0 @@ }

lib/players/YouTube.js

@@ -145,4 +145,3 @@ 'use strict';
     value: function play() {
-      if (!this.isReady || !this.player.playVideo) return;
-      this.player.playVideo();
+      this.callPlayer('playVideo');
     }
@@ -152,4 +151,3 @@ }, {
     value: function pause() {
-      if (!this.isReady || !this.player.pauseVideo) return;
-      this.player.pauseVideo();
+      this.callPlayer('pauseVideo');
     }
@@ -159,5 +157,4 @@ }, {
     value: function stop() {
-      if (!this.isReady || !this.player.stopVideo) return;
-      if (!document.body.contains(this.player.getIframe())) return;
-      this.player.stopVideo();
+      if (!document.body.contains(this.callPlayer('getIframe'))) return;
+      this.callPlayer('stopVideo');
     }
@@ -168,4 +165,3 @@ }, {
       var seconds = _get(YouTube.prototype.__proto__ || Object.getPrototypeOf(YouTube.prototype), 'seekTo', this).call(this, amount);
-      if (!this.isReady || !this.player.seekTo) return;
-      this.player.seekTo(seconds);
+      this.callPlayer('seekTo', seconds);
     }
@@ -175,4 +171,3 @@ }, {
     value: function setVolume(fraction) {
-      if (!this.isReady || !this.player.setVolume) return;
-      this.player.setVolume(fraction * 100);
+      this.callPlayer('setVolume', fraction * 100);
     }
@@ -182,4 +177,3 @@ }, {
     value: function setPlaybackRate(rate) {
-      if (!this.isReady || !this.player.setPlaybackRate) return;
-      this.player.setPlaybackRate(rate);
+      this.callPlayer('setPlaybackRate', rate);
     }
@@ -189,16 +183,13 @@ }, {
     value: function getDuration() {
-      if (!this.isReady || !this.player.getDuration) return null;
-      return this.player.getDuration();
+      return this.callPlayer('getDuration');
     }
   }, {
-    key: 'getFractionPlayed',
-    value: function getFractionPlayed() {
-      if (!this.isReady || !this.getDuration()) return null;
-      return this.player.getCurrentTime() / this.getDuration();
+    key: 'getCurrentTime',
+    value: function getCurrentTime() {
+      return this.callPlayer('getCurrentTime');
     }
   }, {
-    key: 'getFractionLoaded',
-    value: function getFractionLoaded() {
-      if (!this.isReady || !this.player.getVideoLoadedFraction) return null;
-      return this.player.getVideoLoadedFraction();
+    key: 'getSecondsLoaded',
+    value: function getSecondsLoaded() {
+      return this.callPlayer('getVideoLoadedFraction') * this.getDuration();
     }
@@ -205,0 +196,0 @@ }, {

lib/ReactPlayer.js

@@ -92,33 +92,27 @@ 'use strict';
       if (!_this.player) return null;
-      var duration = _this.player.getDuration();
-      var fractionPlayed = _this.player.getFractionPlayed();
-      if (duration === null || fractionPlayed === null) {
-        return null;
-      }
-      return fractionPlayed * duration;
+      return _this.player.getCurrentTime();
     }, _this.getInternalPlayer = function () {
+      if (!_this.player) return null;
       return _this.player.player;
     }, _this.progress = function () {
-      if (_this.props.url && _this.player) {
-        var loaded = _this.player.getFractionLoaded() || 0;
-        var played = _this.player.getFractionPlayed() || 0;
+      if (_this.props.url && _this.player && _this.player.isReady) {
+        var playedSeconds = _this.player.getCurrentTime() || 0;
+        var loadedSeconds = _this.player.getSecondsLoaded();
         var duration = _this.player.getDuration();
-        var progress = {};
-        if (loaded !== _this.prevLoaded) {
-          progress.loaded = loaded;
-          if (duration) {
-            progress.loadedSeconds = progress.loaded * duration;
+        if (duration) {
+          var progress = {
+            playedSeconds: playedSeconds,
+            played: playedSeconds / duration
+          };
+          if (loadedSeconds !== null) {
+            progress.loadedSeconds = loadedSeconds;
+            progress.loaded = loadedSeconds / duration;
           }
-        }
-        if (played !== _this.prevPlayed) {
-          progress.played = played;
-          if (duration) {
-            progress.playedSeconds = progress.played * 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;
         }
-        if (progress.loaded || progress.played) {
-          _this.props.onProgress(progress);
-        }
-        _this.prevLoaded = loaded;
-        _this.prevPlayed = played;
       }
@@ -125,0 +119,0 @@ _this.progressTimeout = setTimeout(_this.progress, _this.props.progressFrequency);

package.json

 {
   "name": "react-player",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia",
@@ -52,3 +52,3 @@ "main": "lib/ReactPlayer.js",
     "babel-core": "^6.16.0",
-    "babel-eslint": "^7.0.0",
+    "babel-eslint": "^8.0.0",
     "babel-loader": "^7.0.0",
@@ -75,3 +75,2 @@ "babel-plugin-add-module-exports": "^0.2.1",
     "karma-coverage": "^1.1.1",
-    "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.2.0",
@@ -78,0 +77,0 @@ "karma-mocha-reporter": "^2.2.0",

README.md

@@ -88,3 +88,3 @@ ReactPlayer
 `muted` | Mutes the player | `false`
-`playbackRate` | Sets the playback rate of the appropriate player | `1`
+`playbackRate` | Sets the playback rate of the appropriate player<br />*Note: Only supported by YouTube, Wistia, and file paths* | `1`
 `width` | Sets the width of the player | `640`
@@ -91,0 +91,0 @@ `height` | Sets the height of the player | `360`

webpack.production.babel.js

@@ -13,3 +13,6 @@ import webpack from 'webpack'
     sourceMap: true,
-    comments: false
+    comments: false,
+    mangle: {
+      except: [ 'ReactPlayer' ]
+    }
   }),
@@ -16,0 +19,0 @@ new webpack.LoaderOptionsPlugin({ minimize: true })

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

Dev dependency count

43

decreased by-2.27%

Lines of code

2622

increased by0.38%

Worsened metrics

Total package byte prevSize

819402

decreased by-0.01%

Number of package files

30

decreased by-6.25%

No dependency changes