Subcomponents Library

Set of components to be composed as needed by the user.

You can access them under the customization-api module as a named export.

---

Icons :

IconsInterface

The object containing all the default icons used in the ui.

import { icons } from "customization-api";

IconsInterface

Icon	Name	Type
	videocam	string
	videocamOff	string
	mic	string
	micOff	string
	recordingIcon	string
	recordingActiveIcon	string
	screenshareIcon	string
	screenshareOffIcon	string
	raiseHandIcon	string
	endCall	string
	gridLayoutIcon	string
	gridLayoutFilledIcon	string
	pinnedLayoutIcon	string
	participantIcon	string
	participantFilledIcon	string
	chatIcon	string
	chatIconFilled	string
	settings	string
	settingFilled	string
	clipboard	string
	checkCircleIcon	string
	crossCircleIcon	string
	demoteIcon	string
	exlamationIcon	string
	backBtn	string
	networkIcons	{  Excellent: string,  Unsupported: string,  Good: string,  Bad: string,  VeryBad: string,  Loading: string, }

ChatSendButton :

React.ComponentType <ChatSendButtonProps >

Chat Send Button

The ChatSendButton component displays the chat send button. Relies on ChatUiControl app state to determine required information.

import { ChatSendButton } from "customization-api";

ChatSendButtonProps

Prop	Type	Description
render?	( onPress: () => void ) => JSX.Element	Render method for ChatSendButton

ChatTextInput :

React.ComponentType <ChatTextInputProps >

Chat Text Input

The ChatTextInput component displays the chat input box. Relies on ChatUiControl app state to determine required information.

import { ChatTextInput } from "customization-api";

ChatTextInputProps

Prop	Type	Description
render?	(ChatTextInputRenderProps) => JSX.Element	Render method for ChatTextInput

ChatTextInputRenderProps

Prop	Type
message	string
onChangeText	( text: string ) => void,
onSubmitEditing	() => void,
chatMessageInputPlaceholder	string

ChatBubble :

React.ComponentType <ChatBubbleProps >

Chat Bubble

The Chat Bubble component displays the message inside the chat ui. It is conditionally styled based on message origin (ie local or remote).

import { ChatBubble } from "customization-api";

ChatBubbleProps

Prop	Type	Description
msgId	string	Message id
message	string	Content of the chat message
uid	UidType	Name of the user who sent the message
isLocal	boolean	Specifies if the message is from a local user or if it is from a remote user
isDeleted	boolean	Specifies if the message has been deleted
createdTimestamp	number	Message creation timestamp
updatedTimestamp	number	Last message update timestamp
render?	( msg: string, isLocal: boolean, uid: string, ts: number) => JSX.Element	Render method for chat bubble to provide a custom jsx

Chat :

React.ComponentType <ChatProps >

Chat

The Chat component displays the chat sidepanel. Relies on ChatUiControl app state to determine required information.

import { Chat } from "customization-api";

ChatProps

Prop	Type	Description
chatBubble?	React.ComponentType<ChatBubbleProps>	ChatBubble component to be used
chatTextInput?	React.ComponentType<ChatTextInputProps>	ChatTextInput component to be used
chatSendButton?	React.ComponentType<ChatSendButtonProps>	ChatSendButton component to be used

MaxVideoView :

React.ComponentType <MaxVideoRendererProps >

MaxVideoView

The MaxVideoView component is used to render the user video feed using UiKitMaxVideoView along with overlay components like NameWithMicStatus, NetworkQualityPill etc.

import { MaxVideoView } from "customization-api";

MaxVideoRendererProps

Prop	Type	Description
user :	RenderInterface	The user object you need to display the video feed off

GridLayout :

React.ComponentType <RenderStateInterface >

Grid Layout

The GridLayout component is used to render the user video feeds in a responsive grid parttern.

import { GridLayout } from "customization-api";

PinnedLayout :

React.ComponentType <RenderStateInterface >

Pinned Layout

The PinnedLayout component is used to render the user video feeds in a pinned view with a collapsible sidebar displaying unpinned user feeds.

import { PinnedLayout } from "customization-api";

VideoComponent :

React.ComponentType

Video Component

The VideoComponent is used to automatically render the user video feeds in the selected layout.

import { VideoComponent } from "customization-api";

NameWithMicIcon :

React.ComponentType <NameWithMicIconProps >

Name with nic icon

The NameWithMicIcon component is used to render the user name along with their mic muted state.

import { NameWithMicIcon } from "customization-api";

NameWithMicIconProps

Prop	Type	Description
user :	RenderInterface	The user object you need to display the name and mic status of

NetworkQualityPill :

React.ComponentType <NetworkQualityPillProps >

Network quality pill

The NetworkQualityPill component is used to render the user network quality in a pill container that expands when hovered over.

import { NetworkQualityPill } from "customization-api";

NetworkQualityPillProps

Prop	Type	Description
user :	RenderInterface	The user object you need to display the network quality of

VideoCallScreen :

React.ComponentType

Video call screen

The VideoCallScreen component is used to render the entire video call screen.

import { VideoCallScreen } from "customization-api";

SettingsView :

React.ComponentType

Settings View

The SettingsView component is used to render the settings side panel.

import { SettingsView } from "customization-api";

ParticipantsView :

React.ComponentType

Participants View

The ParticipantsView component is used to render the participant panel that lists all the users in the video call / livestream along with their audio and video status. Hosts additionally are able to see user controls such as mute participant , remove participant from call.

import { ParticipantsView } from "customization-api";

Controls :

React.ComponentType

bottom bar

The Controls component is used to render all the meeting controls.

import { Controls } from "customization-api";

note

The controls displayed change depending on the operating sytem/platform and the user config

NavBar :

React.ComponentType <NavBarProps >

Top Bar

The NavBar component displays the nav bar.

import { NavBar } from "customization-api";

NavBarProps

Prop	Type	Description
message	string	Content of the chat message

HorizontalRule :

React.ComponentType <HorizontalRuleProps >

HorizontalRule

The HorizontalRule component displays a horizontal line.

import { HorizontalRule } from "customization-api";

HorizontalRuleProps

Prop	Type	Description
style	viewProps	custom css to override existing style

RenderComponent :

React.ComponentType <RenderComponentProps >

The Render component handles rendering the correct content view component as defined in custom content api based on the content type corresponding to the uid as defined in the Render app state.

import { RenderComponent } from "customization-api";

RenderComponentProps

Prop	Type	Description
uid	uidtype	uid of renderObject to be rendered

TextInput :

React.ComponentType< |TextInputProps >

TextInput

The TextInput component is used to render a text input box.

import { TextInput } from "customization-api";

PrimaryButton :

React.ComponentType <PrimaryButtonProps >

PrimaryButton

The PrimaryButton component is used to render a button with app builder primary button styling.

import { PrimaryButton } from "customization-api";

PrimaryButtonProps

Prop	Type	Description
text	string	Text to be displayed on the button

SecondaryButton :

React.ComponentType <SecondaryButtonProps >

SecondaryButton

The SecondaryButton component is used to render a button with app builder primary button styling.

import { SecondaryButton } from "customization-api";

SecondaryButtonProps

Prop	Type	Description
text	string	Text to be displayed on the button

UiKitBtnTemplate :

BtnTemplate

UiKitBtnTemplate

The UiKitBtnTemplate component renders a button in UiKit button structure.

import { UiKitBtnTemplate } from "customization-api";

UiKitMaxVideoView :

MaxVideoView

UiKitMaxVideoView

The UiKitMaxVideoView component is used to render the user video feed along with a fallback component in case user video feed is disabled.

import { UiKitMaxVideoView } from "customization-api";

UiKitImageIcon :

ImageIcon

UiKitImageIcon

The UiKitImageIcon component is used to render a given icon within a wrapper component.

import { UiKitImageIcon } from "customization-api";

NavBarComponentsArray :

React.ComponentType[]

NavBarComponentsArray

The NavBarComponentsArray is an array of all buttons present on the default nav bar component.

Index	Name	Type	Description
0	CopyJoinInfo	CopyJoinInfoComponent	Button to copy meeting invite
1	ParticipantsCountView	ParticipantsCountViewComponent	Element to show number of participant in the chat
2	ParticipantsIconButton	ParticipantsIconButtonComponent	Button to toggle participants sidepanel
3	ChatIconButton	ChatIconButtonComponent	Button to toggle chat sidepanel
4	LayoutIconButton	LayoutIconButtonComponent	Button to switch layouts
5	SettingsIconButton	SettingsIconButtonComponent	Button to toggle setting sidepanel

import { NavBarComponentsArray } from "customization-api";

Navbar Components:

CopyJoinInfoComponent: React.ComponentType<CopyJoinInfoProps>

CopyJoinInfoProps

Key	Type	Description
showText	boolean	Flag to determine whether to show text besides button
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, buttonTemplateName: buttonTemplateName ) => JSX.Element	Component to be used to render the button

ParticipantsCountViewComponent: React.ComponentType

ParticipantsIconButtonComponent: React.ComponentType<ParticipantsIconButtonProps>

ParticipantsIconButtonProps

Key	Type	Description
badgeContainerPosition	{ top?: number, right?: number, left?: number, bottom?: number }	Position for pending chat messages alert badge
badgeTextStyle	TextStyle	custom style for badge text
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isPanelActive: boolean, totalUnreadCount: number , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

ChatIconButtonComponent: React.ComponentType<ChatIconButtonProps>

ChatIconButtonProps

Key	Type	Description
liveStreamingRequestAlertIconPosition	{ top?: number, right?: number, left?: number, bottom?: number }	Position for pending raise hand requests alert badge
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, isPanelActive: boolean, buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LayoutIconButtonComponent: React.ComponentType<LayoutIconButtonProps>

LayoutIconButtonProps

Key	Type	Description
modalPosition	{ top?: number, right?: number, left?: number, bottom?: number }	Position of the switch layout modal
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

SettingsIconButtonComponent: React.ComponentType<SettingsIconButtonProps>

SettingsIconButtonProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

ControlsComponentArray :

React.ComponentType[]

ControlsComponentArray

The ControlsComponentArray is an array of all meeting control button subcomponents listed below.

Index	Name	Type	Description
0	LocalAudioMute	LocalAudioMuteComponent	Control button to mute/unmute local user audio
1	LocalVideoMute	LocalVideoMuteComponent	Control button to mute/unmute local user video
2	LocalSwitchCamera	LocalSwitchCameraComponent	Control button to switch local user video camera
3	ScreenshareButton	ScreenshareButtonComponent	Control button to start/stop screenshare
4	Recording	RecordingComponent	Control button to start/stop meeting recording
5	LocalEndCall	LocalEndCallComponent	Control button to end local user call
6	LiveStreamControls	LiveStreamControlsComponent	Control button to send/recall local user raise hand request

import { ControlsComponentArray } from "customization-api";

Control Components:

LocalAudioMuteComponent: React.ComponentType<LocalAudioMuteProps>

LocalAudioMuteProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, isEnabled: boolean, buttonTemplateName: buttonTemplateName ) => JSX.Element	Component to be used to render the button

LocalVideoMuteComponent: React.ComponentType<LocalVideoMuteProps>

LocalVideoMuteProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LocalSwitchCameraComponent: React.ComponentType<LocalSwitchCameraProps>

LocalSwitchCameraProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

ScreenshareButtonComponent: React.ComponentType<ScreenshareButtonProps>

ScreenshareButtonProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

RecordingComponent: React.ComponentType<RecordingProps>

RecordingProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LocalEndCallComponent: React.ComponentType<LocalEndCallProps>

LocalEndCallProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LiveStreamControlsComponent : React.ComponentType<LiveStreamControlsProps>

LiveStreamControlsProps

Key	Type	Description
showControls	boolean	Determines if livestream controls are renders

SidePanelButtonsArray :

React.ComponentType[]

SidePanelButtonArray

The SidePanelButtonsArray is an array of all the side panel button subcomponents listed below.

Index	Name	Type	Description
0	RemoteAudioMute	RemoteAudioMuteComponent	Side panel button to mute remote user audio
1	RemoteVideoMute	RemoteVideoMuteComponent	Side panel button to mute remote user video
2	RemoteEndCall	RemoteEndCallComponent	Side panel button to remote remote user from call
3	RemoteLiveStreamApprovedRequestRecall	RemoteLiveStreamApprovedRequestRecallComponent	Side panel button to recall attendee raise hand request
4	RemoteLiveStreamRequestApprove	RemoteLiveStreamRequestApproveComponent	Side panel button to approve attendee raise hand request
5	RemoteLiveStreamRequestReject	RemoteLiveStreamRequestRejectComponent	Side panel button to reject attendee raise hand request
6	ChatSendButton	ChatSendButtonComponent	Side panel button send chat message
7	MuteAllAudioButton	MuteAllAudioButtonComponent	Side panel button to mute all remote users audio
8	MuteAllVideoButton	MuteAllVideoButtonComponent	Side panel button to mute all remote users video

import { SidePanelButtonsArray } from "customization-api";

SidePanel Button Components:

RemoteAudioMuteComponent : React.ComponentType<RemoteAudioMuteProps>

RemoteAudioMuteProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for
audio	boolean	audio mute state of the remote user
isHost	boolean	host status of the local user

RemoteVideoMuteComponent : React.ComponentType<RemoteVideoMuteProps>

RemoteVideoMuteProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for
video	boolean	video mute state of the remote user
isHost	boolean	host status of the local user

RemoteEndCallComponent : React.ComponentType<RemoteEndCallProps>

RemoteEndCallProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for
isHost	boolean	host status of the local user

RemoteLiveStreamApprovedRequestRecallComponent : React.ComponentType<RemoteLiveStreamApprovedRequestRecallProps>

RemoteLiveStreamApprovedRequestRecallProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for

RemoteLiveStreamRequestApproveComponent : React.ComponentType<RemoteLiveStreamControlApproveProps>

RemoteLiveStreamRequestApproveProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for

RemoteLiveStreamRequestRejectComponent : React.ComponentType<RemoteLiveStreamControlRejectProps>

RemoteLiveStreamRequestRejectProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for

ChatSendButtonComponent : React.ComponentType<ChatSendButtonProps>

ChatSendButtonProps

Key	Type	Description
render	(onPress: () => void) => JSX.Element	Function to be used to render the button

MuteAllAudioButtonComponent : React.ComponentType<MuteAllAudioButtonProps>

MuteAllAudioButtonProps

Key	Type	Description
render	(onPress: () => void) => JSX.Element	Function to be used to render the button

MuteAllVideoButtonComponent: React.ComponentType<MuteAllVideoButtonProps>

MuteAllVideoButtonProps

Key	Type	Description
render	(onPress: () => void) => JSX.Element	Function to be used to render the button

---