Editor

A powerful media editing interface combining timeline, file explorer, and preview for complete video editing.

Introduction

The Editor component is the core of the Stoked UI media editing system. It provides a comprehensive interface for working with video, audio, and other media files. The Editor integrates several complex components:

• Timeline: For manipulating time-based media and actions
• File Explorer: For organizing and selecting media files
• Preview Area: For viewing and playback of media content
• Controls: For playback, editing operations, and other actions

Basics

import { Editor } from '@stoked-ui/editor';
import { EditorFile } from '@stoked-ui/editor';

Basic Editor

A simple editor with default settings provides the foundation for media editing.

File View

Use the fileView prop to show the file explorer panel, which allows for easy file navigation and selection.

Labels

Use the labels prop to display track labels in the timeline, making it easier to identify different media tracks.

Pre-loaded Content

The Editor can be initialized with pre-loaded content using the EditorFile object.

Customization

Minimal Mode

Use the minimal prop to enable a simplified version of the editor with fewer controls.

Fullscreen Mode

Use the fullscreen prop to display the editor in fullscreen mode for an immersive editing experience.

Editor Modes

The Editor component supports different operational modes through the mode prop: 'project', 'track', or 'action'.

Performance

The Editor component is designed to handle complex media projects efficiently. However, for larger projects with many tracks and actions, you might want to consider:

• Using the minimal mode when full editing capabilities aren't needed
• Ensuring that only necessary panels are visible (for example, hiding the file explorer when not needed)
• Implementing pagination or virtualization for large file lists

<Editor 
  minimal={true}
  fileView={false}
  // other performance-focused props
/>

Accessibility

The Editor component is built with accessibility in mind, following ARIA guidelines for complex user interfaces. Key accessibility features include:

• Keyboard navigation for all controls
• ARIA labels for interactive elements
• Focus management across the interface

<Editor 
  // Ensure labels for better screen reader experience
  labels={true}
  // Other accessibility-focused props
/>

Anatomy

The Editor component consists of several key parts:

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Editor />