@layers-app/editor-video

Video plugin for @layers-app/editor. Supports uploaded videos, YouTube, VK, Rutube, adaptive playback via Shaka Player, chapters, subtitles, quality/speed controls.

Also serves as the reference implementation for building plugins on top of @layers-app/editor-core. Its source imports only from editor-core + peer dependencies — never from @layers-app/editor.

Install

npm install @layers-app/editor @layers-app/editor-video

Usage

import { Editor } from '@layers-app/editor';
import { videoPlugin } from '@layers-app/editor-video';

const videoPluginConfig = useMemo(
  () =>
    videoPlugin({
      pageId,
      maxFileSize: 500,
      onUploadStateChange: (uploading, count) => {
        /* ... */
      },
      onError: (err) => {
        /* ... */
      },
      onTrack: (event, params) => {
        /* ... */
      },
    }),
  [pageId],
);

<Editor plugins={[videoPluginConfig]} ... />

API

type VideoPluginConfig = {
  pageId?: string;
  maxFileSize?: number;
  onUploadStateChange?: (isUploading: boolean, uploadingCount: number) => void;
  onError?: (error: VideoApiError) => void;
  onTrack?: (event: string, params?: Record<string, unknown>) => void;
};

function videoPlugin(config: VideoPluginConfig): PluginConfig;

Also exported: VideoNode, $createVideoNode, $isVideoNode, INSERT_VIDEO_COMMAND, UPLOAD_VIDEO_COMMAND, type VideoStatus, type VideoPlatform, type VideoApiError.

Peer dependencies

Install alongside this package:

• @layers-app/editor (v0.8.0+)
• react 18.3+, react-dom 18.3+
• lexical 0.38+, @lexical/react 0.38+
• @mantine/core 8+, @mantine/hooks 8+, @mantine/dropzone 8+, @mantine/carousel 8+
• @hugeicons/core-free-icons 4+, @hugeicons/react 1+
• @tanstack/react-query 5+
• i18next 25+, react-i18next 15+
• shaka-player-react

@layers-app/editor-core is pulled automatically as a regular dependency.

Migrating from 0.1.x

The embedded-in-editor 0.7.x API and this 0.2.0 API are the same — flat config, no dependency injection. If you were still on 0.1.10, update your videoPlugin(...) call:

// 0.1.10 style (nested DI)
videoPlugin({
  api: { ... },
  components: { Placeholder, Thumbnail, ... },
  tracking: { onTrack },
})

// 0.2.0 style (flat)
videoPlugin({
  pageId,
  maxFileSize,
  onError,
  onTrack,
  onUploadStateChange,
})

All upload / subtitle / chapter UI is provided by the plugin itself.

Architecture

editor-video only imports from:

• @layers-app/editor-core — SDK primitives
• Peer-deps — react, lexical, mantine, etc.

Never imports from @layers-app/editor. The same constraint is the recommended pattern for third-party plugins built by other teams.

License

MIT