Improved development and deployment process

.babelrc

@@ -0,0 +1,4 @@
+{
+	"presets": ["es2015", "react"],
+    "plugins": ["transform-object-rest-spread"]
+}

.editorconfig

@@ -13,7 +13,7 @@ trim_trailing_whitespace = true
 [*.md]
 trim_trailing_whitespace = false
 
-[{package.json}]
+[{package.json,.travis.yml}]
 # The indent size used in the `package.json` file cannot be changed
 # https://github.com/npm/npm/pull/3180#issuecomment-16336516
 indent_size = 2

.eslintignore

@@ -1,2 +1,2 @@
+node_modules
 dist
-**/*.json

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "commonjs": true,
+        "es6": true,
+        "jest": true,
+        "jasmine": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error"
+    }
+}

.gitignore

@@ -1,5 +1,4 @@
-.DS_Store
 node_modules
-.grunt
-demo/dist
-npm-debug.log
+npm-debug.log
+.DS_Store
+dist

.nvmrc

@@ -0,0 +1 @@
+6

.travis.yml

@@ -0,0 +1,20 @@
+language: node_js
+script:
+  - npm run install:demo
+  - npm run build:demo
+  - npm run lint
+  - npm test
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: AuzrPiUT3uzn5xbGNEQyKp3OZUtleFXM7dHmucoqDt3idfZxbxIaJ1R1Gw5NYMocBFQ3NC3SgbyIxDM9u7tbI4W3qXwYZWgF6nb10PAmPyPbGp+gZAr/X6a++c8BSDyqQINp5iHS10oL6tbWMxmCQsXweGySMyprxW2rccDvXob6eCAK6TK2ZJBfSdanAUh57FxIkSylFFnLt19n0C+qHHdEsLMSfquDgVomDMi/6EEskdeD9vxh9XpEog/UWp8uYdY9D5FslNB9AgDDoHHd3mhei9EhXinGtZiMTMB1RPoCKfDwd+iBuvu8LeTRi81GTXHzqLqBs/IIsM31Cn0CcKxdyktuaRmShtueCx0eJ/qWZ5Rq5ZCGEkMC7dG73FbC7IqLLhF/eOb8PNq1gWjXt8OOXrlJpyc4WCyeF9Z3NARPHCDaJcpmXhHb/ML2NnfPN9AGpMBVq1i50g32q9pFFnlU7w7FruhFMiVIuaStaF/6nxMLcV+alasD5zUiukdktnNGROgvj0yFFCb6dkXyhsVS3kqAdr++arNv1viIGWOxW1Wi+hbLyzc8ySbR/XX0Vngo2VUNGy7rwkwjC9Ui612JF7fbX/k5D9+MYOiqwHDjvQD/a4PILfgOUFJ3bpLUMdijD9eK4s+InoNM89GVY+HjCukAafC3fnUMIPPK6Zg=
+  skip_cleanup: true
+  on:
+    tags: true
+    repo: mderrick/react-html5video
+after_deploy:
+  - npm run deploy:demo
+env:
+  global:
+    - secure: 0vVutNGKCFrTr0XOx06DEhoSuVBb+tkSo6EJUKswiwbyEHA3Na5uJZHv1fi2WB48dKkH1eyNOdiKGhVUt1v2Z8Vsb3FskUw17X/TU3iaKTWsZleuH1UCJJQCCvxogXOthz/nV5ITJ9X+S87ybErRq24aSEgs+ibN44EC+Glxzs7kbsawtPBLA7rzTFRyOWRa8441xhMOE4UUq6GzG9fQ4+hlQiLwi2xnOqSQsPRdLP9cV65Kz9FC2GsJ3GUBFtWu8Ub+GLWl7f7hvXonU/8yF+jueZyRq8cWSQRBTGF4CCzFvGTpVy5kmGvMxdSaDyvhu8hih3iuGVONoRR2cYihdyUFckvLvazVBSbGVyLDfuGLDhqilHsw+IE/e1AbqjkF75JKnKBnHWBZU7plPMadkI3HSEv/uJtyB0xdDfiUuXp0/ecKiDQNkn7RroRfewQ8WWIntA7K2u5KJzXoV6qiDB2ifMxE8Ms982okH+QVkbpBKHWpIsndq2NyN0aXW1kor2ZmLLN0rgWF0cGuE2BrswdKs2yXIFHAu4MoHqb/JuNzEuMkgAX1J+0Q6ah3Oto9pY0H1qj8eM55QKwGddERQnrFQCK5B05P2rGuUZ0OC/V490YJxJ/vLjtqZxnWFZURG6IRpIUTM1wE5muWqzgGsEVqW0p8Lzq8hDs7c/waku8=

README.md

@@ -2,6 +2,7 @@
 
 A customizeable HTML5 Video that uses the familiar HTML5 video markup but with custom and configurable controls with i18n and a11y.
 
+[![Build Status](https://travis-ci.org/mderrick/react-html5video.svg?branch=master)](https://travis-ci.org/mderrick/react-html5video)
 [![npm version](https://img.shields.io/npm/v/react-html5video.svg?style=flat-square)](https://www.npmjs.com/package/react-html5video)
 [![npm downloads](https://img.shields.io/npm/dm/react-html5video.svg?style=flat-square)](https://www.npmjs.com/package/react-html5video)
 
@@ -11,35 +12,11 @@ View the [demo](http://mderrick.github.io/react-html5video/).
 
 ## Install
 
-`npm install react-html5video --save` or `bower install react-html5video --save`
-
-Include `dist/ReactHtml5Video.css` if you do not want to build your own CSS. Alternatively require `src/assets/video.css` if you want to compile the CSS yourself with [css-loaders](https://github.com/webpack/css-loader) and [url-loaders](https://github.com/webpack/url-loader) etc. See the demo [Webpack config](https://github.com/mderrick/react-html5video/blob/master/demo/webpack.config.js) as an example.
+`npm install react-html5video --save`
 
 ### Peer Dependencies
 
-This component uses ES2015 and needs to be transpiled using something like [babel-loader](https://github.com/babel/babel-loader). You will also need to either [polyfill](https://babeljs.io/docs/usage/polyfill/) or use [babel-runtime](https://www.npmjs.com/package/babel-runtime). It depends on:
-- `react@>=0.14.x`
-- `lodash.throttle@latest`.
-
-### UMD
-
-Alternatively if using the UMD module it is already transpiled to ES5 and `lodash.throttle` is included. You can find this build in the `dist` directory:
-
-```js
-// Includes lodash.throttle and is transpiled already. No ES2015 polyfill is required.
-var Video = require('react-html5video/dist/ReactHtml5Video');  
-```
-
-```js
-// Exports to this global
-var Video = window.ReactHtml5Video.default;
-```
-
-```js
-// Requires es6 transpiling, an es6 polyfill/babel-runtime and all peer dependencies installed
-import { default as Video, Controls, Play, Mute, Seek, Fullscreen, Time, Overlay } from 'react-html5video';
-```
-
+- `react@>=0.15.x`
 
 ## Usage
 
@@ -49,6 +26,7 @@ Use normal HTML5 `<video>` markup with all the standard [html attributes](https:
 
 ```js
 import Video from 'react-html5video';
+import 'react-html5video/dist/styles.css';
 render() {
     return (
         <Video controls autoPlay loop muted
@@ -64,10 +42,12 @@ render() {
 
 ### Advanced Usage
 
- You can configure, customize and modify the controls by adding, removing and shuffling them as you desire. You can create your very own custom children components and controls that can interact with the video. All children components will receive [these props](#props-and-methods). Obviously you can still call methods and set properties on the HTML5 DOM element directly if you have access to it with `refs`:
+You can configure, customize and modify the controls by adding, removing and shuffling them as you desire. You can create your very own custom children components and controls that can interact with the video. All children components will receive [these props](#props-and-methods). Obviously you can still call methods and set properties on the HTML5 DOM element directly if you have access to it with `refs`:
 
 ```js
 import { default as Video, Controls, Play, Mute, Seek, Fullscreen, Time, Overlay } from 'react-html5video';
+import 'react-html5video/dist/styles.css';
+
 render() {
     return (
         <Video controls autoPlay loop muted poster="http://sourceposter.jpg">
@@ -141,17 +121,14 @@ All children components receive the following methods via props:
 
 ### Dev Setup
 
-To run a server with hot module replacement:
+To run a development server with HMR:
 
 ```bash
-    $ npm install
-    $ cd demo
-    $ npm install
-    $ npm run dev-server
+    $ npm i
+    $ npm run i:demo
+    $ npm start
 ```
 
-Open [http://localhost:8082](http://localhost:8082). You can now modify the files in both `src` and `demo/src`.
-
 ### Issues
 
 Feel free to raise and solve any existing issues as desired. Where possible please do try and replicate any bugs you may have using the [react-html5video jsfiddle](https://jsfiddle.net/mderrick/7s9a311q/1/) and include them in your ticket.

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

browserslist

@@ -0,0 +1,3 @@
+> 1%
+Last 5 versions
+not ie < 9

demo/.babelrc

@@ -0,0 +1,4 @@
+{
+	"extends": "./../.babelrc",
+	"plugins": ["react-hot-loader/babel"]
+}

demo/generateConfig.js

@@ -0,0 +1,90 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+
+const pkg = require('./../package.json');
+const srcPath = path.resolve(__dirname, 'src');
+const distPath = path.resolve(__dirname, 'dist');
+
+module.exports = ({ optimize, extractCss, hot, publicPath = '/' }) => {
+    const cssString = 'css?modules&importLoaders=1&localIdentName=[hash:base64:5]&-autoprefixer!postcss';
+    let config = {
+        entry: [
+            path.resolve(srcPath, 'entry.js')
+        ],
+        output: {
+            path: distPath,
+            filename: '[name].js',
+            publicPath: publicPath
+        },
+        resolve: {
+            extensions: ['.js', '.json', '.jsx', '']
+        },
+        module: {
+            loaders: [{
+                test: /\.(js|jsx)$/,
+                include: srcPath,
+                loader: 'babel',
+                query: {
+                    cacheDirectory: true
+                }
+            }, {
+                test: /\.json$/,
+                loader: 'json'
+            }, {
+                test: /\.css$/,
+                include: srcPath,
+                loader: extractCss
+                    ? ExtractTextPlugin.extract('style', cssString)
+                    : 'style!' + cssString
+            }, {
+                test: /\.css$/,
+                include: new RegExp(pkg.name + '/dist/'),
+                loader: extractCss
+                    ? ExtractTextPlugin.extract('style', 'css')
+                    : 'style!css'
+            }, {
+                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|svg)(\?.*)?$/,
+                loader: 'file'
+            }]
+        },
+        plugins: [
+            new HtmlWebpackPlugin({
+                template: path.resolve(srcPath, 'index.html')
+            }),
+            new CaseSensitivePathsPlugin()
+        ]
+    };
+
+    if (hot) {
+        config.entry.unshift(
+            'webpack-hot-middleware/client',
+            'react-hot-loader/patch'
+        );
+        config.plugins.unshift(
+            new webpack.optimize.OccurenceOrderPlugin(),
+            new webpack.HotModuleReplacementPlugin(),
+            new webpack.NoErrorsPlugin()
+        );
+    }
+
+    if (extractCss) {
+        config.plugins.push(new ExtractTextPlugin('[name].css'));
+    }
+
+    if (optimize) {
+        config.plugins.push(new webpack.optimize.UglifyJsPlugin({
+            minimize: true,
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            }
+        }));
+    }
+
+    return config;
+};

demo/package.json

@@ -1,32 +1,8 @@
 {
-  "name": "demo",
-  "version": "1.0.0",
-  "description": "",
-  "main": "entry.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev-server": "node server.js"
-  },
-  "author": "",
-  "license": "ISC",
+  "name": "react-html5video-demo",
   "dependencies": {
-    "css-reset": "git+https://github.com/60frames/css-reset.git",
-    "lodash.throttle": "^3.0.4",
-    "react": "^15.2.0",
-    "react-dom": "^15.2.0"
-  },
-  "devDependencies": {
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
-    "babel-runtime": "^6.3.13",
-    "coding-standards": "git+ssh://[email protected]/60frames/coding-standards.git#1.0.5",
-    "css-loader": "^0.21.0",
-    "eslint": "^1.8.0",
-    "eslint-plugin-react": "^3.6.3",
-    "file-loader": "^0.8.4",
-    "react-hot-loader": "^1.3.0",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "react-html5video": "file:../",
+    "react": "^15.4.0",
+    "react-dom": "^15.4.0"
   }
 }