VideoParticipantsView

The VideoParticipantsView is a container view that displays the participants in a call in several different layouts.

The following layouts are supported at the moment:

grid - the users are displayed in a scrollable grid.
spotlight - the dominant speaker takes a large section of the view, while the other participants are displayed in a scrollable horizontal list below.
fullScreen - only the dominant speaker is presented.

The layout for the participants is determined by the participantsLayout property in the CallViewModel.

Here’s how the default grid UI looks like:

Usage

The VideoParticipantsView is a stateful component that requires a CallViewModel. Here’s an example of how to use it as a standalone component:

VideoParticipantsView(
    viewFactory: DefaultViewFactory.shared,
    viewModel: viewModel,
    availableFrame: availableFrame,
    onChangeTrackVisibility: onChangeTrackVisibility
)

The parameters needed for this component are as follows:

viewFactory - the view factory used for creation of the views
viewModel - the CallViewModel
availableFrame - the available frame for the view
onChangeTrackVisibility - called when the track changes its visibility

If you are using our ViewFactory, you can swap this component with your implementation by implementing the following method:

public func makeVideoParticipantsView(
    viewModel: CallViewModel,
    availableFrame: CGRect,
    onChangeTrackVisibility: @escaping @MainActor(CallParticipant, Bool) -> Void
) -> some View {
    CustomVideoParticipantsView(
        viewFactory: self,
        viewModel: viewModel,
        availableFrame: availableFrame,
        onChangeTrackVisibility: onChangeTrackVisibility
    )
}

The different layouts for this component are also provided as standalone components that you can use to build your own variations of the UI.

Grid

Here’s an example how to use the grid layout in your views:

ParticipantsGridLayout(
    viewFactory: viewFactory,
    call: viewModel.call,
    participants: viewModel.participants,
    availableFrame: availableFrame
    onChangeTrackVisibility: onChangeTrackVisibility
)

Spotlight

This example shows the usage of the spotlight layout:

ParticipantsSpotlightLayout(
    viewFactory: viewFactory,
    participant: first,
    call: viewModel.call,
    participants: Array(viewModel.participants.dropFirst()),
    frame: availableFrame,
    onChangeTrackVisibility: onChangeTrackVisibility
)

Full Screen

You can use the full screen layout with the code below:

ParticipantsFullScreenLayout(
    viewFactory: viewFactory,
    participant: first,
    call: viewModel.call,
    frame: availableFrame,
    onChangeTrackVisibility: onChangeTrackVisibility
)

VideoCallParticipantView

CallParticipantsInfoView