├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── dist ├── react-video.css ├── react-video.js ├── react-video.min.css └── react-video.min.js ├── docs ├── css │ ├── github.css │ ├── react-video.min.css │ └── style.css ├── images │ ├── btn-vimeo.png │ ├── btn-youtube.png │ └── cover.png ├── index.html └── js │ ├── app.js │ ├── highlight.pack.js │ └── react-video.min.js ├── example └── index.html ├── gulpfile.js ├── lib ├── components │ ├── play-button.jsx │ └── spinner.jsx ├── react-video.jsx ├── react-video.scss └── react-video.styl ├── package.json ├── utils ├── ajax.js ├── banner.js ├── classSet.js └── jsx-preprocessor.js └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = spaces 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | *.log 3 | /node_modules 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | gulpfile.js 3 | .editorconfig 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Video 2 | 3 | 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. 4 | 5 | Please, if you see anything wrong you can fix/improve it :ghost: 6 | 7 | ## Installing the project 8 | 9 | 1. Fork this project on github 10 | 1. Clone this project on your local 11 | 1. Then, you need to install `node` and `npm` to run the mainly packages. 12 | 1. After installed `node` and `npm`, run this script: 13 | 14 | ```bash 15 | $ npm install 16 | ``` 17 | 18 | That's it! You're done. 19 | 20 | ## How to work 21 | 22 | We are using a bunch of things to put all togethe and make the work easy. 23 | 24 | Dependency | Description 25 | ---------- | ----------- 26 | [NPM](http://npmjs.org) | Node package manager 27 | [Gulp](http://gulpjs.com/) | Run some tasks (bundle, server, etc) 28 | [BrowserSync](http://www.browsersync.io/) | Create a `localhost` server with livereload 29 | [Webpack](http://www.browsersync.io/) | Generated a UMD bundled version 30 | [Jest](http://facebook.github.io/jest/) | Run the tests 31 | 32 | So, have some scripts that you need to know to run the project locally. It's just fews, but it's very important. 33 | 34 | Command | Description 35 | ------- | ----------- 36 | `npm run bundle` | run `$ gulp bundle` task 37 | `npm start` | Run `$ gulp default` task 38 | `npm test` | Run all tests with Jest 39 | `gulp` | Default task that runs `gulp webpack`, `gulp server` and `gulp watch` 40 | `gulp webpack` | Run the Webpack bundle 41 | `gulp webpack -p` | Run the Webpack bundle minified 42 | `gulp css` | Compile `.styl` files 43 | `gulp css -p` | Compile `.styl` files in a minified version 44 | `gulp server` | Run the BrowserSync server 45 | `gulp bundle` | Make the entire bundle with Gulp (compressed and uncompreed version) 46 | `gulp watch` | Watch when the lib files change 47 | 48 | ## Submitting a Pull request 49 | 50 | 1. Create your feature branch: git checkout -b my-new-feature 51 | 1. Commit your changes: git commit -m 'Add some feature' 52 | 1. Push to the branch: git push origin my-new-feature 53 | 1. Make sure that all bundles are passing in [TravisCI](https://travis-ci.org/pedronauck/react-video) 54 | 1. Submit a pull request :D 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | (The MIT License) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Video 2 | 3 | ![Git release](http://img.shields.io/github/release/pedronauck/react-video.svg?style=flat) ![Travis](http://img.shields.io/travis/pedronauck/react-video.svg?style=flat) ![license](http://img.shields.io/npm/l/react-video.svg?style=flat) 4 | 5 | ![](http://f.cl.ly/items/440F3Y0w1l293g3e3g3N/cover.png) 6 | 7 | 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 ` 97 | 98 | 99 | ``` 100 | 101 | This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a [real functional example](/example) that you can follow. 102 | 103 | For more details, check out the API below. 104 | 105 | ## Component API 106 | 107 | `