@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

React Client Plug-in

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.

Documentation

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.

Client Example

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...

umd.html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Movie Masher React Example</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='https://unpkg.com/react@18/umd/react.production.min.js' crossorigin></script>
    <script src='https://unpkg.com/react-dom@18/umd/react-dom.production.min.js' crossorigin></script>
    <script src='https://unpkg.com/@moviemasher/moviemasher.js@5.1.1/umd/moviemasher.js' crossorigin></script>
    <script src='https://unpkg.com/@moviemasher/theme-default@5.1.1/umd/theme-default.js' crossorigin></script>
    <script src='https://unpkg.com/@moviemasher/client-react@5.1.1/umd/client-react.js' crossorigin></script>
    <link href='https://unpkg.com/@moviemasher/theme-default@5.1.1/moviemasher.css' rel='stylesheet'>
    <style> /* fit root DIV to viewport */
      body { margin: 0px; padding: 0px; font-family: sans-serif; }
      body, #root { width: 100vw; height: 100vh; display: flex; }
    </style>
  </head>
  <body>
    <div id='root' class='moviemasher'></div>
    <script>

// create constant referencing root DIV element
const element = document.getElementById('root')

// destructure constants from packages
const { createElement } = React
const { createRoot } = ReactDOM
const { Masher, MasherDefaultProps } = MovieMasherClient
const { TextContainerId } = MovieMasher

// create mash object containing text clip on a track
const clip = { 
  container: { string: 'Hello World!' }, 
  containerId: TextContainerId
}
const mash = { tracks: [{ clips: [clip] }] }

// create root and render new Masher with mash in props
const props = MasherDefaultProps({ edited: { mash } })
const masher = createElement(Masher, props) 
createRoot(element).render(masher)

    </script>
  </body>
</html>

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.

Feedback

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.

npm