> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Control Panel

> CometChat Calling SDK v5 - Custom Control Panel for JavaScript

Build a custom control panel by hiding the default UI and using the SDK's action methods to control call functionality.

## Hide Default Control Panel

Hide the built-in control panel when joining a session:

```javascript theme={null}
const callSettings = {
  hideControlPanel: true,
  // ... other settings
};

await CometChatCalls.joinSession(callToken, callSettings, container);
```

## Build Custom Controls

With the control panel hidden, use the SDK's action methods to build your own UI:

### Audio Controls

```javascript theme={null}
// Mute/unmute microphone
function toggleAudio(isMuted) {
  if (isMuted) {
    CometChatCalls.unMuteAudio();
  } else {
    CometChatCalls.muteAudio();
  }
}
```

### Video Controls

```javascript theme={null}
// Toggle camera
function toggleVideo(isPaused) {
  if (isPaused) {
    CometChatCalls.resumeVideo();
  } else {
    CometChatCalls.pauseVideo();
  }
}
```

### Screen Sharing

```javascript theme={null}
// Toggle screen share
function toggleScreenShare(isSharing) {
  if (isSharing) {
    CometChatCalls.stopScreenSharing();
  } else {
    CometChatCalls.startScreenSharing();
  }
}
```

### Leave Session

```javascript theme={null}
function leaveCall() {
  CometChatCalls.leaveSession();
}
```

## Track State with Events

Listen to events to keep your custom UI in sync:

```javascript theme={null}
let isAudioMuted = false;
let isVideoPaused = false;
let isScreenSharing = false;

CometChatCalls.addEventListener("onAudioMuted", () => {
  isAudioMuted = true;
  updateUI();
});

CometChatCalls.addEventListener("onAudioUnMuted", () => {
  isAudioMuted = false;
  updateUI();
});

CometChatCalls.addEventListener("onVideoPaused", () => {
  isVideoPaused = true;
  updateUI();
});

CometChatCalls.addEventListener("onVideoResumed", () => {
  isVideoPaused = false;
  updateUI();
});

CometChatCalls.addEventListener("onScreenShareStarted", () => {
  isScreenSharing = true;
  updateUI();
});

CometChatCalls.addEventListener("onScreenShareStopped", () => {
  isScreenSharing = false;
  updateUI();
});
```

## Hide Individual Buttons

Instead of hiding the entire control panel, you can hide specific buttons:

```javascript theme={null}
const callSettings = {
  hideControlPanel: false,
  hideLeaveSessionButton: false,
  hideToggleAudioButton: false,
  hideToggleVideoButton: false,
  hideScreenSharingButton: true,
  hideRecordingButton: true,
  hideRaiseHandButton: true,
  hideShareInviteButton: true,
  hideChangeLayoutButton: true,
  hideParticipantListButton: true,
  hideChatButton: true,
  hideVirtualBackgroundButton: true,
  // ... other settings
};
```

## Complete Example

```html theme={null}
<div id="call-container"></div>

<div id="custom-controls">
  <button id="audio-btn">Mute</button>
  <button id="video-btn">Stop Video</button>
  <button id="screen-btn">Share Screen</button>
  <button id="leave-btn">Leave</button>
</div>

<script>
let isAudioMuted = false;
let isVideoPaused = false;

// Set up event listeners
CometChatCalls.addEventListener("onAudioMuted", () => {
  isAudioMuted = true;
  document.getElementById("audio-btn").textContent = "Unmute";
});

CometChatCalls.addEventListener("onAudioUnMuted", () => {
  isAudioMuted = false;
  document.getElementById("audio-btn").textContent = "Mute";
});

CometChatCalls.addEventListener("onVideoPaused", () => {
  isVideoPaused = true;
  document.getElementById("video-btn").textContent = "Start Video";
});

CometChatCalls.addEventListener("onVideoResumed", () => {
  isVideoPaused = false;
  document.getElementById("video-btn").textContent = "Stop Video";
});

// Button handlers
document.getElementById("audio-btn").onclick = () => {
  isAudioMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio();
};

document.getElementById("video-btn").onclick = () => {
  isVideoPaused ? CometChatCalls.resumeVideo() : CometChatCalls.pauseVideo();
};

document.getElementById("screen-btn").onclick = () => {
  CometChatCalls.startScreenSharing();
};

document.getElementById("leave-btn").onclick = () => {
  CometChatCalls.leaveSession();
};
</script>
```

## Available Actions

All these methods can be used to build custom controls:

| Action             | Method                                |
| ------------------ | ------------------------------------- |
| Mute audio         | `CometChatCalls.muteAudio()`          |
| Unmute audio       | `CometChatCalls.unMuteAudio()`        |
| Pause video        | `CometChatCalls.pauseVideo()`         |
| Resume video       | `CometChatCalls.resumeVideo()`        |
| Start screen share | `CometChatCalls.startScreenSharing()` |
| Stop screen share  | `CometChatCalls.stopScreenSharing()`  |
| Start recording    | `CometChatCalls.startRecording()`     |
| Stop recording     | `CometChatCalls.stopRecording()`      |
| Raise hand         | `CometChatCalls.raiseHand()`          |
| Lower hand         | `CometChatCalls.lowerHand()`          |
| Change layout      | `CometChatCalls.setLayout(layout)`    |
| Leave session      | `CometChatCalls.leaveSession()`       |

See [Actions](/calls/javascript/actions) for the complete list of available methods.