add prop onError to handle request errors

pedronauck · pedronauck · commit af51675279ce · 2015-01-31T17:57:42.000-02:00
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Installing this component is very easy and it has just one dependency: [React](h
   $ bower install --save react-video
 ```
 
-- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v1.4.0.zip) and put in your website, it will work too!
+- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v1.5.0.zip) and put in your website, it will work too!
 
 **NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-video.css) at the `<header>` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.
 
@@ -55,6 +55,19 @@ The property `videoId` is optional, so you can use it or not. If you don't pass
   );
 ```
 
+To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop `onError` in the component:
+
+```javascript
+  var _onError = function(err) {
+    console.log(err);
+  };
+
+  React.render(
+    <Video onError={_onError} videoId={videoId} />
+    document.querySelector('#your-div')
+  );
+```
+
 If you decide to use just Javascript without any module loader, you can get the global variable `window.ReactVideo` *(or just `ReactVideo`)*:
 
 ```javascript
@@ -97,6 +110,7 @@ Property | Type | Default | Required | Description
 -------- | ---- | ------- | -------- |-----------
 from | `String` | none | no | Video source: `youtube` or `vimeo`. Leave empty and the service will be detected for you by looking a the id.
 videoId | `String` | none | no | The video ID
+onError | `Function` | yes | no | Callback function if the video can't be loaded
 
 ## Contributing
 
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "react-video",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React component to load video from Vimeo or Youtube across any device",
   "homepage": "https://github.com/pedronauck/react-video",
   "authors": [
diff --git a/dist/react-video.css b/dist/react-video.css
@@ -1,6 +1,6 @@
 /*
  * React Video - React component to load video from Vimeo or Youtube across any device
- * @version v1.4.0
+ * @version v1.5.0
  * @link https://github.com/pedronauck/react-video
  * @license MIT
  * @author Pedro Nauck (https://github.com/pedronauck)
diff --git a/dist/react-video.js b/dist/react-video.js
@@ -1,6 +1,6 @@
 /*
  * React Video - React component to load video from Vimeo or Youtube across any device
- * @version v1.4.0
+ * @version v1.5.0
  * @link https://github.com/pedronauck/react-video
  * @license MIT
  * @author Pedro Nauck (https://github.com/pedronauck)
@@ -72,7 +72,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	  displayName: 'Video',
 	  propTypes: {
 	    from: React.PropTypes.oneOf(['youtube', 'vimeo']),
-	    videoId: React.PropTypes.string.isRequired
+	    videoId: React.PropTypes.string.isRequired,
+	    onError: React.PropTypes.func
 	  },
 	  getDefaultProps:function() {
 	    return {
@@ -147,28 +148,34 @@ return /******/ (function(modules) { // webpackBootstrap
 	  },
 	  fetchYoutubeData:function() {
 	    var id = this.props.videoId;
-	    var url = ("//gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json");
 
-	    ajax.get(url, function(err, res)  {
-	      var gallery = res.entry['media$group']['media$thumbnail'];
-	      var thumb = gallery.sort(function(a, b)  {return b.width - a.width;})[0].url;
-
-	      this.setState({
-	        thumb: thumb,
-	        imageLoaded: true
-	      });
-	    }.bind(this));
+	    ajax.get({
+	      url: ("//gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json"),
+	      onSuccess:function(err, res) {
+	        var gallery = res.entry['media$group']['media$thumbnail'];
+	        var thumb = gallery.sort(function(a, b)  {return b.width - a.width;})[0].url;
+
+	        this.setState({
+	          thumb: thumb,
+	          imageLoaded: true
+	        })
+	      },
+	      onError: this.props.onError
+	    });
 	  },
 	  fetchVimeoData:function() {
 	    var id = this.props.videoId;
-	    var url = ("//vimeo.com/api/v2/video/" + id + ".json");
-
-	    ajax.get(url, function(err, res)  {
-	      this.setState({
-	        thumb: res[0].thumbnail_large,
-	        imageLoaded: true
-	      });
-	    }.bind(this));
+
+	    ajax.get({
+	      url: ("//vimeo.com/api/v2/video/" + id + ".json"),
+	      onSuccess:function(err, res) {
+	        this.setState({
+	          thumb: res[0].thumbnail_large,
+	          imageLoaded: true
+	        });
+	      },
+	      onError: this.props.onError
+	    });
 	  }
 	});
 
@@ -202,43 +209,50 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 3 */
 /***/ function(module, exports, __webpack_require__) {
 
-	/** @jsx React.DOM */var get = function(url, cb) {
+	/** @jsx React.DOM */exports.get = function(opts) {
+	  var url = opts.url;
+	  var successCb = opts.onSuccess;
+	  var errorCb = opts.onError;
 	  var req = false;
 
 	  // XDomainRequest onload
-	  var oldIE = function () {
-	    cb(null, JSON.parse(req.responseText));
+	  var _oldIE = function () {
+	    successCb(null, JSON.parse(req.responseText));
 	  };
 
 	  // XMLHttpRequest onload
-	  var onLoad = function () {
+	  var _onLoad = function () {
 	    if (req.readyState !== 4) return;
-	    if (req.status === 200) cb(null, JSON.parse(req.responseText));
+	    if (req.status === 200) successCb(null, JSON.parse(req.responseText));
 	    else {
-	      cb({ error: 'Sorry, an error ocurred on the server' }, null);
+	      var err = { error: 'Sorry, an error ocurred on the server' };
+
+	      if (errorCb && typeof errorCb === 'function') return errorCb(err);
+	      successCb(err, null);
 	    }
 	  };
 
-	  var onError = function() {
-	    cb({ error: 'Problem with your internet conection' }, null);
+	  var _onError = function() {
+	    var err = { error: 'Sorry, an error ocurred on the server' };
+
+	    if (errorCb && typeof errorCb === 'function') return errorCb(err);
+	    successCb(err, null);
 	  };
 
 	  try {
 	    req = new XDomainRequest();
-	    req.onload = oldIE;
+	    req.onload = _oldIE;
 	  }
 	  catch (e) {
 	    req = new XMLHttpRequest();
-	    req.onreadystatechange = onLoad;
+	    req.onreadystatechange = _onLoad;
 	  }
 
-	  req.onerror = onError;
+	  req.onerror = _onError;
 	  req.open('GET', url, true);
 	  req.send();
 	};
 
-	module.exports = { get: get };
-
 
 /***/ },
 /* 4 */
diff --git a/dist/react-video.min.css b/dist/react-video.min.css
diff --git a/dist/react-video.min.js b/dist/react-video.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -99,6 +99,20 @@ <h2 class="section-title">Usage</h2>
         document.querySelector('#your-div')
       );
     </code></pre>
+    <p>
+      To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop <code>onError</code> in the component:
+
+      <pre><code class="hljs javascript">
+        var _onError = function(err) {
+          console.log(err);
+        };
+
+        React.render(
+          &lt;Video onError={_onError} videoId={videoId} /&gt;
+          document.querySelector('#your-div')
+        );
+      </code></pre>
+    </p>
     <p>
       If you decide to use just Javascript without any module loader, you can get the global variable <code>window.ReactVideo</code>:
     </p>
diff --git a/lib/react-video.jsx b/lib/react-video.jsx
@@ -8,7 +8,8 @@ module.exports = React.createClass({
   displayName: 'Video',
   propTypes: {
     from: React.PropTypes.oneOf(['youtube', 'vimeo']),
-    videoId: React.PropTypes.string.isRequired
+    videoId: React.PropTypes.string.isRequired,
+    onError: React.PropTypes.func
   },
   getDefaultProps() {
     return {
@@ -83,27 +84,33 @@ module.exports = React.createClass({
   },
   fetchYoutubeData() {
     var id = this.props.videoId;
-    var url = `//gdata.youtube.com/feeds/api/videos/${id}?v=2&alt=json`;
 
-    ajax.get(url, (err, res) => {
-      var gallery = res.entry['media$group']['media$thumbnail'];
-      var thumb = gallery.sort((a, b) => b.width - a.width)[0].url;
+    ajax.get({
+      url: `//gdata.youtube.com/feeds/api/videos/${id}?v=2&alt=json`,
+      onSuccess(err, res) {
+        var gallery = res.entry['media$group']['media$thumbnail'];
+        var thumb = gallery.sort((a, b) => b.width - a.width)[0].url;
 
-      this.setState({
-        thumb: thumb,
-        imageLoaded: true
-      });
+        this.setState({
+          thumb: thumb,
+          imageLoaded: true
+        })
+      },
+      onError: this.props.onError
     });
   },
   fetchVimeoData() {
     var id = this.props.videoId;
-    var url = `//vimeo.com/api/v2/video/${id}.json`;
 
-    ajax.get(url, (err, res) => {
-      this.setState({
-        thumb: res[0].thumbnail_large,
-        imageLoaded: true
-      });
+    ajax.get({
+      url: `//vimeo.com/api/v2/video/${id}.json`,
+      onSuccess(err, res) {
+        this.setState({
+          thumb: res[0].thumbnail_large,
+          imageLoaded: true
+        });
+      },
+      onError: this.props.onError
     });
   }
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-video",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React component to load video from Vimeo or Youtube across any device",
   "author": {
     "name": "Pedro Nauck",
diff --git a/utils/ajax.js b/utils/ajax.js
@@ -1,36 +1,43 @@
-var get = function(url, cb) {
+exports.get = function(opts) {
+  var url = opts.url;
+  var successCb = opts.onSuccess;
+  var errorCb = opts.onError;
   var req = false;
 
   // XDomainRequest onload
-  var oldIE = function () {
-    cb(null, JSON.parse(req.responseText));
+  var _oldIE = function () {
+    successCb(null, JSON.parse(req.responseText));
   };
 
   // XMLHttpRequest onload
-  var onLoad = function () {
+  var _onLoad = function () {
     if (req.readyState !== 4) return;
-    if (req.status === 200) cb(null, JSON.parse(req.responseText));
+    if (req.status === 200) successCb(null, JSON.parse(req.responseText));
     else {
-      cb({ error: 'Sorry, an error ocurred on the server' }, null);
+      var err = { error: 'Sorry, an error ocurred on the server' };
+
+      if (errorCb && typeof errorCb === 'function') return errorCb(err);
+      successCb(err, null);
     }
   };
 
-  var onError = function() {
-    cb({ error: 'Problem with your internet conection' }, null);
+  var _onError = function() {
+    var err = { error: 'Sorry, an error ocurred on the server' };
+
+    if (errorCb && typeof errorCb === 'function') return errorCb(err);
+    successCb(err, null);
   };
 
   try {
     req = new XDomainRequest();
-    req.onload = oldIE;
+    req.onload = _oldIE;
   }
   catch (e) {
     req = new XMLHttpRequest();
-    req.onreadystatechange = onLoad;
+    req.onreadystatechange = _onLoad;
   }
 
-  req.onerror = onError;
+  req.onerror = _onError;
   req.open('GET', url, true);
   req.send();
 };
-
-module.exports = { get: get };

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-video",`
`3`		`- "version": "1.4.0",`
	`3`	`+ "version": "1.5.0",`
`4`	`4`	`"description": "React component to load video from Vimeo or Youtube across any device",`
`5`	`5`	`"homepage": "https://github.com/pedronauck/react-video",`
`6`	`6`	`"authors": [`