Skip to main content
Learn how to integrate and customize CometChat’s call log components to display call history, participant details, and call recordings in your iOS app.

Overview

The CallLogDetailsVC module provides a tabbed interface for viewing details of past calls:
  • History — Chronological join/leave events with timestamps
  • Participants — Users who joined the call
  • Recordings — Links to cloud-hosted call recordings
This ensures transparency and auditability for both users and administrators.

Prerequisites

Before implementing call log details, ensure you have:
  • Completed Getting Started setup
  • CometChat UIKit v5+ installed
  • CometChatCallsSDK integrated
  • User logged in with CometChatUIKit.login()
  • Active internet connection

Components

ComponentDescription
CallLogDetailsVCMain container with segmented control and page view
CallLogParticipantsVCDisplays a list of users who participated in the call
CallLogHistoryVCShows join/leave history entries with timestamps and statuses
CallLogRecordingsVCLists call recordings with playback actions
CallLogDetailsHeaderViewHeader view showing call metadata (title, status, duration)
CallLogUserCellUITableViewCell for participants, history, and recordings entries
CallLogDetailsModelData model formatting participants, history, and recordings data
CallLogViewModelFetches and distributes call log data to the UI components

Integration Steps

Step 1: Present Call Log Details Screen

Show the call log interface for a selected call:
import UIKit
import CometChatSDK
import CometChatCallsSDK

class CallLogsViewController: UIViewController {
    
    func showCallDetails(for call: CallLog) {
        // Initialize the call log details view controller
        let detailsVC = CallLogDetailsVC(call: call)
        
        // Push onto navigation stack
        navigationController?.pushViewController(detailsVC, animated: true)
    }
}
This bundles history, participants, and recordings into a single UI flow. File reference: CallLogDetailsVC.swift

Step 2: Display Participants List

Populate the participants tab with the call’s members:
import UIKit
import CometChatSDK

class CallLogParticipantsVC: UIViewController {
    
    var participants: [Participant] = []
    @IBOutlet weak var participantsTableView: UITableView!
    
    func loadParticipants() {
        // Fetch participants from call log data
        // ...
        
        // Reload table view to display participants
        participantsTableView.reloadData()
    }
}
This provides an audit trail of who was present in the call. File reference: CallLogParticipantsVC.swift

Step 3: Show Call History

Render join/leave activities in chronological order:
import UIKit

class CallLogHistoryVC: UIViewController {
    
    var history: [CallHistoryEntry] = []
    @IBOutlet weak var tableView: UITableView!
    
    func addHistoryEntry(user: String, action: String, timestamp: Date) {
        // Create and append new history entry
        let entry = CallHistoryEntry(user: user, action: action, timestamp: timestamp)
        history.append(entry)
        
        // Refresh the table view
        tableView.reloadData()
    }
}
This tracks user join/leave times for transparency. File references:

Step 4: List and Play Recordings

Provide playback links for any recorded calls:
import UIKit

class CallLogRecordingsVC: UIViewController {
    
    func playRecording(url: URL) {
        // Open recording URL in default browser/player
        UIApplication.shared.open(url)
    }
}
This enables administrators and users to review call content (if recording is enabled). File references:

Customization Options

Styling

Customize colors, fonts, and spacing using CometChat’s theming system:
import CometChatUIKitSwift

// Apply custom theme to call log components
let theme = CometChatTheme()
theme.palette.primary = UIColor.systemBlue

// Apply typography
let typography = CometChatTypography()
typography.heading = UIFont.systemFont(ofSize: 18, weight: .bold)

// Apply spacing
let spacing = CometChatSpacing()
spacing.padding = 16

Filters

Use CallLogViewModel to filter by call type:
// Filter by call type
viewModel.filterByType(.incoming)   // Show only incoming calls
viewModel.filterByType(.outgoing)   // Show only outgoing calls
viewModel.filterByType(.missed)     // Show only missed calls

Empty States

Implement an EmptyStateView in CallLogHistoryVC for no-history scenarios:
func showEmptyState() {
    let emptyView = UILabel()
    emptyView.text = "No call history available"
    emptyView.textAlignment = .center
    emptyView.textColor = .secondaryLabel
    tableView.backgroundView = emptyView
}

Edge Cases

ScenarioHandling
No call logsShow a custom empty state instead of a blank table
Large historyAdd lazy loading in scrollViewDidScroll to fetch more entries
Blocked usersDisable profile navigation in CallLogParticipantsVC if the user is blocked
Missing recording URLGracefully disable playback links

Error Handling

Error TypeSolution
Network/API errorsDisplay UIAlertController on fetch failures; expose error via CallLogViewModel delegate
Retry mechanismAdd pull-to-refresh or a retry button in CallLogDetailsVC
Recording unavailableGracefully disable playback links if URL is missing

Additional Notes

  • Group Calls vs 1:1 Calls — Customize CallLogParticipantsVC display based on call type and participant roles
  • Metadata Display — Use CallLogDetailsHeaderView to show titles, call duration, and status icons

Feature Matrix

FeatureComponent / MethodFile(s)
Show call log details screenCallLogDetailsVC(call:)CallLogDetailsVC.swift
Display participantsCallLogParticipantsVCCallLogParticipantsVC.swift
Display history entriesCallLogHistoryVCCallHistoyTVC.swift, CallLogHistoryVC.swift
List recordingsCallLogRecordingsVCCallLogRecordingsVC.swift, CallRecordingTVC.swift
Header metadataCallLogDetailsHeaderViewCallLogDetailsHeaderView.swift
Data handlingCallLogDetailsModelCallLogDetailsModel.swift
Data fetching & distributionCallLogViewModelCallLogViewModel.swift