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

package/template/src/utils/common.tsx

@@ -10,13 +10,15 @@
 *********************************************
 */
 import React from 'react';
-import {Platform} from 'react-native';
+import {Platform as ReactNativePlatform} from 'react-native';
+import Platform from '../subComponents/Platform';
+
 import * as ReactIs from 'react-is';
 
 const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
   Component && ReactIs.isValidElementType(Component) ? true : false;
 
-const hasBrandLogo: boolean = !!$config.LOGO;
+const useHasBrandLogo = () => () => !!$config.LOGO;
 
 const shouldAuthenticate: boolean =
   $config.ENABLE_APPLE_OAUTH ||
@@ -24,17 +26,31 @@ const shouldAuthenticate: boolean =
   $config.ENABLE_MICROSOFT_OAUTH ||
   $config.ENABLE_SLACK_OAUTH;
 
-const isWeb = Platform.OS === 'web';
-const isAndroid = Platform.OS === 'android';
-const isIOS = Platform.OS === 'ios';
+//for our internal usage don't check Platform - electron and web will same kind ui checks. thats why we have isWeb for external usage
+const isWebInternal = () => ReactNativePlatform.OS === 'web';
+
+const isWeb = () => Platform === 'web' && ReactNativePlatform.OS === 'web';
+
+const isAndroid = () =>
+  //@ts-ignore
+  Platform === 'native' && ReactNativePlatform.OS === 'android';
+
+//@ts-ignore
+const isIOS = () => Platform === 'native' && ReactNativePlatform.OS === 'ios';
+
+//@ts-ignore
+const isDestop = () => Platform === 'electron';
+
 const isArray = (data: any[]) =>
   data && Array.isArray(data) && data.length ? true : false ? true : false;
 export {
-  hasBrandLogo,
-  shouldAuthenticate,
-  isWeb,
-  isIOS,
+  useHasBrandLogo,
   isAndroid,
+  isIOS,
+  isWebInternal,
+  isWeb,
+  isDestop,
+  shouldAuthenticate,
   isArray,
   isValidReactComponent,
 };

package/template/src/utils/getUniqueID.ts

@@ -0,0 +1,5 @@
+import {nanoid} from 'nanoid/non-secure';
+
+export default function getUniqueID() {
+  return nanoid();
+}

package/template/src/utils/isMobileOrTablet.native.ts

@@ -1,5 +1,5 @@
 const isMobileOrTablet = () => {
   return true;
-}
+};
 
-export default isMobileOrTablet;
+export default isMobileOrTablet;

package/template/src/utils/isMobileOrTablet.ts

@@ -1,10 +1,23 @@
-declare global{
-    interface Window {opera?: any}
+declare global {
+  interface Window {
+    opera?: any;
+  }
 }
+
 const isMobileOrTablet = () => {
-    let check = false;
-    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator?.userAgent||navigator?.vendor||window?.opera);
-    return check;
-}
-  
-export default isMobileOrTablet;
+  let check = false;
+  (function (a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+        a,
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        a.substr(0, 4),
+      )
+    )
+      check = true;
+  })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  return check;
+};
+
+export default isMobileOrTablet;

package/template/src/utils/useButtonTemplate.tsx

@@ -11,7 +11,7 @@
 */
 
 import React from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export enum ButtonTemplateName {
   topBar,

package/template/src/utils/useCreateMeeting.ts

@@ -1,6 +1,7 @@
 import {gql, useMutation} from '@apollo/client';
 import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import SDKEvents from '../utils/SdkEvents';
 
 const CREATE_CHANNEL = gql`
   mutation CreateChannel(
@@ -45,28 +46,38 @@ export default function useCreateMeeting() {
       throw error;
     }
     if (res && res?.data && res?.data?.createChannel) {
-      let meetingInfoPassPhrase: MeetingInfoContextInterface['meetingPassphrase'] =
-        {
+      let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+        roomId: {
           attendee: '',
-        };
+        },
+      };
       if (res?.data?.createChannel?.passphrase?.view) {
-        meetingInfoPassPhrase.attendee = res.data.createChannel.passphrase.view;
+        meetingInfo.roomId.attendee = res.data.createChannel.passphrase.view;
       }
       if (res?.data?.createChannel?.passphrase?.host) {
-        meetingInfoPassPhrase.host = res.data.createChannel.passphrase.host;
+        meetingInfo.roomId.host = res.data.createChannel.passphrase.host;
       }
       if (enablePSTN === true && res?.data?.createChannel?.pstn) {
-        meetingInfoPassPhrase.pstn = {
+        meetingInfo.pstn = {
           number: res.data.createChannel.pstn.number,
           pin: res.data.createChannel.pstn.dtmf,
         };
       }
       setMeetingInfo({
-        isHost: true,
-        isSeparateHostLink: isSeparateHostLink ? true : false,
-        meetingTitle: roomTitle,
-        meetingPassphrase: meetingInfoPassPhrase,
+        data: {
+          isHost: true,
+          isSeparateHostLink: isSeparateHostLink ? true : false,
+          meetingTitle: roomTitle,
+          roomId: meetingInfo?.roomId,
+          pstn: meetingInfo?.pstn,
+        },
       });
+      SDKEvents.emit(
+        'create',
+        meetingInfo.roomId.host,
+        meetingInfo.roomId.attendee,
+        meetingInfo?.pstn,
+      );
     } else {
       throw new Error(`An error occurred in parsing the channel data.`);
     }

package/template/src/utils/useGetMeetingPhrase.ts

@@ -37,18 +37,17 @@ export default function useGetMeetingPhrase() {
       try {
         if (response && response.data) {
           let data = response.data;
-          let meetingPassphrase: MeetingInfoContextInterface['meetingPassphrase'] =
-            {
-              attendee: '',
-            };
+          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+            roomId: {attendee: ''},
+          };
           if (data?.share?.passphrase?.view) {
-            meetingPassphrase.attendee = data.share.passphrase.view;
+            meetingInfo.roomId.attendee = data.share.passphrase.view;
           }
           if (data?.share?.passphrase?.host) {
-            meetingPassphrase.host = data.share.passphrase.host;
+            meetingInfo.roomId.host = data.share.passphrase.host;
           }
           if (data?.share?.pstn) {
-            meetingPassphrase.pstn = {
+            meetingInfo.pstn = {
               number: data.share.pstn.number,
               pin: data.share.pstn.dtmf,
             };
@@ -56,7 +55,11 @@ export default function useGetMeetingPhrase() {
           setMeetingInfo((prevState) => {
             return {
               ...prevState,
-              meetingPassphrase,
+              data: {
+                ...prevState.data,
+                roomId: meetingInfo.roomId,
+                pstn: meetingInfo?.pstn,
+              },
             };
           });
         }

package/template/src/utils/{IsAttendeeUser.ts → useIsAttendee.ts}

@@ -23,7 +23,9 @@ function useIsAttendee() {
     };
     return isAttendee;
   } else {
-    const {isHost} = useMeetingInfo();
+    const {
+      data: {isHost},
+    } = useMeetingInfo();
     const isAttendee = (uid: UidType) => {
       return !isHost ? true : false;
     };

package/template/src/utils/{isAudioEnabled.ts → useIsAudioEnabled.ts}

@@ -9,21 +9,21 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import {useRender} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
-import useUserList from './useUserList';
 
 function useIsAudioEnabled() {
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   /**
    *
    * @param uid UidType
    * @returns boolean
    */
-  const audioEnabled = (uid: UidType): boolean =>
+  const isAudioEnabled = (uid: UidType): boolean =>
     renderList[uid]?.audio === ToggleState.enabled;
 
-  return audioEnabled;
+  return isAudioEnabled;
 }
 
 export default useIsAudioEnabled;

package/template/src/utils/{isHostUser.ts → useIsHost.ts}

@@ -9,25 +9,22 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
 import {UidType} from '../../agora-rn-uikit';
+import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
+import {useVideoMeetingData} from '../components/contexts/VideoMeetingDataContext';
 
 function useIsHost() {
-  if ($config.EVENT_MODE) {
-    const {hostUids} = useLiveStreamDataContext();
-    const isHost = (uid: UidType) => {
-      return hostUids.filter((hostId) => hostId === uid).length ? true : false;
-    };
-    return isHost;
-  } else {
-    const {isHost} = useMeetingInfo();
-    const isHostFun = (uid: UidType) => {
-      return isHost ? true : false;
-    };
-    return isHostFun;
-  }
+  const {hostUids: liveStreamHostUids} = useLiveStreamDataContext();
+  const {hostUids: videoMeetingHostUids} = useVideoMeetingData();
+  const isHost = (uid: UidType) => {
+    const hostUidsData = $config.EVENT_MODE
+      ? liveStreamHostUids
+      : videoMeetingHostUids;
+    return hostUidsData.filter((hostId) => hostId === uid).length
+      ? true
+      : false;
+  };
+  return isHost;
 }
 
 export default useIsHost;

package/template/src/utils/{isPSTNUser.ts → useIsPSTN.ts}

@@ -9,14 +9,14 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import {useRender} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
-import useUserList from './useUserList';
 /**
  * This hook will return the function to check whether the current user is a PSTN user or not
  * @returns function
  */
 function useIsPSTN() {
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   /**
    *
    * @param uid number

package/template/src/utils/{isVideoEnabled.ts → useIsVideoEnabled.ts}

@@ -9,21 +9,20 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {UidType} from '../../agora-rn-uikit';
-import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
-import useUserList from './useUserList';
+import {useRender} from 'customization-api';
+import {UidType, ToggleState} from '../../agora-rn-uikit';
 
 function useIsVideoEnabled() {
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
 
   /**
    *
    * @param uid UidType
    * @returns boolean
    */
-  const videoEnabled = (uid: UidType): boolean =>
+  const isVideoEnabled = (uid: UidType): boolean =>
     renderList[uid]?.video === ToggleState.enabled;
 
-  return videoEnabled;
+  return isVideoEnabled;
 }
 export default useIsVideoEnabled;

package/template/src/utils/useJoinMeeting.ts

@@ -77,9 +77,7 @@ export default function useJoinMeeting() {
       } else {
         if (response && response.data) {
           let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface> = {
-            isJoinDataFetched: true,
-          };
+          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {};
           if (data?.joinChannel?.channel) {
             meetingInfo.channel = data.joinChannel.channel;
           }
@@ -90,10 +88,10 @@ export default function useJoinMeeting() {
             meetingInfo.token = data.joinChannel.mainUser.rtc;
           }
           if (data?.joinChannel?.mainUser?.rtm) {
-            meetingInfo.rtm = data.joinChannel.mainUser.rtm;
+            meetingInfo.rtmToken = data.joinChannel.mainUser.rtm;
           }
           if (data?.joinChannel?.secret) {
-            meetingInfo.secret = data.joinChannel.secret;
+            meetingInfo.encryptionSecret = data.joinChannel.secret;
           }
           if (data?.joinChannel?.screenShare?.uid) {
             meetingInfo.screenShareUid = data.joinChannel.screenShare.uid;
@@ -114,7 +112,11 @@ export default function useJoinMeeting() {
           setMeetingInfo((prevState) => {
             return {
               ...prevState,
-              ...meetingInfo,
+              isJoinDataFetched: true,
+              data: {
+                ...prevState.data,
+                ...meetingInfo,
+              },
             };
           });
         } else {

package/template/src/utils/useLayout.tsx

@@ -11,16 +11,16 @@
 */
 
 import React, {SetStateAction} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export interface LayoutContextInterface {
-  activeLayoutName: string;
-  setActiveLayoutName: React.Dispatch<SetStateAction<string>>;
+  currentLayout: string;
+  setLayout: React.Dispatch<SetStateAction<string>>;
 }
 
 const LayoutContext = React.createContext<LayoutContextInterface>({
-  activeLayoutName: '',
-  setActiveLayoutName: () => {},
+  currentLayout: '',
+  setLayout: () => {},
 });
 
 interface LayoutProviderProps {

package/template/src/utils/useMutePSTN.ts

@@ -1,7 +1,7 @@
 import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../agora-rn-uikit';
 import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import useIsPSTN from './isPSTNUser';
+import useIsPSTN from './useIsPSTN';
 const MUTE_PSTN = gql`
   mutation mutePSTN($uid: Int!, $passphrase: String!, $mute: Boolean!) {
     mutePSTN(uid: $uid, passphrase: $passphrase, mute: $mute) {
@@ -13,7 +13,9 @@ const MUTE_PSTN = gql`
 
 const useMutePSTN = () => {
   const [mutePSTN, {data, loading, error}] = useMutation(MUTE_PSTN);
-  const {isHost, meetingPassphrase} = useMeetingInfo();
+  const {
+    data: {isHost, roomId},
+  } = useMeetingInfo();
   const isPSTN = useIsPSTN();
   return async (uid: UidType) => {
     if (isHost) {
@@ -21,7 +23,7 @@ const useMutePSTN = () => {
         await mutePSTN({
           variables: {
             uid: uid,
-            passphrase: meetingPassphrase?.host,
+            passphrase: roomId?.host,
             //todo: hari need to test mute flag for PSTN
             mute: 1,
           },

package/template/src/utils/useMuteToggleLocal.ts

@@ -9,8 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useContext} from 'react';
-import {RtcContext, LocalContext} from '../../agora-rn-uikit';
+import {useLocalUserInfo, useRtc} from 'customization-api';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 
 export enum MUTE_LOCAL_TYPE {
@@ -18,8 +17,8 @@ export enum MUTE_LOCAL_TYPE {
   video,
 }
 function useMuteToggleLocal() {
-  const {RtcEngine, dispatch} = useContext(RtcContext);
-  const local = useContext(LocalContext);
+  const {RtcEngine, dispatch} = useRtc();
+  const local = useLocalUserInfo();
 
   return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {

package/template/src/utils/useRemoteEndCall.ts

@@ -1,21 +1,22 @@
 import {controlMessageEnum} from '../components/ChatContext';
-import {UidType} from '../../agora-rn-uikit';
 import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import useIsPSTN from './isPSTNUser';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import useIsPSTN from './useIsPSTN';
+import {UidType} from '../../agora-rn-uikit';
+import events, {EventPersistLevel} from '../rtm-events-api';
 
 const useRemoteEndCall = () => {
-  const sendCtrlMsgToUid = useSendControlMessage();
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   const isPSTN = useIsPSTN();
+
   return (uid: UidType) => {
-    if (isHost) {
+    if (isHost && uid) {
       if (!isPSTN(uid)) {
-        sendCtrlMsgToUid(
-          CONTROL_MESSAGE_TYPE.controlMessageToUid,
+        events.send(
           controlMessageEnum.kickUser,
+          '',
+          EventPersistLevel.LEVEL1,
           uid,
         );
       }

package/template/src/utils/useRemoteMute.ts

@@ -10,47 +10,69 @@
 *********************************************
 */
 import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import {UidType} from '../../agora-rn-uikit';
 import {controlMessageEnum} from '../components/ChatContext';
-import useIsPSTN from './isPSTNUser';
+import useIsPSTN from './useIsPSTN';
 import useMutePSTN from './useMutePSTN';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import {UidType} from '../../agora-rn-uikit';
+import events, {EventPersistLevel} from '../rtm-events-api';
 
 export enum MUTE_REMOTE_TYPE {
   audio,
   video,
 }
 function useRemoteMute() {
-  const sendCtrlMsgToUid = useSendControlMessage();
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   const isPSTN = useIsPSTN();
   const mutePSTN = useMutePSTN();
-  return async (type: MUTE_REMOTE_TYPE, uid: UidType) => {
+
+  return async (type: MUTE_REMOTE_TYPE, uid?: UidType) => {
     if (isHost) {
       switch (type) {
         case MUTE_REMOTE_TYPE.audio:
-          if (isPSTN(uid)) {
-            try {
-              mutePSTN(uid);
-            } catch (error) {
-              console.error('An error occurred while muting the PSTN user.');
+          // To individual
+          if (uid) {
+            if (isPSTN(uid)) {
+              try {
+                mutePSTN(uid);
+              } catch (error) {
+                console.error('An error occurred while muting the PSTN user.');
+              }
+            } else {
+              events.send(
+                controlMessageEnum.muteAudio,
+                '',
+                EventPersistLevel.LEVEL1,
+                uid,
+              );
             }
           } else {
-            sendCtrlMsgToUid(
-              CONTROL_MESSAGE_TYPE.controlMessageToUid,
+            // To everyone
+            events.send(
               controlMessageEnum.muteAudio,
-              uid,
+              '',
+              EventPersistLevel.LEVEL1,
             );
           }
           break;
         case MUTE_REMOTE_TYPE.video:
-          if (!isPSTN(uid)) {
-            sendCtrlMsgToUid(
-              CONTROL_MESSAGE_TYPE.controlMessageToUid,
+          if (uid) {
+            // To individual
+            if (!isPSTN(uid)) {
+              events.send(
+                controlMessageEnum.muteVideo,
+                '',
+                EventPersistLevel.LEVEL1,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
               controlMessageEnum.muteVideo,
-              uid,
+              '',
+              EventPersistLevel.LEVEL1,
             );
           }
           break;

package/template/src/utils/useSidePanel.tsx

@@ -12,7 +12,7 @@
 
 import React, {SetStateAction} from 'react';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export interface SidePanelContextInterface {
   sidePanel: SidePanelType;

package/template/src/utils/useString.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {useLanguage} from '../language/useLanguage';
 import {DEFAULT_I18_DATA} from '../language';
 import {TextDataInterface} from '../language/default-labels/index';
@@ -17,7 +17,7 @@ import {TextDataInterface} from '../language/default-labels/index';
 export function usei18nData(
   selectedLanguageCode: string = DEFAULT_I18_DATA.locale,
 ) {
-  const languageData = useFpe((data) => data?.i18n);
+  const languageData = useCustomization((data) => data?.i18n);
   if (
     !selectedLanguageCode ||
     !languageData ||

package/template/src/utils/useUserName.ts

@@ -0,0 +1,11 @@
+import useSetName from './useSetName';
+import useGetName from './useGetName';
+
+export default function useUserName(): [
+  string,
+  React.Dispatch<React.SetStateAction<string>>,
+] {
+  const setName = useSetName();
+  const name = useGetName();
+  return [name, setName];
+}