# @layers-app/editor-video

Video plugin for [`@layers-app/editor`](https://www.npmjs.com/package/@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`](https://www.npmjs.com/package/@layers-app/editor-core). Its source imports only from editor-core + peer dependencies — never from `@layers-app/editor`.

## Install

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

## Usage

```tsx
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

```ts
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:

```ts
// 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