agora-appbuilder-core 4.0.0-api.7 → 4.0.0-api.9

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -36,10 +36,14 @@ import NavbarMobile from '../../components/NavbarMobile';
 import {useVB} from '../../components/virtual-background/useVB';
 import VBPanel from '../../components/virtual-background/VBPanel';
 import {WhiteboardListener} from '../../components/Controls';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import WhiteboardView from '../../components/whiteboard/WhiteboardView';
 
 const VideoCallMobileView = props => {
   const {native = true} = props;
+  const {customContent} = useContent();
   const {isScreenShareOnFullView, screenShareData} = useScreenContext();
+  const {getWhiteboardUid, isWhiteboardOnFullScreen} = useWhiteboard();
 
   const {RtcEngineUnsafe} = useContext(RtcContext);
   const {dispatch} = useContext(DispatchContext);
@@ -118,17 +122,37 @@ const VideoCallMobileView = props => {
     return <VBPanel />;
   }
 
+  if (isWhiteboardOnFullScreen) {
+    return (
+      <>
+        {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+        <VideoRenderer
+          user={{
+            uid: customContent[getWhiteboardUid()]?.uid,
+            type: 'whiteboard',
+            video: 0,
+            audio: 0,
+            parentUid: undefined,
+            name: 'Whiteboard',
+            muted: undefined,
+          }}
+          CustomChild={WhiteboardView}
+        />
+      </>
+    );
+  }
+
   return isScreenShareOnFullView &&
     maxScreenShareUid &&
     defaultContent[maxScreenShareUid] &&
     defaultContent[maxScreenShareUid]?.video ? (
     <>
-      {!native ? <WhiteboardListener /> : <></>}
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
       <VideoRenderer user={defaultContent[maxScreenShareUid]} />
     </>
   ) : (
     <>
-      {!native ? <WhiteboardListener /> : <></>}
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
       <VideoCallView />
     </>
   );

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -35,12 +35,12 @@ import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
 import CaptionContainer from '../../subComponents/caption/CaptionContainer';
 import Transcript from '../../subComponents/caption/Transcript';
-
 import Spacer from '../../atoms/Spacer';
 import Leftbar, {LeftbarProps} from '../../components/Leftbar';
 import Rightbar, {RightbarProps} from '../../components/Rightbar';
 import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
 import VBPanel from '../../components/virtual-background/VBPanel';
+import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
 
 const VideoCallScreen = () => {
   useFindActiveSpeaker();
@@ -231,6 +231,8 @@ const VideoCallScreen = () => {
   const isDesktop = useIsDesktop();
   const isSmall = useIsSmall();
 
+  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
+
   return VideocallComponent ? (
     <VideocallComponent />
   ) : // ) : !isDesktop ? (
@@ -255,16 +257,23 @@ const VideoCallScreen = () => {
             )}
           </ToolbarProvider>
           <View style={style.full}>
-            <ToolbarProvider value={{position: ToolbarPosition.top}}>
-              {TopbarProps?.length ? (
-                <TopbarComponent
-                  customItems={TopbarProps}
-                  includeDefaultItems={false}
-                />
-              ) : (
-                <TopbarComponent />
-              )}
-            </ToolbarProvider>
+            <View
+              style={
+                isRecordingBot &&
+                !recordingBotUIConfig.topBar &&
+                style.zeroHeight
+              }>
+              <ToolbarProvider value={{position: ToolbarPosition.top}}>
+                {TopbarProps?.length ? (
+                  <TopbarComponent
+                    customItems={TopbarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <TopbarComponent />
+                )}
+              </ToolbarProvider>
+            </View>
             <View
               style={[
                 style.videoView,
@@ -316,7 +325,14 @@ const VideoCallScreen = () => {
                   <>
                     <CaptionContainer />
                     <Spacer size={10} />
-                    <BottombarComponent />
+                    <View
+                      style={
+                        isRecordingBot &&
+                        !recordingBotUIConfig.bottomBar &&
+                        style.zeroHeight
+                      }>
+                      <BottombarComponent />
+                    </View>
                   </>
                 )}
               </ToolbarProvider>
@@ -362,4 +378,8 @@ const style = StyleSheet.create({
     flex: 12,
     flexDirection: 'row',
   },
+  zeroHeight: {
+    height: 0,
+    visibility: 'hidden',
+  },
 });

package/template/src/pages/video-call/VideoCallScreenWrapper.tsx

@@ -0,0 +1,41 @@
+import React, {useContext, useEffect} from 'react';
+import {PropsContext} from '../../../agora-rn-uikit';
+import VideoCallScreen from '../video-call/VideoCallScreen';
+import {isWebInternal} from '../../utils/common';
+import {useLocation} from '../../components/Router';
+import {getParamFromURL} from '../../utils/common';
+import {useUserPreference} from '../../components/useUserPreference';
+import WhiteboardConfigure from '../../components/whiteboard/WhiteboardConfigure';
+
+const VideoCallScreenWithRecordingBot: React.FC = () => {
+  const location = useLocation();
+  const {setDisplayName} = useUserPreference();
+
+  const recordingBotName = getParamFromURL(location?.search, 'user_name');
+
+  useEffect(() => {
+    setDisplayName(recordingBotName);
+  }, []);
+  return <VideoCallScreen />;
+};
+
+const VideoCallScreenWrapper: React.FC = () => {
+  const {rtcProps} = useContext(PropsContext);
+
+  if ($config.ENABLE_WHITEBOARD) {
+    return (
+      <WhiteboardConfigure>
+        {rtcProps?.recordingBot ? (
+          <VideoCallScreenWithRecordingBot />
+        ) : (
+          <VideoCallScreen />
+        )}
+      </WhiteboardConfigure>
+    );
+  } else if (rtcProps?.recordingBot) {
+    return <VideoCallScreenWithRecordingBot />;
+  }
+  return <VideoCallScreen />;
+};
+
+export default VideoCallScreenWrapper;

package/template/src/pages/video-call/VideoComponent.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import useLayoutsData from './useLayoutsData';
 import {isArray, useIsDesktop, isValidReactComponent} from '../../utils/common';
-import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
 import {useLayout} from '../../utils/useLayout';
 import {useContent} from 'customization-api';
 import {getGridLayoutName} from './DefaultLayouts';
@@ -53,7 +53,10 @@ const VideoComponent = () => {
   }, [currentLayout]);
 
   const showInviteTile = () => {
-    if ($config.EVENT_MODE && rtcProps.role == ClientRole.Audience) {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience
+    ) {
       return false;
     }
     if (activeUids.length == 1) return true;

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -68,7 +68,12 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
   const {setVideoTileInViewPortState} = useVideoCall();
-  const {getWhiteboardUid = () => 0} = useWhiteboard();
+  const {
+    getWhiteboardUid = () => 0,
+    isWhiteboardOnFullScreen,
+    setWhiteboardOnFullScreen,
+    whiteboardActive,
+  } = useWhiteboard();
   const [landscapeMode, setLandscapeMode] = useState(
     isAndroid() || isIOS() ? true : false,
   );
@@ -90,22 +95,19 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
     //if screenshare is on fullscreen then get the width/height to set landscape mode
     if (isScreenShareOnFullView) {
       if (isAndroid() || isIOS()) {
-        const cb = args => {
+        const cb = (connection, stats) => {
           if (
-            args?.uid == user.uid &&
-            args?.width &&
-            args?.height &&
-            args.height > args.width
+            stats?.uid == user.uid &&
+            stats?.width &&
+            stats?.height &&
+            stats.height > stats.width
           ) {
             landscapeModeRef.current.landscapeMode && setLandscapeMode(false);
           }
         };
-        const subscription = RtcEngineUnsafe.addListener(
-          'RemoteVideoStats',
-          cb,
-        );
+        RtcEngineUnsafe.addListener('onRemoteVideoStats', cb);
         setTimeout(() => {
-          subscription.remove();
+          RtcEngineUnsafe.removeAllListeners('onRemoteVideoStats');
         }, 5000);
       } else {
         if (screenShareData && screenShareData?.[user.uid] && isMobileUA()) {
@@ -125,8 +127,13 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   }, [screenShareData, isScreenShareOnFullView]);
 
   const isNativeScreenShareActive =
-    (isAndroid() || isIOS()) && isScreenshareActive;
-  const enableExpandButton = isNativeScreenShareActive ? false : true;
+    (isAndroid() || isIOS() || isMobileUA()) && user?.type === 'screenshare';
+
+  const isNativeWhiteboardActive =
+    (isAndroid() || isIOS() || isMobileUA()) && whiteboardActive;
+
+  const enableExpandButton =
+    isNativeScreenShareActive || isNativeWhiteboardActive ? true : false;
 
   const {enablePinForMe} = useVideoCall();
 
@@ -191,13 +198,15 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
-          {enableExpandButton &&
-          screenShareData &&
-          screenShareData?.[user.uid] &&
-          isMobileUA() ? (
+          {(enableExpandButton &&
+            screenShareData &&
+            screenShareData?.[user.uid] &&
+            isMobileUA()) ||
+          (isMobileUA() && enableExpandButton && user?.type == 'whiteboard') ? (
             <IconButton
               containerStyle={
-                isScreenShareOnFullView && landscapeMode
+                (isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
+                landscapeMode
                   ? {
                       position: 'absolute',
                       top: 8,
@@ -206,6 +215,14 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       zIndex: 999,
                       elevation: 999,
                     }
+                  : user?.type == 'whiteboard'
+                  ? {
+                      position: 'absolute',
+                      top: 8,
+                      left: 8,
+                      zIndex: 999,
+                      elevation: 999,
+                    }
                   : {
                       position: 'absolute',
                       top: 8,
@@ -220,18 +237,22 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                     }
               }
               onPress={() => {
-                setScreenShareOnFullView(
-                  !screenShareData[user.uid]?.isExpanded,
-                );
-                setScreenShareData(prevState => {
-                  return {
-                    ...prevState,
-                    [user.uid]: {
-                      ...prevState[user.uid],
-                      isExpanded: !prevState[user.uid]?.isExpanded,
-                    },
-                  };
-                });
+                if (user?.type == 'whiteboard') {
+                  setWhiteboardOnFullScreen(!isWhiteboardOnFullScreen);
+                } else {
+                  setScreenShareOnFullView(
+                    !screenShareData[user.uid]?.isExpanded,
+                  );
+                  setScreenShareData(prevState => {
+                    return {
+                      ...prevState,
+                      [user.uid]: {
+                        ...prevState[user.uid],
+                        isExpanded: !prevState[user.uid]?.isExpanded,
+                      },
+                    };
+                  });
+                }
               }}
               iconProps={{
                 iconContainerStyle: {
@@ -241,6 +262,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                   transform: [{rotate: '-45deg'}],
                 },
                 name:
+                  isWhiteboardOnFullScreen ||
                   screenShareData?.[user?.uid]?.isExpanded === true
                     ? 'collapse'
                     : 'expand',
@@ -284,7 +306,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       avatarSize,
                     );
                   }}
-                  user={isNativeScreenShareActive ? {...user, video: 0} : user}
+                  user={user}
                   containerStyle={{
                     width:
                       landscapeMode && isScreenShareOnFullView
@@ -292,8 +314,6 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                         : '100%',
                     height:
                       landscapeMode && isScreenShareOnFullView ? width : '100%',
-                    // width: '100%',
-                    // height: '100%',
                     borderRadius: 4,
                     overflow: 'hidden',
                   }}
@@ -307,6 +327,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           </ZoomableWrapper>
           {(!isScreenShareOnFullView && !CustomChild) ||
           (CustomChild &&
+            !isWhiteboardOnFullScreen &&
             (pinnedUid !== getWhiteboardUid() || currentLayout === 'grid')) ? (
             <VideoContainerProvider value={{videoTileWidth}}>
               <NameWithMicIcon
@@ -325,7 +346,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
-          {!isScreenShareOnFullView &&
+          {!(isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
           // user.uid !== rtcProps?.screenShareUid &&
           (isHovered || actionMenuVisible || isMobileUA()) ? (
             <MoreMenu

package/template/src/rtm-events/constants.ts

@@ -2,7 +2,6 @@
 //  1. RECORDING
 const RECORDING_STARTED = 'RECORDING_STARTED';
 const RECORDING_STOPPED = 'RECORDING_STOPPED';
-const RECORDING_STOP_REQUEST = 'RECORDING_STOP_REQUEST';
 // 2. SCREENSHARE
 const SCREENSHARE_STARTED = 'SCREENSHARE_STARTED';
 const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
@@ -10,7 +9,6 @@ const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
 const EventActions = {
   RECORDING_STARTED,
   RECORDING_STOPPED,
-  RECORDING_STOP_REQUEST,
   SCREENSHARE_STARTED,
   SCREENSHARE_STOPPED,
 };

package/template/src/subComponents/ChatBubble.tsx

@@ -170,6 +170,7 @@ const style = StyleSheet.create({
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 8,
+    maxWidth: '88%',
   },
   chatBubbleRemoteViewLayer2: {
     backgroundColor: 'transparent',
@@ -204,6 +205,7 @@ const style = StyleSheet.create({
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
     borderTopRightRadius: 0,
+    maxWidth: '88%',
   },
   messageStyle: {
     fontFamily: ThemeConfig.FontFamily.sansPro,

package/template/src/subComponents/LocalAudioMute.tsx

@@ -14,7 +14,7 @@ import {
   ToggleState,
   PermissionState,
   ImageIcon as UIKitImageIcon,
-  ClientRole,
+  ClientRoleType,
   PropsContext,
   useLocalUid,
   DispatchContext,
@@ -39,9 +39,6 @@ import {
   toolbarItemMicrophoneText,
   toolbarItemMicrophoneTooltipText,
 } from '../language/default-labels/videoCallScreenLabels';
-import events from '../rtm-events-api';
-import {controlMessageEnum} from '../components/ChatContext';
-import {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * A component to mute / unmute the local audio
@@ -59,55 +56,18 @@ export interface LocalAudioMuteProps {
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
-  const {dispatch} = useContext(DispatchContext);
-  const {RtcEngineUnsafe} = useContext(RtcContext);
-
   const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
   } = useRoomInfo();
 
-  const isHostRef = useRef(isHost);
-  useEffect(() => {
-    isHostRef.current = isHost;
-  }, [isHost]);
-
   const {position} = useToolbar();
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
   const {isOnActionSheet, isOnFirstRow, showLabel} = useActionSheet();
   const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
-
-  useEffect(() => {
-    events.on(controlMessageEnum.disableButton, async ({payload}) => {
-      try {
-        const data = JSON.parse(payload);
-        if (
-          data &&
-          data?.button === MUTE_REMOTE_TYPE.audio &&
-          !isHostRef.current
-        ) {
-          if (data?.action === true) {
-            RtcEngineUnsafe.muteLocalAudioStream(true);
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [0, true],
-            });
-          } else {
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [0, false],
-            });
-          }
-        }
-      } catch (error) {
-        console.log('debugging error on disableButton');
-      }
-    });
-  }, []);
-
   const micButtonLabel = useString<I18nDeviceStatus>(toolbarItemMicrophoneText);
   const micButtonTooltip = useString<I18nDeviceStatus>(
     toolbarItemMicrophoneTooltipText,
@@ -180,8 +140,9 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     //   justifyContent: 'center',
     //   alignItems: 'center',
     // };
-    const isAudience = rtcProps?.role == ClientRole.Audience;
-    const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+    const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+    const isBroadCasting =
+      rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
 
     iconButtonProps.disabled =
       permissionDenied || ($config.EVENT_MODE && isAudience && !isBroadCasting)
@@ -218,7 +179,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -226,11 +187,11 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   }
 
   if (
-    (rtcProps.role == ClientRole.Audience &&
+    (rtcProps.role == ClientRoleType.ClientRoleAudience &&
       $config.EVENT_MODE &&
       $config.RAISE_HAND &&
       !isHost) ||
-    local.localAudioForceDisabled
+    local.audioBtnDisabled
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
@@ -238,7 +199,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage =
-      showToolTip && !local.localAudioForceDisabled
+      showToolTip && !local.audioBtnDisabled
         ? lstooltip(isHandRaised(local.uid))
         : '';
     iconButtonProps.disabled = true;

package/template/src/subComponents/LocalEndCall.tsx

@@ -5,19 +5,13 @@ import {Prompt} from '../components/Router';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import {Platform} from 'react-native';
-import useSTTAPI from './caption/useSTTAPI';
-import {useCaption} from './caption/useCaption';
 import {useScreenshare} from './screenshare/useScreenshare';
-import {DispatchContext, PropsContext} from '../../agora-rn-uikit';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
-import RTMEngine from '../rtm/RTMEngine';
-import {useAuth} from '../../src/auth/AuthProvider';
-import {ENABLE_AUTH} from '../../src/auth/config';
-import {useString} from '../../src/utils/useString';
-import {toolbarItemLeaveText} from '../../src/language/default-labels/videoCallScreenLabels';
-import {useCustomization} from 'customization-implementation';
+import {useString} from '../utils/useString';
+import {toolbarItemLeaveText} from '../language/default-labels/videoCallScreenLabels';
+import useEndCall from '../utils/useEndCall';
 
 export interface LocalEndcallProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -25,7 +19,7 @@ export interface LocalEndcallProps {
 }
 
 /* For android only, bg audio */
-const stopForegroundService = () => {
+export const stopForegroundService = () => {
   if (Platform.OS === 'android') {
     ReactNativeForegroundService.stop();
     console.log('stopping foreground service');
@@ -34,56 +28,15 @@ const stopForegroundService = () => {
 
 const LocalEndcall = (props: LocalEndcallProps) => {
   const {isScreenshareActive, stopUserScreenShare} = useScreenshare();
-  const {
-    data: {isHost},
-  } = useRoomInfo();
   const {isToolbarMenuItem} = useToolbarMenu();
-  const {dispatch} = useContext(DispatchContext);
   const {isOnActionSheet, showLabel} = useActionSheet();
   const endCallLabel = useString(toolbarItemLeaveText)();
-  const {defaultContent} = useContent();
   const [endcallVisible, setEndcallVisible] = useState(false);
-  const {stop} = useSTTAPI();
-  const {isSTTActive} = useCaption();
   const onPress = () => {
     setEndcallVisible(true);
   };
   const [endCallState, setEndCallState] = useState(false);
-  const {rtcProps} = useContext(PropsContext);
-  const {authLogout, authLogin} = useAuth();
-
-  const beforeEndCall = useCustomization(
-    data =>
-      data?.lifecycle?.useBeforeEndCall && data?.lifecycle?.useBeforeEndCall(),
-  );
-
-  const executeEndCall = async () => {
-    if (beforeEndCall) {
-      try {
-        beforeEndCall(isHost);
-      } catch (error) {
-        console.error('ERROR on useBeforeEndCall hook', error);
-      }
-    }
-    setTimeout(() => {
-      dispatch({
-        type: 'EndCall',
-        value: [isHost, false],
-      });
-    });
-    // stopping foreground servie on end call
-    stopForegroundService();
-    // stopping STT on call end,if only last user is remaining in call
-    const usersInCall = Object.entries(defaultContent).filter(
-      item => item[1].type === 'rtc',
-    );
-    usersInCall.length === 1 && isSTTActive && stop();
-    RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
-    if (!ENABLE_AUTH) {
-      // await authLogout();
-      await authLogin();
-    }
-  };
+  const executeEndCall = useEndCall();
 
   useEffect(() => {
     if (!isScreenshareActive && endCallState) {

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {Text, ViewStyle} from 'react-native';
 import {useString} from '../utils/useString';
-import {ClientRole, PropsContext, ToggleState} from '../../agora-rn-uikit';
+import {ClientRoleType, PropsContext, ToggleState} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {isAndroid, isIOS, useLocalUserInfo, useRtc} from 'customization-api';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
@@ -37,8 +37,8 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
 
   const {rtcProps} = useContext(PropsContext);
   const isLiveStream = $config.EVENT_MODE;
-  const isAudience = rtcProps?.role == ClientRole.Audience;
-  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+  const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+  const isBroadCasting = rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
   const showTitle = showText ? showLabel : false;
   const onPress = () => {
     RtcEngineUnsafe.switchCamera();