agora-appbuilder-core 4.1.10-beta.1 → 4.1.11

package/template/src/components/beauty-effect/useBeautyEffects.tsx

@@ -1,5 +1,6 @@
 import {createHook} from 'customization-implementation';
-import React, {useState, useEffect, useRef} from 'react';
+import React, {useState} from 'react';
+import {useEffect, useRef} from 'react';
 import AgoraRTC, {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
 import BeautyExtension from 'agora-extension-beauty-effect';
 import {useRoomInfo, useRtc} from 'customization-api';
@@ -76,45 +77,19 @@ const BeautyEffectProvider: React.FC = ({children}) => {
 
   const {RtcEngineUnsafe} = useRtc();
   //@ts-ignore
-  const localVideoTrack: ILocalVideoTrack | undefined =
-    RtcEngineUnsafe?.localStream?.video;
-
-  // ✅ useRef to persist timeout across renders
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  if (timeoutRef.current) {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = null;
-  }
+  const localVideoTrack = RtcEngineUnsafe?.localStream?.video;
 
   if (!roomPreference?.disableVideoProcessors) {
-    /**
-     * Small delay to ensure the new track is stable
-     * when we move from main room to breakout room the track changes
-     * from live to ended instantly as the user audio or video preferences are applied
-     * It solves the error 'MediaStreamTrackProcessor': Input track cannot be ended'
-     */
-    timeoutRef.current = setTimeout(() => {
-      const trackStatus = localVideoTrack?.getMediaStreamTrack()?.readyState;
-      if (trackStatus === 'live') {
-        try {
-          if ($config.ENABLE_VIRTUAL_BACKGROUND) {
-            localVideoTrack
-              ?.pipe(beautyProcessor)
-              .pipe(vbProcessor)
-              .pipe(localVideoTrack?.processorDestination);
-          } else {
-            localVideoTrack
-              ?.pipe(beautyProcessor)
-              .pipe(localVideoTrack?.processorDestination);
-          }
-        } catch (err) {
-          console.error('Error applying processors:', err);
-        }
-      } else {
-        console.warn('Track not live after delay, skipping pipe');
-      }
-    }, 300);
+    if ($config.ENABLE_VIRTUAL_BACKGROUND) {
+      localVideoTrack
+        ?.pipe(beautyProcessor)
+        .pipe(vbProcessor)
+        .pipe(localVideoTrack?.processorDestination);
+    } else {
+      localVideoTrack
+        ?.pipe(beautyProcessor)
+        .pipe(localVideoTrack?.processorDestination);
+    }
   }
 
   useEffect(() => {
@@ -138,18 +113,6 @@ const BeautyEffectProvider: React.FC = ({children}) => {
     lighteningContrastLevel,
   ]);
 
-  // Proper cleanup for both processor and timeout
-  useEffect(() => {
-    return () => {
-      beautyProcessor?.disable();
-      beautyProcessor?.unpipe?.();
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, []);
-
   const removeBeautyEffect = async () => {
     await beautyProcessor.disable();
   };

package/template/src/components/chat/chatConfigure.tsx

@@ -7,7 +7,6 @@ import {useLocalUid} from '../../../agora-rn-uikit';
 import {UidType, useContent} from 'customization-api';
 import {
   ChatMessageType,
-  ChatNotificationType,
   ChatOption,
   SDKChatType,
   useChatMessages,
@@ -256,7 +255,7 @@ const ChatConfigure = ({children}) => {
               );
             }
           },
-          // Text message is recieved, update receiver side ui
+          // text message is recieved
           onTextMessage: message => {
             if (message?.ext?.channel !== data?.channel) {
               return;
@@ -273,14 +272,11 @@ const ChatConfigure = ({children}) => {
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               // show to notifcation- group msg received
-
               showMessageNotification(
                 message.msg,
                 fromUser,
                 false,
                 message.type,
-                false,
-                message.ext?.announcement,
               );
               addMessageToStore(Number(fromUser), {
                 msg: message.msg.replace(/^(\n)+|(\n)+$/g, ''),
@@ -289,7 +285,6 @@ const ChatConfigure = ({children}) => {
                 isDeleted: false,
                 type: ChatMessageType.TXT,
                 replyToMsgId: message.ext?.replyToMsgId,
-                announcement: message.ext?.announcement,
               });
             }
 
@@ -423,7 +418,6 @@ const ChatConfigure = ({children}) => {
             ext: option?.ext?.file_ext,
             fileName: option?.ext?.file_name,
             replyToMsgId: option?.ext?.replyToMsgId,
-            announcement: option?.ext?.announcement,
           };
 
           // update local user message store

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -46,11 +46,6 @@ interface ChatMessagesProviderProps {
   children: React.ReactNode;
   callActive: boolean;
 }
-
-export enum ChatNotificationType {
-  ANNOUNCEMENT = 'ANNOUNCEMENT',
-}
-
 export enum ChatMessageType {
   /**
    * Text message.
@@ -90,10 +85,6 @@ export enum ChatMessageType {
   COMBINE = 'combine',
 }
 
-export interface AnnouncementMessage {
-  sender: string;
-  heading: string;
-}
 export interface messageInterface {
   createdTimestamp: number;
   updatedTimestamp?: number;
@@ -108,7 +99,6 @@ export interface messageInterface {
   reactions?: Reaction[];
   replyToMsgId?: string;
   hide?: boolean;
-  announcement?: AnnouncementMessage;
 }
 
 export enum SDKChatType {
@@ -132,7 +122,6 @@ export interface ChatOption {
     channel?: string;
     msg?: string;
     replyToMsgId?: string;
-    announcement?: AnnouncementMessage;
   };
   url?: string;
 }
@@ -189,8 +178,6 @@ interface ChatMessagesInterface {
     uid: string,
     isPrivateMessage?: boolean,
     msgType?: ChatMessageType,
-    forceStop?: boolean,
-    notificationType?: ChatNotificationType,
   ) => void;
   openPrivateChat: (toUid: UidType) => void;
   removeMessageFromStore: (msgId: string, isMsgRecalled: boolean) => void;
@@ -290,20 +277,11 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
   //commented for v1 release
   //const fromText = useString('messageSenderNotificationLabel');
-  const fromText = (
-    name: string,
-    msgType: ChatMessageType,
-    announcement?: AnnouncementText,
-  ) => {
+  const fromText = (name: string, msgType: ChatMessageType) => {
     let text = '';
     switch (msgType) {
       case ChatMessageType.TXT:
-        if (announcement?.text) {
-          text = `${announcement.sender}: made an announcement in public chat`;
-        } else {
-          text = txtToastHeading?.current(name);
-        }
-
+        text = txtToastHeading?.current(name);
         break;
       case ChatMessageType.IMAGE:
         text = imgToastHeading?.current(name);
@@ -351,15 +329,12 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
   //TODO: check why need
 
-  // If this is needed use syncUserState
-  //
-  // const updateRenderListState = (
-  //   uid: number,
-  //   data: Partial<ContentInterface>,
-  // ) => {
-  //   dispatch({type: 'UpdateRenderList', value: [uid, data]});
-  // };
-  //
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<ContentInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
 
   const addMessageToStore = (uid: UidType, body: messageInterface) => {
     setMessageStore((m: messageStoreInterface[]) => {
@@ -378,7 +353,6 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           fileName: body?.fileName,
           replyToMsgId: body?.replyToMsgId,
           hide: false,
-          announcement: body?.announcement,
         },
       ];
     });
@@ -546,7 +520,6 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     isPrivateMessage: boolean = false,
     msgType: ChatMessageType,
     forceStop: boolean = false,
-    announcement: AnnouncementMessage,
   ) => {
     if (isUserBanedRef.current.isUserBaned) {
       return;
@@ -711,22 +684,17 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         primaryBtn: null,
         secondaryBtn: null,
         type: 'info',
-        leadingIconName: announcement ? 'announcement' : 'chat-nav',
-        text1: announcement
-          ? announcement.heading
-          : isPrivateMessage
+        leadingIconName: 'chat-nav',
+        text1: isPrivateMessage
           ? privateMessageLabel?.current()
           : //@ts-ignore
-          announcement?.sender
-          ? announcement.sender
-          : defaultContentRef.current.defaultContent[uidAsNumber]?.name
+          defaultContentRef.current.defaultContent[uidAsNumber]?.name
           ? fromText(
               trimText(
                 //@ts-ignore
                 defaultContentRef.current.defaultContent[uidAsNumber]?.name,
               ),
               msgType,
-              announcement,
             )
           : '',
         text2: isPrivateMessage

package/template/src/components/controls/useControlPermissionMatrix.tsx

@@ -3,9 +3,7 @@ import {useContext} from 'react';
 import {ClientRoleType, PropsContext} from '../../../agora-rn-uikit/src';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import {joinRoomPreference} from '../../utils/useJoinRoom';
-import {isWeb, isWebInternal} from '../../utils/common';
-import {ENABLE_AUTH} from '../../auth/config';
-import {useBreakoutRoomInfo} from '../room-info/useSetBreakoutRoomInfo';
+import {isWeb} from '../../utils/common';
 
 /**
  * ControlPermissionKey represents the different keys
@@ -17,12 +15,7 @@ export type ControlPermissionKey =
   | 'participantControl'
   | 'screenshareControl'
   | 'settingsControl'
-  | 'viewAllTextTracksControl'
-  | 'breakoutRoomControl'
-  | 'whiteboardControl'
-  | 'recordingControl'
-  | 'captionsControl'
-  | 'transcriptsControl';
+  | 'viewAllTextTracks';
 
 /**
  * ControlPermissionRule defines the properties used to evaluate permission rules.
@@ -31,7 +24,6 @@ export type ControlPermissionRule = {
   isHost: boolean;
   role: ClientRoleType;
   preference: joinRoomPreference;
-  isInBreakoutRoom: boolean;
 };
 
 export const controlPermissionMatrix: Record<
@@ -44,30 +36,12 @@ export const controlPermissionMatrix: Record<
   settingsControl: ({preference}) => !preference.disableSettings,
   screenshareControl: ({preference}) =>
     $config.SCREEN_SHARING && !preference.disableScreenShare,
-
-  viewAllTextTracksControl: ({isHost, isInBreakoutRoom}) =>
+  viewAllTextTracks: ({isHost}) =>
     isHost &&
     $config.ENABLE_STT &&
     $config.ENABLE_MEETING_TRANSCRIPT &&
     $config.ENABLE_TEXT_TRACKS &&
-    isWeb() &&
-    !isInBreakoutRoom,
-  whiteboardControl: ({isHost, isInBreakoutRoom}) =>
-    isHost && $config.ENABLE_WHITEBOARD && isWebInternal() && !isInBreakoutRoom,
-  recordingControl: ({isHost, isInBreakoutRoom}) =>
-    isHost && $config.CLOUD_RECORDING && !isInBreakoutRoom,
-  captionsControl: ({isInBreakoutRoom}) =>
-    $config.ENABLE_STT && $config.ENABLE_CAPTION && !isInBreakoutRoom,
-  transcriptsControl: ({isInBreakoutRoom}) =>
-    $config.ENABLE_MEETING_TRANSCRIPT && !isInBreakoutRoom,
-  breakoutRoomControl: () =>
-    isWeb() &&
-    $config.ENABLE_BREAKOUT_ROOM &&
-    ENABLE_AUTH &&
-    !$config.ENABLE_CONVERSATIONAL_AI &&
-    !$config.EVENT_MODE &&
-    !$config.RAISE_HAND &&
-    !$config.ENABLE_WAITING_ROOM,
+    isWeb(),
 };
 
 export const useControlPermissionMatrix = (
@@ -75,14 +49,12 @@ export const useControlPermissionMatrix = (
 ): boolean => {
   const {data: roomData, roomPreference} = useRoomInfo();
   const {rtcProps} = useContext(PropsContext);
-  const {breakoutRoomChannelData} = useBreakoutRoomInfo();
 
   // Build the permission rule context for the current user.
   const rule: ControlPermissionRule = {
     isHost: roomData?.isHost || false,
     role: rtcProps.role,
     preference: {...roomPreference},
-    isInBreakoutRoom: breakoutRoomChannelData?.isBreakoutMode || false,
   };
   // Retrieve the permission function for the given key and evaluate it.
   const permissionFn = controlPermissionMatrix[key];

package/template/src/components/participants/AllHostParticipants.tsx

@@ -73,14 +73,12 @@ export default function AllHostParticipants(props: any) {
                 isAudienceUser={false}
                 name={getParticipantName(localUid)}
                 user={defaultContent[localUid]}
-                showControls={props?.hideControls ? false : true}
+                showControls={true}
                 isHostUser={hostUids.indexOf(localUid) !== -1}
                 key={localUid}
                 isMobile={isMobile}
                 handleClose={handleClose}
                 updateActionSheet={updateActionSheet}
-                showBreakoutRoomMenu={props?.showBreakoutRoomMenu}
-                from={props?.from}
               />
               {renderScreenShare(defaultContent[localUid])}
             </>
@@ -106,18 +104,12 @@ export default function AllHostParticipants(props: any) {
                     isAudienceUser={false}
                     name={getParticipantName(uid)}
                     user={defaultContent[uid]}
-                    showControls={
-                      defaultContent[uid]?.type === 'rtc' &&
-                      isHost &&
-                      (props?.hideControls ? false : true)
-                    }
+                    showControls={defaultContent[uid]?.type === 'rtc' && isHost}
                     isHostUser={hostUids.indexOf(uid) !== -1}
                     key={uid}
                     isMobile={isMobile}
                     handleClose={handleClose}
                     updateActionSheet={updateActionSheet}
-                    showBreakoutRoomMenu={props?.showBreakoutRoomMenu}
-                    from={props?.from}
                   />
                   {renderScreenShare(defaultContent[uid])}
                 </>

package/template/src/components/participants/Participant.tsx

@@ -66,12 +66,6 @@ interface ParticipantInterface {
   updateActionSheet: (screenName: 'chat' | 'participants' | 'settings') => {};
   uid?: UidType;
   screenUid?: UidType;
-  showBreakoutRoomMenu?: boolean;
-  from?:
-    | 'breakout-room'
-    | 'partcipant'
-    | 'screenshare-participant'
-    | 'video-tile';
 }
 
 const Participant = (props: ParticipantInterface) => {
@@ -112,7 +106,7 @@ const Participant = (props: ParticipantInterface) => {
         setActionMenuVisible={setActionMenuVisible}
         user={props.user}
         btnRef={moreIconRef}
-        from={props?.from || 'partcipant'}
+        from={'partcipant'}
         spotlightUid={spotlightUid}
         setSpotlightUid={setSpotlightUid}
       />

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -77,21 +77,13 @@ import {
   DEFAULT_ACTION_KEYS,
   UserActionMenuItemsConfig,
 } from '../../atoms/UserActionMenuPreset';
-import {
-  MemberDropdownOption,
-  useBreakoutRoom,
-} from '../breakout-room/context/BreakoutRoomContext';
 
 interface UserActionMenuOptionsOptionsProps {
   user: ContentInterface;
   actionMenuVisible: boolean;
   setActionMenuVisible: (actionMenuVisible: boolean) => void;
   btnRef: any;
-  from:
-    | 'partcipant'
-    | 'screenshare-participant'
-    | 'video-tile'
-    | 'breakout-room';
+  from: 'partcipant' | 'screenshare-participant' | 'video-tile';
   spotlightUid?: UidType;
   setSpotlightUid?: (uid: UidType) => void;
   items?: UserActionMenuItemsConfig;
@@ -110,8 +102,7 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
-  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid, from} =
-    props;
+  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid} = props;
   const {currentLayout} = useLayout();
   const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
     useContent();
@@ -738,7 +729,6 @@ export default function UserActionMenuOptionsOptions(
     secondaryPinnedUid,
     currentLayout,
     spotlightUid,
-    from,
   ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();

package/template/src/components/precall/joinCallBtn.native.tsx

@@ -33,7 +33,7 @@ export interface PreCallJoinCallBtnProps {
 
 const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive} = usePreCall();
+  const {setCallActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
@@ -58,12 +58,17 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   }, [rtcProps?.role]);
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     setCallActive(true);
   };
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username === '';
+  const disabled = !isJoinDataFetched;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinCallBtn.tsx

@@ -42,7 +42,7 @@ export interface PreCallJoinCallBtnProps {
 
 const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive} = usePreCall();
+  const {setCallActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched} = useRoomInfo();
@@ -59,6 +59,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   );
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     logger.log(
       LogSource.Internals,
       'PRECALL_SCREEN',
@@ -95,7 +100,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username?.trim() === '';
+  const disabled = !isJoinDataFetched;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -39,7 +39,6 @@ import {
   waitingRoomHostNotJoined,
   waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
-import ChatContext from '../ChatContext';
 
 export interface PreCallJoinWaitingRoomBtnProps {
   render?: (
@@ -59,8 +58,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
-  const {syncUserState} = useContext(ChatContext);
-  const {setCallActive, callActive} = usePreCall();
+  const {setCallActive, callActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
@@ -141,11 +139,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
       if (callActive) return;
       // on approve/reject response from host, waiting room permission is reset
       // update waitinng room status on uid
-      // dispatch({
-      //   type: 'UpdateRenderList',
-      //   value: [localUid, {isInWaitingRoom: false}],
-      // });
-      syncUserState(localUid, {isInWaitingRoom: false});
+      dispatch({
+        type: 'UpdateRenderList',
+        value: [localUid, {isInWaitingRoom: false}],
+      });
 
       if (approved) {
         setRoomInfo(prev => {
@@ -215,6 +212,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   };
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     shouldWaitingRoomPoll = true;
     // Enter waiting rooom;
     setRoomInfo(prev => {
@@ -222,11 +224,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
     });
 
     // add the waitingRoomStatus to the uid
-    // dispatch({
-    //   type: 'UpdateRenderList',
-    //   value: [localUid, {isInWaitingRoom: true}],
-    // });
-    syncUserState(localUid, {isInWaitingRoom: true});
+    dispatch({
+      type: 'UpdateRenderList',
+      value: [localUid, {isInWaitingRoom: true}],
+    });
 
     // join request API to server, server will send RTM message to all hosts regarding request from this user,
     requestServerToJoinRoom();
@@ -236,8 +237,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom || username?.trim() === ''
-    : isInWaitingRoom || username?.trim() === '';
+    ? !hasHostJoined || isInWaitingRoom
+    : isInWaitingRoom;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -45,7 +45,8 @@ import {
   waitingRoomHostNotJoined,
   waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
-import ChatContext from '../ChatContext';
+import SDKEvents from '../../utils/SdkEvents';
+import isSDK from '../../utils/isSDK';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -70,7 +71,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive, callActive} = usePreCall();
+  const {setCallActive, callActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
@@ -85,7 +86,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
   const localUid = useLocalUid();
   const {dispatch} = useContext(DispatchContext);
-  const {syncUserState} = useContext(ChatContext);
+
   const [buttonText, setButtonText] = React.useState(
     waitingRoomButton({
       ready: isInWaitingRoom,
@@ -145,13 +146,16 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
       if (callActive) return;
       // on approve/reject response from host, waiting room permission is reset
       // update waitinng room status on uid
-      // dispatch({
-      //   type: 'UpdateRenderList',
-      //   value: [localUid, {isInWaitingRoom: false}],
-      // });
-      syncUserState(localUid, {isInWaitingRoom: false});
+      dispatch({
+        type: 'UpdateRenderList',
+        value: [localUid, {isInWaitingRoom: false}],
+      });
 
       if (approved) {
+        if (isSDK()) {
+          //emit SDKEvent waiting-room-approval-granted
+          SDKEvents.emit('waiting-room-approval-granted');
+        }
         setRoomInfo(prev => {
           return {
             ...prev,
@@ -191,6 +195,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           };
         });
       } else {
+        if (isSDK()) {
+          //emit SDKEvent waiting-room-approval-rejected
+          SDKEvents.emit('waiting-room-approval-rejected');
+        }
         setRoomInfo(prev => {
           return {
             ...prev,
@@ -238,17 +246,20 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   };
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     shouldWaitingRoomPoll = true;
     setUsername(username.trim());
     //setCallActive(true);
 
     // add the waitingRoomStatus to the uid
-    // dispatch({
-    //   type: 'UpdateRenderList',
-    //   value: [localUid, {isInWaitingRoom: true}],
-    // });
-    syncUserState(localUid, {isInWaitingRoom: true});
-
+    dispatch({
+      type: 'UpdateRenderList',
+      value: [localUid, {isInWaitingRoom: true}],
+    });
     // Enter waiting rooom;
     setRoomInfo(prev => {
       return {...prev, isInWaitingRoom: true};
@@ -256,7 +267,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
     // join request API to server, server will send RTM message to all hosts regarding request from this user,
     requestServerToJoinRoom();
-
+    if (isSDK()) {
+      //emit SDKEvent waiting for approval
+      SDKEvents.emit('waiting-room-approval-requested');
+    }
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
       audio.volume = 0;
@@ -285,8 +299,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom || username?.trim() === ''
-    : isInWaitingRoom || username?.trim() === '';
+    ? !hasHostJoined || isInWaitingRoom
+    : isInWaitingRoom;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (