agora-appbuilder-core 4.0.0 → 4.0.1

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

@@ -13,7 +13,7 @@ import React, {useContext, useRef, useState} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import RemoteAudioMute from '../../subComponents/RemoteAudioMute';
 import RemoteVideoMute from '../../subComponents/RemoteVideoMute';
-import {ClientRole, RenderInterface} from '../../../agora-rn-uikit';
+import {ContentInterface, UidType} from '../../../agora-rn-uikit';
 import UserAvatar from '../../atoms/UserAvatar';
 import {isMobileUA, isWebInternal} from '../../utils/common';
 import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
@@ -21,16 +21,15 @@ import Spacer from '../../atoms/Spacer';
 import useRemoteEndCall from '../../utils/useRemoteEndCall';
 import {useChatMessages} from '../chat-messages/useChatMessages';
 import LocalVideoMute from '../../subComponents/LocalVideoMute';
-import {ButtonTemplateName} from '../../utils/useButtonTemplate';
 import LocalAudioMute from '../../subComponents/LocalAudioMute';
 import RemoveMeetingPopup from '../../subComponents/RemoveMeetingPopup';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import {
   RaiseHandValue,
   LiveStreamContext,
   LiveStreamControlMessageEnum,
 } from '../livestream';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import IconButton from '../../atoms/IconButton';
 import ThemeConfig from '../../theme';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
@@ -42,25 +41,36 @@ import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
 import {
   SidePanelType,
   useLayout,
-  useRender,
-  useRtc,
+  useContent,
   useSidePanel,
 } from 'customization-api';
 import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
 import UserActionMenuOptionsOptions from './UserActionMenuOptions';
+
+import WaitingRoomButton from '../../subComponents/waiting-rooms/WaitingRoomControls';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelMeText,
+  peoplePanelPresenterText,
+} from '../../language/default-labels/videoCallScreenLabels';
 interface ParticipantInterface {
   isLocal: boolean;
   name: string;
-  user: RenderInterface;
+  user: ContentInterface;
   showControls: boolean;
   isHostUser: boolean;
   isAudienceUser: boolean;
   isMobile?: boolean;
+  waitingRoomUser?: boolean;
   handleClose: () => {};
   updateActionSheet: (screenName: 'chat' | 'participants' | 'settings') => {};
+  uid?: UidType;
+  screenUid?: UidType;
 }
 
 const Participant = (props: ParticipantInterface) => {
+  const metext = useString(peoplePanelMeText)();
+  const presentertext = useString(peoplePanelPresenterText)();
   const {coHostUids} = useContext(LiveStreamContext);
   const [isHovered, setIsHovered] = React.useState(false);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
@@ -76,14 +86,18 @@ const Participant = (props: ParticipantInterface) => {
     isMobile = false,
     handleClose,
     updateActionSheet,
+    waitingRoomUser = false,
+    uid,
+    screenUid,
   } = props;
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
   const showModal = () => {
-    setActionMenuVisible((state) => !state);
+    setActionMenuVisible(state => !state);
   };
+
   return (
     <>
       <UserActionMenuOptionsOptions
@@ -106,17 +120,18 @@ const Participant = (props: ParticipantInterface) => {
             <Text style={styles.participantNameText} numberOfLines={1}>
               {name}
             </Text>
-            {isLocal && <Text style={styles.subText}>{'Me'}</Text>}
+            {isLocal && <Text style={styles.subText}>{metext}</Text>}
             {!isLocal &&
             $config.EVENT_MODE &&
             coHostUids.indexOf(user.uid) !== -1 ? (
-              <Text style={styles.subText}>{'Presenter'}</Text>
+              <Text style={styles.subText}>{presentertext}</Text>
             ) : (
               <></>
             )}
           </View>
           <View style={styles.iconContainer}>
-            {isHovered || actionMenuVisible || isMobileUA() ? (
+            {(isHovered || actionMenuVisible || isMobileUA()) &&
+            !waitingRoomUser ? (
               <View
                 ref={moreIconRef}
                 collapsable={false}
@@ -151,6 +166,23 @@ const Participant = (props: ParticipantInterface) => {
             ) : (
               <Spacer size={24} horizontal={true} />
             )}
+            {waitingRoomUser ? (
+              <>
+                <WaitingRoomButton
+                  uid={uid}
+                  screenUid={screenUid}
+                  isAccept={false}
+                />
+                <Spacer horizontal={true} size={8} />
+                <WaitingRoomButton
+                  uid={uid}
+                  screenUid={screenUid}
+                  isAccept={true}
+                />
+              </>
+            ) : (
+              <></>
+            )}
             {showControls ? (
               <>
                 <Spacer horizontal={true} size={8} />
@@ -173,8 +205,6 @@ const Participant = (props: ParticipantInterface) => {
                                   : $config.SEMANTIC_ERROR,
                               };
                             }}
-                            showLabel={false}
-                            isMobileView={isMobile}
                           />
                         </View>
                       )
@@ -206,8 +236,6 @@ const Participant = (props: ParticipantInterface) => {
                                 : $config.SEMANTIC_ERROR,
                             };
                           }}
-                          showLabel={false}
-                          isMobileView={isMobile}
                         />
                       </View>
                     )
@@ -287,6 +315,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     paddingHorizontal: 20,
     paddingVertical: 8,
   },

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

@@ -12,6 +12,9 @@ interface PropsInterface {
 
 export default function ParticipantSectionTitle(props: PropsInterface) {
   const {title, count = 0} = props;
+  if (!count) {
+    return null;
+  }
   return (
     <TouchableOpacity
       style={style.container}
@@ -43,8 +46,8 @@ const style = StyleSheet.create({
     fontSize: 12,
     fontFamily: 'Source Sans Pro',
     fontWeight: '700',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    paddingVertical: 12,
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+    paddingVertical: 8,
     alignSelf: 'center',
   },
   iconView: {

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

@@ -14,18 +14,18 @@ import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 import ThemeConfig from '../../theme';
 import UserAvatar from '../../atoms/UserAvatar';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import {RenderInterface} from 'customization-api';
+import {ContentInterface} from 'customization-api';
 import {isWebInternal, isMobileUA} from '../../utils/common';
 import IconButton from '../../atoms/IconButton';
 import UserActionMenuOptionsOptions from './UserActionMenuOptions';
 
-const ScreenshareParticipants = (props: {user: RenderInterface}) => {
+const ScreenshareParticipants = (props: {user: ContentInterface}) => {
   const screenshareRef = useRef();
   const [isHovered, setIsHovered] = useState(false);
   const [actionMenuVisible, setActionMenuVisible] = useState(false);
 
   const showModal = () => {
-    setActionMenuVisible((state) => !state);
+    setActionMenuVisible(state => !state);
   };
   return (
     <>
@@ -39,17 +39,17 @@ const ScreenshareParticipants = (props: {user: RenderInterface}) => {
       />
       <PlatformWrapper showModal={showModal} setIsHovered={setIsHovered}>
         <View style={styles.container}>
-          <View style={styles.userInfoContainer}>
-            <View style={styles.bgContainerStyle}>
-              <UserAvatar
-                name={props.user.name}
-                containerStyle={styles.containerStyle}
-                textStyle={styles.textStyle}
-              />
-            </View>
-            <View style={{alignSelf: 'center'}}>
-              <Text style={styles.participantNameText}>{props.user.name}</Text>
-            </View>
+          <View style={styles.bgContainerStyle}>
+            <UserAvatar
+              name={props.user.name}
+              containerStyle={styles.containerStyle}
+              textStyle={styles.textStyle}
+            />
+          </View>
+          <View style={{flex: 1, marginHorizontal: 8, alignSelf: 'center'}}>
+            <Text style={styles.participantNameText} numberOfLines={1}>
+              {props.user.name}
+            </Text>
           </View>
           {true ? (
             <View
@@ -88,11 +88,11 @@ const ScreenshareParticipants = (props: {user: RenderInterface}) => {
                   />
                 </View>
               ) : (
-                <></>
+                <View style={{width: 24, height: 24, opacity: 0}} />
               )}
             </View>
           ) : (
-            <></>
+            <View style={{width: 24, height: 24, opacity: 0}} />
           )}
         </View>
       </PlatformWrapper>
@@ -123,7 +123,6 @@ const styles = StyleSheet.create({
     width: 36,
     height: 36,
     borderRadius: 18,
-    marginRight: 8,
   },
   containerStyle: {
     width: 36,
@@ -132,14 +131,13 @@ const styles = StyleSheet.create({
   },
   textStyle: {
     fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 10,
+    lineHeight: 12,
     fontWeight: '400',
     color: $config.CARD_LAYER_1_COLOR,
   },
   participantNameText: {
     fontWeight: '400',
     fontSize: 12,
-    lineHeight: 15,
     fontFamily: ThemeConfig.FontFamily.sansPro,
     flexDirection: 'row',
     color: $config.FONT_COLOR,

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

@@ -1,17 +1,18 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../../utils/useRemoteMute';
 import {
-  MUTE_REMOTE_TYPE,
-  RenderInterface,
+  ContentInterface,
   SidePanelType,
   useLayout,
   useLocalUid,
-  useMeetingInfo,
-  useRemoteMute,
-  useRender,
-  useRtc,
+  useRoomInfo,
+  useContent,
   useSidePanel,
 } from 'customization-api';
-import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
+import {
+  DefaultLayouts,
+  getPinnedLayoutName,
+} from '../../pages/video-call/DefaultLayouts';
 import useRemoteRequest, {
   REQUEST_REMOTE_TYPE,
 } from '../../utils/useRemoteRequest';
@@ -20,13 +21,17 @@ import {useChatMessages} from '../chat-messages/useChatMessages';
 import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
 import useRemoteEndCall from '../../utils/useRemoteEndCall';
 import LiveStreamContext from '../livestream/LiveStreamContext';
-import {ClientRole, UidType} from '../../../agora-rn-uikit';
+import {
+  ClientRoleType,
+  DispatchContext,
+  UidType,
+} from '../../../agora-rn-uikit';
 import {useWindowDimensions} from 'react-native';
 import {
   LiveStreamControlMessageEnum,
   RaiseHandValue,
 } from '../livestream/Types';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import RemoveMeetingPopup from '../../subComponents/RemoveMeetingPopup';
 import RemoveScreensharePopup from '../../subComponents/RemoveScreensharePopup';
 import useRemoteEndScreenshare from '../../utils/useRemoteEndScreenshare';
@@ -35,9 +40,32 @@ import {useFocus} from '../../utils/useFocus';
 import Toast from '../../../react-native-toast-message';
 import RemoteMutePopup from '../../subComponents/RemoteMutePopup';
 import {calculatePosition, trimText} from '../../utils/common';
+import {useVideoCall} from '../useVideoCall';
+import {customEvents} from 'customization-api';
+import {useDisableChat} from '../disable-chat/useDisableChat';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import {useString} from '../../utils/useString';
+import {
+  I18nMuteType,
+  moreBtnAddAsPresenter,
+  moreBtnAudio,
+  moreBtnChangeName,
+  moreBtnMessagePrivately,
+  moreBtnPinToTop,
+  moreBtnRemoveAsPresenter,
+  moreBtnRemoveFromLarge,
+  moreBtnRemoveFromRoom,
+  moreBtnRemoveFromTop,
+  moreBtnRemoveScreenShare,
+  moreBtnStopScreenShare,
+  moreBtnVideo,
+  moreBtnViewInLarge,
+  moreBtnViewWhiteboard,
+  userRemovedFromTheRoomToastHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 interface UserActionMenuOptionsOptionsProps {
-  user: RenderInterface;
+  user: ContentInterface;
   actionMenuVisible: boolean;
   setActionMenuVisible: (actionMenuVisible: boolean) => void;
   btnRef: any;
@@ -57,15 +85,17 @@ export default function UserActionMenuOptionsOptions(
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
   const {user, actionMenuVisible, setActionMenuVisible} = props;
-  const {pinnedUid, activeUids} = useRender();
-  const {dispatch} = useRtc();
+  const {currentLayout} = useLayout();
+  const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
+    useContent();
+  const {dispatch} = useContext(DispatchContext);
   const {setLayout} = useLayout();
   const localuid = useLocalUid();
   const {openPrivateChat} = useChatMessages();
   const {hostUids, audienceUids} = useLiveStreamDataContext();
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const remoteRequest = useRemoteRequest();
   const remoteMute = useRemoteMute();
   const endRemoteCall = useRemoteEndCall();
@@ -73,6 +103,40 @@ export default function UserActionMenuOptionsOptions(
     useContext(LiveStreamContext);
   const [removeMeetingPopupVisible, setRemoveMeetingPopupVisible] =
     useState(false);
+  const {enablePinForMe} = useVideoCall();
+  const {setDisableChatUids, disableChatUids} = useDisableChat();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
+
+  const viewWhiteboardLabel = useString(moreBtnViewWhiteboard)();
+  const removeFromLargeLabel = useString(moreBtnRemoveFromLarge)();
+  const viewInLargeLabel = useString(moreBtnViewInLarge)();
+  const pinToTopLabel = useString(moreBtnPinToTop)();
+  const removeFromTopLabel = useString(moreBtnRemoveFromTop)();
+  const messagePrivatelyLabel = useString(moreBtnMessagePrivately)();
+  const audioLabel = useString<boolean>(moreBtnAudio);
+  const videoLabel = useString<boolean>(moreBtnVideo);
+  const addAsPresenterLabel = useString(moreBtnAddAsPresenter)();
+  const removeAsPresenterLabel = useString(moreBtnRemoveAsPresenter)();
+  const changeNameLabel = useString(moreBtnChangeName)();
+  const stopScreenShareLabel = useString(moreBtnStopScreenShare)();
+  const removeScreenShareLabel = useString(moreBtnRemoveScreenShare)();
+  const removeFromRoomLabel = useString(moreBtnRemoveFromRoom)();
+
+  useEffect(() => {
+    customEvents.on('DisableChat', data => {
+      // for other users
+      const {disableChatUid, disableChat} = JSON.parse(data?.payload);
+      setDisableChatUids(prevState => {
+        // upate disable uids
+        return {
+          ...prevState,
+          [disableChatUid]: {
+            disableChat,
+          },
+        };
+      });
+    });
+  }, []);
 
   useEffect(() => {
     const items: ActionMenuItem[] = [];
@@ -89,26 +153,62 @@ export default function UserActionMenuOptionsOptions(
         audienceUids.indexOf(user.uid) !== -1
       )
     ) {
-      items.push({
-        disabled: activeUids.length === 1,
-        icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
-        onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.SECONDARY_ACTION_COLOR,
-        title: pinnedUid
-          ? user.uid === pinnedUid
-            ? 'Unpin'
-            : 'Replace Pin'
-          : 'Pin for me',
-        callback: () => {
-          setActionMenuVisible(false);
-          dispatch({
-            type: 'UserPin',
-            value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
+      if (enablePinForMe) {
+        //if (pinnedUid !== user.uid) {
+        items.push({
+          //disabled: activeUids?.filter(i => !customContent[i])?.length === 1,
+          disabled: activeUids?.length === 1,
+          icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
+          onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
+          iconColor: $config.SECONDARY_ACTION_COLOR,
+          textColor: $config.SECONDARY_ACTION_COLOR,
+          title: pinnedUid
+            ? user.uid === pinnedUid
+              ? removeFromLargeLabel
+              : user.uid === getWhiteboardUid()
+              ? viewWhiteboardLabel
+              : viewInLargeLabel
+            : user.uid === getWhiteboardUid()
+            ? viewWhiteboardLabel
+            : viewInLargeLabel,
+          callback: () => {
+            setActionMenuVisible(false);
+            dispatch({
+              type: 'UserPin',
+              value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
+            });
+            setLayout(getPinnedLayoutName());
+          },
+        });
+        if (currentLayout === DefaultLayouts[1].name) {
+          items.push({
+            // disabled:
+            //   activeUids?.filter(i => !customContent[i])?.length === 1,
+            disabled: activeUids?.length === 1,
+            icon: secondaryPinnedUid ? 'unpin-outlined' : 'pin-outlined',
+            onHoverIcon: secondaryPinnedUid ? 'unpin-outlined' : 'pin-filled',
+            iconColor: $config.SECONDARY_ACTION_COLOR,
+            textColor: $config.SECONDARY_ACTION_COLOR,
+            title: secondaryPinnedUid
+              ? user.uid === secondaryPinnedUid
+                ? removeFromTopLabel
+                : pinToTopLabel
+              : pinToTopLabel,
+            callback: () => {
+              setActionMenuVisible(false);
+              dispatch({
+                type: 'UserSecondaryPin',
+                value: [
+                  secondaryPinnedUid && user.uid === secondaryPinnedUid
+                    ? 0
+                    : user.uid,
+                ],
+              });
+            },
           });
-          setLayout(getPinnedLayoutName());
-        },
-      });
+        }
+        //}
+      }
     }
 
     /**
@@ -118,18 +218,19 @@ export default function UserActionMenuOptionsOptions(
       /**
        * Chat menu
        */
-      items.push({
-        icon: 'chat-outlined',
-        onHoverIcon: 'chat-filled',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.SECONDARY_ACTION_COLOR,
-        title: 'Message Privately',
-        callback: () => {
-          setActionMenuVisible(false);
-          openPrivateChat(user.uid);
-        },
-      });
-
+      if ($config.CHAT) {
+        items.push({
+          icon: 'chat-outlined',
+          onHoverIcon: 'chat-filled',
+          iconColor: $config.SECONDARY_ACTION_COLOR,
+          textColor: $config.SECONDARY_ACTION_COLOR,
+          title: messagePrivatelyLabel,
+          callback: () => {
+            setActionMenuVisible(false);
+            openPrivateChat(user.uid);
+          },
+        });
+      }
       /**
        * Only host can see this menu item - request/mute - video/audio, promote to co host,demote to audience,remove form meeting
        */
@@ -154,7 +255,7 @@ export default function UserActionMenuOptionsOptions(
             onHoverIcon: user.audio ? 'mic-off-filled' : 'mic-on-filled',
             iconColor: $config.SECONDARY_ACTION_COLOR,
             textColor: $config.SECONDARY_ACTION_COLOR,
-            title: user.audio ? 'Mute Audio' : 'Request Audio',
+            title: audioLabel(user.audio),
             callback: () => {
               setActionMenuVisible(false);
               user.audio
@@ -168,7 +269,7 @@ export default function UserActionMenuOptionsOptions(
               onHoverIcon: user.video ? 'video-off-filled' : 'video-on-filled',
               iconColor: $config.SECONDARY_ACTION_COLOR,
               textColor: $config.SECONDARY_ACTION_COLOR,
-              title: user.video ? 'Mute Video' : 'Request Video',
+              title: videoLabel(user.video),
               callback: () => {
                 setActionMenuVisible(false);
                 user.video
@@ -192,7 +293,7 @@ export default function UserActionMenuOptionsOptions(
             onHoverIcon: 'promote-filled',
             iconColor: $config.SECONDARY_ACTION_COLOR,
             textColor: $config.SECONDARY_ACTION_COLOR,
-            title: 'Add as Presenter',
+            title: addAsPresenterLabel,
             callback: () => {
               setActionMenuVisible(false);
               promoteAudienceAsCoHost(user.uid);
@@ -202,7 +303,8 @@ export default function UserActionMenuOptionsOptions(
         if ($config.EVENT_MODE) {
           if (
             raiseHandList[user.uid]?.raised === RaiseHandValue.TRUE &&
-            raiseHandList[user.uid]?.role == ClientRole.Broadcaster
+            raiseHandList[user.uid]?.role ==
+              ClientRoleType.ClientRoleBroadcaster
           ) {
             items.push({
               isBase64Icon: true,
@@ -210,13 +312,13 @@ export default function UserActionMenuOptionsOptions(
               onHoverIcon: 'demote-filled',
               iconColor: $config.SECONDARY_ACTION_COLOR,
               textColor: $config.SECONDARY_ACTION_COLOR,
-              title: 'Remove as Presenter',
+              title: removeAsPresenterLabel,
               callback: () => {
                 setActionMenuVisible(false);
                 events.send(
                   LiveStreamControlMessageEnum.raiseHandRequestRejected,
                   '',
-                  EventPersistLevel.LEVEL1,
+                  PersistanceLevel.None,
                   user.uid,
                 );
               },
@@ -228,7 +330,7 @@ export default function UserActionMenuOptionsOptions(
           icon: 'remove-meeting',
           iconColor: $config.SEMANTIC_ERROR,
           textColor: $config.SEMANTIC_ERROR,
-          title: 'Remove From Meeting',
+          title: removeFromRoomLabel,
           callback: () => {
             setActionMenuVisible(false);
             setRemoveMeetingPopupVisible(true);
@@ -246,9 +348,9 @@ export default function UserActionMenuOptionsOptions(
         onHoverIcon: 'pencil-filled',
         iconColor: $config.SECONDARY_ACTION_COLOR,
         textColor: $config.SECONDARY_ACTION_COLOR,
-        title: 'Change Name',
+        title: changeNameLabel,
         callback: () => {
-          setFocus((prevState) => {
+          setFocus(prevState => {
             return {
               ...prevState,
               editName: true,
@@ -271,8 +373,8 @@ export default function UserActionMenuOptionsOptions(
         textColor: $config.SEMANTIC_ERROR,
         title:
           localuid === user?.parentUid
-            ? 'Stop Screenshare'
-            : 'Remove Screenshare',
+            ? stopScreenShareLabel
+            : removeScreenShareLabel,
         callback: () => {
           setActionMenuVisible(false);
           //for local user directly stop the screenshare
@@ -287,11 +389,20 @@ export default function UserActionMenuOptionsOptions(
       });
     }
     setActionMenuitems(items);
-  }, [pinnedUid, isHost, raiseHandList, hostUids, user]);
+  }, [
+    pinnedUid,
+    isHost,
+    raiseHandList,
+    hostUids,
+    user,
+    disableChatUids,
+    secondaryPinnedUid,
+    currentLayout,
+  ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const [modalPosition, setModalPosition] = useState({});
-
+  const toastlabel = useString(userRemovedFromTheRoomToastHeading);
   useEffect(() => {
     if (actionMenuVisible) {
       //getting btnRef x,y
@@ -323,7 +434,7 @@ export default function UserActionMenuOptionsOptions(
     <>
       {isHost ? (
         <RemoteMutePopup
-          type="audio"
+          type={I18nMuteType.audio}
           actionMenuVisible={showAudioMuteModal}
           setActionMenuVisible={setShowAudioMuteModal}
           name={props?.user.name}
@@ -338,7 +449,7 @@ export default function UserActionMenuOptionsOptions(
       )}
       {isHost ? (
         <RemoteMutePopup
-          type="video"
+          type={I18nMuteType.video}
           actionMenuVisible={showVideoMuteModal}
           setActionMenuVisible={setShowVideoMuteModal}
           name={props?.user.name}
@@ -372,13 +483,13 @@ export default function UserActionMenuOptionsOptions(
           username={user.name}
           removeUserFromMeeting={() => {
             Toast.show({
+              leadingIconName: 'info',
               type: 'info',
-              text1: `The system will remove ${trimText(
-                user.name,
-              )} from this call after 5 secs.`,
+              text1: toastlabel(trimText(user.name)),
               visibilityTime: 5000,
               primaryBtn: null,
               secondaryBtn: null,
+              leadingIcon: null,
             });
             endRemoteCall(user.uid);
           }}