Movie Masher Client Plugin implemented in ReactJS - version 5.1.1
npm install @moviemasher/client-react
_JavaScript video editor, encoder, switcher_
- _visual compositing_ through SVG API
- _audio mixing_ through WebAudio API
- _client_ implemented in ReactJS
- _server_ implemented in ExpressJS
- _encode_ and _stream_ through FFmpeg
This module is a
ReactJS
reference implementation of a client plug-in that utilizes the core
@moviemasher/moviemasher.js
module.
It exports component functions, contexts, hooks, utility methods, and styles
that manifest a video editing user interface and interact with a server implementation like
@moviemasher/server-express. Its imports are all specified as peer dependencies.
In addition to this README, there is a simple
demo and
more extensive documentation available on
MovieMasher.com. Inline documentation and code completion is
also available when using a code editor that supports TypeScript and IntelliSense.
The HTML document below can simply be loaded in a web browser to display a 'hello world' example. The HEAD contains tags that load React and Movie Masher in UMD (Universal Module Definition) format directly from NPM through a CDN. The BODY contains just an empty DIV element followed by a SCRIPT that uses React to display Movie Masher, prepopulated with a text clip...
The SCRIPT first stores the DIV in the element variable, and then destructures what's needed from the modules. Since the UMD versions were loaded in the HEAD, we have a special variable for each module available in the global scope.
From React we destructure the createElement function, and then the createRoot function from the related ReactDOM module. From MovieMasherClient we destructure the Masher React component and the MasherDefaultProps function, and then the Icons object from the related MovieMasherTheme module.
Additionally we destructure the TextContainerId variable from MovieMasher itself, since we want to prepopluate the editor with a text clip. This is optional since the variable is just a standard string which we could hard code, but it's always nice to use the constants.
With everything destructured, the SCRIPT then creates a text clip object and places it within a new mash object. In Movie Masher text is represented as a container, so the clip's containerId is set and container.string is populated with the desired string. By default the content appearing inside the text will simply be a color (white), but it could be an image or video as well. By default the mash color is black, so white text works for this example.
The mash is included in arguments passed to the MasherDefaultProps function. This returns props that are then passed to the createElement function in order to instantiate our Masher component. Finally, the root is created by the createRoot function and our instance is passed to its render` function.
Learn more about building a fully customized video editing client in the
Client Developer Guide.
If any problems arise while utilizing the Movie Masher repository, a
GitHub Issue Ticket should be filed.
Further support is occassionally offered to particular projects on an hourly consulting basis.
Pull requests for fixes, features, and refactorings
are always appreciated, as are documentation updates. Creative help with graphics, video
and the web site is also needed. Please review the Contributor Guide and send an email to discuss ways to work on the project.