View Slots

You can swap certain views in the SwiftUI SDK, by implementing your own version of the ViewFactory protocol. Here's a list of the supported slots that can be swapped with your custom views.

In most of these slots, the whole CallViewModel is provided, allowing you to update the state from these views.

Outgoing Call View

In order to swap the outgoing call view, we will need to implement the makeOutgoingCallView(viewModel: CallViewModel) -> some View in the ViewFactory:

class CustomViewFactory: ViewFactory {

    func makeOutgoingCallView(viewModel: CallViewModel) -> some View {
        CustomOutgoingCallView(viewModel: viewModel)
    }

}

Incoming Call View

Similarly, the incoming call view can be replaced by implementing the makeIncomingCallView(viewModel: CallViewModel, callInfo: IncomingCall) -> some View in the ViewFactory:

public func makeIncomingCallView(viewModel: CallViewModel, callInfo: IncomingCall) -> some View {
    CustomIncomingCallView(callInfo: callInfo, viewModel: viewModel)
}

Call View

When the call state change to .inCall, the call view slot is shown. The default implementation provides several customizable parts, such as the video participants, the call controls (mute/unmute, hang up) and the top trailing view (which by default displays participants' info).

In order to swap the default call view, you will need to implement the makeCallView(viewModel: CallViewModel) -> some View:

public func makeCallView(viewModel: CallViewModel) -> some View {
    CustomCallView(viewModel: viewModel)
}

Apart from the main call view, you can also swap its building blocks.

Call Controls View

The call controls view by default displays controls for hiding/showing the camera, muting/unmuting the microphone, changing the camera source (front/back) and hanging up. If you want to change these controls, you will need to implement the makeCallControlsView(viewModel: CallViewModel) -> some View method:

func makeCallControlsView(viewModel: CallViewModel) -> some View {
    CustomCallControlsView(viewModel: viewModel)
}

Video Participants View

The video participants view slot presents the grid of users that are in the call. If you want to provide a different variation of the participants display, you will need to implement the makeVideoParticipantsView in the ViewFactory:

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

In the method, the following parameters are provided:

• viewModel - the viewModel that manages the call.
• availableFrame - the available frame for the participants view.
• onChangeTrackVisibility - callback when the track changes its visibility.

Video Participant View

If you want to customize one particular participant view, you can change it via the method makeVideoParticipantView:

func makeVideoParticipantView(
    participant: CallParticipant,
    id: String,
    availableFrame: CGRect,
    contentMode: UIView.ContentMode,
    customData: [String: RawJSON],
    call: Call?
) -> some View {
    VideoCallParticipantView(
        participant: participant,
        id: id,
        availableFrame: availableFrame,
        contentMode: contentMode,
        customData: customData, 
        call: call
    )
}

Additionally, you can change the modifier applied to the view, by implementing the makeVideoCallParticipantModifier:

public func makeVideoCallParticipantModifier(
        participant: CallParticipant,
        call: Call?,
        availableFrame: CGRect,
        ratio: CGFloat,
        showAllInfo: Bool
) -> some ViewModifier {
    VideoCallParticipantModifier(
        participant: participant,
        call: call,
        availableFrame: availableFrame,
        ratio: ratio,
        showAllInfo: showAllInfo
    )
}

Top View

This is the view presented in the top area of the call view. By default, it displays a back button (to go in minimized mode) and a button that shows the list of participants. You can swap this view with your own implementation, by implementing the makeCallTopView in the ViewFactory:

public func makeCallTopView(viewModel: CallViewModel) -> some View {
    CallTopView(viewModel: viewModel)
}