From f36852a218b2a7e2ddbde48486fcdc0315cc6aed Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Mon, 20 Oct 2014 15:44:32 -0200
Subject: [PATCH] add first initial structure

---
 .editorconfig             | 13 ++++++++
 .gitignore                |  3 ++
 .npmignore                |  3 ++
 .travis.yml               |  3 ++
 CONTRIBUTING.md           | 54 +++++++++++++++++++++++++++++++
 LICENSE                   |  7 ++++
 README.md                 | 82 +++++++++++++++++++++++++++++++++++++++++++++++
 bower.json                | 32 ++++++++++++++++++
 gulpfile.js               | 76 +++++++++++++++++++++++++++++++++++++++++++
 package.json              | 69 +++++++++++++++++++++++++++++++++++++++
 utils/banner.js           | 13 ++++++++
 utils/classSet.js         | 13 ++++++++
 utils/jsx-preprocessor.js | 12 +++++++
 webpack.config.js         | 45 ++++++++++++++++++++++++++
 14 files changed, 425 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .gitignore
 create mode 100644 .npmignore
 create mode 100644 .travis.yml
 create mode 100644 CONTRIBUTING.md
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 bower.json
 create mode 100644 gulpfile.js
 create mode 100644 package.json
 create mode 100644 utils/banner.js
 create mode 100644 utils/classSet.js
 create mode 100644 utils/jsx-preprocessor.js
 create mode 100644 webpack.config.js

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..4601560
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = spaces
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..62d5da0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+*.DS_Store
+*.log
+/node_modules
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..446b887
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,3 @@
+example
+gulpfile.js
+.editorconfig
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..35048b6
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+- '0.10'
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..97a44cf
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,54 @@
+# Contributing to React Video
+
+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.
+
+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. Then, you need to install `node` and `npm` to run the mainly packages.
+1. After installed `node` and `npm`, run this script:
+
+```bash
+$ npm install
+```
+
+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.
+
+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
+
+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
+
+## 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
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..5078b43
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,7 @@
+(The MIT License)
+
+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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+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.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..eb8eea2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,82 @@
+# React Video
+
+![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)
+
+[![NPM](https://nodei.co/npm/react-video.png)](https://nodei.co/npm/react-video/)
+
+React `<Video />` component to load video from Vimeo or Youtube across any device. Inspired by [PrettyEmbed.js](https://github.com/mike-zarandona/PrettyEmbed.js)
+
+## 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-youtube
+```
+
+- Using Bower
+```bash
+  $ bower install --save react-youtube
+```
+
+- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v0.0.1.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`.
+
+Then you're done! :smile_cat:
+
+## Usage
+
+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
+// browserify example here
+```
+
+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;
+  var App = React.createClass({
+    render: function() {
+      ...
+    }
+  });
+```
+
+## Behind the Scene
+
+There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.
+
+So, the semantic HTML structure will be something like this:
+
+```html
+  <!-- showing semantic structure -->
+```
+
+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.
+
+The other thing that I have to share with you is that the component has some properties that you can use. Example:
+
+#### TODO: Talking about component default properties
+
+For more details, check out the API below.
+
+## Component API
+
+`<Video>` component:
+
+Property | Type | Default | Required | Description
+-------- | ---- | ------- | -------- |-----------
+propery | `Type` | 1 | no | Some description
+
+## Contributing
+
+Anyone can help make this project better - check out the [Contributing guide](CONTRIBUTING.md)!
+
+## License
+
+See the [License](LICENSE) file.
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..73f9035
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,32 @@
+{
+  "name": "react-video",
+  "version": "0.0.1",
+  "description": "React component to load video from Vimeo or Youtube across any device",
+  "homepage": "https://github.com/pedronauck/react-video",
+  "authors": [
+    "Pedro Nauck <pedronauck@gmail.com> (https://github.com/pedronauck)"
+  ],
+  "main": "dist/react-video.js",
+  "moduleType": [
+    "amd",
+    "globals",
+    "node"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "react-video",
+    "video",
+    "youtube",
+    "video",
+    "player"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..58ba3da
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,76 @@
+'use strict';
+
+var gulp = require('gulp'),
+    gutil = require('gulp-util'),
+    shell = require('gulp-shell'),
+    stylus = require('gulp-stylus'),
+    header = require('gulp-header'),
+    rename = require('gulp-rename'),
+    minifyCSS = require('gulp-minify-css'),
+    browserSync = require('browser-sync'),
+    argv = require('yargs').argv,
+    webpack = require('webpack'),
+    webpackConfig = require('./webpack.config.js'),
+    nib = require('nib');
+
+gulp.task('webpack', function(callback) {
+  var jsFilename = webpackConfig.output.filename;
+
+  if (argv.production || argv.p) {
+    webpackConfig.output.filename = gutil.replaceExtension(jsFilename, '.min.js');
+    webpackConfig.plugins = webpackConfig.plugins.concat(
+      new webpack.DefinePlugin({
+        'process.env': { 'NODE_ENV': JSON.stringify('production') }
+      }),
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.UglifyJsPlugin()
+    );
+  }
+
+  webpack(webpackConfig).run(function(err, stats) {
+    if (err) {
+      throw new gutil.PluginError('webpack', err);
+    }
+
+    gutil.log('[webpack]', stats.toString({ colors: true }));
+    callback();
+  });
+});
+
+gulp.task('css', function () {
+  if (argv.production || argv.p) {
+    return gulp.src('./dist/react-video.css')
+      .pipe(minifyCSS())
+      .pipe(rename({ suffix: '.min'}))
+      .pipe(header(require('./utils/banner')))
+      .pipe(gulp.dest('./dist'));
+  }
+  else {
+    return gulp.src('./lib/*.styl')
+      .pipe(stylus({ use: [nib()], errors: true }))
+      .pipe(header(require('./utils/banner')))
+      .pipe(gulp.dest('./dist'));
+  }
+});
+
+gulp.task('server', function() {
+  browserSync({
+    server: {
+      baseDir: ['example', 'dist']
+    }
+  });
+});
+
+gulp.task('watch', function() {
+  gulp.watch('./lib/**/*.jsx', ['webpack', browserSync.reload]);
+  gulp.watch('./lib/*.styl', ['css', browserSync.reload]);
+});
+
+gulp.task('bundle', shell.task([
+  'gulp webpack',
+  'gulp webpack -p',
+  'gulp css',
+  'gulp css -p'
+]));
+
+gulp.task('default', ['webpack', 'server', 'watch']);
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0376024
--- /dev/null
+++ b/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "react-video",
+  "version": "0.0.1",
+  "description": "React component to load video from Vimeo or Youtube across any device",
+  "author": {
+    "name": "Pedro Nauck",
+    "email": "pedronauck@gmail.com",
+    "url": "https://github.com/pedronauck"
+  },
+  "bugs": {
+    "url": "https://github.com/pedronauck/react-video/issues"
+  },
+  "homepage": "https://github.com/pedronauck/react-video",
+  "license": "MIT",
+  "main": "dist/react-video.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/pedronauck/react-video"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "react-video",
+    "video",
+    "youtube",
+    "video",
+    "player"
+  ],
+  "scripts": {
+    "bundle": "gulp bundle",
+    "start": "gulp",
+    "test": "jest"
+  },
+  "jest": {
+    "scriptPreprocessor": "./utils/jsx-preprocessor.js",
+    "unmockedModulePathPatterns": [
+      "./node_modules/react"
+    ],
+    "testFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "json"
+    ]
+  },
+  "dependencies": {
+    "react": "^0.11.2"
+  },
+  "devDependencies": {
+    "browser-sync": "^1.5.2",
+    "gulp": "^3.8.6",
+    "gulp-header": "^1.2.1",
+    "gulp-minify-css": "^0.3.11",
+    "gulp-rename": "^1.2.0",
+    "gulp-shell": "^0.2.10",
+    "gulp-stylus": "^1.3.3",
+    "gulp-util": "^3.0.1",
+    "jest-cli": "^0.1.18",
+    "jsx-loader": "^0.11.2",
+    "lodash": "^2.4.1",
+    "nib": "^1.0.4",
+    "react-tools": "^0.11.2",
+    "webpack": "^1.4.4",
+    "yargs": "^1.3.2"
+  }
+}
diff --git a/utils/banner.js b/utils/banner.js
new file mode 100644
index 0000000..d91c163
--- /dev/null
+++ b/utils/banner.js
@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = require('lodash').template([
+  '/*',
+  ' * React Video - <%= pkg.description %>',
+  ' * @version v<%= pkg.version %>',
+  ' * @link <%= pkg.homepage %>',
+  ' * @license <%= pkg.license %>',
+  ' * @author <%= pkg.author.name %> (<%= pkg.author.url %>)',
+  '*/\n',
+].join('\n'), {
+  pkg: require('../package.json')
+});
diff --git a/utils/classSet.js b/utils/classSet.js
new file mode 100644
index 0000000..1d61afa
--- /dev/null
+++ b/utils/classSet.js
@@ -0,0 +1,13 @@
+/**
+ * Produces the same result as React.addons.classSet
+ * @param  {object} classes
+ * @return {string}
+ *
+ * @author Ciro S. Costa <https://github.com/cirocosta>
+ */
+
+module.exports = (classes) => {
+  return typeof classes !== 'object' ?
+    Array.prototype.join.call(arguments, ' ') :
+    Object.keys(classes).filter((className) => classes[className]).join(' ');
+};
diff --git a/utils/jsx-preprocessor.js b/utils/jsx-preprocessor.js
new file mode 100644
index 0000000..2b5a9c4
--- /dev/null
+++ b/utils/jsx-preprocessor.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var ReactTools = require('react-tools');
+
+module.exports = {
+  process: function (src, path) {
+    if (!path.match(/\.jsx$/))
+      return src;
+
+    return ReactTools.transform(src);
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..b1e0177
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,45 @@
+'use strict';
+
+var _ = require('lodash');
+var webpack = require('webpack');
+var banner = require('./utils/banner');
+var LIB_NAME = 'react-video';
+var GLOBAL_VAR = 'ReactVideo';
+
+module.exports = {
+  entry: './lib/' + LIB_NAME + '.jsx',
+  output: {
+    path: __dirname + '/dist',
+    filename: LIB_NAME + '.js',
+    libraryTarget: 'umd',
+    library: GLOBAL_VAR
+  },
+  externals: {
+    react: {
+      root: 'React',
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react'
+    }
+  },
+  module: {
+    loaders: [{
+      test: /\.(js|jsx)$/,
+      loader: 'jsx-loader?harmony'
+    }, {
+      test: /\.(js|jsx)$/,
+      loader: 'jsx-loader?insertPragma=React.DOM'
+    }]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+      }
+    }),
+    new webpack.BannerPlugin(banner, { raw: true, entryOnly: true })
+  ]
+};
