Configuration

Typically, integration with Tesseract and it's many lifecycle events happens entirely via callback functions that are defined within the Config object. These are divided into 3 objects, and 1 root element:

• RootElement
• RootEditElement
• EditingConfig
• UserProperties
• layout
• CustomTheme
• InputProperties
• OutputProperties

All configuration options have defaults that use the StoryXpress domain.****

Config is generally an object in the following format:

RootElement

The RootElement in the DOM is where the SX EditorDK UI begins. It's initially hidden and appears on user interaction, like a button click (e.g., a modal). Alternatively, it can be visible from the start. The shadow-root ensures the UI is encapsulated, preventing conflicts with the rest of the page.

SX EditorSDK UI can also be rendered directly into the DOM on first paint. This is achieved by setting the RootElement to be an element that is not hidden, but already a part of the DOM.

RootEditElement:

RootEditElement is the container or parent element in the DOM where you want to render the Tesseract UI (aka the Popup).

Typically, the RootElement is hidden on first paint, and is opened when the user interacts with an element to display the RootElement. The most common example of this is a modal.

TesseractEdit UI can also be rendered directly into the DOM on first paint. This is achieved by setting the RootElement to be an element that is not hidden, but already a part of the DOM.

EditingConfig:

EditingConfig contains events pertaining to the lifecycle of the video recording itself. Once the user has selected the mode, devices that he wants to use, and starts his recording, these callbacks to maintain receive and store relevant data for the video.

const EditingConfig = {
  onApply: (err, data) => {
    console.log("onApply called", err, data);
  },
  onCancel: () => {
    console.log("onCancel called");
  },
  onError:(err) =>{
    console.log("onError called", err)
  },
  onWarning:(warning) =>{
    console.log("onWarning called", warning)
  }
};

UserProperties:

UserProperties are the custom identifiers specific to a user on your platform that you must provide. These can be used to uniquely identify a user on your web application. Subsequently, the videos your user records can be uploaded to a unique directory on the cloud.

const UserProperties = {
  userId: <a aria-hidden="true" href="#userId">userId</a>,
  editBucketDir: <a aria-hidden="true" href="#bucketDir">bucketDir</a>
}

userId

string

• UserId can be a set of chars(string) that uniquely identifies the user on your system.

editBucketDir

string

• editBucketDir is the dir path on your pre-configured storage bucket where you want the user video to be uploaded. Example: In order to upload a video to a users' unique directory you can set the path as /teamId/userId/tesseract-videos/

layout:

Customize EditorSDK modal popup with following values

string "1x4": Arranges elements in a single row with four items. "2x2": Organizes elements into a 2x2 grid layout. "4x1": Places elements in a single column with four items.

CustomTheme

const CustomTheme = {
  fontColor: "#ffffff",
  primaryColor: "#1F40FF",
  secondaryColor: "#F5F5F5"
}

Properties

fontColor

Type: string
Default: #ffffff

primaryColor

Type: string
Default: #1F40FF

secondaryColor

Type: string
Default: #F5F5F5

InputProperties

Specify the input properties required for editing a video

const InputProperties = {
  bucketDir: <a aria-hidden="true" href="#bucketDir">bucketDir</a>,
  fileName: <a aria-hidden="true" href="#bucketDir">fileName</a>,
  videoId: <a aria-hidden="true" href="#videoId">videoId</a>
}

bucketDir

string

• Specifies the directory in which the target video for editing is located. Required if videoId is not present.

fileName

string

• Specifies the name of the target video file within the specified bucket directory. Required if videoId is not present.

videoId

string

• Specifies the ID of the video associated with the input data. If videoId is present, bucketDir and fileName are not required.

OutputProperties

Specify the output properties required for editing a video

const OutputProperties = {
  bucketDir: <a aria-hidden="true" href="#bucketDir">bucketDir</a>,
  fileName: <a aria-hidden="true" href="#fileName">fileName</a>
}

bucketDir

string

• Specifies the directory path where the edited video will be stored.

fileName

string

• Specifies the name of the resulting video file to be saved under this filename.