agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

package/template/src/subComponents/ChatInput.tsx

@@ -17,7 +17,7 @@ import icons from '../assets/icons';
 import {useString} from '../utils/useString';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
 import {isValidReactComponent} from '../utils/common';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
 
 export interface ChatSendButtonProps {
@@ -119,48 +119,62 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
 /**
  * Input component for the Chat interface
  */
-const ChatInput = () => {
+const ChatInput = (props: {
+  chatInput?: React.ComponentType<ChatTextInputProps>;
+  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+}) => {
   const {primaryColor} = useContext(ColorContext);
-  const {ChatInputComponent, ChatSendButtonComponent} = useFpe((data) => {
-    let components: {
-      ChatInputComponent: React.ComponentType<ChatTextInputProps>;
-      ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
-    } = {
-      ChatInputComponent: ChatTextInput,
-      ChatSendButtonComponent: ChatSendButton,
-    };
-    if (
-      data?.components?.videoCall &&
-      typeof data?.components?.videoCall === 'object'
-    ) {
-      // commented for v1 release
-      // if (
-      //   data?.components?.videoCall?.chat &&
-      //   typeof data?.components?.videoCall?.chat === 'object'
-      // ) {
-      //   if (
-      //     data?.components?.videoCall?.chat?.chatInput &&
-      //     typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-      //     isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-      //   ) {
-      //     components.ChatInputComponent =
-      //       data?.components?.videoCall?.chat?.chatInput;
-      //   }
-      //   if (
-      //     data?.components?.videoCall?.chat?.chatSentButton &&
-      //     typeof data?.components?.videoCall?.chat?.chatSentButton !==
-      //       'object' &&
-      //     isValidReactComponent(
-      //       data?.components?.videoCall?.chat?.chatSentButton,
-      //     )
-      //   ) {
-      //     components.ChatSendButtonComponent =
-      //       data?.components?.videoCall?.chat?.chatSentButton;
-      //   }
-      // }
-    }
-    return components;
-  });
+  const {ChatInputComponent, ChatSendButtonComponent} = useCustomization(
+    (data) => {
+      let components: {
+        ChatInputComponent: React.ComponentType<ChatTextInputProps>;
+        ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
+      } = {
+        ChatInputComponent: ChatTextInput,
+        ChatSendButtonComponent: ChatSendButton,
+      };
+      if (
+        data?.components?.videoCall &&
+        typeof data?.components?.videoCall === 'object'
+      ) {
+        if (
+          data?.components?.videoCall?.chat &&
+          typeof data?.components?.videoCall?.chat === 'object'
+        ) {
+          if (
+            data?.components?.videoCall?.chat?.chatInput &&
+            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
+            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
+          ) {
+            components.ChatInputComponent =
+              data?.components?.videoCall?.chat?.chatInput;
+          }
+          if (
+            data?.components?.videoCall?.chat?.chatSendButton &&
+            typeof data?.components?.videoCall?.chat?.chatSendButton !==
+              'object' &&
+            isValidReactComponent(
+              data?.components?.videoCall?.chat?.chatSendButton,
+            )
+          ) {
+            components.ChatSendButtonComponent =
+              data?.components?.videoCall?.chat?.chatSendButton;
+          }
+        }
+      } else {
+        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
+          components.ChatInputComponent = props.chatInput;
+        }
+        if (
+          props?.chatSendButton &&
+          isValidReactComponent(props.chatSendButton)
+        ) {
+          components.ChatSendButtonComponent = props.chatSendButton;
+        }
+      }
+      return components;
+    },
+  );
 
   return (
     <View style={[style.inputView, {borderColor: primaryColor, height: 40}]}>

package/template/src/subComponents/LanguageSelector.tsx

@@ -13,14 +13,14 @@ import React, {useContext} from 'react';
 import {Picker, StyleSheet, Text} from 'react-native';
 import ColorContext from '../components/ColorContext';
 import {useLanguage} from '../language/useLanguage';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import {DEFAULT_I18_DATA} from '../language';
 
 const LanguageSelector = () => {
   const {primaryColor} = useContext(ColorContext);
   const {languageCode, setLanguageCode} = useLanguage();
-  const languageData = useFpe((data) => data?.i18n);
+  const languageData = useCustomization((data) => data?.i18n);
   //commented for v1 release
   //const languageText = useString('language')();
   const languageText = 'Language';

package/template/src/subComponents/LayoutIconDropdown.native.tsx

@@ -9,7 +9,7 @@ import {
   Dimensions,
 } from 'react-native';
 import {ImageIcon} from '../../agora-rn-uikit';
-import useCustomLayout from '../pages/video-call/CustomLayout';
+import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {useLayout} from '../utils/useLayout';
 
 const deviceHeight = Dimensions.get('screen').height;
@@ -24,15 +24,15 @@ interface LayoutIconDropdownProps {
 
 const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
   const {showDropdown, setShowDropdown} = props;
-  const layouts = useCustomLayout();
-  const {activeLayoutName, setActiveLayoutName} = useLayout();
+  const layouts = useLayoutsData();
+  const {currentLayout, setLayout} = useLayout();
   const selectedItemHighlighter = (isSelected: boolean) => {
     return <View style={isSelected ? style.highlighter : {}} />;
   };
   const renderDropdown = () => {
     const data = layouts.map((item, index) => {
       let onPress = () => {
-        setActiveLayoutName(item.name);
+        setLayout(item.name);
         setShowDropdown(false);
       };
       let content = [];
@@ -58,7 +58,7 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
           key={'dropdownLayoutIcon' + index}>
           <>
             <View style={style.highlighterContainer}>
-              {selectedItemHighlighter(item.name === activeLayoutName)}
+              {selectedItemHighlighter(item.name === currentLayout)}
             </View>
             <View style={{flex: 1}}>{BtnTemplateLocal}</View>
             <View style={style.layoutNameContainer}>

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -7,9 +7,9 @@ import {
   TouchableWithoutFeedback,
   Modal,
 } from 'react-native';
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {ImageIcon} from '../../agora-rn-uikit';
-import useCustomLayout from '../pages/video-call/CustomLayout';
+import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {useLayout} from '../utils/useLayout';
 import DimensionContext from '../components/dimension/DimensionContext';
 
@@ -33,10 +33,10 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
   const {getDimensionData} = useContext(DimensionContext);
   const {isDesktop, dim} = getDimensionData();
 
-  const layouts = useCustomLayout();
-  const {activeLayoutName, setActiveLayoutName} = useLayout();
+  const layouts = useLayoutsData();
+  const {currentLayout, setLayout} = useLayout();
   const renderSeparatorHorizontal = () => {
-    return isWeb && isDesktop ? (
+    return isWebInternal() && isDesktop ? (
       <View style={style.navItem}>
         <View style={style.navItemSeparatorHorizontal}></View>
       </View>
@@ -50,7 +50,7 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
   const renderDropdown = () => {
     const data = layouts.map((item, index) => {
       let onPress = () => {
-        setActiveLayoutName(item.name);
+        setLayout(item.name);
         setShowDropdown(false);
       };
       let content = [];
@@ -76,7 +76,7 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
           onPress={onPress}>
           <>
             <View style={style.highlighterContainer}>
-              {selectedItemHighlighter(item.name === activeLayoutName)}
+              {selectedItemHighlighter(item.name === currentLayout)}
             </View>
             <View style={{flex: 1}}>{BtnTemplateLocal}</View>
             <View style={style.layoutNameContainer}>

package/template/src/subComponents/LocalAudioMute.tsx

@@ -9,11 +9,10 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {
   BtnTemplate,
   ToggleState,
-  LocalContext,
   BtnTemplateInterface,
 } from '../../agora-rn-uikit';
 import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
@@ -23,7 +22,7 @@ import {
   useButtonTemplate,
 } from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
-
+import {useLocalUserInfo} from 'customization-api';
 /**
  * A component to mute / unmute the local audio
  */
@@ -37,7 +36,7 @@ export interface LocalAudioMuteProps {
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
-  const local = useContext(LocalContext);
+  const local = useLocalUserInfo();
   const localMute = useMuteToggleLocal();
   //commented for v1 release
   //const audioLabel = useString('toggleAudioButton')();

package/template/src/subComponents/LocalEndCall.tsx

@@ -3,13 +3,10 @@ import {
   ButtonTemplateName,
   useButtonTemplate,
 } from '../utils/useButtonTemplate';
-import {
-  BtnTemplate,
-  BtnTemplateInterface,
-  RtcContext,
-} from '../../agora-rn-uikit';
+import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {useString} from '../utils/useString';
+import {useRtc} from 'customization-api';
 
 export interface LocalEndcallProps {
   buttonTemplateName?: ButtonTemplateName;
@@ -20,7 +17,7 @@ export interface LocalEndcallProps {
 }
 
 const LocalEndcall = (props: LocalEndcallProps) => {
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useRtc();
   //commented for v1 release
   //const endCallLabel = useString('endCallButton')();
   const endCallLabel = 'Hang Up';

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -6,13 +6,12 @@ import {
 import {useString} from '../utils/useString';
 import {
   BtnTemplate,
-  RtcContext,
   PropsContext,
-  LocalContext,
   ToggleState,
   BtnTemplateInterface,
 } from '../../agora-rn-uikit';
 import Styles from '../components/styles';
+import {useLocalUserInfo, useRtc} from 'customization-api';
 
 export interface LocalSwitchCameraProps {
   buttonTemplateName?: ButtonTemplateName;
@@ -25,8 +24,8 @@ export interface LocalSwitchCameraProps {
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
   const {callbacks} = useContext(PropsContext);
-  const {RtcEngine} = useContext(RtcContext);
-  const local = useContext(LocalContext);
+  const {RtcEngine} = useRtc();
+  const local = useLocalUserInfo();
   //commented for v1 release
   //const switchCameraButtonText = useString('switchCameraButton')();
   const switchCameraButtonText = 'Switch';

package/template/src/subComponents/LocalVideoMute.tsx

@@ -9,11 +9,10 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {
   BtnTemplate,
   ToggleState,
-  LocalContext,
   BtnTemplateInterface,
 } from '../../agora-rn-uikit';
 import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
@@ -23,6 +22,7 @@ import {
   useButtonTemplate,
 } from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
+import {useLocalUserInfo} from 'customization-api';
 
 /**
  * A component to mute / unmute the local video
@@ -37,7 +37,7 @@ export interface LocalVideoMuteProps {
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
-  const local = useContext(LocalContext);
+  const local = useLocalUserInfo();
   const localMute = useMuteToggleLocal();
   //commented for v1 release
   //const videoLabel = useString('toggleVideoButton')();

package/template/src/subComponents/NetworkQualityPill.tsx

@@ -13,7 +13,7 @@ import {
 import {useString} from '../utils/useString';
 import {networkIconsObject} from '../components/NetworkQualityContext';
 import {NetworkQualities} from 'src/language/default-labels/videoCallScreenLabels';
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import NetworkQualityContext from '../components/NetworkQualityContext';
 import {RenderInterface, UidType} from '../../agora-rn-uikit';
 
@@ -27,17 +27,14 @@ import {RenderInterface, UidType} from '../../agora-rn-uikit';
  * hover to show network quality text [ ex. Excellent, Good, Bad etc ]
  *
  */
-export const NetworkQualityPill = ({
-  user,
-  primaryColor,
-  small,
-  rootStyle,
-}: {
+interface NetworkQualityPillProps {
   user: RenderInterface;
   primaryColor: any;
   small?: boolean;
   rootStyle?: StyleProp<ViewStyle>;
-}) => {
+}
+const NetworkQualityPill = (props: NetworkQualityPillProps) => {
+  const {user, primaryColor, small, rootStyle} = props;
   const [networkTextVisible, setNetworkTextVisible] = useState(false);
   //commented for v1 release
   //const getLabel = useString<NetworkQualities>('networkQualityLabel');
@@ -115,7 +112,7 @@ const PlatformSpecificWrapper = ({
   setNetworkTextVisible,
   children,
 }: any) => {
-  return !isWeb ? (
+  return !isWebInternal() ? (
     <Pressable
       style={{
         height: '100%',
@@ -189,3 +186,5 @@ const style = StyleSheet.create({
     justifyContent: 'center',
   },
 });
+
+export default NetworkQualityPill;

package/template/src/subComponents/OpenInNativeButton.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import ColorContext from '../components/ColorContext';
 
 /**
@@ -22,8 +22,7 @@ import ColorContext from '../components/ColorContext';
 const OpenInNativeButton = () => {
   const {primaryColor} = useContext(ColorContext);
   const openInNative = () => {};
-
-  return isWeb ? (
+  return isWebInternal() ? (
     <View style={{position: 'absolute', right: 0}}>
       <TouchableOpacity
         style={[style.btn, {borderColor: primaryColor}]}

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -11,13 +11,10 @@
 */
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {controlMessageEnum} from '../components/ChatContext';
 import {BtnTemplate, UidType} from '../../agora-rn-uikit';
-import useIsPSTN from '../utils/isPSTNUser';
+import useIsPSTN from '../utils/useIsPSTN';
 import useMutePSTN from '../utils/useMutePSTN';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 export interface RemoteAudioMuteProps {
   uid: UidType;
@@ -31,7 +28,8 @@ export interface RemoteAudioMuteProps {
  */
 const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
   const {isHost = false} = props;
-  const sendCtrlMsgToUid = useSendControlMessage();
+  const muteRemoteAudio = useRemoteMute();
+
   const isPSTN = useIsPSTN();
   const mutePSTN = useMutePSTN();
   return (
@@ -45,11 +43,7 @@ const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
             console.error('An error occurred while muting the PSTN user.');
           }
         } else {
-          sendCtrlMsgToUid(
-            CONTROL_MESSAGE_TYPE.controlMessageToUid,
-            controlMessageEnum.muteAudio,
-            props.uid,
-          );
+          muteRemoteAudio(MUTE_REMOTE_TYPE.audio, props.uid);
         }
       }}
       style={style.buttonIconMic}

package/template/src/subComponents/RemoteEndCall.tsx

@@ -11,27 +11,20 @@
 */
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {controlMessageEnum} from '../components/ChatContext';
 import {BtnTemplate, UidType} from '../../agora-rn-uikit';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import useRemoteEndCall from '../utils/useRemoteEndCall';
 
 export interface RemoteEndCallProps {
   uid: UidType;
   isHost: boolean;
 }
 const RemoteEndCall = (props: RemoteEndCallProps) => {
-  const sendCtrlMsgToUid = useSendControlMessage();
+  const endRemoteCall = useRemoteEndCall();
   return props.isHost && String(props.uid)[0] !== '1' ? (
     <BtnTemplate
       style={style.remoteButton}
       onPress={() => {
-        sendCtrlMsgToUid(
-          CONTROL_MESSAGE_TYPE.controlMessageToUid,
-          controlMessageEnum.kickUser,
-          props.uid,
-        );
+        endRemoteCall(props.uid);
       }}
       color="#FD0845"
       name={'remoteEndCall'} // earlier was endCall, added remoteEndCall

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -11,11 +11,8 @@
 */
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {controlMessageEnum} from '../components/ChatContext';
 import {BtnTemplate, UidType} from '../../agora-rn-uikit';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * Component to mute / unmute remote video.
@@ -29,17 +26,13 @@ export interface RemoteVideoMuteProps {
 }
 const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
   const {isHost = false} = props;
-  const sendCtrlMsgToUid = useSendControlMessage();
+  const muteRemoteVideo = useRemoteMute();
 
   return String(props.uid)[0] !== '1' ? (
     <BtnTemplate
       disabled={!isHost}
       onPress={() => {
-        sendCtrlMsgToUid(
-          CONTROL_MESSAGE_TYPE.controlMessageToUid,
-          controlMessageEnum.muteVideo,
-          props.uid,
-        );
+        muteRemoteVideo(MUTE_REMOTE_TYPE.video, props.uid);
       }}
       style={style.buttonIconCam}
       name={props.video ? 'videocam' : 'videocamOff'}

package/template/src/subComponents/SelectDevice.tsx

@@ -117,7 +117,7 @@ const SelectDevice = () => {
     <View>
       <View style={{marginTop: 15}}></View>
       <View>
-        <SelectVideoDevice />
+        {!$config.AUDIO_ROOM && <SelectVideoDevice />}
         <SelectAudioDevice />
       </View>
       <View style={{marginTop: 15}}></View>

package/template/src/subComponents/SelectOAuth.tsx

@@ -21,10 +21,11 @@ import slack from '../assets/slack.png';
 // @ts-ignore
 import microsoft from '../assets/microsoft.png';
 import Logo from './Logo';
-import {hasBrandLogo} from '../utils/common';
+import {useHasBrandLogo} from '../utils/common';
 import {useString} from '../utils/useString';
 
 const SelectOAuth = ({onSelectOAuth}) => {
+  const hasBrandLogo = useHasBrandLogo();
   // Linking.openURL(url);
   const {primaryColor} = useContext(ColorContext);
   //commented for v1 release
@@ -40,7 +41,7 @@ const SelectOAuth = ({onSelectOAuth}) => {
   const appleAuthButton = 'Apple';
   return (
     <View style={style.main}>
-      <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
+      <View style={style.nav}>{hasBrandLogo() && <Logo />}</View>
       <View style={style.content}>
         <View style={style.leftContent}>
           <Text style={style.heading}>{$config.APP_NAME}</Text>

package/template/src/subComponents/SidePanelButtons.ts

@@ -4,7 +4,7 @@ import {
   RemoteLiveStreamRequestApprove,
   RemoteLiveStreamRequestReject,
   RemoteLiveStreamApprovedRequestRecallProps,
-  RemoteLiveStreamControlInterface,
+  RemoteLiveStreamControlProps,
 } from './livestream';
 import RemoteAudioMute, {RemoteAudioMuteProps} from './RemoteAudioMute';
 import RemoteVideoMute, {RemoteVideoMuteProps} from './RemoteVideoMute';
@@ -16,17 +16,18 @@ import {
   MuteAllVideoButtonProps,
 } from '../components/HostControlView';
 
-export const SidePanelButtonsArray: [
+type SidePanelButtonsArrayProps = [
   (props: RemoteAudioMuteProps) => JSX.Element,
   (props: RemoteVideoMuteProps) => JSX.Element,
   (props: RemoteEndCallProps) => JSX.Element,
   (props: RemoteLiveStreamApprovedRequestRecallProps) => JSX.Element,
-  (props: RemoteLiveStreamControlInterface) => JSX.Element,
-  (props: RemoteLiveStreamControlInterface) => JSX.Element,
+  (props: RemoteLiveStreamControlProps) => JSX.Element,
+  (props: RemoteLiveStreamControlProps) => JSX.Element,
   (props: ChatSendButtonProps) => JSX.Element,
   (props: MuteAllAudioButtonProps) => JSX.Element,
   (props: MuteAllVideoButtonProps) => JSX.Element,
-] = [
+];
+export const SidePanelButtonsArray: SidePanelButtonsArrayProps = [
   RemoteAudioMute,
   RemoteVideoMute,
   RemoteEndCall,

package/template/src/subComponents/TextWithTooltip.tsx

@@ -11,13 +11,17 @@
 */
 import React from 'react';
 import {Text} from 'react-native';
-import isMobileOrTablet from '../utils/isMobileOrTablet';
 import TextWithToolTipNative from './TextWithTooltip.native';
+import isMobileOrTablet from '../utils/isMobileOrTablet';
 /**
  * Text with tooltip
  * web - used title attribute to show the tooltip
  */
-const TextWithToolTip = (props: {touchable?: boolean;value: string; style: object}) => {
+const TextWithToolTip = (props: {
+  touchable?: boolean;
+  value: string;
+  style: object;
+}) => {
   return (
     <div style={style.containerStyle} title={props.value}>
       <Text numberOfLines={1} textBreakStrategy="simple" style={[props.style]}>

package/template/src/subComponents/{toastConfig.tsx → ToastConfig.tsx}

@@ -15,7 +15,7 @@ import {Platform} from 'react-native';
 import Toast, {BaseToast} from '../../react-native-toast-message';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 
-const toastConfig = {
+const ToastConfig = {
   /* 
       overwrite 'success' type, 
       modifying the existing `BaseToast` component
@@ -42,4 +42,4 @@ const toastConfig = {
   ),
 };
 
-export default toastConfig;
+export default ToastConfig;

package/template/src/subComponents/chat/ChatParticipants.tsx

@@ -10,10 +10,10 @@ import {
 import {RFValue} from 'react-native-responsive-fontsize';
 import TextWithTooltip from '../TextWithTooltip';
 import {useString} from '../../utils/useString';
-import {isIOS, isWeb} from '../../utils/common';
+import {isIOS, isWebInternal} from '../../utils/common';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
-import useUserList from '../../utils/useUserList';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
+import {useRender} from 'customization-api';
 
 const ChatParticipants = (props: any) => {
   //commented for v1 release
@@ -21,7 +21,7 @@ const ChatParticipants = (props: any) => {
   const remoteUserDefaultLabel = 'User';
   const {selectUser} = props;
   const {height, width} = useWindowDimensions();
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   const localUid = useLocalUid();
   const {unreadIndividualMessageCount} = useChatNotification();
   const isChatUser = (userId: UidType, userInfo: any) => {
@@ -95,7 +95,7 @@ const style = StyleSheet.create({
   },
   participantText: {
     flex: 1,
-    fontWeight: isWeb ? '500' : '700',
+    fontWeight: isWebInternal() ? '500' : '700',
     flexDirection: 'row',
     color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
@@ -110,11 +110,12 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     right: 20,
     top: 0,
   },
 });
+
 export default ChatParticipants;