├── .npmignore
├── .travis.yml
├── .babelrc
├── .gitignore
├── src
    ├── img
    │   ├── poster.png
    │   ├── video
    │   │   └── small.mp4
    │   └── css
    │   │   ├── font
    │   │       ├── crop-video-set.eot
    │   │       ├── crop-video-set.ttf
    │   │       ├── crop-video-set.woff
    │   │       ├── crop-video-set.woff2
    │   │       └── crop-video-set.svg
    │   │   └── custom.css
    ├── video
    │   └── small.mp4
    ├── css
    │   ├── font
    │   │   ├── crop-video-set.eot
    │   │   ├── crop-video-set.ttf
    │   │   ├── crop-video-set.woff
    │   │   ├── crop-video-set.woff2
    │   │   └── crop-video-set.svg
    │   └── custom.css
    ├── reducers
    │   ├── index.js
    │   └── crops.js
    ├── actions
    │   └── actionCreators.js
    ├── store.js
    ├── components
    │   ├── Spinner.js
    │   ├── Icon.js
    │   ├── Controls.js
    │   ├── ImageBtn.js
    │   ├── Crop.js
    │   ├── Play.js
    │   ├── Time.js
    │   ├── Overlay.js
    │   ├── Seek.js
    │   ├── ProgressBar.js
    │   ├── CropMarker.js
    │   └── Video.js
    └── RdxVideo.js
├── img
    └── crop-preview.png
├── index.html
├── server.js
├── webpack.config.js
├── package.json
├── README.md
└── LICENSE.txt


/.npmignore:
--------------------------------------------------------------------------------
1 | src


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6"
4 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-0", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | build/
3 | playground/
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/src/img/poster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/img/poster.png


--------------------------------------------------------------------------------
/src/video/small.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/video/small.mp4


--------------------------------------------------------------------------------
/img/crop-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/img/crop-preview.png


--------------------------------------------------------------------------------
/src/img/video/small.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/img/video/small.mp4


--------------------------------------------------------------------------------
/src/css/font/crop-video-set.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/css/font/crop-video-set.eot


--------------------------------------------------------------------------------
/src/css/font/crop-video-set.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/css/font/crop-video-set.ttf


--------------------------------------------------------------------------------
/src/css/font/crop-video-set.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/css/font/crop-video-set.woff


--------------------------------------------------------------------------------
/src/css/font/crop-video-set.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/css/font/crop-video-set.woff2


--------------------------------------------------------------------------------
/src/img/css/font/crop-video-set.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/img/css/font/crop-video-set.eot


--------------------------------------------------------------------------------
/src/img/css/font/crop-video-set.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/img/css/font/crop-video-set.ttf


--------------------------------------------------------------------------------
/src/img/css/font/crop-video-set.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/img/css/font/crop-video-set.woff


--------------------------------------------------------------------------------
/src/img/css/font/crop-video-set.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evgenity/react-html5-video-editor/HEAD/src/img/css/font/crop-video-set.woff2


--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | 
3 | import crops from './crops';
4 | 
5 | const rootReducer = combineReducers({crops,});
6 | 
7 | export default rootReducer;
8 | 


--------------------------------------------------------------------------------
/src/reducers/crops.js:
--------------------------------------------------------------------------------
 1 | function crops(state = [], action) {
 2 |   switch(action.type) {
 3 |     case 'CROPS_CHANGED' :
 4 |       return [action.start ? action.start : state[0], action.end ? action.end : state[1]];
 5 |     case 'IMG_INSERT' :
 6 |     console.log(state, action)
 7 |     	state.push(action.position);
 8 |       return state	
 9 |     default:
10 |       return state;
11 |   }
12 | }
13 | 
14 | export default crops;
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>React HTML5 video editor</title>
 5 |     <link rel="stylesheet" type="text/css" href="src/css/custom.css">
 6 |   </head>
 7 |   <body>
 8 |     <div id='root'></div>
 9 |     <script src="/static/react-html5-video-editor.js"></script>
10 |     <script type="text/javascript">
11 |     	ReactHtml5VideoEditor.render_editor();
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var WebpackDevServer = require('webpack-dev-server');
 3 | var config = require('./webpack.config');
 4 | 
 5 | new WebpackDevServer(webpack(config), {
 6 |   publicPath: config.output.publicPath,
 7 |   hot: true,
 8 |   historyApiFallback: true
 9 | }).listen(3000, 'localhost', function (err, result) {
10 |   if (err) {
11 |     return console.log(err);
12 |   }
13 | 
14 |   console.log('Listening at http://localhost:3000/');
15 | });
16 | 


--------------------------------------------------------------------------------
/src/actions/actionCreators.js:
--------------------------------------------------------------------------------
 1 | // increment
 2 | export function increment(index) {
 3 |   return {
 4 |     type: 'INCREMENT_LIKES',
 5 |     index
 6 |   }
 7 | }
 8 | 
 9 | // add comment
10 | export function addComment(postId, author, comment) {
11 |   return {
12 |     type: 'ADD_COMMENT',
13 |     postId,
14 |     author,
15 |     comment
16 |   }
17 | }
18 | 
19 | // remove comment
20 | 
21 | export function removeComment(postId, i) {
22 |   return {
23 |     type: 'REMOVE_COMMENT',
24 |     i,
25 |     postId
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, compose } from 'redux';
 2 | 
 3 | import rootReducer from './reducers/index';
 4 | 
 5 | const defaultState = {
 6 | 	crops: [0, 100],
 7 | };
 8 | 
 9 | const store = createStore(rootReducer, defaultState, compose(
10 | 	window.devToolsExtension ? window.devToolsExtension() : f => f
11 | 	));
12 | 
13 | if(module.hot) {
14 | 	module.hot.accept('./reducers/',() => {
15 | 		const nextRootReducer = require('./reducers/index').default;
16 | 		store.replaceReducer(nextRootReducer);
17 | 	});
18 | }
19 | 
20 | export default store;
21 | 


--------------------------------------------------------------------------------
/src/components/Spinner.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var Spinner = React.createClass({
 4 | 
 5 |     render() {
 6 |         return (
 7 |             <div className="video-spinner">
 8 |                 <div className="video-spinner__rect1"></div>
 9 |                 <div className="video-spinner__rect2"></div>
10 |                 <div className="video-spinner__rect3"></div>
11 |                 <div className="video-spinner__rect4"></div>
12 |                 <div className="video-spinner__rect5"></div>
13 |             </div>
14 |         );
15 |     }
16 | 
17 | });
18 | 
19 | export default Spinner;


--------------------------------------------------------------------------------
/src/components/Icon.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var Icon = React.createClass({
 4 | 
 5 |     propTypes: {
 6 |         name: React.PropTypes.oneOf([
 7 |           'play-1',
 8 |           'volume-off',
 9 |           'volume-down',
10 |           'volume-up',
11 |           'resize-full',
12 |           'resize-small',
13 |           'pause-1',
14 |           'crop',
15 |           'crop-begin',
16 |           'crop-end',
17 |         ])
18 |     },
19 | 
20 |     render() {
21 |         return (
22 |             <span className={'video-icon video-icon--' + this.props.name}></span>
23 |         );
24 |     }
25 | 
26 | });
27 | 
28 | export default Icon;


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   devtool: 'eval',
 6 |   entry: [
 7 |     // 'webpack-dev-server/client?http://localhost:3000',
 8 |     // 'webpack/hot/only-dev-server',
 9 |     './src/RdxVideo'
10 |   ],
11 |   output: {
12 |     path: path.join(__dirname, 'dist'),
13 |     filename: 'react-html5-video-editor.js',
14 |     // libraryTarget: 'umd',
15 |     library: 'ReactHtml5VideoEditor',
16 |     publicPath: '/static/'
17 |   },
18 |   // plugins: [
19 |   //   new webpack.HotModuleReplacementPlugin()
20 |   // ],
21 |   module: {
22 |     loaders: [{
23 |       test: /\.js$/,
24 |       loaders: ['babel'],
25 |       include: path.join(__dirname, 'src')
26 |     }]
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/src/components/Controls.js:
--------------------------------------------------------------------------------
 1 | import {default as Time} from './Time'
 2 | import {default as Play} from './Play'
 3 | import {default as Seek} from './Seek'
 4 | 
 5 | 
 6 | var React = require('react');
 7 | 
 8 | var Controls = React.createClass({
 9 |     getInitialState: function() {
10 |       return {
11 |       };
12 |     },
13 |   
14 | 
15 |     render: function() {
16 |         var children = [
17 |               <Play />,
18 |               <Seek />,
19 |               <Time />,
20 |         ]
21 |         return (
22 |                 <div className="video-controls video__controls">
23 |                     {children.map((child, i) => {
24 |                         return React.cloneElement(child, {...this.props, key: i});
25 |                       })}
26 |                 </div>
27 |         );
28 |     }
29 | });
30 | 
31 | export default Controls;


--------------------------------------------------------------------------------
/src/RdxVideo.js:
--------------------------------------------------------------------------------
 1 | import { bindActionCreators } from 'redux';
 2 | import { connect } from 'react-redux';
 3 | import * as actionCreators from './actions/actionCreators';
 4 | import Video from './components/Video';
 5 | import Controls from './components/Controls';
 6 | import Overlay from './components/Overlay';
 7 | import store from './store'
 8 | 
 9 | 
10 | function mapStateToProps(state) {
11 |   return {
12 |   	crops: state.crops,
13 |   }
14 | }
15 | 
16 | const RdxVideo = connect(mapStateToProps)(Video);
17 | 
18 | var React = require('react');
19 | var ReactDOM = require('react-dom');
20 | 
21 | function render_editor(poster="src/img/poster.png", vid_path="src/video/small.mp4") {
22 | 	ReactDOM.render(
23 | 		<RdxVideo autoPlay loop muted poster={poster} store={store}>
24 | 			<Overlay />
25 | 			<Controls />
26 | 			<source src={vid_path} type="video/mp4" />
27 | 		</RdxVideo>
28 | 		,
29 | 		document.getElementById('root')
30 | 	);
31 | }
32 | 
33 | export {RdxVideo, Overlay, Controls, store, render_editor};


--------------------------------------------------------------------------------
/src/components/ImageBtn.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Icon from './Icon';
 3 | 
 4 | var ImageBtn = React.createClass({
 5 | 
 6 |     propTypes: {
 7 |         copyKeys: React.PropTypes.object,
 8 |         togglePlay: React.PropTypes.func,
 9 |         paused: React.PropTypes.bool
10 |     },
11 | 
12 |     /**
13 |      * As controls receive all props for extensibility, we do a quick
14 |      * check and make sure only the props we care about have changed.
15 |      * @param  {object} nextProps The next props from parent
16 |      * @return {boolean}          Whether we re-render or not
17 |      */
18 |     shouldComponentUpdate(nextProps) {
19 |         return this.props.paused !== nextProps.paused ||
20 |                this.props.togglePlay !== nextProps.togglePlay;
21 |     },
22 | 
23 |     render() {
24 |         return (
25 |             <button
26 |                 className="video-play video__control">
27 |                 <Icon name="pic" />
28 |             </button>
29 |         );
30 |     }
31 | });
32 | 
33 | export default ImageBtn;


--------------------------------------------------------------------------------
/src/components/Crop.js:
--------------------------------------------------------------------------------
 1 | import {default as Icon} from './Icon'
 2 | 
 3 | var React = require('react');
 4 | 
 5 | var Crop = React.createClass({
 6 | 
 7 |     propTypes: {
 8 |       isStart: React.PropTypes.bool,
 9 |       onClick: React.PropTypes.func,
10 |     },
11 | 
12 |     /**
13 |      * As controls receive all props for extensibility, we do a quick
14 |      * check and make sure only the props we care about have changed.
15 |      * @param  {object} nextProps The next props from parent
16 |      * @return {boolean}          Whether we re-render or not
17 |      */
18 |     shouldComponentUpdate(nextProps) {
19 |         return true;
20 |     },
21 | 
22 |     render() {
23 |         return (
24 |           <div className="video-crop video__control" >
25 |             <button
26 |                 className="video-crop__inner"
27 |                 onClick={()=>{this.props.onClick(this.props.isStart)}}
28 |                 aria-label="aria-label">
29 |                 <Icon name={this.props.isStart ? 'crop-begin' : 'crop-end'} />
30 |             </button>
31 |           </div>
32 |         );
33 |     }
34 | });
35 | 
36 | export default Crop;


--------------------------------------------------------------------------------
/src/components/Play.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Icon from './Icon';
 3 | 
 4 | var Play = React.createClass({
 5 | 
 6 |     propTypes: {
 7 |         copyKeys: React.PropTypes.object,
 8 |         togglePlay: React.PropTypes.func,
 9 |         paused: React.PropTypes.bool
10 |     },
11 | 
12 |     /**
13 |      * As controls receive all props for extensibility, we do a quick
14 |      * check and make sure only the props we care about have changed.
15 |      * @param  {object} nextProps The next props from parent
16 |      * @return {boolean}          Whether we re-render or not
17 |      */
18 |     shouldComponentUpdate(nextProps) {
19 |         return this.props.paused !== nextProps.paused ||
20 |                this.props.togglePlay !== nextProps.togglePlay;
21 |     },
22 | 
23 |     render() {
24 |         return (
25 |             <button
26 |                 className="video-play video__control"
27 |                 onClick={()=>{this.props.togglePlay()}}>
28 |                 {this.props.paused ? <Icon name="play-1" /> : <Icon name="pause-1" />}
29 |             </button>
30 |         );
31 |     }
32 | });
33 | 
34 | export default Play;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-html5-video-editor",
 3 |   "version": "1.2.0",
 4 |   "description": "React component for simple video effects online",
 5 |   "main": "./dist/react-html5-video-editor.js",
 6 |   "scripts": {
 7 |     "start": "node server.js",
 8 |     "lint": "eslint src",
 9 |     "build": "webpack",
10 |     "prepublish": "npm run build"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/evgenity/react-html5-video-editor.git"
15 |   },
16 |   "keywords": [
17 |     "video",
18 |     "editor",
19 |     "html5",
20 |     "crop",
21 |     "react",
22 |     "reactjs",
23 |     "boilerplate",
24 |     "hot",
25 |     "reload",
26 |     "hmr",
27 |     "live",
28 |     "edit",
29 |     "webpack"
30 |   ],
31 |   "author": "@evgenity_dev",
32 |   "license": "GNU GPLv3",
33 |   "bugs": {
34 |     "url": "https://github.com/evgenity/react-html5-video-editor/issues"
35 |   },
36 |   "homepage": "https://crop-video-online.com",
37 |   "devDependencies": {
38 |     "babel-core": "^6.0.20",
39 |     "babel-eslint": "^6.1.0",
40 |     "babel-loader": "^6.0.1",
41 |     "babel-preset-es2015": "^6.0.15",
42 |     "babel-preset-react": "^6.0.15",
43 |     "babel-preset-stage-0": "^6.0.15",
44 |     "eslint": "^2.13.1",
45 |     "eslint-plugin-react": "^5.2.2",
46 |     "react-hot-loader": "^1.3.0",
47 |     "webpack": "^1.12.2",
48 |     "webpack-dev-server": "^1.12.1"
49 |   },
50 |   "dependencies": {
51 |     "interact.js": "^1.2.6",
52 |     "react": "^15.1.0",
53 |     "react-dom": "^15.1.0",
54 |     "react-redux": "^4.4.5",
55 |     "redux": "^3.5.2"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/Time.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Icon from './Icon';
 3 | 
 4 | var Time = React.createClass({
 5 | 
 6 |     propTypes: {
 7 |         currentTime: React.PropTypes.number,
 8 |         duration: React.PropTypes.number
 9 |     },
10 | 
11 |     /**
12 |      * As controls receive all props for extensibility, we do a quick
13 |      * check and make sure only the props we care about have changed.
14 |      * @param  {object} nextProps The next props from parent
15 |      * @return {boolean}          Whether we re-render or not
16 |      */
17 |     shouldComponentUpdate(nextProps) {
18 |         return this.props.currentTime !== nextProps.currentTime ||
19 |                this.props.duration !== nextProps.duration;
20 |     },
21 | 
22 |     /**
23 |      * Formats time into a friendlier format
24 |      * @param  {number} seconds Time in seconds
25 |      * @return {string}         Timestamp in the format of HH:MM:SS
26 |      */
27 |     formatTime(seconds) {
28 |         var date = new Date(null);
29 |         seconds = isNaN(seconds) ? 0 : Math.floor(seconds);
30 |         date.setSeconds(seconds);
31 |         return date.toISOString().substr(11, 8);
32 |     },
33 | 
34 |     render() {
35 |         return (
36 |             <div className="video-time video__control">
37 |                 <span className="video-time__current">
38 |                     {this.formatTime(this.props.currentTime)}
39 |                 </span>
40 |                 /
41 |                 <span className="video-time__duration">
42 |                     {this.formatTime(this.props.duration)}
43 |                 </span>
44 |             </div>
45 |         );
46 |     }
47 | });
48 | 
49 | export default Time;
50 | 


--------------------------------------------------------------------------------
/src/components/Overlay.js:
--------------------------------------------------------------------------------
 1 | import {default as Icon} from './Icon'
 2 | import {default as Spinner} from './Spinner'
 3 | 
 4 | var React = require('react');
 5 | 
 6 | var Overlay = React.createClass({
 7 | 
 8 |     propTypes: {
 9 |         error: React.PropTypes.bool,
10 |         togglePlay: React.PropTypes.func,
11 |         paused: React.PropTypes.bool,
12 |         loading: React.PropTypes.bool
13 |     },
14 | 
15 |     renderContent() {
16 |         var content;
17 |         if (this.props.error) {
18 |             content = (
19 |                 <div className="video-overlay__error">
20 |                     <p className="video-overlay__error-text">{this.props.error}</p>
21 |                 </div>
22 |             );
23 |         } else if (this.props.loading) {
24 |             content = (
25 |                 <div className="video-overlay__loader">
26 |                     <Spinner />
27 |                 </div>
28 |             );
29 |         } else {
30 |             content = (
31 |                 <div>            
32 |                     <div className="video-overlay__pic" onClick={() => {if (!this.props.paused) {this.props.togglePlay();} else {this.props.store.dispatch({type: 'IMG_INSERT', position: this.props.percentagePlayed})}}}>
33 |                             {this.props.paused ? <Icon name="pic" onClick={() => {this.props.togglePlay();}} /> : ''}
34 |                     </div>
35 |                 </div>
36 |             );
37 |         }
38 |         return content;
39 |     },
40 | 
41 |     render() {
42 |         return (
43 |             <div className="video-overlay">
44 |                 {this.renderContent()}
45 |             </div>
46 |         );
47 |     }
48 | 
49 | });
50 | 
51 | export default Overlay;
52 | 


--------------------------------------------------------------------------------
/src/components/Seek.js:
--------------------------------------------------------------------------------
 1 | import {default as ProgressBar} from './ProgressBar'
 2 | import {default as CropMarker} from './CropMarker'
 3 | 
 4 | var React = require('react');
 5 | 
 6 | var Seek = React.createClass({
 7 | 
 8 |     propTypes: {
 9 |         seek: React.PropTypes.func,
10 |         percentageBuffered: React.PropTypes.number,
11 |         percentagePlayed: React.PropTypes.number,
12 |         duration: React.PropTypes.number,
13 |     },
14 | 
15 |     getInitialState() {
16 |         return {
17 |             focused: false
18 |         };
19 |     },
20 | 
21 |     shouldComponentUpdate(nextProps) {
22 |       return true;
23 |     },
24 | 
25 |     seek(e) {
26 |         this.props.seek(e.target.value * this.props.duration / 100);
27 |     },
28 | 
29 |     onFocus() {
30 |         this.setState({
31 |             focused: true
32 |         });
33 |     },
34 | 
35 |     render() {
36 |         console.log(this.props.crops)
37 |         return (
38 |             <div
39 |                 className={'video-seek video__control' + (this.state.focused
40 |                     ? ' video__control--focused' : '')}>
41 |                 <div className="video-seek__container">
42 |                     <div style={{
43 |                         width: this.props.percentageBuffered + '%'
44 |                     }} className="video-seek__buffer-bar">
45 |                     </div>
46 |                     <ProgressBar
47 |                         onFocus={this.onFocus}
48 |                         onChange={this.seek}
49 |                         progress={this.props.percentagePlayed} />
50 |                         {this.props.crops.map(function(e) {
51 |                                                     return <CropMarker position={e} />
52 |                                                 })}
53 |                 </div>
54 |             </div>
55 |         );
56 |     }
57 | });
58 | 
59 | export default Seek;


--------------------------------------------------------------------------------
/src/components/ProgressBar.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var ProgressBar = React.createClass({
 4 | 
 5 |     propTypes: {
 6 |         orientation: React.PropTypes.string,
 7 |         step: React.PropTypes.number,
 8 |         progress: React.PropTypes.number,
 9 |         onChange: React.PropTypes.func,
10 |         onFocus: React.PropTypes.func,
11 |         onBlur: React.PropTypes.func,
12 |     },
13 | 
14 |     shouldComponentUpdate(nextProps) {
15 |       return true;
16 |         return this.props.progress !== nextProps.progress;
17 |     },
18 | 
19 |     getInitialState() {
20 |       return {
21 |       };
22 |     },
23 | 
24 |     getDefaultProps() {
25 |         return {
26 |             orientation: 'horizontal',
27 |             step: 0.1,
28 |             progress: 0,
29 |             onChange: this.onChange,
30 |             onFocus: this.onFocus,
31 |             onBlur: this.onBlur,
32 |         };
33 |     },
34 | 
35 |     onChange(e) {
36 |         this.props.onChange(e);
37 |     },
38 | 
39 |     render() {
40 |         return (
41 |             <div id={'video-progress-bar'} className={'video-progress-bar ' + (this.props.orientation === 'horizontal'
42 |                 ? 'video-progress-bar--horizontal' : 'video-progress-bar--vertical')}>
43 |                 <div className="video-progress-bar__fill" style={{
44 |                     ['width']: this.props.progress + '%', //transition: width 1s ease-in-out;
45 |                 }} />
46 |                 <input className="video-progress-bar__input"
47 |                     onBlur={this.props.onBlur}
48 |                     onFocus={this.props.onFocus}
49 |                     ref="input"
50 |                     onChange={this.onChange}
51 |                     type="range"
52 |                     min="0"
53 |                     max="100"
54 |                     value={this.props.progress}
55 |                     step={this.props.step} />
56 |             </div>
57 |         );
58 |     }
59 | });
60 | 
61 | export default ProgressBar;
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-html5-video-editor
 2 | 
 3 | React / redux video element with a crop marker. Crop markers emit Redux actions when dragged.
 4 | 
 5 | [![npm version](https://img.shields.io/npm/v/react-html5-video-editor.svg?style=flat-square)](https://www.npmjs.com/package/react-html5-video-editor)
 6 | [![Build Status](https://travis-ci.org/evgenity/react-html5-video-editor.svg?branch=master)](https://travis-ci.org/evgenity/react-html5-video-editor)
 7 | [![Dependancies](https://david-dm.org/evgenity/react-html5-video-editor.svg)](https://david-dm.org/evgenity/react-html5-video-editor)
 8 | 
 9 | ![preview](img/crop-preview.png)
10 | <!--[demo](https://github.com/)-->
11 | 
12 | ## Features:
13 |  - simple & clean
14 |  - video crop
15 |  - effect composer
16 |  - numerous formats support
17 |  - customizable
18 |  
19 | Do not hesitate to post an issue to request a feature (seriously).
20 | 
21 | ## Roadmap
22 |  - enhanced video previews
23 |  - effect composer
24 |  - multiple tracks
25 | 
26 | ## Quickstart
27 | ### Install
28 | ```
29 | npm init
30 | npm install react-html5-video-editor --save
31 | ls node_modules/react-html5-video-editor/dist/react-html5-video-editor.js # include this in <script>-tag
32 | ```
33 | 
34 | ### Basic browser usage
35 | ```html
36 | <script type="text/javascript" src="js/react-html5-video-editor.js"></script>
37 | 
38 | <div id="root"></div>
39 | <script type="text/javascript">
40 |     ReactHtml5VideoEditor.render_editor('img/poster.png', 'video/small.mp4')
41 | </script>
42 | ```
43 | 
44 | ### React usage
45 | ```javascript
46 | import {RdxVideo, Overlay, Controls} from 'react-html5-video-editor'
47 | ReactDOM.render(
48 |   <RdxVideo autoPlay loop muted poster="src/img/poster.png" store={store}>
49 |     <Overlay />
50 |     <Controls />
51 |     <source src="src/video/small.mp4" type="video/mp4" />
52 |   </RdxVideo>
53 |   ,
54 |   document.getElementById('root')
55 | );
56 | ```
57 | 
58 | ### Configuration
59 | ```javascript
60 | RdxVideo.Props = {
61 | 	autoPlay: false,
62 | 	loop: false,
63 | 	controls: true,
64 | 	volume:	1.0,
65 | 	preload: "auto",
66 | 	cropEnabled: true;
67 | }
68 | ```
69 | 
70 | ## License
71 | Code released under [GNU GPLv3](https://github.com/evgenity/react-html5-video-editor/blob/master/LICENSE.txt)
72 | 


--------------------------------------------------------------------------------
/src/components/CropMarker.js:
--------------------------------------------------------------------------------
 1 | import interact from 'interact.js'
 2 | 
 3 | var React = require('react');
 4 | 
 5 | var CropMarker = React.createClass({
 6 |   propTypes: {
 7 |     position: React.PropTypes.number,
 8 |     isStart: React.PropTypes.bool,
 9 |   },
10 | 
11 |   getDefaultProps() {
12 |     return {
13 | 
14 |     };
15 |   },
16 | 
17 |   componentDidMount() {
18 |     function dragMoveListener (event) {
19 |       var target = event.target;
20 |       var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
21 |       var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
22 | 
23 |       target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
24 | 
25 |       target.setAttribute('data-x', x);
26 |       target.setAttribute('data-y', y);
27 |     }
28 | 
29 |     window.dragMoveListener = dragMoveListener;
30 |     if (this.props.isStart) {
31 |       interact('.draggable_start')
32 |       .draggable({
33 |         inertia: true,
34 |         restrict: {
35 |           restriction: "parent",
36 |           endOnly: false,
37 |           elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
38 |         },
39 |         autoScroll: true,
40 |         onmove: dragMoveListener,
41 |         onend: (event) => {
42 |           var target = event.target;
43 |           const x = parseFloat(target.getAttribute('data-x'))
44 |           const start = x / 400 * 100;
45 |           this.props.store.dispatch({type: 'CROPS_CHANGED', start: start});
46 |         }
47 |       })
48 |     }
49 |     else {
50 |       interact('.draggable_end')
51 |       .draggable({
52 |         inertia: true,
53 |         restrict: {
54 |           restriction: "parent",
55 |           endOnly: false,
56 |           elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
57 |         },
58 |         autoScroll: true,
59 |         onmove: dragMoveListener,
60 |         onend: (event) => {
61 |           var target = event.target;
62 |           const x = parseFloat(target.getAttribute('data-x'))
63 |           const end = (400 + x) / 400 * 100;
64 |           this.props.store.dispatch({type: 'CROPS_CHANGED', end: end});
65 |         }
66 |       })
67 |     }
68 |   },
69 | 
70 |   render() {
71 |       return <div className="start_marker draggable_start" style={{left: this.props.position+"%"}} onend={function(e) {console.log(e)} }>I</div>
72 |   }
73 | })
74 | 
75 | export default CropMarker;


--------------------------------------------------------------------------------
/src/img/css/font/crop-video-set.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
 5 | <defs>
 6 | <font id="evgenity" horiz-adv-x="1000" >
 7 | <font-face font-family="evgenity" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 8 | <missing-glyph horiz-adv-x="1000" />
 9 | <glyph glyph-name="play" unicode="&#xe800;" d="M772 333l-741-412q-13-7-22-2t-9 20v822q0 14 9 20t22-2l741-412q13-7 13-17t-13-17z" horiz-adv-x="785.7" />
10 | 
11 | <glyph glyph-name="volume-off-1" unicode="&#xe801;" d="M0 551l305 0 345 282 0-965-345 279-229 0z m713-283q0 4 2 6l76 76-76 76q-2 2-2 6t2 6l53 53q2 2 5 2t6-2l76-76 77 76q4 2 6 2t5-2l55-53q2-2 2-6t-2-6l-76-76 76-76q2-4 2-7t-2-5l-55-54q-2-2-5-2t-6 2l-77 78-76-78q-2-2-5-2t-6 2l-53 54q-2 2-2 6z" horiz-adv-x="1000" />
12 | 
13 | <glyph glyph-name="volume-down-1" unicode="&#xe802;" d="M0 141l0 418 236 0 358 291 0-1000-358 291-236 0z m656 37q74 74 74 174 0 104-74 180l73 74q103-106 107-256 0-144-107-246z" horiz-adv-x="836" />
14 | 
15 | <glyph glyph-name="volume" unicode="&#xe803;" d="M0 142l0 416 236 0 354 289 0-994-354 289-236 0z m652 35q73 74 73 176t-73 178l71 74q105-106 107-254 0-145-107-246z m118-119q123 119 123 295t-123 299l76 74q154-154 154-372t-154-372z" horiz-adv-x="1000" />
16 | 
17 | <glyph glyph-name="resize-full-alt" unicode="&#xe804;" d="M716 548l-198-198 198-198 80 80q16 18 39 8 22-9 22-33v-250q0-14-10-25t-26-11h-250q-23 0-32 23-10 21 7 38l81 81-198 198-198-198 80-81q17-17 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l80-80 198 198-198 198-80-80q-11-11-25-11-7 0-14 3-22 9-22 33v250q0 14 11 25t25 11h250q23 0 33-23 9-22-8-38l-80-81 198-198 198 198-81 81q-17 16-7 38 9 23 32 23h250q15 0 26-11t10-25v-250q0-24-22-33-7-3-14-3-14 0-25 11z" horiz-adv-x="857.1" />
18 | 
19 | <glyph glyph-name="resize-full" unicode="&#xe805;" d="M421 261q0-8-5-13l-185-185 80-81q10-10 10-25t-10-25-25-11h-250q-15 0-25 11t-11 25v250q0 15 11 25t25 11 25-11l80-80 185 185q6 6 13 6t13-6l64-63q5-6 5-13z m436 482v-250q0-15-10-25t-26-11-25 11l-80 80-185-185q-6-6-13-6t-13 6l-64 63q-5 6-5 13t5 13l186 185-81 81q-10 10-10 25t10 25 25 11h250q15 0 26-11t10-25z" horiz-adv-x="857.1" />
20 | 
21 | <glyph glyph-name="crop" unicode="&#xe806;" d="M311 136h332v332z m-25 25l332 332h-332v-332z m643-43v-107q0-8-5-13t-13-5h-125v-125q0-8-5-13t-13-5h-107q-8 0-13 5t-5 13v125h-482q-8 0-13 5t-5 13v482h-125q-8 0-13 5t-5 13v107q0 8 5 13t13 5h125v125q0 8 5 13t13 5h107q8 0 13-5t5-13v-125h475l137 138q5 5 13 5t13-5q5-6 5-13t-5-13l-138-137v-475h125q8 0 13-5t5-13z" horiz-adv-x="928.6" />
22 | 
23 | <glyph glyph-name="pause" unicode="&#xe80b;" d="M18-97l0 894 223 0 0-894-223 0z m446 0l0 894 224 0 0-894-224 0z" horiz-adv-x="705" />
24 | </font>
25 | </defs>
26 | </svg>


--------------------------------------------------------------------------------
/src/css/font/crop-video-set.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
 5 | <defs>
 6 | <font id="arrows" horiz-adv-x="1000" >
 7 | <font-face font-family="arrows" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 8 | <missing-glyph horiz-adv-x="1000" />
 9 | <glyph glyph-name="play" unicode="&#xe800;" d="M772 333l-741-412q-13-7-22-2t-9 20v822q0 14 9 20t22-2l741-412q13-7 13-17t-13-17z" horiz-adv-x="785.7" />
10 | 
11 | <glyph glyph-name="volume-off" unicode="&#xe801;" d="M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z" horiz-adv-x="428.6" />
12 | 
13 | <glyph glyph-name="volume-down" unicode="&#xe802;" d="M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 13-17 13-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z" horiz-adv-x="642.9" />
14 | 
15 | <glyph glyph-name="volume-up" unicode="&#xe803;" d="M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 13-17 13-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-7-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q8 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-25 11t-11 25q0 20 22 33 4 2 12 6t13 6q25 14 46 28 68 51 107 127t38 161-38 161-107 127q-21 15-46 28-4 3-13 6t-12 6q-22 13-22 33 0 15 11 25t25 11q7 0 14-3 118-51 189-158t71-236z" horiz-adv-x="928.6" />
16 | 
17 | <glyph glyph-name="resize-full" unicode="&#xe805;" d="M421 261q0-7-5-13l-185-185 80-81q10-10 10-25t-10-25-25-11h-250q-15 0-25 11t-11 25v250q0 15 11 25t25 11 25-11l80-80 186 185q5 6 12 6t13-6l64-63q5-6 5-13z m436 482v-250q0-15-10-25t-26-11-25 11l-80 80-185-185q-6-6-13-6t-13 6l-64 64q-5 5-5 12t5 13l186 185-81 81q-10 10-10 25t10 25 25 11h250q15 0 26-11t10-25z" horiz-adv-x="857.1" />
18 | 
19 | <glyph glyph-name="picture" unicode="&#xe806;" d="M357 529q0-45-31-76t-76-32-76 32-31 76 31 76 76 31 76-31 31-76z m572-215v-250h-786v107l178 179 90-89 285 285z m53 393h-893q-7 0-12-5t-6-13v-678q0-7 6-13t12-5h893q7 0 13 5t5 13v678q0 8-5 13t-13 5z m89-18v-678q0-37-26-63t-63-27h-893q-36 0-63 27t-26 63v678q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
20 | 
21 | <glyph glyph-name="pause" unicode="&#xe80b;" d="M18-97l0 894 223 0 0-894-223 0z m446 0l0 894 224 0 0-894-224 0z" horiz-adv-x="705" />
22 | 
23 | <glyph glyph-name="resize-full-alt" unicode="&#xf804;" d="M716 548l-198-198 198-198 80 80q17 18 39 8 22-9 22-33v-250q0-14-10-25t-26-11h-250q-23 0-32 23-10 21 7 38l81 81-198 198-198-198 80-81q17-17 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l80-80 198 198-198 198-80-80q-11-11-25-11-7 0-14 3-22 9-22 33v250q0 14 11 25t25 11h250q23 0 33-23 9-21-8-38l-80-81 198-198 198 198-81 81q-17 17-7 38 9 23 32 23h250q15 0 26-11t10-25v-250q0-24-22-33-7-3-14-3-14 0-25 11z" horiz-adv-x="857.1" />
24 | </font>
25 | </defs>
26 | </svg>


--------------------------------------------------------------------------------
/src/components/Video.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Overlay from './Overlay';
  3 | import Controls from './Controls';
  4 | import Seek from './Seek';
  5 | import Play from './Play';
  6 | import Time from './Time';
  7 | 
  8 | var VIDEO_EVENTS = [ 'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded', 'onError', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting'];
  9 | 
 10 | var Video = React.createClass({
 11 | 
 12 |     propTypes: {
 13 |         children: React.PropTypes.node,
 14 |         autoPlay: React.PropTypes.bool,
 15 |         muted: React.PropTypes.bool,
 16 |         controls: React.PropTypes.bool,
 17 |         onTimeUpdate: React.PropTypes.func,
 18 |     },
 19 | 
 20 |     getDefaultProps() {
 21 |         return {
 22 |             onTimeUpdate: (e) => {
 23 |                 // console.log(e)
 24 |                 // console.log(this.videoEl)
 25 |             }
 26 |         }
 27 |     },
 28 | 
 29 |     getInitialState() {
 30 |         return {
 31 |             networkState: 0,
 32 |             paused: !this.props.autoPlay,
 33 |             muted: !!this.props.muted,
 34 |             volume: 1,
 35 |             error: false,
 36 |             loading: false,
 37 |         };
 38 |     },
 39 | 
 40 |     componentWillMount() {
 41 |         this._updateStateFromVideo =  () => {this.updateStateFromVideo()};
 42 |         this.mediaEventProps = VIDEO_EVENTS.reduce((p, c) => {
 43 |             p[c] = (e) => {
 44 |                 // console.log(e.type)
 45 |                 if (c in this.props && typeof this.props[c] === 'function') {
 46 |                     this.props[c](e);
 47 |                 }
 48 |                 this._updateStateFromVideo();
 49 |                 this.props.dispatch({type: 'VIDEO', e: e.type})
 50 |             };
 51 |             return p;
 52 |         }, {});
 53 |     },
 54 | 
 55 |     componentDidMount() {},
 56 | 
 57 |     componentWillUnmount() {},
 58 | 
 59 |     togglePlay() {
 60 |         if ( this.state.paused ) {  this.videoEl.play(); } else { this.videoEl.pause(); }
 61 |     },
 62 | 
 63 |     toggleMute() {
 64 |         if (this.state.muted) { this.videoEl.muted = false; } else { this.videoEl.muted = true; }
 65 |     },
 66 | 
 67 |     load() {
 68 |         this.videoEl.load();
 69 |     },
 70 | 
 71 |     seek(time) {
 72 |         this.videoEl.currentTime = time;
 73 |     },
 74 | 
 75 |     setVolume(volume) {
 76 |         this.videoEl.volume = volume;
 77 |     },
 78 | 
 79 |     updateStateFromVideo() {
 80 |         // if (this.videoEl.currentTime  / this.videoEl.duration * 100 > this.props.crops[1]) {
 81 |         //     this.videoEl.currentTime = this.props.crops[0] / 100 * this.videoEl.duration;
 82 |         // }
 83 |         this.setState({
 84 |             // Standard video properties
 85 |             duration: this.videoEl.duration,
 86 |             currentTime: this.videoEl.currentTime,
 87 |             buffered: this.videoEl.buffered,
 88 |             paused: this.videoEl.paused,
 89 |             muted: this.videoEl.muted,
 90 |             volume: this.videoEl.volume,
 91 |             readyState: this.videoEl.readyState,
 92 | 
 93 |             // Non-standard state computed from properties
 94 |             percentageBuffered: this.videoEl.buffered.length && this.videoEl.buffered.end(this.videoEl.buffered.length - 1) / this.videoEl.duration * 100,
 95 |             percentagePlayed: this.videoEl.currentTime / this.videoEl.duration * 100,
 96 |             error: this.videoEl.networkState === this.videoEl.NETWORK_NO_SOURCE,
 97 |             loading: this.videoEl.readyState < this.videoEl.HAVE_ENOUGH_DATA
 98 |         });
 99 |     },
100 | 
101 |     renderControls() {
102 |         var extendedProps = Object.assign({
103 |             // The public methods that all controls should be able to use.
104 |             togglePlay: this.togglePlay,
105 |             toggleMute: this.toggleMute,
106 |             play: this.play,
107 |             pause: this.pause,
108 |             seek: this.seek,
109 |             fullscreen: this.fullscreen,
110 |             setVolume: this.setVolume
111 |         }, this.state, this.props);
112 | 
113 |         var controls = React.Children.map(this.props.children, (child, i) => {
114 |             if (child.type === 'source') { return; }
115 |             return React.cloneElement(child, extendedProps);
116 |         });
117 |         return controls;
118 |     },
119 | 
120 |     renderSources() {
121 |         return React.Children.map(this.props.children, (child, i) => {
122 |             if (child.type !== 'source') { return; }
123 |             return child;
124 |         });
125 |     },
126 | 
127 |     getVideoClassName() {
128 |         var classString = 'video';
129 | 
130 |         if (this.state.error) {
131 |             classString += ' video--error';
132 |         } else if (this.state.loading) {
133 |             classString += ' video--loading';
134 |         } else if (this.state.paused) {
135 |             classString += ' video--paused';
136 |         } else {
137 |             classString += ' video--playing';
138 |         }
139 | 
140 |         if (this.state.focused) {
141 |             classString += ' video--focused';
142 |         }
143 |         return classString;
144 |     },
145 | 
146 |     onFocus() {
147 |         this.setState({
148 |             focused: true
149 |         });
150 |     },
151 | 
152 |     render() {
153 |         return (
154 |             <div className={this.getVideoClassName()} tabIndex="0" onFocus={this.onFocus}>
155 |                 <video className="video__el" {...this.props} {...this.mediaEventProps} ref={(el) => { this.videoEl = el; }}>
156 |                     {this.renderSources()}
157 |                 </video>
158 |                 {this.renderControls()}
159 |             </div>
160 |         );
161 |     }
162 | });
163 | 
164 | export {Video as default};
165 | 


--------------------------------------------------------------------------------
/src/img/css/custom.css:
--------------------------------------------------------------------------------
  1 | .video-icon--crop:before {
  2 |     content: '\e80b';
  3 | }
  4 | 
  5 | .video {
  6 |     position: relative;
  7 |     display: inline-block;
  8 |     color: #fff;
  9 |     font-family: Helvetica;
 10 |     background-color: red;
 11 |     -webkit-font-smoothing: antialiased;
 12 |     -webkit-user-select: none;
 13 |        -moz-user-select: none;
 14 |         -ms-user-select: none;
 15 |             user-select: none;
 16 | }
 17 | 
 18 | .video:focus {
 19 |     outline: thin dotted;
 20 | }
 21 | 
 22 | .video__controls {
 23 |     position: absolute;
 24 |     bottom: 0;
 25 |     left: 0;
 26 |     right: 0;
 27 |     opacity: 1;
 28 |     transition: opacity 0.2s ease-in;
 29 | }
 30 | 
 31 | .video--focused .video__controls,
 32 | .video:hover .video__controls {
 33 |     opacity: 1;
 34 | }
 35 | .video-overlay__loader,
 36 | .video-overlay__play {
 37 |     position: absolute;
 38 |     top: 0;
 39 |     left: 0;
 40 |     right: 0;
 41 |     bottom: 0;
 42 | }
 43 | 
 44 | .video-overlay__loader .video-spinner,
 45 | .video-overlay__play .video-icon {
 46 |     position: absolute;
 47 |     top: 50%;
 48 |     left: 50%;
 49 |     height: 70px;
 50 |     width: 80px;
 51 |     margin-left: -40px;
 52 |     margin-top: -35px;
 53 |     font-size: 30px;
 54 |     border-radius: 10px;
 55 |     padding: 20px;
 56 |     background-color: rgba(0,0,0,0.7);
 57 |     -webkit-box-sizing: border-box;
 58 |             box-sizing: border-box;
 59 | }
 60 | 
 61 | .video-overlay__pic .video-icon {
 62 |     position: absolute;
 63 |     top: 33%;
 64 |     left: 33%;
 65 |     height: 70px;
 66 |     width: 80px;
 67 |     margin-left: -40px;
 68 |     margin-top: -35px;
 69 |     font-size: 30px;
 70 |     border-radius: 10px;
 71 |     padding: 20px;
 72 |     background-color: rgba(0,0,0,0.7);
 73 |     -webkit-box-sizing: border-box;
 74 |             box-sizing: border-box;
 75 | }
 76 | 
 77 | .video-overlay__play {
 78 |     cursor: pointer;
 79 | }
 80 | 
 81 | .video-overlay__error {
 82 |     position: absolute;
 83 |     top: 50%;
 84 |     left: 0;
 85 |     right: 0;
 86 |     padding: 0 40px;
 87 |     -webkit-transform: translateY(-50%);
 88 |             transform: translateY(-50%);
 89 |     text-align: center;
 90 |     color: #fff;
 91 |     font-size: 13px;
 92 | }
 93 | 
 94 | .video-overlay__error-text {
 95 |     display: inline;
 96 |     padding: 10px 20px;
 97 |     background-color: rgba(0,0,0,0.7);
 98 | }
 99 | 
100 | /*
101 |  * Generated by the 'fontello-react' Grunt task.
102 |  */
103 | @font-face {
104 |   font-family: 'crop-video-set';
105 |   src: url('font/crop-video-set.eot?98512250');
106 |   src: url('font/crop-video-set.eot?98512250#iefix') format('embedded-opentype'),
107 |        url('font/crop-video-set.woff2?98512250') format('woff2'),
108 |        url('font/crop-video-set.woff?98512250') format('woff'),
109 |        url('font/crop-video-set.ttf?98512250') format('truetype'),
110 |        url('font/crop-video-set.svg?98512250#crop-video-set') format('svg');
111 |   font-weight: normal;
112 |   font-style: normal;
113 | }
114 | 
115 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
116 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
117 | /*
118 | @media screen and (-webkit-min-device-pixel-ratio:0) {
119 |   @font-face {
120 |     font-family: 'fontello';
121 |     src: url('../font/fontello.svg?73179758#fontello') format('svg');
122 |   }
123 | }
124 | */
125 | 
126 | .video-icon:before {
127 |     font-family: "crop-video-set";
128 |     font-style: normal;
129 |     font-weight: normal;
130 |     speak: none;
131 | 
132 |     display: inline-block;
133 |     text-decoration: inherit;
134 |     width: 1em;
135 |     margin-right: .2em;
136 |     text-align: center;
137 |     /* opacity: .8; */
138 | 
139 |     /* For safety - reset parent styles, that can break glyph codes*/
140 |     font-variant: normal;
141 |     text-transform: none;
142 | 
143 |     /* fix buttons height, for twitter bootstrap */
144 |     line-height: 1em;
145 | 
146 |     /* Animation center compensation - margins should be symmetric */
147 |     /* remove if not needed */
148 |     margin-left: .2em;
149 | 
150 |     /* you can be more comfortable with increased icons size */
151 |     /* font-size: 120%; */
152 | 
153 |     /* Font smoothing. That was taken from TWBS */
154 |     -webkit-font-smoothing: antialiased;
155 |     -moz-osx-font-smoothing: grayscale;
156 | 
157 |     /* Uncomment for 3D effect */
158 |     /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
159 | }
160 | 
161 | 
162 | .video-icon--play-1:before {
163 |     content: '\E800';
164 | }
165 | 
166 | .video-icon--volume-off:before {
167 |     content: '\E801';
168 | }
169 | 
170 | .video-icon--volume-down:before {
171 |     content: '\E802';
172 | }
173 | 
174 | .video-icon--volume-up:before {
175 |     content: '\E803';
176 | }
177 | 
178 | .video-icon--resize-full:before {
179 |     content: '\E804';
180 | }
181 | 
182 | .video-icon--resize-small:before {
183 |     content: '\E805';
184 | }
185 | 
186 | .video-icon--pause-1:before {
187 |     content: '\E80B';
188 | }
189 | 
190 | .video-icon--crop:before { 
191 |     content: '\e806';
192 | }
193 | 
194 | .video-icon--crop-begin:before { 
195 |     content: '[';
196 |     
197 | }
198 | 
199 | .video-icon--crop-end:before { 
200 |     content: ']';
201 |     left: 70%;
202 | }
203 | 
204 | .video-overlay__play .video-icon--crop-begin {
205 |     left: 30%;
206 | }
207 | 
208 | .video-overlay__play .video-icon--crop-end {
209 |     left: 70%;
210 | }
211 | 
212 | 
213 | /* Modified spinner from http://tobiasahlin.com/spinkit/ */
214 | .video-spinner {
215 |     margin: 100px auto;
216 |     width: 50px;
217 |     height: 40px;
218 |     text-align: center;
219 |     font-size: 10px;
220 | }
221 | 
222 | .video-spinner > div {
223 |     background-color: #fff;
224 |     height: 100%;
225 |     width: 4px;
226 |     display: inline-block;
227 |     margin-right: 3px;
228 | 
229 |     -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
230 |     animation: sk-stretchdelay 1.2s infinite ease-in-out;
231 | }
232 | 
233 | .video-spinner .video-spinner__rect2 {
234 |     -webkit-animation-delay: -1.1s;
235 |     animation-delay: -1.1s;
236 | }
237 | 
238 | .video-spinner .video-spinner__rect3 {
239 |     -webkit-animation-delay: -1.0s;
240 |     animation-delay: -1.0s;
241 | }
242 | 
243 | .video-spinner .video-spinner__rect4 {
244 |     -webkit-animation-delay: -0.9s;
245 |     animation-delay: -0.9s;
246 | }
247 | 
248 | .video-spinner .video-spinner__rect5 {
249 |     -webkit-animation-delay: -0.8s;
250 |     animation-delay: -0.8s;
251 | }
252 | 
253 | @-webkit-keyframes sk-stretchdelay {
254 |     0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
255 |     20% { -webkit-transform: scaleY(1.0) }
256 | }
257 | 
258 | @keyframes sk-stretchdelay {
259 |     0%, 40%, 100% { 
260 |         transform: scaleY(0.4);
261 |         -webkit-transform: scaleY(0.4);
262 |     }  20% { 
263 |         transform: scaleY(1.0);
264 |         -webkit-transform: scaleY(1.0);
265 |     }
266 | }
267 | .video-progress-bar {
268 |     position: relative;
269 | }
270 | 
271 | .video-progress-bar--vertical {
272 |     height: 100%;
273 |     width: 4px;
274 | }
275 | 
276 | .video-progress-bar--horizontal {
277 |     width: 100%;
278 |     /*height: 4px;*/
279 |     height: 100%;
280 | }
281 | 
282 | .video-progress-bar__fill {
283 |     background-color: #fff;
284 |     position: absolute;
285 |     bottom: 0;
286 |     left: 0;
287 | }
288 | 
289 | .video-progress-bar--horizontal .video-progress-bar__fill {
290 |     height: 100%;
291 | }
292 | 
293 | .video-progress-bar--vertical .video-progress-bar__fill {
294 |     width: 100%;
295 | }
296 | 
297 | .video-progress-bar__input {
298 |     position: absolute;
299 |     top: 0;
300 |     left: 0;
301 |     right: 0;
302 |     bottom: 0;
303 |     width: 100%;
304 |     height: 100%;
305 |     padding: 0;
306 |     margin: 0;
307 |     border: 0;
308 |     cursor: pointer;
309 |     outline: none;
310 |     opacity: 0;
311 | }
312 | 
313 | .video-progress-bar--vertical .video-progress-bar__input {
314 |     -webkit-appearance: slider-vertical;
315 | }
316 | .video-controls {
317 |     height: 34px;
318 |     background-color: rgba(0,0,0,0.8);
319 |     display: -webkit-box;
320 |     display: -webkit-flex;
321 |     display: -ms-flexbox;
322 |     display: flex;
323 | }
324 | 
325 | .video-controls button {
326 |     background: none;
327 |     border: none;
328 |     margin: 0;
329 |     color: #fff;
330 | }
331 | 
332 | .video__control {
333 |     position: relative;
334 |     padding: 10px;
335 |     height: 100%;
336 |     font-size: 14px;
337 |     -webkit-box-sizing: border-box;
338 |             box-sizing: border-box;
339 | }
340 | 
341 | .video__control--focused,
342 | .video__control:focus,
343 | .video-controls button:focus {
344 |     /*outline: thin dotted;*/
345 | }
346 | .video-seek {
347 |     -webkit-box-flex: 1;
348 |     -webkit-flex-grow: 1;
349 |         -ms-flex-positive: 1;
350 |             flex-grow: 1;
351 |     height: 100%;
352 |     position: relative;
353 |     padding: 5px 0px;
354 | }
355 | 
356 | .video-seek__container {
357 |     position: relative;
358 |     height: 100%;
359 |     background: #3e3e3e;
360 |     width: 100%;
361 | 
362 |     /*height: 4px;*/
363 |     /*margin-top: 2px;*/
364 |     /*margin-bottom: 2px;*/
365 |     cursor: pointer;
366 | }
367 | 
368 | .video-seek__buffer-bar {
369 |     position: absolute;
370 |     top: 0;
371 |     left: 0;
372 |     height: 100%;
373 |     background-color: #5a5a5a;
374 | }
375 | .video-play {
376 |     cursor: pointer;
377 | }
378 | 
379 | .video-play:hover{
380 |     background-color: #1a1a1a;
381 | }
382 | .video-mute {
383 |     cursor: pointer;
384 |     padding: 0;
385 | }
386 | 
387 | .video-mute:hover {
388 |     background-color: #1a1a1a;
389 | }
390 | 
391 | .video-mute__inner {
392 |     padding: 10px;
393 | }
394 | 
395 | .video-mute__volume {
396 |     position: absolute;
397 |     left: 50%;
398 |     margin-left: -12px;
399 |     bottom: 100%;
400 |     width: 24px;
401 |     height: 40px;
402 |     padding-top: 8px;
403 |     background-color: #1a1a1a;
404 |     display: none;
405 | }
406 | 
407 | .video-mute--focused .video-mute__volume,
408 | .video-mute:hover .video-mute__volume {
409 |     display: block;
410 | }
411 | 
412 | .video-mute__track {
413 |     position: relative;
414 |     width: 4px;
415 |     height: 100%;
416 |     margin-left: 10px;
417 |     background-color: #3e3e3e;
418 | }
419 | .video-fullscreen {
420 |     cursor: pointer;
421 | }
422 | 
423 | .video-fullscreen:hover {
424 |     background-color: #1a1a1a;
425 | }
426 | .video-time {
427 |     font-size: 11px;
428 |     line-height: 16px;
429 | }
430 | 
431 | .video-time__current {
432 |     margin-right: 5px;
433 | }
434 | 
435 | .video-time__duration {
436 |     margin-left: 5px;
437 |     color: #919191;
438 | }
439 | 
440 | 


--------------------------------------------------------------------------------
/src/css/custom.css:
--------------------------------------------------------------------------------
  1 | .start_marker, .end_marker {
  2 |     position: absolute;
  3 |     top: 0px;
  4 | /*    width: 5px;
  5 |     height: 18px;
  6 |     border: 3px solid red;*/
  7 | }
  8 | 
  9 | .start_marker {
 10 |     left: 0px;
 11 |     border-right: none;
 12 | }
 13 | 
 14 | .end_marker {
 15 |     left: 290px;
 16 |     /*border-left: none;*/
 17 | }
 18 | 
 19 | .start_marker, .end_marker {
 20 |     cursor: move;
 21 | }
 22 | 
 23 | /*.video-icon--crop:before {
 24 |     content: '\e80b';
 25 | }*/
 26 | 
 27 | .video {
 28 |     position: relative;
 29 |     display: inline-block;
 30 |     color: #fff;
 31 |     font-family: Helvetica;
 32 |     background-color: red;
 33 |     -webkit-font-smoothing: antialiased;
 34 |     -webkit-user-select: none;
 35 |        -moz-user-select: none;
 36 |         -ms-user-select: none;
 37 |             user-select: none;
 38 | }
 39 | 
 40 | .video:focus {
 41 |     outline: thin dotted;
 42 | }
 43 | 
 44 | .video__controls {
 45 |     position: absolute;
 46 |     bottom: 0;
 47 |     left: 0;
 48 |     right: 0;
 49 |     opacity: 1;
 50 |     transition: opacity 0.2s ease-in;
 51 | }
 52 | 
 53 | .video--focused .video__controls,
 54 | .video:hover .video__controls {
 55 |     opacity: 1;
 56 | }
 57 | .video-overlay__loader,
 58 | .video-overlay__play {
 59 |     position: absolute;
 60 |     top: 0;
 61 |     left: 0;
 62 |     right: 0;
 63 |     bottom: 0;
 64 | }
 65 | 
 66 | .video-overlay__pic {
 67 |     position: absolute;
 68 |     top: 0;
 69 |     left: 0;
 70 |     right: 0;
 71 |     bottom: 0;
 72 | }
 73 | 
 74 | .video-overlay__loader .video-spinner,
 75 | .video-overlay__play .video-icon {
 76 |     position: absolute;
 77 |     top: 50%;
 78 |     left: 50%;
 79 |     height: 70px;
 80 |     width: 80px;
 81 |     margin-left: -40px;
 82 |     margin-top: -35px;
 83 |     font-size: 30px;
 84 |     border-radius: 0px;
 85 |     padding: 20px;
 86 |     background-color: rgba(0,0,0,0.7);
 87 |     -webkit-box-sizing: border-box;
 88 |             box-sizing: border-box;
 89 | }
 90 | 
 91 | .video-overlay__pic .video-icon {
 92 |     position: absolute;
 93 |     top: 50%;
 94 |     left: 50%;
 95 |     height: 70px;
 96 |     width: 80px;
 97 |     margin-left: -40px;
 98 |     margin-top: -35px;
 99 |     font-size: 30px;
100 |     border-radius: 0px;
101 |     padding: 20px;
102 |     background-color: rgba(0,0,0,0.7);
103 |     -webkit-box-sizing: border-box;
104 |             box-sizing: border-box;
105 | }
106 | 
107 | .video-overlay__pic {
108 |     cursor: pointer;
109 | }
110 | 
111 | .video-overlay__error {
112 |     position: absolute;
113 |     top: 50%;
114 |     left: 0;
115 |     right: 0;
116 |     padding: 0 40px;
117 |     -webkit-transform: translateY(-50%);
118 |             transform: translateY(-50%);
119 |     text-align: center;
120 |     color: #fff;
121 |     font-size: 13px;
122 | }
123 | 
124 | .video-overlay__error-text {
125 |     display: inline;
126 |     padding: 10px 20px;
127 |     background-color: rgba(0,0,0,0.7);
128 | }
129 | 
130 | /*
131 |  * Generated by the 'fontello-react' Grunt task.
132 |  */
133 | @font-face {
134 |   font-family: 'crop-video-set';
135 |   src: url('font/crop-video-set.eot?98512250');
136 |   src: url('font/crop-video-set.eot?98512250#iefix') format('embedded-opentype'),
137 |        url('font/crop-video-set.woff2?98512250') format('woff2'),
138 |        url('font/crop-video-set.woff?98512250') format('woff'),
139 |        url('font/crop-video-set.ttf?98512250') format('truetype'),
140 |        url('font/crop-video-set.svg?98512250#crop-video-set') format('svg');
141 |   font-weight: normal;
142 |   font-style: normal;
143 | }
144 | 
145 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
146 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
147 | /*
148 | @media screen and (-webkit-min-device-pixel-ratio:0) {
149 |   @font-face {
150 |     font-family: 'fontello';
151 |     src: url('../font/fontello.svg?73179758#fontello') format('svg');
152 |   }
153 | }
154 | */
155 | 
156 | .video-icon:before {
157 |     font-family: "crop-video-set";
158 |     font-style: normal;
159 |     font-weight: normal;
160 |     speak: none;
161 | 
162 |     display: inline-block;
163 |     text-decoration: inherit;
164 |     width: 1em;
165 |     margin-right: .2em;
166 |     text-align: center;
167 |     /* opacity: .8; */
168 | 
169 |     /* For safety - reset parent styles, that can break glyph codes*/
170 |     font-variant: normal;
171 |     text-transform: none;
172 | 
173 |     /* fix buttons height, for twitter bootstrap */
174 |     line-height: 1em;
175 | 
176 |     /* Animation center compensation - margins should be symmetric */
177 |     /* remove if not needed */
178 |     margin-left: .2em;
179 | 
180 |     /* you can be more comfortable with increased icons size */
181 |     /* font-size: 120%; */
182 | 
183 |     /* Font smoothing. That was taken from TWBS */
184 |     -webkit-font-smoothing: antialiased;
185 |     -moz-osx-font-smoothing: grayscale;
186 | 
187 |     /* Uncomment for 3D effect */
188 |     /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
189 | }
190 | 
191 | 
192 | .video-icon--play-1:before {
193 |     content: '\E800';
194 | }
195 | 
196 | .video-icon--volume-off:before {
197 |     content: '\E801';
198 | }
199 | 
200 | .video-icon--volume-down:before {
201 |     content: '\E802';
202 | }
203 | 
204 | .video-icon--volume-up:before {
205 |     content: '\E803';
206 | }
207 | 
208 | .video-icon--resize-full:before {
209 |     content: '\E804';
210 | }
211 | 
212 | .video-icon--resize-small:before {
213 |     content: '\E805';
214 | }
215 | 
216 | .video-icon--pause-1:before {
217 |     content: '\E80B';
218 | }
219 | 
220 | .video-icon--pic:before {
221 |     content: '\E806';
222 | }
223 | 
224 | /*.video-icon--crop:before { 
225 |     content: '\e806';
226 | }
227 | 
228 | .video-icon--crop-begin:before { 
229 |     content: '[';
230 | }
231 | 
232 | .video-icon--crop-end:before { 
233 |     content: ']';
234 | }
235 | */
236 | 
237 | /* Modified spinner from http://tobiasahlin.com/spinkit/ */
238 | .video-spinner {
239 |     margin: 100px auto;
240 |     width: 50px;
241 |     height: 40px;
242 |     text-align: center;
243 |     font-size: 10px;
244 | }
245 | 
246 | .video-spinner > div {
247 |     background-color: #fff;
248 |     height: 100%;
249 |     width: 4px;
250 |     display: inline-block;
251 |     margin-right: 3px;
252 | 
253 |     -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
254 |     animation: sk-stretchdelay 1.2s infinite ease-in-out;
255 | }
256 | 
257 | .video-spinner .video-spinner__rect2 {
258 |     -webkit-animation-delay: -1.1s;
259 |     animation-delay: -1.1s;
260 | }
261 | 
262 | .video-spinner .video-spinner__rect3 {
263 |     -webkit-animation-delay: -1.0s;
264 |     animation-delay: -1.0s;
265 | }
266 | 
267 | .video-spinner .video-spinner__rect4 {
268 |     -webkit-animation-delay: -0.9s;
269 |     animation-delay: -0.9s;
270 | }
271 | 
272 | .video-spinner .video-spinner__rect5 {
273 |     -webkit-animation-delay: -0.8s;
274 |     animation-delay: -0.8s;
275 | }
276 | 
277 | @-webkit-keyframes sk-stretchdelay {
278 |     0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
279 |     20% { -webkit-transform: scaleY(1.0) }
280 | }
281 | 
282 | @keyframes sk-stretchdelay {
283 |     0%, 40%, 100% { 
284 |         transform: scaleY(0.4);
285 |         -webkit-transform: scaleY(0.4);
286 |     }  20% { 
287 |         transform: scaleY(1.0);
288 |         -webkit-transform: scaleY(1.0);
289 |     }
290 | }
291 | .video-progress-bar {
292 |     position: relative;
293 | }
294 | 
295 | .video-progress-bar--vertical {
296 |     height: 100%;
297 |     width: 4px;
298 | }
299 | 
300 | .video-progress-bar--horizontal {
301 |     width: 100%;
302 |     /*height: 4px;*/
303 |     height: 100%;
304 | }
305 | 
306 | .video-progress-bar__fill {
307 |     background-color: rgb(165, 165, 165);
308 |     position: absolute;
309 |     bottom: 0;
310 |     left: 0;
311 | }
312 | 
313 | .video-progress-bar--horizontal .video-progress-bar__fill {
314 |     height: 100%;
315 | }
316 | 
317 | .video-progress-bar--vertical .video-progress-bar__fill {
318 |     width: 100%;
319 | }
320 | 
321 | .video-progress-bar__input {
322 |     position: absolute;
323 |     top: 0;
324 |     left: 0;
325 |     right: 0;
326 |     bottom: 0;
327 |     width: 100%;
328 |     height: 100%;
329 |     padding: 0;
330 |     margin: 0;
331 |     border: 0;
332 |     cursor: pointer;
333 |     outline: none;
334 |     opacity: 0;
335 | }
336 | 
337 | .video-progress-bar--vertical .video-progress-bar__input {
338 |     -webkit-appearance: slider-vertical;
339 | }
340 | .video-controls {
341 |     height: 34px;
342 |     background-color: rgba(0,0,0,0.8);
343 |     display: -webkit-box;
344 |     display: -webkit-flex;
345 |     display: -ms-flexbox;
346 |     display: flex;
347 | }
348 | 
349 | .video-controls button {
350 |     background: none;
351 |     border: none;
352 |     margin: 0;
353 |     color: #fff;
354 | }
355 | 
356 | .video__control {
357 |     position: relative;
358 |     padding: 10px;
359 |     height: 100%;
360 |     font-size: 14px;
361 |     -webkit-box-sizing: border-box;
362 |             box-sizing: border-box;
363 | }
364 | 
365 | .video__control:hover {
366 | }
367 | 
368 | .video__control--focused,
369 | .video__control:focus,
370 | .video-controls button:focus {
371 |     /*outline: thin dotted;*/
372 | }
373 | .video-seek {
374 |     -webkit-box-flex: 1;
375 |     -webkit-flex-grow: 1;
376 |         -ms-flex-positive: 1;
377 |             flex-grow: 1;
378 |     height: 100%;
379 |     position: relative;
380 |     padding: 5px 0px;
381 | }
382 | 
383 | .video-seek__container {
384 |     position: relative;
385 |     height: 100%;
386 |     background: #3e3e3e;
387 |     width: 100%;
388 | 
389 |     /*height: 4px;*/
390 |     /*margin-top: 2px;*/
391 |     /*margin-bottom: 2px;*/
392 |     cursor: pointer;
393 | }
394 | 
395 | .video-seek__buffer-bar {
396 |     position: absolute;
397 |     top: 0;
398 |     left: 0;
399 |     height: 100%;
400 |     background-color: #5a5a5a;
401 | }
402 | .video-play {
403 |     cursor: pointer;
404 | }
405 | 
406 | .video-play:hover{
407 |     background-color: #1a1a1a;
408 | }
409 | .video-mute {
410 |     cursor: pointer;
411 |     padding: 0;
412 | }
413 | 
414 | .video-mute:hover {
415 |     background-color: #1a1a1a;
416 | }
417 | 
418 | .video-mute__inner {
419 |     padding: 10px;
420 | }
421 | 
422 | .video-mute__volume {
423 |     position: absolute;
424 |     left: 50%;
425 |     margin-left: -12px;
426 |     bottom: 100%;
427 |     width: 24px;
428 |     height: 40px;
429 |     padding-top: 8px;
430 |     background-color: #1a1a1a;
431 |     display: none;
432 | }
433 | 
434 | .video-mute--focused .video-mute__volume,
435 | .video-mute:hover .video-mute__volume {
436 |     display: block;
437 | }
438 | 
439 | .video-mute__track {
440 |     position: relative;
441 |     width: 4px;
442 |     height: 100%;
443 |     margin-left: 10px;
444 |     background-color: #3e3e3e;
445 | }
446 | 
447 | 
448 | .video-crop {
449 |     cursor: pointer;
450 |     padding: 0;
451 | }
452 | 
453 | .video-crop:hover {
454 |     background-color: #1a1a1a;
455 | }
456 | 
457 | .video-crop__inner {
458 |     padding: 10px;
459 | }
460 | 
461 | .video-crop__volume {
462 |     position: absolute;
463 |     left: 50%;
464 |     margin-left: -12px;
465 |     bottom: 100%;
466 |     width: 24px;
467 |     height: 40px;
468 |     padding-top: 8px;
469 |     background-color: #1a1a1a;
470 |     display: none;
471 | }
472 | 
473 | .video-crop--focused .video-crop__volume,
474 | .video-crop:hover .video-crop__volume {
475 |     display: block;
476 | }
477 | 
478 | .video-fullscreen {
479 |     cursor: pointer;
480 | }
481 | 
482 | .video-fullscreen:hover {
483 |     background-color: #1a1a1a;
484 | }
485 | .video-time {
486 |     font-size: 11px;
487 |     line-height: 16px;
488 | }
489 | 
490 | .video-time__current {
491 |     margin-right: 5px;
492 | }
493 | 
494 | .video-time__duration {
495 |     margin-left: 5px;
496 |     color: #919191;
497 | }
498 | 
499 | 
500 | .video-icon--crop-begin:before, .video-icon--crop-end:before {
501 |     /*font-size: .5em;*/
502 |     /*width: 100%;*/
503 | }
504 | 
505 | /*.video-icon--crop-begin:before { 
506 |     content: 'Set start';
507 | }
508 | 
509 | .video-icon--crop-end:before{ 
510 |     content: 'Set finish';
511 | }*/
512 | 
513 | .video-overlay__play .video-icon--crop-begin {
514 |     border-top-right-radius: 0px;
515 |     border-bottom-right-radius: 0px;
516 | }
517 | 
518 | .video-overlay__play .video-icon--crop-end {
519 |     border-top-left-radius: 0px;
520 |     border-bottom-left-radius: 0px;
521 | }
522 | 
523 | .video-overlay__play .video-icon--crop-begin {
524 |     left: 30%;
525 | }
526 | 
527 | .video-overlay__play .video-icon--crop-end {
528 |     left: 70%;
529 | }
530 | 
531 | .video-overlay__pic .video-icon--crop-begin {
532 |     border-top-right-radius: 0px;
533 |     border-bottom-right-radius: 0px;
534 | }
535 | 
536 | .video-overlay__pic .video-icon--crop-end {
537 |     border-top-left-radius: 0px;
538 |     border-bottom-left-radius: 0px;
539 | }
540 | 
541 | .video-overlay__pic .video-icon--crop-begin {
542 |     left: 30%;
543 | }
544 | 
545 | .video-overlay__pic .video-icon--crop-end {
546 |     left: 70%;
547 | }
548 | 
549 | .start_marker, .end_marker  {
550 |         /*font-family: 'arrows';*/
551 |         font-size: 22px;
552 |         height: 24px;
553 |         width: 10px;
554 |         background-color: yellow;
555 |         padding: auto;
556 |         color: black;
557 |         text-align: center;
558 |     }
559 | 
560 | 
561 | .video-play.video__control {
562 |     padding: 2px 6px 3px;
563 | }


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 |   The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works.  By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users.  We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors.  You can apply it to
 20 | your programs, too.
 21 | 
 22 |   When we speak of free software, we are referring to freedom, not
 23 | price.  Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 |   To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights.  Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 |   For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received.  You must make sure that they, too, receive
 37 | or can get the source code.  And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 |   Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 |   For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software.  For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 |   Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so.  This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software.  The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable.  Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products.  If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 |   Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary.  To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 |   The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 |   0. Definitions.
 74 | 
 75 |   "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 |   "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 |   "The Program" refers to any copyrightable work licensed under this
 81 | License.  Each licensee is addressed as "you".  "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 |   To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy.  The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 |   A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 |   To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy.  Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 |   To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies.  Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 |   An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License.  If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 |   1. Source Code.
113 | 
114 |   The "source code" for a work means the preferred form of the work
115 | for making modifications to it.  "Object code" means any non-source
116 | form of a work.
117 | 
118 |   A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 |   The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form.  A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 |   The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities.  However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work.  For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 |   The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 |   The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 |   2. Basic Permissions.
155 | 
156 |   All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met.  This License explicitly affirms your unlimited
159 | permission to run the unmodified Program.  The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work.  This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 |   You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force.  You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright.  Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 |   Conveying under any other circumstances is permitted solely under
176 | the conditions stated below.  Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 |   No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 |   When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 |   4. Conveying Verbatim Copies.
196 | 
197 |   You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 |   You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 |   5. Conveying Modified Source Versions.
209 | 
210 |   You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 |   A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit.  Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 |   6. Conveying Non-Source Forms.
246 | 
247 |   You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 |   A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 |   A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling.  In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage.  For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product.  A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 |   "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source.  The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 |   If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information.  But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 |   The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed.  Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 |   Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 |   7. Additional Terms.
344 | 
345 |   "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law.  If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 |   When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it.  (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.)  You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 |   Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 |   All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10.  If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term.  If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 |   If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 |   Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 |   8. Termination.
408 | 
409 |   You may not propagate or modify a covered work except as expressly
410 | provided under this License.  Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 |   However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 |   Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 |   Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License.  If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 |   9. Acceptance Not Required for Having Copies.
436 | 
437 |   You are not required to accept this License in order to receive or
438 | run a copy of the Program.  Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance.  However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work.  These actions infringe copyright if you do
443 | not accept this License.  Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 |   10. Automatic Licensing of Downstream Recipients.
447 | 
448 |   Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License.  You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 |   An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations.  If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 |   You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License.  For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 |   11. Patents.
472 | 
473 |   A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based.  The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 |   A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version.  For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 |   In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement).  To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 |   If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients.  "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 |   If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 |   A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License.  You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 |   Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 |   12. No Surrender of Others' Freedom.
541 | 
542 |   If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License.  If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all.  For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 |   13. Use with the GNU Affero General Public License.
553 | 
554 |   Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work.  The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 |   14. Revised Versions of this License.
564 | 
565 |   The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time.  Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 |   Each version is given a distinguishing version number.  If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation.  If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 |   If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 |   Later license versions may give you additional or different
585 | permissions.  However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 |   15. Disclaimer of Warranty.
590 | 
591 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 |   16. Limitation of Liability.
601 | 
602 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 |   17. Interpretation of Sections 15 and 16.
613 | 
614 |   If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 |   If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 |   To do so, attach the following notices to the program.  It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     {one line to give the program's name and a brief idea of what it does.}
635 |     Copyright (C) {year}  {name of author}
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <http://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 |   If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     {project}  Copyright (C) {year}  {fullname}
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License.  Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 |   You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <http://www.gnu.org/licenses/>.
668 | 
669 |   The GNU General Public License does not permit incorporating your program
670 | into proprietary programs.  If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library.  If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License.  But first, please read
674 | <http://www.gnu.org/philosophy/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------