So you're interested in giving us a hand? That's awesome! We've put together some brief guidelines that should help you get started quickly and easily.
@@ -7,7 +7,7 @@ Please, if you see anything wrong you can fix/improve it :ghost:
##Installing the project
1. Fork this project on github
-1. Clone this project on your local
+1. Clone this project on your local machine
1. Then, you need to install `node` and `npm` to run the mainly packages.
1. After installed `node` and `npm`, run this script:
@@ -19,36 +19,26 @@ That's it! You're done.
##How to work
-We are using a bunch of things to put all togethe and make the work easy.
+We are using a bunch of things to put all together and make the work easy.
Dependency | Description
---------- | -----------
[NPM](http://npmjs.org) | Node package manager
-[Gulp](http://gulpjs.com/) | Run some tasks (bundle, server, etc)
[BrowserSync](http://www.browsersync.io/) | Create a `localhost` server with livereload
-[Webpack](http://www.browsersync.io/) | Generated a UMD bundled version
-[Jest](http://facebook.github.io/jest/) | Run the tests
+[Webpack](http://webpack.github.io/) | Generated a UMD bundled version
So, have some scripts that you need to know to run the project locally. It's just fews, but it's very important.
Command | Description
------- | -----------
-`npm run bundle` | run `$ gulp bundle` task
-`npm start` | Run `$ gulp default` task
-`npm test` | Run all tests with Jest
-`gulp` | Default task that runs `gulp webpack`, `gulp server` and `gulp watch`
-`gulp webpack` | Run the Webpack bundle
-`gulp webpack -p` | Run the Webpack bundle minified
-`gulp css` | Compile `.styl` files
-`gulp css -p` | Compile `.styl` files in a minified version
-`gulp server` | Run the BrowserSync server
-`gulp bundle` | Make the entire bundle with Gulp (compressed and uncompreed version)
-`gulp watch` | Watch when the lib files change
+`npm run build` | run `$ wepback and babel` task
+`npm test` | lints files
##Submitting a Pull request
-1. Create your feature branch: git checkout -b my-new-feature
-1. Commit your changes: git commit -m 'Add some feature'
-1. Push to the branch: git push origin my-new-feature
-1. Make sure that all bundles are passing in [TravisCI](https://travis-ci.org/pedronauck/react-video)
-1. Submit a pull request :D
+1. Create your feature branch: git checkout -b feature/my-new-feature (or if you have a fix create your fix branch: git checkout -b fix/fix-that-thingy)
+2. Commit your changes: git commit -m 'Add some feature'
+3. Push to your remote fork branch: git push origin
-A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an `<iframe>` is rendered from browser, it blocks its parse because it isn't a [non-blocking script](http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/). This isn't so good to your user, no?. With this react component, the `<iframe>` just will be loaded when the user click on play.
-
-##Install
-
-Installing this component is very easy and it has just one dependency: [React](http://facebook.github.io/react/downloads.html). So, you have a lot of options to do that:
-
-- Using NPM *~the quickest way~*
-```bash
- $ npm install --save react-video
-```
-
-- Using Bower
-```bash
- $ bower install --save react-video
-```
-
-- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v1.5.3.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`.
-Using the component is simpler than installing. See an example with [browserify](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/) to bundle your script:
-
```javascript
-var Video =require('react-video');
-
-// Video from Youtube
-React.render(
-<Video from='youtube' videoId={videoId} />,
- $mountNode
- );
+var Vimeo =require('react-vimeo');
-// Video from Vimeo
React.render(
-<Video from='vimeo'videoId={videoId} />,
+<Vimeo videoId={videoId} />,
$mountNode
);
```
-The property `videoId` is optional, so you can use it or not. If you don't pass the property, the component will select your type of video based on your id.
-
-```javascript
-React.render(
-<Video videoId={videoId} />
-document.querySelector('#your-div')
- );
-```
-
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) {
+functiononError(err) {
console.log(err);
};
React.render(
-<Video onError={_onError} videoId={videoId} />
+<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
-/** @jsx React.DOM */
-
-var Video = ReactVideo;
-```
+If you decide to use just Javascript without any module loader, you can get the global variable `window.ReactVimeo`*(or just `ReactVimeo`)*:
##Behind the Scene
@@ -83,12 +35,12 @@ There are some things that you should know about the component. The first one is
So, the semantic HTML structure will be something like this:
```html
- <divclass='video'>
- <divclass='video-loading'>
+ <divclass='vimeo'>
+ <divclass='vimeo-loading'>
<svg>...</svg>
</div>
- <divclass='video-image'>
- <buttontype='button'class='video-play-button'>
+ <divclass='vimeo-image'>
+ <buttontype='button'class='vimeo-play-button'>
<svg>...</svg>
</button>
</div>
@@ -108,14 +60,11 @@ For more details, check out the API below.
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
-
-Anyone can help make this project better - check out the [Contributing guide](CONTRIBUTING.md)!
+videoId | `String` | none | yes | The video ID
+onError | `Function` | noop | no | Callback function if the video can't be loaded
BerkeleyTrue
committed
0 comments on commit
8bc9141