Call Log Details

Show CometChat iOS UI Kit call log details with call history, participants, recordings, tabbed views, and Calls SDK integration.

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

Component	Description
CallLogDetailsVC	Main container with segmented control and page view
CallLogParticipantsVC	Displays a list of users who participated in the call
CallLogHistoryVC	Shows join/leave history entries with timestamps and statuses
CallLogRecordingsVC	Lists call recordings with playback actions
CallLogDetailsHeaderView	Header view showing call metadata (title, status, duration)
CallLogUserCell	UITableViewCell for participants, history, and recordings entries
CallLogDetailsModel	Data model formatting participants, history, and recordings data
CallLogViewModel	Fetches 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:

• CallHistoyTVC.swift
• CallLogHistoryVC.swift

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:

• CallLogRecordingsVC.swift
• CallRecordingTVC.swift

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

Scenario	Handling
No call logs	Show a custom empty state instead of a blank table
Large history	Add lazy loading in scrollViewDidScroll to fetch more entries
Blocked users	Disable profile navigation in CallLogParticipantsVC if the user is blocked
Missing recording URL	Gracefully disable playback links

Error Handling

Error Type	Solution
Network/API errors	Display UIAlertController on fetch failures; expose error via CallLogViewModel delegate
Retry mechanism	Add pull-to-refresh or a retry button in CallLogDetailsVC
Recording unavailable	Gracefully 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

Feature	Component / Method	File(s)
Show call log details screen	CallLogDetailsVC(call:)	CallLogDetailsVC.swift
Display participants	CallLogParticipantsVC	CallLogParticipantsVC.swift
Display history entries	CallLogHistoryVC	CallHistoyTVC.swift, CallLogHistoryVC.swift
List recordings	CallLogRecordingsVC	CallLogRecordingsVC.swift, CallRecordingTVC.swift
Header metadata	CallLogDetailsHeaderView	CallLogDetailsHeaderView.swift
Data handling	CallLogDetailsModel	CallLogDetailsModel.swift
Data fetching & distribution	CallLogViewModel	CallLogViewModel.swift

Related Components

• Call Logs - Display call log list
• Call Features - Overview of calling capabilities
• Ongoing Call - Active call interface

Sample App

Explore a full sample implementation

UIKit Source

Review the call log components in the UIKit library

Related Guides

Call Logs

Display call history list

Call Features

Overview of calling capabilities

Events

Handle call events