Skip to main content

App State Library

Provides accessors for various app states used in App Builder. Some accessors accept a selector method that allows for selective subscribing of data.


useRecording(selector?: Selector): RecordingContextInterface

The Recording app state governs the App Builder cloud recording functionality.


RecordingContextInterface

KeyTypeDescription
isRecordingActivebooleanIndicates if cloud recording is active in the application
startRecording() => voidStarts cloud recording
stopRecording() => voidStops cloud recording

Usage example of the app state:



useScreenshare(selector?: Selector): ScreenshareContextInterface

The Screenshare app state governs the App Builder Local User Screenshare functionality.


ScreenshareContextInterface

KeyTypeDescription
isScreenshareActivebooleanIndicates if screenshare is active for the local user
startScreenshare() => voidStarts screenshare
stopScreenshare() => voidStops screenshare

Usage example of the app state:


useSidePanel(selector?: Selector): SidePanelContextInterface

The SidePanel app state governs the sidePanel ui.


SidePanelContextInterface

KeyTypeDescription
sidePanelSidePanelTypeActive sidepanel name
setSidePanel( sidepanel: SidePanelType ) => voidMethod to set active sidepanel name

SidePanelType: string

Pre-defined values for system usage: 'None' | 'Participants' | 'Chat' | 'Settings' | 'Transcript' | 'VirtualBackground'

To hide any Side Panel then setSidePanel to 'None'

setSidePanel('None')

To activate/display any existing Side Panel then setSidePanel with pre-defined values

setSidePanel('Participants')

To activate/display any Custom Side Panel(user-defined using customization API) then setSidePanel with custom side panel name

'Side-Panel-One' is name attribute which you have passed in customSidePanel API

setSidePanel('Side-Panel-One')

Usage example of the app state:


useChatUIControl(selector?: Selector): ChatUIControlInterface

The ChatUIControl app state governs the chat ui.


ChatUIControlInterface

KeyTypeDescription
groupActivebooleanDetermines if group tab is active in chat sidepanel
setGroupActive(status: boolean) => voidMethod to set group tab active status
privateActivebooleanDetermines if private tab is active in chat sidepanel
setPrivateActive(status: boolean) => voidMethod to set private tab active status
selectedChatUserIduidtypeUid of the user selected in private chat tab
setSelectedChatUserId(uid: uidtype) => voidMethod to set selected user
messagestringContent of message to be sent
setMessage(message: string) => voidMethod to set content of message to be sent
inputHeightnumberInitial Height of TextInput, it will expand dynamically based upon no of lines of text input.
setInputHeight(height: number) => voidMethod to update the height of TextInput
showEmojiPickerbooleanDetermines if the emoji panel needs to be shown or not
setShowEmojiPicker(status: boolean) => voidMethod to update the emoji picker status
uploadStatusUploadStatusDetermines the upload progress status of the attachment message.
uploadedFilesFile[]Content of the attachments to be sent.
setUploadedFiles(uploadedFiles: File[]) => voidMethod to update the content of attachments to be sent.

Usage example of the app state:


useMessages(): MessageInterface

The Messages app state governs the chat messages.


MessageInterface

KeyTypeDescription
groupMessagesMessageStoreInterface[]Array of all the group messages
privateMessages{ [key: string]: MessageStoreInterface[] }Object containing all private messages
sendMessage( option: ChatOption, messageStatusCallback?: MessageStatusCallback ) => voidMethod to send a message.
deleteMessage( msgId: string, to?:string , chatType?: SDKChatType ) => voidMethod to delete a message
groupUnreadCountnumberNumber of unread group messages
setGroupUnreadCount(count: number) => voidmethod to set number of unread group messages
individualUnreadCount{ [key: string]: number }object containing number of unread private messages corresponding to each uid
setIndividualUnreadCount(count: { [key: string]: number } ) => voidmethod to set number of unread private messages

MessageStoreInterface

keytypedescription
createdTimestampnumbermessage creation timestamp
updatedTimestamp?numberlast message update timestamp
msgstringmessage content
msgIdstringmessage id
isDeletedbooleanindicates if message is deleted
uidUidTypeuid of the message sender
typeChatMessageTypetype of message
thumbstringthumbnail of the image message
urlstringURL of the attachment message
fileNamestringname of the attachment message
extstringextension of the attachment message

usage example of the app state:


useVideoQuality() : videoQualityInterface

The Video Quality app state provides option to change the encoder resolution for video and screenShare profiles


videoQualityInterface

Here's the table for the properties related to video and screen share quality settings:

KeyTypeDescription
currentVideoQualityVideoEncoderConfigurationPreset | VideoEncoderConfigurationThe current video quality configuration.
setVideoQuality(videoQuality: VideoEncoderConfigurationPreset | VideoEncoderConfiguration) => voidFunction to set the video quality configuration.
currentScreenShareQualityScreenEncoderConfigurationPreset | VideoEncoderConfigurationThe current screen share quality configuration.
setScreenShareQuality(screenShareQuality: ScreenEncoderConfigurationPreset | VideoEncoderConfiguration) => voidFunction to set the screen share quality configuration.
videoEncoderPresetsVideoEncoderConfigurationPreset[]An array of available video encoder presets.
screenShareEncoderPresetsScreenEncoderConfigurationPreset[]An array of available screen share encoder presets.

usage example of the app state:


useVirtualBackground(): virtualBackgroundInterface

The Virtual Background app state that governs the ui for virtual background.


virtualBackgroundInterface

KeyTypeDescription
virtualBackgroundsVBOption[]An array of available virtual background options.
addVirtualBackgrounds(options: VBOption[]) => voidFunction to add new virtual background options to the list.
setVBPreview(type: VBMode, path: string) => voidFunction to set a preview of a virtual background.
applyVirtualBackground() => voidFunction to apply the selected virtual background.
isVirtualBackgroundPanelOpenbooleanA boolean value that returns true if the virtual background panel is open, and false otherwise.
hideVirtualBackgroundPanel() => voidFunction to hide the virtual background panel.
showVirtualBackgroundPanel() => voidFunction to show the virtual background panel.

usage example of the app state:


useBeautyEffects(): BeautyEffectInterface

The Beauty Effects app state controls the application of image enhancement options.


BeautyEffectsInterface

KeyTypeDescription
applyBeautyEffect(config: BeautyEffects) => voidFunction to apply the given beauty effects configuration.
removeBeautyEffect() => voidFunction to remove the applied beauty effects.

usage example of the app state:


useContent(selector?: Selector): ContentStateInterface

The Content app state governs the information necessary to render each user content view displayed in the videocall screen.

it is composed of:

ContentStateInterface

keytypedescription
defaultContentContentObjectsObject containing information necessary to render the content view corresponding to each uid in the Content app state
activeUidsarray<Uidtype>Array of all uids in the Content app state

Each ContentObject in the defaultContent is passed as a prop to corresponding type of content component. All the resulting components are then passed to the layouts as an array to be rendered as desired.

For eg. The Content app state contains a contentobject of type:'rtc' for each user in the room by default stored in defaultContent. It is used to display user video feeds coming from AgoraRTC hence they contain all the necessary information like: uid to identify and subscribe to the video and audio, audio and video mute states to correctly display fallbacks and icons, etc. each ContentObject is passed as a prop to MaxVideoView. After which the resulting array of components is passed to layout to be rendered.

tip

You can add custom content objects to the render app state using the 'AddCustomContent' action in dispatch

Usage example of the app state:


useLocalUserInfo(): LocalUserInfo

The LocalUserInfo app state contains the local user information like uid, audio and video mute states etc.

Usage example of the app state:


useLayout(selector?: Selector): LayoutContextInterface

The Layout app state governs the video call screen content display layout.


LayoutContextInterface

KeyTypeDescription
currentLayoutstringName of the current layout. Can be grid, pinned or any other key defined in the custom layout API
setLayout( layoutName: string ) => voidSets the current layout with given layout name

Usage example of the app state:


useRoomInfo(selector?: Selector): RoomInfoContextInterface

The RoomInfo app state contains information about the active room.


RoomInfoContextInterface

KeyTypeDescription
isJoinDataFetchedbooleanIndicates room info has been fetched from the backend
data?RoomDataRoom info data

RoomData

KeyTypeDescription
isHostbooleanIndicates if the user joined using the Host URL or using the Attendee URL
meetingTitlestringRoom title
roomId{
attendee: string,
host?: string,
}
Host and attendee roomIds
pstn?{
number: string,
pin: string
}
PSTN info
isSeparateHostLinkbooleanIndicates if separate host and attendee links generated
channel?stringChannel name of current room
uid?UidTypeUid of the local user
token?stringRTC authentication token required to join the channel
rtmToken?stringRTM authentication token required to join the channel
encryptionSecret?stringPacket encryption secret
screenShareUid?stringUid of local user's screenshare
screenShareToken?stringAuthentication token for local user's screenshare

Usage example of the app state:


useUserName(): [userName, setUserName]

The UserName app state governs the local user's display name.

Usage example of the app state:


Returns:

userName: string


setUserName: (name: string) => void;


useRtc(selector?: Selector): RtcInterface

The RTC app state exposes the internal RtcEngineUnsafe object.


RtcInterface

KeyTypeDescription
RtcEngineUnsafeRtcEngineUnsafeThe RtcEngineUnsafe object from the AgoraRTC SDK
setDualStreamMode( mode: DualStreamMode ): voidMethod to modify dual stream mode
danger

Avoid using RtcEngineUnsafe directly to perform actions such as muting audio, joining a channel etc. Instead rely on Actions Library or Dispatch provided by the customization-api as they handle modifying the internal app states along with performing the required action.


Usage example of the app state: