import { VideoTile } from './VideoTile.tsx';
import {
  DefaultVideoTile,
  GoogleMeetVideoTile,
} from './VideoTile.stories.tsx';
import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';

<Meta title="Design System|CreditCard" component={VideoTile} />;

# VideoTile

You can use VideoTile component to render local or remote video content.

## Importing


## Example

### Default VideoTile

<Canvas>
  <DefaultVideoTile
    videoSource="camera"
    peer={{ id: '123', name: 'Eswar' }}
    {...DefaultVideoTile.args}
  />
</Canvas>

Note: You need to pass MediaStream object as props to VideoTile for it to work

```jsx
<VideoTile
  isLocal={true}
  stream={MediaStream}
  peer={{ id: '123', name: 'Eswar' }}
  aspectRatio={{ width: 1, height: 1 }}
  displayShape="rectangle"
  showAudioLevel={true}
  audioLevelDisplayType="border"
  audioLevel={40}
/>
```

### Google Meet VideoTile

<Canvas>
  <GoogleMeetVideoTile
    videoSource="camera"
    peer={{ id: '123', name: 'Eswar' }}
    {...GoogleMeetVideoTile.args}
  />
</Canvas>

Note: You need to pass MediaStream object as props to VideoTile for it to work

```jsx
<VideoTile
  isLocal={true}
  stream={MediaStream}
  peer={{ id: '123', name: 'Eswar' }}
  aspectRatio={{ width: 16, height: 9 }}
  displayShape="rectangle"
  showAudioLevel={true}
  audioLevelDisplayType="border"
  audioLevel={40}
  className=""
/>
```

### Campfire VideoTile

<Canvas>
  <AroundVideoTile
    videoSource="camera"
    peer={{ id: '123', name: 'Eswar' }}
    {...AroundVideoTile.args}
  />
</Canvas>

Note: You need to pass MediaStream object as props to VideoTile for it to work

```jsx
<VideoTile
  isLocal={true}
  stream={MediaStream}
  peer={{ id: '123', name: 'Eswar' }}
  displayShape="circle"
  showAudioLevel={true}
  audioLevelDisplayType="border"
  audioLevel={40}
/>
```

## Props

#### VideoTile component

<Props of={VideoTile} />