> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log Recordings

> Call Log Recordings — CometChat documentation.

## Overview

`CometChatCallLogRecordings` is a [Component](/ui-kit/ios/v4/components-overview#components) that shows a paginated list of recordings for a particular call. This allows the user to view all recordings, see the duration of each recording, and access a download link to download the recordings.

The `Call Log Recordings` component is composed of the following BaseComponents:

| Components                                    | Description                                                                                                                                                                              |
| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [CometChatListBase](/ui-kit/ios/v4/list-base) | `CometChatListBase` is a container component featuring a title, customizable background options, and a dedicated list view for seamless integration within your application's interface. |
| [CometChatListItem](/ui-kit/ios/v4/list-item) | This component displays data retrieved from a CallLog object on a card, presenting a title and subtitle.                                                                                 |

***

***

## Usage

### Integration

`CometChatCallLogRecordings` is a **ViewController** component that seamlessly integrates into your application. To present the details of call recordings, you can simply instantiate the CometChatCallLogRecordings instance and set the list of recordings using its set(recording:) property. This allows for easy customization and efficient display of call log recordings within your application's interface.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecording = CometChatCallLogRecording()
    .set(recordings: [Any]?)

    self.navigationController?.pushViewController(callLogRecording, animated: true)
    ```
  </Tab>
</Tabs>

### Actions

[Actions](/ui-kit/ios/v4/components-overview#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. OnShareButtonClicked

The `onShareButtonClicked` action is usually triggered when a user taps the share button associated with a recording in the call log. However, by employing the provided code snippet, you can effortlessly customize or override this default behavior to meet your specific application needs.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecordingConfiguration = CallLogRecordingConfiguration()
    .set (onShareButtonClicked:{ recording in
    //Perform Your Action    
         
    })
    ```
  </Tab>
</Tabs>

##### 2. OnDownloadButtonClicked

The `onDownloadButtonClicked` action is typically triggered when a user taps the download button associated with a recording in the call log. However, by utilizing the provided code snippet, you can seamlessly customize or override this default behavior to align with your specific application requirements.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecordingConfiguration = CallLogRecordingConfiguration()
    .set (onDownloadButtonClicked:{ recording in
    //Perform Your Action    
      
    })
    ```
  </Tab>
</Tabs>

***

### 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 `Call Log Recordings` component does not have any exposed filters.

***

### Events

[Events](/ui-kit/ios/v4/components-overview#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.

The `Call Log Recordings` component does not have any exposed events.

***

## 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. CallLogRecordings Style

You can customize the appearance of the `CallLogRecordings` Component by applying the `CallLogRecordingsStyle` to it using the following code snippet.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecordingsStyle = CallLogRecordingsStyle()
    .set(background: .blue)
    .set(borderColor: .green)
    .set(borderWidth: 3)
    .set(timeTextColor: .systemTeal)

    let callLogRecordingConfiguration = CallLogRecordingConfiguration()
    .set(style: callLogRecordingsStyle)

    let callLogRecording = CometChatCallLogRecording()
    .set(configuration: callLogRecordingConfiguration)
    ```
  </Tab>
</Tabs>

| Property            | Description                         | Code                                       |
| ------------------- | ----------------------------------- | ------------------------------------------ |
| background          | Sets the background color           | `.set(background: UIColor)`                |
| borderWidth         | Sets the border width               | `.set(borderWidth: CGFloat)`               |
| cornerRadius        | Sets the corner radius              | `.set(cornerRadius: CometChatCornerStyle)` |
| borderColor         | Sets the border color               | `.set(borderColor: UIColor)`               |
| recordingTitleFont  | Sets the title font                 | `.set(recordingTitleFont: UIFont)`         |
| recordingTitleColor | Sets the title color                | `.set(recordingTitleColor: UIColor)`       |
| durationTextFont    | Sets the duration text font         | `.set(durationTextFont: UIFont)`           |
| durationTextColor   | Sets the duration text color        | `.set(durationTextColor: UIColor)`         |
| downloadIconTint    | Sets the download icon tint color   | `.set(downloadIconTint: UIColor)`          |
| shareIconTint       | Sets the share icon tint color      | `.set(shareIconTint: UIColor)`             |
| errorIconTint       | Sets the error icon tint color      | `.set(errorIconTint: UIColor)`             |
| loadingSpinnerTint  | Sets the loading spinner tint color | `.set(loadingSpinnerTint: UIColor)`        |
| timeTextFont        | Sets the time text font             | `.set(timeTextFont: UIFont)`               |
| timeTextColor       | Sets the time text color            | `.set(timeTextColor: UIColor)`             |

##### 2. ListItem Styles

To apply customized styles to the `ListItemStyle` component in the `CallLogRecordings` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/ios/v4/list-item)

<Tabs>
  <Tab title="Swift">
    ```swift Swift theme={null}
    let listItemStyle = ListItemStyle()

    listItemStyle.set(background: .init(red: 0.81, green: 0.64, blue: 0.96, alpha: 1.00))
    .set(titleFont: .systemFont(ofSize: 18))
    .set(titleColor: .init(red: 0.47, green: 0.02, blue: 0.93, alpha: 1.00))
    .set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0))
    .set(borderColor: .black)
    .set(borderWidth: 3)

    let callLogRecordingConfiguration = CallLogRecordingConfiguration()
    .set(listItemStyle: listItemStyle)

    let callLogRecording = CometChatCallLogRecording()
    .set(configuration: callLogRecordingConfiguration)
    ```
  </Tab>
</Tabs>

<Note>
  Ensure to pass and present `CometChatCallLogRecordings`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
</Note>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecording = CometChatCallLogRecording()
    .hide(separator: true)
    .set(title: "Cc", mode: .automatic)

    self.navigationController?.pushViewController(callLogRecording, animated: true)
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property               | Description                        | Code                                                                |
| ---------------------- | ---------------------------------- | ------------------------------------------------------------------- |
| titleFont              | Sets the font for the title        | `.set(titleFont: UIFont)`                                           |
| titleColor             | Sets the color for the title       | `.set(titleColor: UIColor)`                                         |
| title                  | Sets the title for the title bar   | `.set(title: String, mode: UINavigationItem.LargeTitleDisplayMode)` |
| largeTitleFont         | Sets the large title font          | `.set(largeTitleFont: UIFont)`                                      |
| backButtonTitle        | Sets the back button title         | `.set(backButtonTitle: String?)`                                    |
| largeTitleColor        | Sets the large title color         | `.set(largeTitleColor: UIColor)`                                    |
| backButtonTitleColor   | Sets the back button title color   | `.set(backButtonTitleColor: UIColor)`                               |
| hide(search)           | Hides the search bar               | `.hide(search: Bool)`                                               |
| hide(separator)        | Hides the separator                | `.hide(separator: Bool)`                                            |
| hide(errorText)        | Hides the error text               | `.hide(errorText: Bool)`                                            |
| recordings             | Sets the call recordings           | `.set(recordings: [Any]?)`                                          |
| backButtonFont         | Sets the back button font          | `.set(backButtonFont: UIFont?)`                                     |
| backButtonIcon         | Sets the back button icon          | `.set(backButtonIcon: UIImage)`                                     |
| backButtonTint         | Sets the back button tint          | `.set(backButtonTint: UIColor)`                                     |
| background             | Sets the background                | `.set(background: [CGColor]?)`                                      |
| borderColor            | Sets the border color              | `.set(borderColor: UIColor)`                                        |
| borderWidth            | Sets the border width              | `.set(borderWidth: CGFloat)`                                        |
| corner                 | Sets the corner style              | `.set(corner: CometChatCornerStyle)`                                |
| emptyStateText         | Sets the empty state text          | `.set(emptyStateText: String)`                                      |
| emptyStateTextColor    | Sets the empty state text color    | `.set(emptyStateTextColor: UIColor)`                                |
| emptyStateTextFont     | Sets the empty state text font     | `.set(emptyStateTextFont: UIFont)`                                  |
| errorStateText         | Sets the error state text          | `.set(errorStateText: String)`                                      |
| errorStateTextColor    | Sets the error state text color    | `.set(errorStateTextColor: UIColor)`                                |
| errorStateTextFont     | Sets the error state text font     | `.set(errorStateTextFont: UIFont)`                                  |
| searchBackground       | Sets the search background         | `.set(searchBackground: UIColor)`                                   |
| searchIcon             | Sets the search icon               | `.set(searchIcon: UIImage?)`                                        |
| searchPlaceholder      | Sets the search placeholder        | `.set(searchPlaceholder: String)`                                   |
| searchIconTint         | Sets the search icon tint          | `.set(searchIconTint: UIColor)`                                     |
| searchTextFont         | Sets the search text font          | `.set(searchTextFont: UIFont)`                                      |
| searchBarHeight        | Sets the search bar height         | `.set(searchBarHeight: CGFloat)`                                    |
| searchClearIcon        | Sets the search clear icon         | `.set(searchClearIcon: UIImage)`                                    |
| searchTextColor        | Sets the search text color         | `.set(searchTextColor: UIColor)`                                    |
| searchBorderColor      | Sets the search border color       | `.set(searchBorderColor: UIColor)`                                  |
| searchBorderWidth      | Sets the search border width       | `.set(searchBorderWidth: CGFloat)`                                  |
| searchCornerRadius     | Sets the search corner radius      | `.set(searchCornerRadius: CometChatCornerStyle)`                    |
| searchClearIconTint    | Sets the search clear icon tint    | `.set(searchClearIconTint: UIColor)`                                |
| searchPlaceholderColor | Sets the search placeholder color  | `.set(searchPlaceholderColor: UIColor)`                             |
| searchCancelButtonFont | Sets the search cancel button font | `.set(searchCancelButtonFont: UIFont)`                              |
| searchCancelButtonTint | Sets the search cancel button tint | `.set(searchCancelButtonTint: UIColor)`                             |

***

### 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.

#### EmptyView report

You can set a custom EmptyView using `.set(emptyView: UIView)` to match the empty view of your app.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecording = CometChatCallLogRecording()
    .set(emptyView: UIView)       //you can pass your own view
    ```
  </Tab>
</Tabs>

**Example**

In this example, we will create a `Custom_Empty_State_GroupView`a UIView file.

```swift theme={null}
import UIKit

class CustomEmptyStateGroupView: UIView {
    // Initialize your subviews
    let imageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(named: "noDataImage"))
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()

    let messageLabel: UILabel = {
        let label = UILabel()
        label.text = "No groups available"
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.boldSystemFont(ofSize: 16)
        label.textColor = .black
        return label
    }()

    // Override the initializer
    override init(frame: CGRect) {
        super.init(frame: frame)
        // Add subviews and layout constraints
        addSubview(imageView)
        addSubview(messageLabel)
        NSLayoutConstraint.activate([
            imageView.centerXAnchor.constraint(equalTo: centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            imageView.heightAnchor.constraint(equalToConstant: 120),
            imageView.widthAnchor.constraint(equalToConstant: 120),

            messageLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 8),
            messageLabel.centerXAnchor.constraint(equalTo: centerXAnchor)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
```

We will be passing a custom empty view to CometChatCallLogRecordings, ensuring a tailored and user-friendly interface.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let customEmptyStateGroupView = CustomEmptyStateGroupView()

    let callLogRecording = CometChatCallLogRecording()
    .set(emptyView: customEmptyStateGroupView)

    self.navigationController?.pushViewController(callLogRecording, animated: true)
    ```
  </Tab>
</Tabs>

<Note>
  Ensure to pass and present `CometChatCallLogRecordings`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
</Note>

***

#### ErrorView report

You can set a custom ErrorView using `.set(errorView: UIView)` to match the error view of your app.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogRecording = CometChatCallLogRecording()
    .set(errorView: UIView)   //you can pass your own view
    ```
  </Tab>
</Tabs>

**Example**

In this example, we will create a UIView file `Custom_ErrorState_GroupView` and pass it inside the `.set(errorView: UIView)` method.

```swift Custom_ErrorState_GroupView theme={null}
import UIKit

let CustomErrorStateGroupView: UIView = {
        // Create main view
        let view = UIView()
        view.backgroundColor = .white

        // Create an imageView and add it to the main view
        let imageView = UIImageView(image: UIImage(systemName: "exclamationmark.triangle"))
        imageView.tintColor = .red
        imageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imageView)

        // Create a label with error message and add it to the main view
        let label = UILabel()
        label.text = "An error occurred. Please try again."
        label.font = UIFont.systemFont(ofSize: 16)
        label.textColor = .darkGray
        label.numberOfLines = 0
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)

        // Create constraints for imageView and label
        NSLayoutConstraint.activate([
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -50),

            label.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20),
            label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])

        return view
    }()
```

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let customErrorStateGroupView = CustomErrorStateGroupView

    let callLogRecording = CometChatCallLogRecording()
    .set(errorView: customErrorStateGroupView)

    self.navigationController?.pushViewController(callLogRecording, animated: true)
    ```
  </Tab>
</Tabs>

<Note>
  Ensure to pass and present `CometChatCallLogRecordings`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
</Note>

***

#### Menus

You can set the Custom Menus to add more options to the CometChatCallLogRecordings component.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let callLogDetails = CometChatCallLogDetails()
    .set(menus: [UIBarButtonItem])
    ```
  </Tab>
</Tabs>

* You can customize the menus for CometChatCallLogRecordings to meet your requirements

**Example**

In this example, we'll craft a custom button tailored for `CallLogRecordings`, enhancing its interface with a personalized `menu` for a more user-friendly experience.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let customMenuButton: UIBarButtonItem = {
        let button = UIButton(type: .system)
        button.setImage(UIImage(systemName: "swift"), for: .normal)
        button.setTitle("", for: .normal)
        button.addTarget(self, action: #selector(handleCustomMenu), for: .touchUpInside)
        let barButtonItem = UIBarButtonItem(customView: button)
        return barButtonItem
    }()

    let callLogRecording = CometChatCallLogRecording()
    .set(menus: [customMenuButton])
    ```
  </Tab>
</Tabs>

<Note>
  Ensure to pass and present `CometChatCallLogRecordings`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
</Note>

***

***