Video Editor

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe>
        <VeltVideoEditorPlayerWireframe.Title />
        <VeltVideoEditorPlayerWireframe.ApplyButton />
        <VeltVideoEditorPlayerWireframe.RetakeButton />
        <VeltVideoEditorPlayerWireframe.DownloadButton />
        <VeltVideoEditorPlayerWireframe.CloseButton />
        <VeltVideoEditorPlayerWireframe.Preview />
        <VeltVideoEditorPlayerWireframe.ToggleButton />
        <VeltVideoEditorPlayerWireframe.Time />
        <VeltVideoEditorPlayerWireframe.SplitButton />
        <VeltVideoEditorPlayerWireframe.DeleteButton />
        <VeltVideoEditorPlayerWireframe.AddZoomButton />
        <VeltVideoEditorPlayerWireframe.Timeline />
    </VeltVideoEditorPlayerWireframe>
</VeltWireframe>

Title

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Title />
</VeltWireframe>

ApplyButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton>
        <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
    </VeltVideoEditorPlayerWireframe.ApplyButton>
</VeltWireframe>

Loading

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltWireframe>

RetakeButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.RetakeButton />
</VeltWireframe>

DownloadButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DownloadButton />
</VeltWireframe>

CloseButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CloseButton />
</VeltWireframe>

Preview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview>
        <VeltVideoEditorPlayerWireframe.Preview.Loading />
        <VeltVideoEditorPlayerWireframe.Preview.Video />
    </VeltVideoEditorPlayerWireframe.Preview>
</VeltWireframe>

Loading

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Loading />
</VeltWireframe>

Video

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltWireframe>

ToggleButton

Template Variables:

Variable	Description
`isPlayingTrimPreview`	This is true when the video is playing in the preview else it is false

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ToggleButton />
</VeltWireframe>

Time

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Time>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
        <VeltVideoEditorPlayerWireframe.TotalTime />
    </VeltVideoEditorPlayerWireframe.Time>
</VeltWireframe>

CurrentTime

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

TotalTime

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.TotalTime />
</VeltWireframe>

SplitButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.SplitButton>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
    </VeltVideoEditorPlayerWireframe.SplitButton>
</VeltWireframe>

CurrentTime

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

DeleteButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DeleteButton />
</VeltWireframe>

AddZoomButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.AddZoomButton />
</VeltWireframe>

Timeline

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline>
        <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding />
        <VeltVideoEditorPlayerWireframe.Timeline.Container />
        <VeltVideoEditorPlayerWireframe.Timeline.Marker />
    </VeltVideoEditorPlayerWireframe.Timeline>
</VeltWireframe>

BackspaceHint

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
</VeltWireframe>

Onboarding

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
    </VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
</VeltWireframe>

Content

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
</VeltWireframe>

Text

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
    </VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
</VeltWireframe>

Title

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
</VeltWireframe>

Description

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
</VeltWireframe>

Arrow

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
</VeltWireframe>

Container

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Container>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead />
        <VeltVideoEditorPlayerWireframe.Timeline.Trim />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale />
    </VeltVideoEditorPlayerWireframe.Timeline.Container>
</VeltWireframe>

Playhead

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
    </VeltVideoEditorPlayerWireframe.Timeline.Playhead>
</VeltWireframe>

Line

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
</VeltWireframe>

Actions

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
</VeltWireframe>

Trim

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Trim />
</VeltWireframe>

Scale

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale>
</VeltWireframe>

ZoomButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
</VeltWireframe>

Trigger

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
</VeltWireframe>

Options

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
</VeltWireframe>

List

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
</VeltWireframe>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltWireframe>

Input

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltWireframe>

Marker

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltWireframe>

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Title

​ApplyButton

​Loading

​RetakeButton

​DownloadButton

​CloseButton

​Preview

​Loading

​Video

​ToggleButton

​Time

​CurrentTime

​TotalTime

​SplitButton

​CurrentTime

​DeleteButton

​AddZoomButton

​Timeline

​BackspaceHint

​Onboarding

Content

Text

Title

Description

Arrow

​Container

Playhead

Line

Actions

Trim

Scale

ZoomButton

Trigger

Options

List

Item

Input

​Marker

Overview

Title

ApplyButton

Loading

RetakeButton

DownloadButton

CloseButton

Preview

Loading

Video

ToggleButton

Time

CurrentTime

TotalTime

SplitButton

CurrentTime

DeleteButton

AddZoomButton

Timeline

BackspaceHint

Onboarding

Container

Marker