### Video Plugin

If a Picture is Worth a Thousand Words, Then Is a Video Worth a Million?

#### Usage

##### Editor

```tsx widget
import { pluginVideo, RicosEditor, videoButtonsTypes } from '@wix/ricos';
import React from 'react';

export default () => {
  return (
    // @essential-start
    <RicosEditor
      placeholder={'Add an video..'}
      plugins={[
        pluginVideo({
          exposeButtons: [videoButtonsTypes.video, videoButtonsTypes.youTube],
        }),
      ]}
    />
    // @essential-end
  );
};
```

##### Viewer

```tsx widget
import '@wix/ricos/css/plugin-video-viewer.global.css';
import '@wix/ricos/css/ricos-viewer.global.css';
import type { RichContent } from '@wix/ricos';
import { pluginVideoViewer, RicosViewer } from '@wix/ricos';
import React from 'react';

export default () => {
  // @essential-start
  return <RicosViewer content={content} plugins={[pluginVideoViewer()]} />;
  // @essential-end
};

const content = {
  nodes: [
    {
      type: 'VIDEO',
      id: 'g5bh230',
      videoData: {
        containerData: {
          width: {
            size: 'CONTENT',
          },
          alignment: 'CENTER',
        },
        video: {
          src: {
            id: 'video/11062b_a552731f40854d16a91627687fb8d1a6/1080p/mp4/file.mp4',
          },
          duration: 14.08,
        },
        thumbnail: {
          src: {
            id: 'media/11062b_a552731f40854d16a91627687fb8d1a6f000.jpg',
          },
          width: 1920,
          height: 1080,
        },
      },
    },
  ],
} as RichContent;
```

#### Video Config API

#### `Viewer disableDownload (deprecated!)`

##### disableDownload should be set in the mediaSettings of the editor.

```jsx
disableDownload?: boolean;
```

##### `getVideoUrl`

This function take the pathname and form a full URL (invoked when rendering video which has relative URL).

```jsx
getVideoUrl?: (src: { pathname: string }) => string;
```

##### `onProgress`

Callback containing

- `played` and `loaded` progress as a fraction.
- `playedSeconds` and `loadedSeconds` in seconds.
- `id` of video

```jsx
onProgress?: () => ({ played: number, playedSeconds: number, loaded: number, loadedSeconds: number, id: string });
```

##### `progressInterval`

The time between onProgress callbacks, in milliseconds (default `1000`)

```jsx
progressInterval?: number;
```

##### `toolbar`

The toolbar setting refers to the plugin functionality toolbar, it is an object which may consist of the following keys:

```jsx
toolbar?: {
  hidden?: [keynames: string];
  icons?: { keynames: string };
}
```

`hidden` - An array of toolbar button keynames to be removed from toolbar

`icons` - An object of toolbar button keynames to custom icons map (e.g \{ replace: MyCustomReplaceIcon \}, \{ InsertPluginButtonIcon: MyCustomInsertIcon \} etc...)

##### `exposeButtons`

The buttons exposed by the plugin

```jsx
exposeButtons?: array;
```

Example value:

```jsx
[videoButtonsTypes.video, videoButtonsTypes.youtube];
```

#### YouTube Plugin

YouTube toolbar button is part of the Video plugin. To use it we need to expose a button with `exposeButtons`
