react-player - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

CHANGELOG.md

@@ -7,2 +7,10 @@ # Change Log
 
+#### [v0.5.0](https://github.com/CookPete/react-player/compare/v0.4.2...v0.5.0)
+> 14 January 2016
+
+* Add onDuration prop [`#28`](https://github.com/CookPete/react-player/issues/28)
+* Add live demo to readme [`4aa8a29`](https://github.com/CookPete/react-player/commit/4aa8a292f2e3ee20f79e4a815d09f353da6a553d)
+* Ensure vimeo player has duration before calling onReady [`8b31a8f`](https://github.com/CookPete/react-player/commit/8b31a8ff77aa57b611996670b9b09d2d9b9aeae8)
+
+
 #### [v0.4.2](https://github.com/CookPete/react-player/compare/v0.4.1...v0.4.2)
@@ -9,0 +17,0 @@ > 11 January 2016

lib/players/Base.js

@@ -47,3 +47,3 @@ 'use strict';
         if (_this.loadOnReady) {
-          _this.load(_this.loadOnReady, _this.props.playing);
+          _this.load(_this.loadOnReady);
           _this.loadOnReady = null;
@@ -54,2 +54,3 @@ } else {
       }
+      _this.props.onDuration(_this.getDuration());
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -75,3 +76,3 @@ }
       if (this.props.url !== nextProps.url && nextProps.url) {
-        this.load(nextProps.url, nextProps.playing);
+        this.load(nextProps.url);
         this.seekOnReady = null;
@@ -78,0 +79,0 @@ } else if (this.props.url && !nextProps.url) {

lib/players/FilePlayer.js

@@ -82,3 +82,3 @@ 'use strict';
       _get(Object.getPrototypeOf(FilePlayer.prototype), 'seekTo', this).call(this, fraction);
-      this.player.currentTime = this.player.duration * fraction;
+      this.player.currentTime = this.getDuration() * fraction;
     }
@@ -91,6 +91,12 @@ }, {
   }, {
+    key: 'getDuration',
+    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.player.duration;
+      return this.player.currentTime / this.getDuration();
     }
@@ -101,3 +107,3 @@ }, {
       if (!this.isReady || this.player.buffered.length === 0) return null;
-      return this.player.buffered.end(0) / this.player.duration;
+      return this.player.buffered.end(0) / this.getDuration();
     }
@@ -104,0 +110,0 @@ }, {

lib/players/SoundCloud.js

@@ -136,3 +136,3 @@ 'use strict';
       if (!this.isReady) return;
-      this.player.seek(this.player.getDuration() * fraction);
+      this.player.seek(this.getDuration(true) * fraction);
     }
@@ -146,6 +146,13 @@ }, {
   }, {
+    key: 'getDuration',
+    value: function getDuration(ms) {
+      if (!this.isReady) return null;
+      if (ms) return this.player.getDuration();
+      return this.player.getDuration() / 1000;
+    }
+  }, {
     key: 'getFractionPlayed',
     value: function getFractionPlayed() {
       if (!this.isReady) return null;
-      return this.player.getCurrentPosition() / this.player.getDuration();
+      return this.player.getCurrentPosition() / this.getDuration(true);
     }
@@ -156,3 +163,3 @@ }, {
       if (!this.isReady) return null;
-      return this.player.getLoadedPosition() / this.player.getDuration();
+      return this.player.getLoadedPosition() / this.getDuration(true);
     }
@@ -159,0 +166,0 @@ }, {

lib/players/Vimeo.js

@@ -70,3 +70,2 @@ 'use strict';
       }
-      if (data.event === 'ready') _this.onReady();
       if (data.event === 'playProgress') _this.fractionPlayed = data.data.percent;
@@ -77,3 +76,6 @@ if (data.event === 'loadProgress') _this.fractionLoaded = data.data.percent;
       if (data.event === 'finish') _this.props.onEnded();
-      if (data.method === 'getDuration') _this.duration = data.value; // Store for use in seekTo()
+      if (data.method === 'getDuration') {
+        _this.duration = data.value; // Store for use later
+        _this.onReady();
+      }
     }, _this.postMessage = function (method, value) {
@@ -133,2 +135,7 @@ if (!_this.origin) return;
   }, {
+    key: 'getDuration',
+    value: function getDuration() {
+      return this.duration;
+    }
+  }, {
     key: 'getFractionPlayed',
@@ -135,0 +142,0 @@ value: function getFractionPlayed() {

lib/players/YouTube.js

@@ -68,2 +68,3 @@ 'use strict';
       var ENDED = _window$SDK_GLOBAL$Pl.ENDED;
+      var CUED = _window$SDK_GLOBAL$Pl.CUED;
 
@@ -74,2 +75,3 @@ if (data === PLAYING) _this.onPlay();
       if (data === ENDED) _this.props.onEnded();
+      if (data === CUED) _this.onReady();
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -106,3 +108,3 @@ }
     key: 'load',
-    value: function load(url, playing) {
+    value: function load(url) {
       var _this2 = this;
@@ -112,8 +114,3 @@
       if (this.isReady) {
-        this.stop();
-        if (playing) {
-          this.player.loadVideoById(id);
-        } else {
-          this.player.cueVideoById(id);
-        }
+        this.player.cueVideoById(id);
         return;
@@ -166,3 +163,3 @@ }
       if (!this.isReady || !this.player.seekTo) return;
-      this.player.seekTo(this.player.getDuration() * fraction);
+      this.player.seekTo(this.getDuration() * fraction);
     }
@@ -176,6 +173,12 @@ }, {
   }, {
+    key: 'getDuration',
+    value: function getDuration() {
+      if (!this.isReady || !this.player.getDuration) return null;
+      return this.player.getDuration();
+    }
+  }, {
     key: 'getFractionPlayed',
     value: function getFractionPlayed() {
       if (!this.isReady || !this.player.getCurrentTime) return null;
-      return this.player.getCurrentTime() / this.player.getDuration();
+      return this.player.getCurrentTime() / this.getDuration();
     }
@@ -182,0 +185,0 @@ }, {

lib/props.js

@@ -31,2 +31,3 @@ 'use strict';
   onError: _react.PropTypes.func,
+  onDuration: _react.PropTypes.func,
   onProgress: _react.PropTypes.func
@@ -56,3 +57,4 @@ };
   onError: function onError() {},
+  onDuration: function onDuration() {},
   onProgress: function onProgress() {}
 };

package.json

 {
   "name": "react-player",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo",
@@ -5,0 +5,0 @@ "main": "lib/ReactPlayer.js",

README.md

@@ -37,6 +37,6 @@ ReactPlayer
 
-The quickest way to see it in action is to checkout the repo and run the demo:
+See a [live demo](http://cookpete.com/react-player), or run:
 
 ```bash
-git clone http://github.com/cookpete/react-player
+git clone https://github.com/CookPete/react-player.git
 cd react-player
@@ -52,14 +52,15 @@ npm install
 ---- | -----------
-url | The url of a video or song to play
-playing | Set to `true` or `false` to pause or play the media
-volume | Sets the volume of the appropriate player
-width | Sets the width of the player
-height | Sets the height of the player
-className | Pass in a `className` to set on the top level element
-onProgress | Callback containing `played` and `loaded` progress as a fraction eg `{ played: 0.12, loaded: 0.34 }`
-onPlay | Called when media starts or resumes playing after pausing or buffering
-onPause | Called when media is paused
-onBuffer | Called when media starts buffering
-onEnded | Called when media finishes playing
-onError | Called when an error occurs whilst attempting to play media
+`url` | The url of a video or song to play
+`playing` | Set to `true` or `false` to pause or play the media
+`volume` | Sets the volume of the appropriate player
+`width` | Sets the width of the player
+`height` | Sets the height of the player
+`className` | Pass in a `className` to set on the top level element
+`onProgress` | Callback containing `played` and `loaded` progress as a fraction eg `{ played: 0.12, loaded: 0.34 }`
+`onDuration` | Callback containing duration of the media, in seconds
+`onPlay` | Called when media starts or resumes playing after pausing or buffering
+`onPause` | Called when media is paused
+`onBuffer` | Called when media starts buffering
+`onEnded` | Called when media finishes playing
+`onError` | Called when an error occurs whilst attempting to play media
 
@@ -72,5 +73,5 @@ #### Config props
 ---- | -----------
-soundcloudConfig | Configuration object for the SoundCloud player. Set `clientId`, to your own SoundCloud app [client ID](https://soundcloud.com/you/apps)
-vimeoConfig | Configuration object for the Vimeo player. Set `iframeParams`, to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading)
-youtubeConfig | Configuration object for the YouTube player. Set `playerVars`, to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading)
+`soundcloudConfig` | Configuration object for the SoundCloud player. Set `clientId`, to your own SoundCloud app [client ID](https://soundcloud.com/you/apps)
+`vimeoConfig` | Configuration object for the Vimeo player. Set `iframeParams`, to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading)
+`youtubeConfig` | Configuration object for the YouTube player. Set `playerVars`, to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading)
 
@@ -77,0 +78,0 @@ ##### Preloading

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

1906633

increased by0.06%

Lines of code

1519

increased by1.74%

Number of lines in readme file

113

increased by0.89%

No dependency changes