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

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

# FeaturedVideoTileProvider

The `FeaturedVideoTileProvider` provides the tile ID of the **most** active speaker, if the speaker is sharing video. If there are no active speakers, or the active speaker is not sharing video, there will be no tile ID.

## State

```javascript
{
  tileId: number | null;
}
```

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

## Usage

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

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

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

const MyChild = () => {
  const { tileId } = useFeaturedTileState();

  return (
    <div>{tileId ? `Tile ${tileId} is featured` : 'No featured tiles'}</div>
  );
};
```

## Usage without MeetingProvider

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

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

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

### Dependencies

- `AudioVideoProvider`
- `RemoteVideoTileProvider`
- `ActiveSpeakersProvider`