import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { MediaPlayer } from '../';
import { MediaPlayerStory } from './media-player.stories.js';

<Meta title='Originals/Display' component={MediaPlayer} decorators={[withKnobs]}/>

<Title>Media Player</Title>

<Description>
  Player de midia dos aplicativos Eureca. Utiliza a biblioteca [react-player](https://github.com/CookPete/react-player)
</Description>

<Description>
Podem ser utilizados arquivos de audio ou video e também links de plataformas de streaming
como: **Youtube**, **Vimeo**, **Facebook**, **SoundCloud**, **Wistia**, **MixCloud**, **Daily Motion** e **Twitch**.
</Description>

<Preview>
  <Story name="Media Player">
    <MediaPlayerStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| source | Arquivo de midia a ser exibido <br /> 'string' \| 'node' | '' |
| configProps | Objeto de configurações opcionais do player. Aceita valores da biblioteca react-player <br /> 'string' \| 'node' | '' |

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<MediaPlayer source='https://www.youtube.com/watch?v=lMu0Fv7fF5I' />
```