Custom Label

Showing participant info is an important part of the calling experience, and can have different design variations. By default, the SDK shows the name of the participant with white color, in a black container with opacity. Additionally, it shows the connection info, as well as whether the user is pinned.

You can change this default UI by implementing the makeVideoCallParticipantModifier in your custom ViewFactory. For example, let’s simplify this view and just display a bold white name of the participant.

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

The implementation of the CustomParticipantModifier looks like this:

struct CustomParticipantModifier: ViewModifier {

    var participant: CallParticipant
    var call: Call?
    var availableFrame: CGRect
    var ratio: CGFloat
    var showAllInfo: Bool

    public init(
        participant: CallParticipant,
        call: Call?,
        availableFrame: CGRect,
        ratio: CGFloat,
        showAllInfo: Bool
    ) {
        self.participant = participant
        self.call = call
        self.availableFrame = availableFrame
        self.ratio = ratio
        self.showAllInfo = showAllInfo
    }

    public func body(content: Content) -> some View {
        content
            .adjustVideoFrame(to: availableFrame.size.width, ratio: ratio)
            .overlay(
                ZStack {
                    VStack {
                        Spacer()
                        HStack {
                            Text(participant.name)
                                .foregroundColor(.white)
                                .bold()
                            Spacer()
                            ConnectionQualityIndicator(
                                connectionQuality: participant.connectionQuality
                            )
                        }
                        .padding(.bottom, 2)
                    }
                    .padding()
                }
                .modifier(VideoCallParticipantSpeakingModifier(participant: participant, participantCount: 1))
            )
    }
}

The important part here is the overlay applied to the view. Here, we are using a ZStack as a container, while putting the name and the connection quality indicator at the bottom of a VStack.

Call Controls

Video Layout