custom-ui

Hide CometChat Calls SDK default panels and drive custom SwiftUI controls with CallSession actions.

31|9|Updated Mar 10, 2023
One-click install
npx skills add https://github.com/cometchat/calls-sdk-ios --skill custom-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: custom-ui
Source: https://github.com/cometchat/calls-sdk-ios/tree/main/skills/custom-ui
Command: npx skills add https://github.com/cometchat/calls-sdk-ios --skill custom-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Custom UI removes the limitation of being locked into the SDK’s default controls when you want a branded, tailor-made calling experience.

Core Features & Use Cases

  • Hide default SDK panels: Hide the control panel and/or header while still rendering the call view content.
  • Create SwiftUI controls that drive CallSession: Implement your own mute/unmute, pause/resume video, switch camera, and end-call actions.
  • Keep UI in sync with real media state: Use MediaEventsListener callbacks and update SwiftUI state on the main thread.
  • Use Case: You’re building a co-branded calling screen where the bottom bar and header are entirely replaced by your app’s design system components.

Quick Start

Create a SessionSettingsBuilder with hideControlPanel(true) and hideHeaderPanel(true), then render the call view in SwiftUI via UIViewRepresentable while your custom buttons call the relevant CallSession methods and update state from MediaEventsListener events.

Frequently Asked Questions about custom-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom SwiftUI call interface over the CometChat Calls SDK?

To build a custom SwiftUI call interface, use SessionSettingsBuilder to hide default SDK panels, embed the call view via UIViewRepresentable, and drive CallSession actions with your own SwiftUI controls.

How do I hide the default control panel in CometChat calls to use my own UI?

You hide the default control panel by configuring SessionSettingsBuilder with hideControlPanel(true) and hideHeaderPanel(true), which removes SDK UI elements and allows you to render your own custom SwiftUI controls.

How do I sync custom SwiftUI call controls with real-time WebRTC media events?

You sync custom SwiftUI controls with real-time media state by implementing MediaEventsListener callbacks and ensuring all UI state updates are dispatched on the main thread for deterministic interaction.

Can I trigger mute, video pause, and end-call actions from custom buttons in CometChat?

Yes, you can trigger mute, video pause, switch camera, and end-call actions from custom buttons by calling the relevant CallSession methods directly from your custom SwiftUI control panel components.

Why does my custom call UI state update incorrectly during voice and video sessions?

Custom call UI state updates incorrectly if MediaEventsListener callbacks modify SwiftUI state off the main thread; applying main-thread UI updates ensures deterministic interaction during voice and video sessions.