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

package/template/src/components/contexts/VideoMeetingDataContext.tsx

@@ -0,0 +1,85 @@
+import React, {createContext, useState, useEffect, useContext} from 'react';
+import {createHook} from 'customization-implementation';
+import {UidType, useLocalUid} from '../../../agora-rn-uikit';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import events, {EventPersistLevel} from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
+import ChatContext from '../ChatContext';
+
+export interface VideoMeetingDataInterface {
+  hostUids: UidType[];
+  attendeeUids: UidType[];
+}
+const VideoMeetingData = createContext<VideoMeetingDataInterface>({
+  hostUids: [],
+  attendeeUids: [],
+});
+
+interface VideoMeetingDataProviderProps {
+  children: React.ReactNode;
+}
+const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const localUid = useLocalUid();
+  const [hostUids, setHostUids] = useState<UidType[]>([]);
+  const [attendeeUids, setAttendeeUids] = useState<UidType[]>([]);
+
+  useEffect(() => {
+    //set local uid
+    isHost ? setHostUids([localUid]) : setAttendeeUids([localUid]);
+
+    //listen for remote user role
+    //if remote user is host then add it in the hostUids
+    events.on(EventNames.VIDEO_MEETING_HOST, (data) => {
+      const payload = JSON.parse(data?.payload);
+      const hostUid = payload?.uid;
+      if (hostUid && hostUids.indexOf(hostUid) === -1) {
+        setHostUids((prevState) => [...prevState, hostUid]);
+      }
+    });
+
+    //if remote user is not host then add it in the attendeeUids
+    events.on(EventNames.VIDEO_MEETING_ATTENDEE, (data) => {
+      const payload = JSON.parse(data?.payload);
+      const attendeeUid = payload?.uid;
+      if (attendeeUid && attendeeUids.indexOf(attendeeUid) === -1) {
+        setAttendeeUids((prevState) => [...prevState, attendeeUid]);
+      }
+    });
+
+    return () => {
+      events.off(EventNames.VIDEO_MEETING_HOST);
+      events.off(EventNames.VIDEO_MEETING_ATTENDEE);
+    };
+  }, []);
+
+  useEffect(() => {
+    //hasUserJoinedRTM ensure that RTM login successful and events can be sent.
+    if (hasUserJoinedRTM) {
+      //send user role event so newly joining user will get the previous user role details
+      events.send(
+        isHost
+          ? EventNames.VIDEO_MEETING_HOST
+          : EventNames.VIDEO_MEETING_ATTENDEE,
+        JSON.stringify({uid: localUid}),
+        EventPersistLevel.LEVEL2,
+      );
+    }
+  }, [isHost, hasUserJoinedRTM]);
+
+  return (
+    <VideoMeetingData.Provider
+      value={{
+        hostUids,
+        attendeeUids,
+      }}>
+      {props.children}
+    </VideoMeetingData.Provider>
+  );
+};
+const useVideoMeetingData = createHook(VideoMeetingData);
+
+export {useVideoMeetingData, VideoMeetingDataProvider};

package/template/src/components/contexts/WhiteboardContext.tsx

@@ -6,9 +6,9 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import {filterObject} from '../../utils/index';
-import {useRtcContext} from 'fpe-api';
+import {useRtc} from 'customization-api';
 
 export interface WhiteboardObjectInterface {
   [key: number]: {
@@ -21,7 +21,7 @@ export interface WhiteboardContextInterface {
   whiteboardData: WhiteboardObjectInterface;
   setWhiteboardData: Dispatch<SetStateAction<WhiteboardObjectInterface>>;
 }
-const WhiteboardContext = createContext<WhiteboardContextInterface>({
+const Whiteboard = createContext<WhiteboardContextInterface>({
   whiteboardData: {},
   setWhiteboardData: () => {},
 });
@@ -32,7 +32,7 @@ interface WhiteboardProviderProps {
 const WhiteboardProvider = (props: WhiteboardProviderProps) => {
   const [whiteboardData, setWhiteboardData] =
     useState<WhiteboardObjectInterface>({});
-  const {dispatch} = useRtcContext();
+  const {dispatch} = useRtc();
 
   useEffect(() => {
     const activeData = filterObject(
@@ -49,11 +49,11 @@ const WhiteboardProvider = (props: WhiteboardProviderProps) => {
   }, [whiteboardData]);
 
   return (
-    <WhiteboardContext.Provider value={{whiteboardData, setWhiteboardData}}>
+    <Whiteboard.Provider value={{whiteboardData, setWhiteboardData}}>
       {props.children}
-    </WhiteboardContext.Provider>
+    </Whiteboard.Provider>
   );
 };
-const useScreenContext = createHook(WhiteboardContext);
+const useWhiteBoard = createHook(Whiteboard);
 
-export {useScreenContext, WhiteboardProvider};
+export {useWhiteBoard, WhiteboardProvider};

package/template/src/components/livestream/LiveStreamContext.tsx

@@ -13,10 +13,10 @@ import {
 import {ClientRole, useLocalUid, UidType} from '../../../agora-rn-uikit';
 import {filterObject, isEmptyObject} from '../../utils';
 import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
-import useUserList from '../../utils/useUserList';
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
-import CustomEvents, {EventLevel} from '../../custom-events';
+import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
+import {useRender} from 'customization-api';
 
 const LiveStreamContext = createContext(null as unknown as liveStreamContext);
 
@@ -29,7 +29,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   const screenshareContextInstanceRef = useRef<any>();
   screenshareContextInstanceRef.current = screenshareContextInstance;
 
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   const renderListRef = useRef<any>();
   renderListRef.current = renderList;
 
@@ -54,7 +54,9 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   const {hasUserJoinedRTM} = useContext(ChatContext);
 
   const {setRtcProps, rtcProps, callActive} = props?.value;
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
 
   const [lastCheckedRequestTimestamp, setLastCheckedRequestTimestamp] =
     useState(0);
@@ -89,7 +91,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   };
 
   const addOrUpdateLiveStreamRequest = (
-    userUID: string,
+    userUID: UidType,
     payload: Partial<raiseHandItemInterface>,
   ) => {
     if (userUID && !isEmptyObject(payload)) {
@@ -121,11 +123,14 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
           role: ClientRole.Audience,
         });
         // Audience notfies all host when request is rejected
-        CustomEvents.send(EventNames.RAISED_ATTRIBUTE, {
-          action: LiveStreamControlMessageEnum.notifyHostsInChannel,
-          level: EventLevel.LEVEL2,
-          value: RaiseHandValue.FALSE,
-        });
+        events.send(
+          EventNames.RAISED_ATTRIBUTE,
+          JSON.stringify({
+            action: LiveStreamControlMessageEnum.notifyHostsInChannel,
+            value: RaiseHandValue.FALSE,
+          }),
+          EventPersistLevel.LEVEL2,
+        );
         break;
       case ClientRole.Broadcaster:
         // Update local state
@@ -135,11 +140,14 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
           role: ClientRole.Broadcaster,
         });
         // Audience notfies all host when request is approved
-        CustomEvents.send(EventNames.RAISED_ATTRIBUTE, {
-          action: LiveStreamControlMessageEnum.notifyHostsInChannel,
-          value: RaiseHandValue.TRUE,
-          level: EventLevel.LEVEL2,
-        });
+        events.send(
+          EventNames.RAISED_ATTRIBUTE,
+          JSON.stringify({
+            action: LiveStreamControlMessageEnum.notifyHostsInChannel,
+            value: RaiseHandValue.TRUE,
+          }),
+          EventPersistLevel.LEVEL2,
+        );
       default:
         break;
     }
@@ -181,15 +189,15 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   /** ******* SETTING UP ROLES BEGINS ******* */
   React.useEffect(() => {
-    CustomEvents.on(EventNames.ROLE_ATTRIBUTE, (data) => {
+    events.on(EventNames.ROLE_ATTRIBUTE, (data) => {
       setRaiseHandList((prevState) => {
         return {
           ...prevState,
           [data.sender]: {
             ...prevState[data.sender],
             role:
-              data.payload.value in ClientRole
-                ? parseInt(data.payload.value)
+              data.payload in ClientRole
+                ? parseInt(data.payload)
                 : ClientRole.Audience,
           },
         };
@@ -199,10 +207,13 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   React.useEffect(() => {
     if (!callActive || !hasUserJoinedRTM) return;
-    CustomEvents.send(EventNames.ROLE_ATTRIBUTE, {
-      level: EventLevel.LEVEL2,
-      value: rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
-    });
+    events.send(
+      EventNames.ROLE_ATTRIBUTE,
+      JSON.stringify(
+        rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+      ),
+      EventPersistLevel.LEVEL2,
+    );
     setRaiseHandList((prevState) => {
       return {
         ...prevState,
@@ -221,12 +232,16 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   React.useEffect(() => {
     /** ********************** HOST EVENTS SECTION BEGINS ********************** */
-    CustomEvents.on(EventNames.RAISED_ATTRIBUTE, (data) => {
+    events.on(EventNames.RAISED_ATTRIBUTE, (data) => {
       if (!isHost) return;
-      switch (data?.payload?.action) {
+      const payload = JSON.parse(data.payload);
+      const action = payload.action;
+      const value = payload.value;
+
+      switch (action) {
         // 1. Host can receive raise hand request with true or false value
         case LiveStreamControlMessageEnum.raiseHandRequest:
-          switch (data?.payload?.value) {
+          switch (value) {
             case RaiseHandValue.TRUE:
               // Step 1: Show notifications
               showToast(
@@ -261,7 +276,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
         // 2. All Hosts in channel gets notified when an attendee's request gets approved or rejected
         case LiveStreamControlMessageEnum.notifyHostsInChannel:
           if (!isHost) return;
-          switch (data.payload.value) {
+          switch (value) {
             case RaiseHandValue.TRUE:
               addOrUpdateLiveStreamRequest(data.sender, {
                 ts: data.ts,
@@ -288,48 +303,42 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
     /** ********************** AUDIENCE EVENTS SECTION BEGINS ********************** */
     // 1. Audience receives this when the request is accepted by host
-    CustomEvents.on(
-      LiveStreamControlMessageEnum.raiseHandRequestAccepted,
-      (data) => {
-        if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
-          return;
-        showToast(LSNotificationObject.RAISE_HAND_ACCEPTED);
-        // Promote user's privileges to host
-        changeClientRoleTo(ClientRole.Broadcaster);
-        // Audience updates its local attributes and notfies all host when request is approved
-        UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
-      },
-    );
+    events.on(LiveStreamControlMessageEnum.raiseHandRequestAccepted, (data) => {
+      if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
+        return;
+      showToast(LSNotificationObject.RAISE_HAND_ACCEPTED);
+      // Promote user's privileges to host
+      changeClientRoleTo(ClientRole.Broadcaster);
+      // Audience updates its local attributes and notfies all host when request is approved
+      UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
+    });
     /** 2. Audience receives this when the request is rejected by host
      * 2.a  Audience receives this when the request is rejected by host which is not yet approved
      * 2.b  Audience receives this when the request when is demoted by the host
      */
-    CustomEvents.on(
-      LiveStreamControlMessageEnum.raiseHandRequestRejected,
-      (data) => {
-        /** 2.a */
-        if (
-          raiseHandListRef.current[localUidRef.current].role ==
-          ClientRole.Audience
-        ) {
-          showToast(LSNotificationObject.RAISE_HAND_REJECTED);
-        } else if (
-          raiseHandListRef.current[localUidRef.current].role ==
-          ClientRole.Broadcaster
-        ) {
-          /** 2.b */
-          showToast(LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL);
-          screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
-
-          // Demote user's privileges to audience
-          changeClientRoleTo(ClientRole.Audience);
-        }
-        // Audience updates its local attributes and notfies all host when demoted/request rejected
-        UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
-      },
-    );
+    events.on(LiveStreamControlMessageEnum.raiseHandRequestRejected, (data) => {
+      /** 2.a */
+      if (
+        raiseHandListRef.current[localUidRef.current].role ==
+        ClientRole.Audience
+      ) {
+        showToast(LSNotificationObject.RAISE_HAND_REJECTED);
+      } else if (
+        raiseHandListRef.current[localUidRef.current].role ==
+        ClientRole.Broadcaster
+      ) {
+        /** 2.b */
+        showToast(LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL);
+        screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
+
+        // Demote user's privileges to audience
+        changeClientRoleTo(ClientRole.Audience);
+      }
+      // Audience updates its local attributes and notfies all host when demoted/request rejected
+      UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
+    });
     // 3. Audience when receives kickUser notifies all host when is kicked out
-    CustomEvents.on(controlMessageEnum.kickUser, (data) => {
+    events.on(controlMessageEnum.kickUser, (data) => {
       // Audience updates its local attributes and notfies all host when they(audience) are kicked out
       UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
     });
@@ -345,25 +354,27 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
    */
 
   const hostApprovesRequestOfUID = (uid: UidType) => {
-    addOrUpdateLiveStreamRequest(`${uid}`, {
+    addOrUpdateLiveStreamRequest(uid, {
       raised: RaiseHandValue.TRUE,
       ts: new Date().getTime(),
     });
-    CustomEvents.send(
+    events.send(
       LiveStreamControlMessageEnum.raiseHandRequestAccepted,
-      {},
+      '',
+      EventPersistLevel.LEVEL1,
       uid,
     );
   };
 
   const hostRejectsRequestOfUID = (uid: UidType) => {
-    addOrUpdateLiveStreamRequest(`${uid}`, {
+    addOrUpdateLiveStreamRequest(uid, {
       raised: RaiseHandValue.FALSE,
       ts: new Date().getTime(),
     });
-    CustomEvents.send(
+    events.send(
       LiveStreamControlMessageEnum.raiseHandRequestRejected,
-      {},
+      '',
+      EventPersistLevel.LEVEL1,
       uid,
     );
   };
@@ -382,11 +393,14 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE)
       return;
     showToast(LSNotificationObject.RAISE_HAND_REQUEST);
-    CustomEvents.send(EventNames.RAISED_ATTRIBUTE, {
-      action: LiveStreamControlMessageEnum.raiseHandRequest,
-      level: EventLevel.LEVEL2,
-      value: RaiseHandValue.TRUE,
-    });
+    events.send(
+      EventNames.RAISED_ATTRIBUTE,
+      JSON.stringify({
+        action: LiveStreamControlMessageEnum.raiseHandRequest,
+        value: RaiseHandValue.TRUE,
+      }),
+      EventPersistLevel.LEVEL1,
+    );
     // Update local state
     addOrUpdateLiveStreamRequest(localUidRef.current, {
       raised: RaiseHandValue.TRUE,

package/template/src/components/meeting-info/useMeetingInfo.tsx

@@ -10,38 +10,42 @@
 *********************************************
 */
 import React, {createContext} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import {UidType} from '../../../agora-rn-uikit';
 export interface MeetingInfoContextInterface {
   isJoinDataFetched?: boolean;
-  isHost: boolean;
-  meetingTitle: string;
-  meetingPassphrase: {
-    attendee: string;
-    host?: string;
+  data?: {
+    isHost: boolean;
+    meetingTitle: string;
+    roomId: {
+      attendee: string;
+      host?: string;
+    };
     pstn?: {
       number: string;
       pin: string;
     };
+    isSeparateHostLink: boolean;
+    channel?: string;
+    uid?: UidType;
+    token?: string;
+    rtmToken?: string;
+    encryptionSecret?: string;
+    screenShareUid?: string;
+    screenShareToken?: string;
   };
-  isSeparateHostLink: boolean;
-  channel?: string;
-  uid?: UidType;
-  token?: string;
-  rtm?: string;
-  secret?: string;
-  screenShareUid?: string;
-  screenShareToken?: string;
 }
 
 export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
   isJoinDataFetched: false,
-  isHost: false,
-  meetingTitle: '',
-  meetingPassphrase: {
-    attendee: '',
+  data: {
+    isHost: false,
+    meetingTitle: '',
+    roomId: {
+      attendee: '',
+    },
+    isSeparateHostLink: true,
   },
-  isSeparateHostLink: true,
 };
 
 const MeetingInfoContext = createContext(MeetingInfoDefaultValue);

package/template/src/components/meeting-info/useSetMeetingInfo.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {createContext, SetStateAction} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import {MeetingInfoContextInterface} from './useMeetingInfo';
 
 export interface SetMeetingInfoContextInterface {

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

@@ -4,11 +4,11 @@ import RemoteEndCall from '../../subComponents/RemoteEndCall';
 import ParticipantName from '../../components/participants/ParticipantName';
 import chatContext from '../ChatContext';
 import {useString} from '../../utils/useString';
-import {useRenderContext} from 'fpe-api';
+import {useRender} from 'customization-api';
 
 const AllAudienceParticipants = (props: any) => {
   const {p_style, isHost, uids} = props;
-  const {renderList} = useRenderContext();
+  const {renderList} = useRender();
   const {localUid} = useContext(chatContext);
   //commented for v1 release
   //const participantListPlaceholder = useString('participantListPlaceholder')();

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

@@ -3,8 +3,8 @@ import MeParticipant from './MeParticipant';
 import ScreenshareParticipants from './ScreenshareParticipants';
 import RemoteParticipants from './RemoteParticipants';
 import {useString} from '../../utils/useString';
-import useUserList from '../../utils/useUserList';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
+import {useRender} from 'customization-api';
 
 export default function AllHostParticipants(props: any) {
   const {p_style, isHost} = props;
@@ -12,7 +12,7 @@ export default function AllHostParticipants(props: any) {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
-  const {renderList, renderPosition} = useUserList();
+  const {renderList, activeUids} = useRender();
   const getParticipantName = (uid: UidType) => {
     return renderList[uid]?.name || remoteUserDefaultLabel;
   };
@@ -20,7 +20,7 @@ export default function AllHostParticipants(props: any) {
   return (
     <>
       {/* User should see his name first */}
-      {renderPosition.filter((uid) => uid === localUid).length > 0 && (
+      {activeUids.filter((uid) => uid === localUid).length > 0 && (
         <MeParticipant
           name={getParticipantName(localUid)}
           p_style={p_style}
@@ -28,7 +28,7 @@ export default function AllHostParticipants(props: any) {
         />
       )}
       {/* Others Users in the call */}
-      {renderPosition
+      {activeUids
         .filter((uid) => uid !== localUid)
         .map((uid) =>
           renderList[uid]?.type === 'screenshare' ? (

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

@@ -26,9 +26,11 @@ const MeParticipant = (props: any) => {
         <View style={[p_style.actionBtnIcon, {marginRight: 10}]}>
           <LocalAudioMute buttonTemplateName={ButtonTemplateName.topBar} />
         </View>
-        <View style={p_style.actionBtnIcon}>
-          <LocalVideoMute buttonTemplateName={ButtonTemplateName.topBar} />
-        </View>
+        {!$config.AUDIO_ROOM && (
+          <View style={p_style.actionBtnIcon}>
+            <LocalVideoMute buttonTemplateName={ButtonTemplateName.topBar} />
+          </View>
+        )}
       </View>
     </View>
   );

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

@@ -13,11 +13,11 @@ import React from 'react';
 import {View, StyleSheet, useWindowDimensions, Platform} from 'react-native';
 import TextWithToolTip from '../../subComponents/TextWithTooltip';
 import {RFValue} from 'react-native-responsive-fontsize';
-import {isWeb} from '../../utils/common';
+import {isWebInternal} from '../../utils/common';
 
 const ParticipantName = ({value}: {value: string}) => {
   const {height, width} = useWindowDimensions();
-  const fontSize = isWeb ? 14 : 16;
+  const fontSize = isWebInternal() ? 14 : 16;
   return (
     <View style={{flex: 1}}>
       <TextWithToolTip

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

@@ -49,13 +49,15 @@ const RemoteParticipants = (props: remoteParticipantsInterface) => {
               isHost={isHost}
             />
           </View>
-          <View style={[p_styles.actionBtnIcon]}>
-            <RemoteVideoMute
-              uid={user.uid}
-              video={user.video}
-              isHost={isHost}
-            />
-          </View>
+          {!$config.AUDIO_ROOM && (
+            <View style={[p_styles.actionBtnIcon]}>
+              <RemoteVideoMute
+                uid={user.uid}
+                video={user.video}
+                isHost={isHost}
+              />
+            </View>
+          )}
         </View>
       ) : (
         <></>

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

@@ -11,7 +11,7 @@
 */
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 import LocalAudioMute, {
   LocalAudioMuteProps,
@@ -24,7 +24,7 @@ import LocalSwitchCamera, {
 } from '../../subComponents/LocalSwitchCamera';
 
 const PreCallLocalMute: React.FC = () => {
-  const {VideoMute, AudioMute} = useFpe((data) => {
+  const {VideoMute, AudioMute} = useCustomization((data) => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
       AudioMute: React.ComponentType<LocalVideoMuteProps>;
@@ -68,14 +68,18 @@ const PreCallLocalMute: React.FC = () => {
       <View style={style.width50}>
         <AudioMute />
       </View>
-      <View style={style.width50} />
-      <View style={style.width50}>
-        <VideoMute />
-      </View>
-      <View style={style.width50} />
-      <View style={style.width50}>
-        <LocalSwitchCamera />
-      </View>
+      {!$config.AUDIO_ROOM && (
+        <>
+          <View style={style.width50} />
+          <View style={style.width50}>
+            <VideoMute />
+          </View>
+          <View style={style.width50} />
+          <View style={style.width50}>
+            <LocalSwitchCamera />
+          </View>
+        </>
+      )}
     </>
   );
 };

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

@@ -11,7 +11,7 @@
 */
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 import LocalVideoMute, {
   LocalVideoMuteProps,
@@ -21,7 +21,7 @@ import LocalAudioMute, {
 } from '../../subComponents/LocalAudioMute';
 
 const PreCallLocalMute: React.FC = () => {
-  const {VideoMute, AudioMute} = useFpe((data) => {
+  const {VideoMute, AudioMute} = useCustomization((data) => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
       AudioMute: React.ComponentType<LocalVideoMuteProps>;
@@ -65,9 +65,11 @@ const PreCallLocalMute: React.FC = () => {
       <View style={{alignSelf: 'center'}}>
         <AudioMute />
       </View>
-      <View style={{alignSelf: 'center'}}>
-        <VideoMute />
-      </View>
+      {!$config.AUDIO_ROOM && (
+        <View style={{alignSelf: 'center'}}>
+          <VideoMute />
+        </View>
+      )}
     </View>
   );
 };