JavaScript video editor, encoder, and streamer - version 5.0.6

Laying out a Movie Masher client application involves creating a tagging structure that properly nests components within a functional hierarchy. A given child component may have to be positioned under a particular parent component in order to access the context it needs to fully function.

Here we discuss each of the components that supply context to their children, in the order they usually appear within the hierarchy.

The ApiClient component is typically the root component wrapping the entire application, which allows all child components that require server interaction to share its ApiContext. This contains an enabled array containing a ServerType for each supported server, and an endpointPromise method returning a fetch-based promise for each request.

Some child components use the array to automatically hide themselves if their required server is unsupported, so the server can ultimately control the visibility of certain client functionality. All child components use the promise method to post requests to their server(s). Learn more about the server side of these same interactions in the Integration Guide.

The Caster component can be the root component or a descendent of ApiClient. In the later case, it will make a DataCastDefaultRequest to retrieve a Cast to load. It supplies a CasterContext to its children which simply contains a castEditor reference to the underlying CastEditor. Some child components use this reference to subscribe to its events, access its properties, and call its methods. It typically contains the following children:

The Masher component can be the root component or placed under either an ApiClient or a Caster component. When under an ApiClient component, it will make a DataMashDefaultRequest to retrieve a a MashObject to load. When under a Caster component, it will instead load its selected Mash. It supplies a MasherContext to its children which simply contains a mashEditor reference to the underlying MashEditor. The user interface presented on the Demo page uses the DefaultMasherProps method to suppy default props to this component. It supplies the following children: