A simple video editing tool. Test assignment for Erlyvideo. WIP.
- ErlyEditor
- Table of contents
- Prerequisites
- Usage - Intro - Setup - Step - Roboto Font and Material Design Icons - Customization - Components
- Development
- Testing
- Resources
cp .example.env .envand set required environment variablesnpm install- install peer dependencies running
npm install react react-dom react-motion - you have to
npm installand build (npm run build:lib) modules that is pulled from github by yourself
erlyeditor primarily consists of two things: components and reducers.
- top-level Redux reducers:
editorReducer,playerReducerandhtml5videoReducer. - top-level React components:
Editor,PlayerandHtml5Video.
The reducers listen to dispatched actions from the component to maintain your state in Redux.
The first thing that you have to do is to give the player and video reducers to Redux.
import { foo, bar } from 'my-awesome-reducers';
import { editorReducer as editor } from 'erlyeditor';
const reducers = {
// ... your other reducers here ...
editor, // <- mounting editor reducer
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);
The default mount point for editorReducer is editor.
NOTE:
It won't work if you change mounting point. Right now you can't change this, so be carefull.
Import and render the Editor component:
import { Editor } from 'erlyeditor';
...
// somewhere in your rendering method
<Editor player={{ width: 640, height: 480 }} />
ErlyEditor assumes that you are importing Roboto Font and Material Design Icons. In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app go to the linked sites and follow the instructions.
Almost any component allows use to specify className which will be applied to it
via composition with existing built-in className. Additionally you can override
built-in styles because everything is based on the react-css-modules.
You need to export unstyled version of component to provide your own styles, to
do this simple import { QuxComponent } from 'erlyeditor/components/QuxComponent'; instead of importing the default one.
Also you can use other components as well. Here is the full list:
Html5VideoPlayerIconButtonSliderhoc/tooltip- high-order component for tooltips
Every component is exported in 2 different ways:
- To import unstyled version use
import { FooComponent } from erlyeditor - To import styled use
import FooComponent from 'erlyeditor
There is no FlashVideo component, unfortunately. See below
Running the build task will create both a CommonJS module-per-module build and a UMD build.
npm run build
To create just a CommonJS module-per-module build:
npm run build:lib
To create just a UMD build:
npm run build:umd
npm run build:umd:min
To run both linting and testing at once, run the following:
npm run check
To only run tests:
npm run test
To continuously watch and run tests, run the following:
npm run test:watch
To perform linting with eslint, run the following:
npm run lint
Erlyeditor comes with examples to demonstrate its usage. When adding a new example, please adhere to the style and format of the existing examples, and try to reuse as much code as possible.
Clone the repo, cd to example you are interested in and
run npm install && npm start. It will
take a while to start, but after the site is built, you can access the examples
by opening http://localhost:3001/.
For a smooth dev process you can install these tools (not required):
Updates are arriving automatically as PR's, thanks to greenkeeper If you want to check for updates manually: npm-check-updates
After building in dist directory you can find webpack stats file named webpack.stats.json and
feed it to webpack stats analyzer to see
some useful info about your bundle.
The debug package is used for debugging. To turn it on simply specify the DEBUG environment variable:
DEBUG=app:server:(log|info|error)— to see nodejs server debugging output.DEBUG=app:webpack— to see app-related webpack output.DEBUG=app:*— to see everything.
Packages I use for testing:
Make sure that you've read this npm-module-checklist before starting to build your own npm package.
- react-css-modules - Seamless mapping of class names to CSS modules inside of React components.
- react-hotkeys + exploring-hotkeys-and-focus-in-react
Check this out: react-gl.
One of the examples places canvas over video to apply blurring and customize HUE.
This technique makes possible to implement really cool effects.
To get some inspiration how to create a unified API for HTML5 & Flash player see: