@moviemasher/client-react

JavaScript video editor, encoder, and streamer - version 5.0.6

visual compositing through Canvas API
audio mixing through WebAudio API
encoding and streaming through FFmpeg
client implemented in ReactJS
server implemented in ExpressJS

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.

Installation

The following shell command installs the client and core libraries to your NPM project, saving the former to the dependencies array in your package.json file.

npm install @moviemasher/client-react --save

Please note that this does not install a server implementation that interacts with this module. Learn more about how the codebase is structured in the Architecture Guide.

Client Example

From our HTML file we link to both the compiled JavaScript and CSS files. To support the widest variety of workflows and tooling, the Cascading Style Sheets required to layout the client user interface are kept separate from JavaScript code:

masher.html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='masher.js' defer></script>
    <link href='masher.css' rel='stylesheet'>
    <style>
      body { margin: 0px; padding: 0px; font-family: sans-serif; }
      body, #app { width: 100vw; height: 100vh; display: flex; }
      .moviemasher .editor { --preview-width: 480px; --preview-height: 270px; }
    </style>
    <title>Movie Masher</title>
  </head>
  <body>
    <div id='app' class='moviemasher'></div>
  </body>
</html>

Since most of the interface elements scroll and stretch both horizontally and vertically, we are rendering into a node that is styled to fill the whole window. We also apply the moviemasher class to the node, so the additional styles in the CSS file are engaged.

We also use this opportunity to set the dimensions of the video preview in the editor through CSS variables - to their default values, in this case. There are a few ways to override these dimensions, but doing so in the CSS is best practice.

Learn more about coloring and sizing the user interface using CSS in the Style Guide.

masher.tsx

import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom'
import { ApiClient, Masher, DefaultMasherProps } from "@moviemasher/client-react"
import "@moviemasher/client-react/dist/moviemasher.css"

const applicationOptions = { previewSize: { width: 480, height: 270 } }
const options = DefaultMasherProps(applicationOptions)
const masher = <Masher {...options} />
const editor = <ApiClient>{masher}</ApiClient>
const strictMode = <StrictMode>{editor}</StrictMode>
ReactDOM.render(strictMode, document.getElementById('app'))

In this example we're using the DefaultMasherProps function to populate the Masher component with preconfigured children. Alternatively, child components like Player, Browser, Timeline, and Inspector can be selectively provided, and manually configured with a selection of available child controls.

We are also setting the preview dimensions here, to their defaults for demonstration purposes. As mentioned above, overriding the defaults from JavaScript is sub-optimal - a visible resizing will occur as the CSS variables are updated - but helpful if supplying custom CSS is impractical.

Learn more about building a fully customized video editing client in the Layout 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 send an email to discuss ways to contribute to the project.

npm