# ParticipantsSpotlight

`ParticipantsSpotlight` is a Composable component that allows you to highlight one participant so that it takes up most of the screen, while the rest are rendered
either as a horizontal or vertical list, depending on orientation.

Let's see how to use the `ParticipantsSpotlight` component.

## Usage

To use the `ParticipantsSpotlight` component in your app you can use it directly as a component or you can configure the [ParticipantsLayout](https://getstream.io/video/docs/android/ui-components/participants/participants-grid/) to display the spotlight.

### Use it directly

```kotlin
ParticipantsSpotlight(call = call)
```

The only mandatory parameter is `call` which represents the call for which the participants are being displayed.

### Use it via [ParticipantsLayout](https://getstream.io/video/docs/android/ui-components/participants/participants-grid/)

If you are using the `ParticipantsLayout` you can use an enum value `LayoutType` with one of three options.

Those are:

```kotlin
    //Automatically choose between Grid and Spotlight based on pinned participants and dominant speaker.
    DYNAMIC

    //Force a spotlight view, showing the dominant speaker or the first speaker in the list.
    SPOTLIGHT

    //Always show a grid layout, regardless of pinned participants.
    GRID
```

Here is how it looks in action:

```kotlin
ParticipantsLayout(
    layoutType = LayoutType.SPOTLIGHT,
    call = call
)
```

The [ParticipantsLayout](https://getstream.io/video/docs/android/ui-components/participants/participants-grid/) internally displays the `ParticipantSpotlight` in two cases.

1. You have set the `layoutType` to `LayoutType.SPOTLIGHT` in which case a participant is always spotlighted. The participant shown in the spotlight is chosen based on the following order:
   1. is pinned
   2. is dominant speaker
   3. is first in the participants list
2. You have set the `LayoutType` to `LayoutType.DYNAMIC` in which case if there is a pinned participant, the spotlight view will be chosen in favor of grid.

_Note_: `ParticipantLayout` will always prioritize screen sharing regardless of the `LayoutType` if there is a [screen sharing session](https://getstream.io/video/docs/android/ui-components/call/screen-share-content/) active.

Using this component, you'll likely see something similar to the following UI:

![Spotlight portrait](https://getstream.io/docs-assets/images/ec380907b3a1.png)

![Spotlight landscape](https://getstream.io/docs-assets/images/ea1baf75c084.png)

Let's see how to customize this component.

## Customization

This is a very simple component so it doesn't have replaceable slots, but it still offers ways to customize its appearance.

- `modifier`: Modifier for styling.
- `isZoomable`: Decide if this spotlight video renderer is zoomable or not.
- `style`: Defined properties for styling a single video call track.
- `videoRenderer`: A single video renderer that renders each individual participant. If you want to use your own video renderer, you can implement your own composable with `videoRenderer`.

If you're looking for guides on how to override and customize this UI, we have various UI Cookbooks for you and we cover a portion of customization within the [Video Android SDK Tutorial](https://getstream.io/video/sdk/android/tutorial/video-calling/).

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/android/ui-components/participants/participants-spotlight/](https://getstream.io/video/docs/android/ui-components/participants/participants-spotlight/).