import { Meta } from '@storybook/blocks';

<Meta title="SDK Providers/RemoteVideoTileProvider" />

# RemoteVideoTileProvider

The `RemoteVideoTileProvider` provides the state of remote video tiles.

### State

```javascript
{
  // An array of all available remote tile IDs
  tiles: number[];

  // An object that maps the tile ID to an attendee ID
  tileIdToAttendeeId: {
    [key: string]: string;
  }

  // An object that maps an attendee ID to a tile ID
  attendeeIdToTileId: {
    [key: string]: number;
  };

  // The total number of available remote tiles
  size: number;
}
```

You can access the state with the `useRemoteVideoTileState` hook.

## Usage

If you are using `MeetingProvider`, the `RemoteVideoTileProvider` is rendered by default.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useRemoteVideoTileState,
  RemoteVideo,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { tiles } = useRemoteVideoTileState();

  const videos = tiles.map((tileId) => <RemoteVideo tileId={tileId} />);

  return <>{videos}</>;
};
```

## Usage without MeetingProvider

If you opt out of using `MeetingProvider`, you can drop in a `RemoteVideoTileProvider` and use its state. Make sure that its dependencies are rendered higher in the tree.

```jsx
import React from 'react';
import { RemoteVideoTileProvider } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <CustomAudioVideoProvider>
    <RemoteVideoTileProvider>
      <MyComponent />
    </RemoteVideoTileProvider>
  </CustomAudioVideoProvider>
);
```

### Dependencies

- `AudioVideoProvider`