Incoming Call - CometChat Docs

Overview

The Incoming call is a Component that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.

Usage

Integration

CometChatIncomingCall being a custom view controller, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.

let cometChatIncomingCall = CometChatIncomingCall().set(call: call)
cometChatIncomingCall.modalPresentationStyle = .fullScreen
self.present(cometChatIncomingCall, animated: true)

If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.

Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

1. SetOnAcceptClick

The setOnAcceptClick action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.

let cometChatIncomingCall = CometChatIncomingCall()
.set(onAcceptClick: { call, controller in
//Perform Your Action

})

2. SetOnCancelClick

The setOnCancelClick action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.

let cometChatIncomingCall = CometChatIncomingCall()
.set(onCancelClick: { call, controller in
    //Perform Your Action

})

3. OnError

You can customize this behavior by using the provided code snippet to override the On Error and improve error handling.


let incomingCallConfiguration = IncomingCallConfiguration()
.set(onError:{ error in
//Perform Your Action

})

Filters

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. The IncomingCall component does not have any exposed filters.

Events

Events are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Incoming Call component is as follows.

Event	Description
onIncomingCallAccepted	Triggers when the logged-in user accepts the incoming call.
onIncomingCallRejected	This event is triggered when the logged-in user rejects the incoming call.
onCallEnded	This event is triggered when the initiated call successfully ends.

// View controller from your project where you want to listen events.
public class ViewController: UIViewController {

   public override func viewDidLoad() {
        super.viewDidLoad()

       // Subscribing for the listener to listen events from user module
        CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
    }

}
 // Listener events from user module
extension  ViewController: CometChatCallEventListener {

    func onIncomingCallAccepted(call: Call) {
        // Do Stuff
    }
    func onIncomingCallRejected(call: Call){
        // Do Stuff
    }

    func onCallEnded(call: Call) {
        // Do Stuff
    }
}

Emitting Group Events

//emit this when logged in user accepts the incoming call
CometChatCallEvents.emitOnIncomingCallAccepted(call: Call)

//emit this when logged in user rejects the incoming call
CometChatCallEvents.emitOnIncomingCallRejected(call: Call)

//emit this when logged in user cancels a call
CometChatCallEvents.emitOnCallEnded(call: Call)

View Controller

public override func viewWillDisappear(_ animated: Bool) {
      // Uncubscribing for the listener to listen events from user module
      CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}

Customization

To fit your app’s design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

1. IncomingCall Style

You can customize the appearance of the IncomingCall Component by applying the IncomingCallStyle to it using the following code snippet. Global level styling

let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
                
CometChatIncomingCall.style.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
CometChatIncomingCall.style.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
CometChatIncomingCall.style.acceptButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.style.rejectButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.avatarStyle = customAvatarStyle

Instance level styling

var customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
                
var incomingCallStyle = IncomingCallStyle()
incomingCallStyle.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
incomingCallStyle.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
incomingCallStyle.acceptButtonCornerRadius = .init(cornerRadius: 8)
incomingCallStyle.rejectButtonCornerRadius = .init(cornerRadius: 8)
                        
let incomingCall = CometChatIncomingCall()
incomingCall.style = incomingCallStyle
incomingCall.avatarStyle = customAvatarStyle

List of properties exposed by IncomingCallStyle

Property	Description	Code
`overlayBackgroundColor`	Background color for the overlay.	`overlayBackgroundColor: UIColor`
`acceptButtonBackgroundColor`	Background color for the accept button.	`acceptButtonBackgroundColor: UIColor`
`rejectButtonBackgroundColor`	Background color for the reject button.	`rejectButtonBackgroundColor: UIColor`
`acceptButtonTintColor`	Tint color for the accept button.	`acceptButtonTintColor: UIColor`
`rejectButtonTintColor`	Tint color for the reject button.	`rejectButtonTintColor: UIColor`
`acceptButtonImage`	Icon image for the accept button.	`acceptButtonImage: UIImage`
`rejectButtonImage`	Icon image for the reject button.	`rejectButtonImage: UIImage`
`acceptButtonCornerRadius`	Sets corner radius for accept button	`acceptButtonCornerRadius: CometChatCornerStyle?`
`rejectButtonCornerRadius`	Sets corner radius for reject button	`rejectButtonCornerRadius: CometChatCornerStyle?`
`acceptButtonBorderWidth`	Sets border width for accept button	`acceptButtonBorderWidth: CGFloat?`
`rejectButtonBorderWidth`	Sets border width for reject button	`rejectButtonBorderWidth: CGFloat?`
`acceptButtonBorderColor`	Sets border color for accept button	`acceptButtonBorderColor: UIColor?`
`rejectButtonBorderColor`	Sets border color for reject button	`rejectButtonBorderColor: UIColor?`
`backgroundColor`	Background color for the call view.	`backgroundColor: UIColor`
`cornerRadius`	Corner radius for the view.	`cornerRadius: nil`
`borderColor`	Border color for the view.	`borderColor: UIColor`
`borderWidth`	Border width for the view.	`borderWidth: CGFloat`
`callLabelColor`	Text color for the call label.	`callLabelColor: UIColor`
`callLabelFont`	Font for the call label.	`callLabelFont: UIFont`
`nameLabelColor`	Text color for the name label.	`nameLabelColor: UIColor`
`nameLabelFont`	Font for the name label.	`nameLabelFont: UIFont`

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.

Property	Description	Code
disableSoundForCalls	Disables sound for incoming calls.	`disableSoundForCalls = true`
setCustomSoundForCalls	Sets a custom sound for incoming calls.	`set(customSoundForCalls: URL)`

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

SetListItemView

With this function, you can assign a custom view to the incoming call item view.

cometChatIncomingCall.set(listItemView: { call in
    let customView = CustomListItemView()
    return customView
})

Demonstration

You can create a CustomListItemView as a custom UIView.

swift

import UIKit

class CustomListItemView: UIView {
    
    private let avatarView: UILabel = {
        let label = UILabel()
        label.backgroundColor = UIColor.systemPurple
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 18)
        label.textAlignment = .center
        label.layer.cornerRadius = 20
        label.clipsToBounds = true
        return label
    }()
    
    private let callTypeLabel: UILabel = {
        let label = UILabel()
        label.text = "Voice Call"
        label.textColor = .darkGray
        label.font = UIFont.systemFont(ofSize: 14)
        return label
    }()
    
    private let userNameLabel: UILabel = {
        let label = UILabel()
        label.text = "George Allen"
        label.font = UIFont.boldSystemFont(ofSize: 16)
        return label
    }()
    
    private let endCallButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "phone.down.fill"), for: .normal)
        button.tintColor = .red
        button.backgroundColor = .white
        button.layer.cornerRadius = 18
        return button
    }()
    
    private let acceptCallButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "phone.fill"), for: .normal)
        button.tintColor = .white
        button.backgroundColor = UIColor.systemPurple
        button.layer.cornerRadius = 18
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        backgroundColor = UIColor.systemPurple.withAlphaComponent(0.1)
        layer.cornerRadius = 20
        
        addSubview(avatarView)
        addSubview(callTypeLabel)
        addSubview(userNameLabel)
        addSubview(endCallButton)
        addSubview(acceptCallButton)
        
        avatarView.translatesAutoresizingMaskIntoConstraints = false
        callTypeLabel.translatesAutoresizingMaskIntoConstraints = false
        userNameLabel.translatesAutoresizingMaskIntoConstraints = false
        endCallButton.translatesAutoresizingMaskIntoConstraints = false
        acceptCallButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            avatarView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            avatarView.centerYAnchor.constraint(equalTo: centerYAnchor),
            avatarView.widthAnchor.constraint(equalToConstant: 40),
            avatarView.heightAnchor.constraint(equalToConstant: 40),
            
            callTypeLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            callTypeLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 8),
            
            userNameLabel.topAnchor.constraint(equalTo: callTypeLabel.bottomAnchor, constant: 2),
            userNameLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 8),
            
            endCallButton.trailingAnchor.constraint(equalTo: acceptCallButton.leadingAnchor, constant: -8),
            endCallButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            endCallButton.widthAnchor.constraint(equalToConstant: 36),
            endCallButton.heightAnchor.constraint(equalToConstant: 36),
            
            acceptCallButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
            acceptCallButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            acceptCallButton.widthAnchor.constraint(equalToConstant: 36),
            acceptCallButton.heightAnchor.constraint(equalToConstant: 36)
        ])
    }
}

SetLeadingView

You can modify the leading view of a Incoming call component using the property below.

cometChatIncomingCall.set(leadingView: { call in
    let view = CustomLeadingView()
    return view
})

Demonstration

You can create a CustomLeadingView as a custom UIView.

import UIKit

class CustomLeadingView: UIView {
    
    private let starIconView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = UIColor.systemPurple
        imageView.backgroundColor = .white
        imageView.layer.cornerRadius = 20
        imageView.contentMode = .center
        return imageView
    }()
    
    private let label: UILabel = {
        let label = UILabel()
        label.text = "PRO USER"
        label.font = UIFont.boldSystemFont(ofSize: 14)
        label.textColor = .white
        text.textAlignment = .center
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        backgroundColor = UIColor.systemPurple
        layer.cornerRadius = 10
        
        addSubview(starIconView)
        addSubview(label)
        
        starIconView.translatesAutoresizingMaskIntoConstraints = false
        label.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            starIconView.centerXAnchor.constraint(equalTo: centerXAnchor),
            starIconView.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            starIconView.widthAnchor.constraint(equalToConstant: 40),
            starIconView.heightAnchor.constraint(equalToConstant: 40),
            
            label.topAnchor.constraint(equalTo: starIconView.bottomAnchor, constant: 8),
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
        ])
    }
}

SetTitleView

You can customize the title view of a incoming call component using the property below.

cometChatIncomingCall.set(titleView: { call in
    let view = CustomTitleView()
    return view
})

Demonstration

You can create a CustomTitleView as a custom UIView. Which we will inflate in setTitleView()

import UIKit

class `CustomTitleView`: UIView {
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Voice Call"
        label.textColor = .darkGray
        label.font = UIFont.systemFont(ofSize: 16)
        return label
    }()
    
    private let tagView: UIView = {
        let view = UIView()
        view.backgroundColor = .systemGreen
        view.layer.cornerRadius = 12
        return view
    }()
    
    private let starIconView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = .white
        return imageView
    }()
    
    private let tagLabel: UILabel = {
        let label = UILabel()
        label.text = "Important"
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 14)
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        addSubview(titleLabel)
        addSubview(tagView)
        tagView.addSubview(starIconView)
        tagView.addSubview(tagLabel)
        
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        tagView.translatesAutoresizingMaskIntoConstraints = false
        starIconView.translatesAutoresizingMaskIntoConstraints = false
        tagLabel.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            tagView.leadingAnchor.constraint(equalTo: titleLabel.trailingAnchor, constant: 8),
            tagView.centerYAnchor.constraint(equalTo: centerYAnchor),
            tagView.heightAnchor.constraint(equalToConstant: 24),
            tagView.widthAnchor.constraint(equalToConstant: 100),
            
            starIconView.leadingAnchor.constraint(equalTo: tagView.leadingAnchor, constant: 8),
            starIconView.centerYAnchor.constraint(equalTo: tagView.centerYAnchor),
            starIconView.widthAnchor.constraint(equalToConstant: 16),
            starIconView.heightAnchor.constraint(equalToConstant: 16),
            
            tagLabel.leadingAnchor.constraint(equalTo: starIconView.trailingAnchor, constant: 4),
            tagLabel.centerYAnchor.constraint(equalTo: tagView.centerYAnchor)
        ])
    }
}

​Overview

​Usage

​Integration

​Actions

1. SetOnAcceptClick

2. SetOnCancelClick

3. OnError

​Filters

​Events

​Customization

​Style

1. IncomingCall Style

​Functionality

​Advanced

​SetListItemView

​SetLeadingView

​SetTitleView

Overview

Usage

Integration

Actions

Filters

Events

Customization

Style

Functionality

Advanced

SetListItemView

SetLeadingView

SetTitleView