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

package/template/src/components/whiteboard/WhiteboardConfigure.tsx

@@ -93,6 +93,8 @@ export interface whiteboardContextInterface {
   getWhiteboardUid: () => number;
   whiteboardStartedFirst?: boolean;
   clearAllCallback?: () => void;
+  isWhiteboardOnFullScreen?: boolean;
+  setWhiteboardOnFullScreen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface WhiteboardPropsInterface {
@@ -101,6 +103,7 @@ export interface WhiteboardPropsInterface {
 
 const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   // Defines intent, whether whiteboard should be active or not
+  const [isWhiteboardOnFullScreen, setWhiteboardOnFullScreen] = useState(false);
   const [whiteboardActive, setWhiteboardActive] = useState(false);
   const [whiteboardStartedFirst, setWhiteboardStartedFirst] = useState(false);
   const [boardColor, setBoardColor] = useState<BoardColor>(BoardColor.White);
@@ -430,6 +433,8 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         insertImageIntoWhiteboard,
         whiteboardStartedFirst,
         clearAllCallback,
+        isWhiteboardOnFullScreen,
+        setWhiteboardOnFullScreen,
       }}>
       {props.children}
     </whiteboardContext.Provider>

package/template/src/components/whiteboard/WhiteboardView.native.tsx

@@ -10,37 +10,80 @@
 *********************************************
 */
 
-import React, {useContext, useRef} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {whiteboardContext} from './WhiteboardConfigure';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 import {useRoomInfo} from 'customization-api';
 import {
   WhiteboardView as NativeWhiteboardView,
   RoomCallbackHandler,
 } from '@netless/react-native-whiteboard';
 import WhiteboardWidget from './WhiteboardWidget';
+import {
+  whiteboardInitializingText,
+  whiteboardNativeInfoToastHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {useString} from '../../utils/useString';
+import ThemeConfig from '../../theme';
+import Toast from '../../../react-native-toast-message';
+import {useContent} from 'customization-api';
+import StorageContext from '../StorageContext';
 
 interface WhiteboardViewInterface {}
 
 const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
-  const {getWhiteboardUid, whiteboardActive} = useContext(whiteboardContext);
+  const {getWhiteboardUid, whiteboardActive, isWhiteboardOnFullScreen} =
+    useContext(whiteboardContext);
+  const {setStore, store} = useContext(StorageContext);
+  const [isLoading, setIsLoading] = useState(true);
   const roomRef = useRef({});
   const sdkRef = useRef({});
   const {
     data: {whiteboard: {room_token, room_uuid} = {}},
   } = useRoomInfo();
+  const whiteboardInitializing = useString(whiteboardInitializingText)();
+  const whiteboardNativeInfoToastHeadingText = useString(
+    whiteboardNativeInfoToastHeading,
+  )();
+
+  useEffect(() => {
+    if (!store?.whiteboardNativeInfoToast) {
+      Toast.show({
+        leadingIconName: 'info',
+        type: 'info',
+        text1: whiteboardNativeInfoToastHeadingText,
+        visibilityTime: 5000,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+      setStore(prevState => {
+        return {
+          ...prevState,
+          whiteboardNativeInfoToast: true,
+        };
+      });
+    }
+  }, [store]);
 
   const roomCallbacks: Partial<RoomCallbackHandler> = {
-    onPhaseChanged: e => console.log('debugging onPhaseChanged changed: ', e),
-    onRoomStateChanged: e =>
-      console.log('debugging onRoomStateChanged changed: ', e),
-    onDisconnectWithError: e =>
-      console.log('debugging onDisconnectWithError: ', e),
+    onPhaseChanged: e => {
+      console.log('debugging onPhaseChanged changed: ', e);
+      setIsLoading(false);
+    },
+    // onRoomStateChanged: e =>
+    //   console.log('debugging onRoomStateChanged changed: ', e),
+    onDisconnectWithError: e => {
+      console.log('debugging onDisconnectWithError: ', e);
+      setIsLoading(false);
+    },
   };
 
   const sdkCallbacks = {
-    onSetupFail: error =>
-      console.log('debugging whiteboard sdk setup fail: ', error),
+    onSetupFail: error => {
+      console.log('debugging whiteboard sdk setup fail: ', error);
+      setIsLoading(false);
+    },
   };
 
   const joinRoomCallback = (aRoom, aSdk, error) => {
@@ -48,7 +91,7 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
     sdkRef.current = aSdk;
 
     console.log('debugging aRoom', aRoom);
-
+    setIsLoading(false);
     if (error) {
       console.log(error);
     } else {
@@ -61,14 +104,29 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
   };
 
   return (
-    <View style={style.whiteboardContainer}>
+    <View
+      style={
+        isWhiteboardOnFullScreen
+          ? style.whiteboardContainerLandscape
+          : style.whiteboardContainer
+      }>
       {whiteboardActive ? (
         <>
+          {isLoading ? (
+            <View style={style.placeholder}>
+              <Text style={style.loadingTextStyle}>
+                {whiteboardInitializing}
+              </Text>
+            </View>
+          ) : (
+            <></>
+          )}
           <WhiteboardWidget whiteboardRoom={roomRef} />
           <NativeWhiteboardView
             style={style.whiteboard}
             sdkConfig={{
               appIdentifier: $config.WHITEBOARD_APPIDENTIFIER,
+              userCursor: true,
             }}
             roomConfig={{
               uid: getWhiteboardUid()?.toString(),
@@ -90,11 +148,26 @@ const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
 };
 
 const style = StyleSheet.create({
+  placeholder: {
+    position: 'absolute',
+    top: '30%',
+    alignItems: 'center', //Centered horizontally
+    flex: 1,
+    zIndex: 999,
+  },
+  whiteboardContainerLandscape: {
+    flex: 1,
+    position: 'relative',
+    alignSelf: 'center',
+    alignItems: 'center',
+    transform: [{rotate: '90deg'}],
+  },
   whiteboardContainer: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
     backgroundColor: 'black',
+    position: 'relative',
   },
   whiteboard: {
     aspectRatio: 16.0 / 9.0,
@@ -104,6 +177,12 @@ const style = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  loadingTextStyle: {
+    color: $config.HARD_CODED_BLACK_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+  },
 });
 
 export default WhiteboardView;

package/template/src/components/whiteboard/WhiteboardWidget.tsx

@@ -22,7 +22,13 @@ import {
 import {whiteboardContext, BoardColor} from './WhiteboardConfigure';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
-import {isMobileUA, isWebInternal, randomString} from '../../utils/common';
+import {
+  isIOS,
+  isMobileUA,
+  isWebInternal,
+  randomString,
+  isAndroid,
+} from '../../utils/common';
 import Toast from '../../../react-native-toast-message';
 import ThemeConfig from '../../theme';
 import {DefaultLayouts} from '../../pages/video-call/DefaultLayouts';
@@ -69,8 +75,12 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
   const exportsuccess = useString(whiteboardExportSuccessToastHeading)();
 
   const [isInProgress, setIsInProgress] = useState(false);
-  const {setBoardColor, boardColor, getWhiteboardUid} =
-    useContext(whiteboardContext);
+  const {
+    setBoardColor,
+    boardColor,
+    getWhiteboardUid,
+    isWhiteboardOnFullScreen,
+  } = useContext(whiteboardContext);
   const {
     data: {whiteboard: {room_uuid} = {}},
   } = useRoomInfo();
@@ -199,7 +209,8 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
     <>
       <View style={style.toolboxContainer}>
         <View style={style.toolboxNew} nativeID="toolbox">
-          {!whiteboardRoom.current?.isWritable ? (
+          {(!whiteboardRoom.current?.isWritable || isIOS() || isAndroid()) &&
+          !isWhiteboardOnFullScreen ? (
             <View style={style.viewOnlyContainerStyle}>
               <ImageIcon
                 name="view-only"

package/template/src/language/default-labels/precallScreenLabels.ts

@@ -1,9 +1,9 @@
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 import {I18nBaseType, I18nConditionalType} from '../i18nTypes';
 
 export interface PrecallJoinBtnTextInterface {
   ready: boolean;
-  role?: ClientRole;
+  role?: ClientRoleType;
   waitingRoom?: boolean;
 }
 
@@ -138,7 +138,9 @@ export const PrecallScreenLabels: I18nPrecallScreenLabelsInterface = {
         ? !role
           ? 'JOIN ROOM'
           : `JOIN ROOM AS ${
-              role === ClientRole.Broadcaster ? 'HOST' : 'AUDIENCE'
+              role === ClientRoleType.ClientRoleBroadcaster
+                ? 'HOST'
+                : 'AUDIENCE'
             }`
         : `Loading...`;
     }

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -152,32 +152,49 @@ export const clearAllWhiteboardPopupSubHeading =
 export const clearAllWhiteboardPopupPrimaryBtnText =
   'clearAllWhiteboardPopupPrimaryBtnText';
 
-export const leavePopupHeading = `leave${room}PopupHeading`;
-export const leavePopupSubHeading = `leave${room}PopupSubHeading`;
-export const leavePopupPrimaryBtnText = `leave${room}PopupPrimaryBtnText`;
-
-export const removeUserFromRoomPopupHeading = `removeUserFrom${room}PopupHeading`;
-export const removeUserFromRoomPopupSubHeading = `removeUserFrom${room}PopupSubHeading`;
-export const removeUserFromRoomPopupPrimaryBtnText = `removeUserFrom${room}PopupPrimaryBtnText`;
-
-export const removeScreenshareFromRoomPopupHeading = `removeScreenshareFrom${room}PopupHeading`;
-export const removeScreenshareFromRoomPopupSubHeading = `removeScreenshareFrom${room}PopupSubHeading`;
-export const removeScreenshareFromRoomPopupPrimaryBtnText = `removeScreenshareFrom${room}PopupPrimaryBtnText`;
+export const leavePopupHeading = `leave${room}PopupHeading` as const;
+export const leavePopupSubHeading = `leave${room}PopupSubHeading` as const;
+export const leavePopupPrimaryBtnText =
+  `leave${room}PopupPrimaryBtnText` as const;
+
+export const removeUserFromRoomPopupHeading =
+  `removeUserFrom${room}PopupHeading` as const;
+export const removeUserFromRoomPopupSubHeading =
+  `removeUserFrom${room}PopupSubHeading` as const;
+export const removeUserFromRoomPopupPrimaryBtnText =
+  `removeUserFrom${room}PopupPrimaryBtnText` as const;
+
+export const removeScreenshareFromRoomPopupHeading =
+  `removeScreenshareFrom${room}PopupHeading` as const;
+export const removeScreenshareFromRoomPopupSubHeading =
+  `removeScreenshareFrom${room}PopupSubHeading` as const;
+export const removeScreenshareFromRoomPopupPrimaryBtnText =
+  `removeScreenshareFrom${room}PopupPrimaryBtnText` as const;
 
 export const stt = 'stt';
 
-export const sttChangeLanguagePopupHeading = `${stt}ChangeSpokenLanguagePopupHeading`;
-export const sttChangeLanguagePopupSubHeading = `${stt}ChangeSpokenLanguagePopupSubHeading`;
-export const sttChangeLanguagePopupDropdownError = `${stt}ChangeSpokenLanguagePopupDropdownError`;
-export const sttChangeLanguagePopupDropdownInfo = `${stt}ChangeSpokenLanguagePopupDropdownInfo`;
-export const sttChangeLanguagePopupPrimaryBtnText = `${stt}ChangeSpokenLanguagePopupPrimaryBtnText`;
-
-export const sttChangeSpokenLanguageText = `${stt}ChangeSpokenLanguageText`;
-export const sttSettingSpokenLanguageText = `${stt}SettingSpokenLanguageText`;
-export const sttTranscriptPanelHeaderText = `${stt}TranscriptPanelHeaderText`;
-export const sttDownloadBtnText = `${stt}DownloadBtnText`;
-export const sttDownloadTranscriptBtnText = `${stt}DownloadTranscriptBtnText`;
-export const sttLanguageChangeInProgress = `${stt}LanguageChangeInProgress`;
+export const sttChangeLanguagePopupHeading =
+  `${stt}ChangeSpokenLanguagePopupHeading` as const;
+export const sttChangeLanguagePopupSubHeading =
+  `${stt}ChangeSpokenLanguagePopupSubHeading` as const;
+export const sttChangeLanguagePopupDropdownError =
+  `${stt}ChangeSpokenLanguagePopupDropdownError` as const;
+export const sttChangeLanguagePopupDropdownInfo =
+  `${stt}ChangeSpokenLanguagePopupDropdownInfo` as const;
+export const sttChangeLanguagePopupPrimaryBtnText =
+  `${stt}ChangeSpokenLanguagePopupPrimaryBtnText` as const;
+
+export const sttChangeSpokenLanguageText =
+  `${stt}ChangeSpokenLanguageText` as const;
+export const sttSettingSpokenLanguageText =
+  `${stt}SettingSpokenLanguageText` as const;
+export const sttTranscriptPanelHeaderText =
+  `${stt}TranscriptPanelHeaderText` as const;
+export const sttDownloadBtnText = `${stt}DownloadBtnText` as const;
+export const sttDownloadTranscriptBtnText =
+  `${stt}DownloadTranscriptBtnText` as const;
+export const sttLanguageChangeInProgress =
+  `${stt}LanguageChangeInProgress` as const;
 
 export const chatPanelGroupTabText = 'chatPanelGroupTabText';
 export const chatPanelPrivateTabText = 'chatPanelPrivateTabText';
@@ -323,12 +340,14 @@ export const livestreamPromoteAsCoHostToastHeading =
 export const livestreamRequestAlreadyProcessed =
   'livestreamRequestAlreadyProcessed';
 
-export const videoRoomUserFallbackText = `video${room}UserFallbackText`;
+export const videoRoomUserFallbackText =
+  `video${room}UserFallbackText` as const;
 
 export const peoplePanelMeText = 'peoplePanelMeText';
 export const peoplePanelPresenterText = 'peoplePanelPresenterText';
 
-export const userRemovedFromTheRoomToastHeading = `userRemovedFromThe${room}ToastHeading`;
+export const userRemovedFromTheRoomToastHeading =
+  `userRemovedFromThe${room}ToastHeading` as const;
 
 export const vbPanelImageUploadErrorToastHeading =
   'vbPanelImageUploadErrorToastHeading';
@@ -380,6 +399,9 @@ export const whiteboardToolboxEraseText = 'whiteboardToolboxEraseText';
 export const whiteboardToolboxUploadText = 'whiteboardToolboxUploadText';
 export const whiteboardToolboxClearAllText = 'whiteboardToolboxClearAllText';
 
+export const whiteboardNativeInfoToastHeading =
+  'whiteboardNativeInfoToastHeading';
+
 export const sttSpokenLanguageToastHeading = `${stt}SpokenLanguageToastHeading`;
 export const sttSpokenLanguageToastSubHeading = `${stt}SpokenLanguageToastSubHeading`;
 
@@ -413,12 +435,16 @@ export const waitingRoomApprovalRejectionToastHeading =
 export const waitingRoomApprovalRejectionToastSubHeading =
   'waitingRoomApprovalRejectionToastSubHeading';
 
-export const videoRoomRecordingText = `video${room}RecordingText`;
-export const videoRoomGoToActiveSpeakerText = `video${room}GoToActiveSpeakerText`;
-export const videoRoomScreenshareText = `video${room}ScreenshareText`;
-export const videoRoomStartingCallText = `video${room}StartingCallText`;
-export const videoRoomScreenshareOverlayText = `video${room}ScreenshareOverlayText`;
-export const videoRoomScreenshareStopSharingBtnText = `video${room}ScreenshareStopSharingBtnText`;
+export const videoRoomRecordingText = `video${room}RecordingText` as const;
+export const videoRoomGoToActiveSpeakerText =
+  `video${room}GoToActiveSpeakerText` as const;
+export const videoRoomScreenshareText = `video${room}ScreenshareText` as const;
+export const videoRoomStartingCallText =
+  `video${room}StartingCallText` as const;
+export const videoRoomScreenshareOverlayText =
+  `video${room}ScreenshareOverlayText` as const;
+export const videoRoomScreenshareStopSharingBtnText =
+  `video${room}ScreenshareStopSharingBtnText` as const;
 
 export const chatPanelUserOfflineText = 'chatPanelUserOfflineText';
 export const chatPanelUnreadMessageText = 'chatPanelUnreadMessageText';
@@ -433,11 +459,21 @@ export const peoplePanelWaitingRoomRequestApprovalBtnTxt =
 export const peoplePanelWaitingRoomRequestDenyBtnTxt =
   'peoplePanelWaitingRoomRequestDenyBtnTxt';
 
-export const videoRoomScreenShareErrorToastHeading = `video${room}ScreenShareErrorToastHeading`;
-export const videoRoomScreenShareErrorToastSubHeading = `video${room}ScreenShareErrorToastSubHeading`;
-
-export const videoRoomRecordingToastHeading = `video${room}RecordingToastHeading`;
-export const videoRoomRecordingToastSubHeading = `video${room}RecordingToastSubHeading`;
+export const videoRoomScreenShareErrorToastHeading =
+  `video${room}ScreenShareErrorToastHeading` as const;
+export const videoRoomScreenShareErrorToastSubHeading =
+  `video${room}ScreenShareErrorToastSubHeading` as const;
+
+export const videoRoomRecordingToastHeading =
+  `video${room}RecordingToastHeading` as const;
+export const videoRoomRecordingToastSubHeading =
+  `video${room}RecordingToastSubHeading` as const;
+export const videoRoomRecordingStartErrorToastHeading =
+  'videoRoomRecordingStartErrorToastHeading';
+export const videoRoomRecordingStopErrorToastHeading =
+  'videoRoomRecordingStopErrorToastHeading';
+export const videoRoomRecordingErrorToastSubHeading =
+  'videoRoomRecordingErrorToastSubHeading';
 
 export const peoplePanelUserNotFoundLabel = 'peoplePanelUserNotFoundLabel';
 export const peoplePanelStreamingRequestSectionHeader =
@@ -447,12 +483,17 @@ export const peoplePanelLivestreamingApprovalBtnText =
 export const peoplePanelLivestreamingDenyBtnText =
   'peoplePanelLivestreamingDenyBtnText';
 
-export const sttTranscriptPanelSearchText = `${stt}TranscriptPanelSearchText`;
-export const sttTranscriptPanelNoSearchResultsFoundText = `${stt}TranscriptPanelNoSearchResultsFoundText`;
-export const sttTranscriptPanelViewLatestText = `${stt}TranscriptPanelViewLatestText`;
+export const sttTranscriptPanelSearchText =
+  `${stt}TranscriptPanelSearchText` as const;
+export const sttTranscriptPanelNoSearchResultsFoundText =
+  `${stt}TranscriptPanelNoSearchResultsFoundText` as const;
+export const sttTranscriptPanelViewLatestText =
+  `${stt}TranscriptPanelViewLatestText` as const;
 
-export const videoRoomPeopleCountTooltipHostText = `video${room}PeopleCountTooltipHostText`;
-export const videoRoomPeopleCountTooltipAttendeeText = `video${room}PeopleCountTooltipAttendeeText`;
+export const videoRoomPeopleCountTooltipHostText =
+  `video${room}PeopleCountTooltipHostText` as const;
+export const videoRoomPeopleCountTooltipAttendeeText =
+  `video${room}PeopleCountTooltipAttendeeText` as const;
 
 export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemPeopleText]?: I18nBaseType;
@@ -679,6 +720,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [whiteboardFileUploadInfoToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
   [whiteboardFileUploadTypeErrorToastHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
   [whiteboardFileUploadTypeErrorToastSubHeading]?: I18nBaseType<whiteboardFileUploadToastDataType>;
+  [whiteboardNativeInfoToastHeading]?: I18nBaseType;
 
   [sttSpokenLanguageToastHeading]?: I18nBaseType<sttSpokenLanguageToastHeadingDataType>;
   [sttSpokenLanguageToastSubHeading]?: I18nBaseType<sttSpokenLanguageToastSubHeadingDataInterface>;
@@ -725,6 +767,10 @@ export interface I18nVideoCallScreenLabelsInterface {
   [videoRoomScreenShareErrorToastSubHeading]?: I18nBaseType;
   [videoRoomRecordingToastHeading]?: I18nConditionalType;
   [videoRoomRecordingToastSubHeading]?: I18nDynamicType;
+  [videoRoomRecordingStartErrorToastHeading]?: I18nBaseType;
+  [videoRoomRecordingStopErrorToastHeading]?: I18nBaseType;
+  [videoRoomRecordingErrorToastSubHeading]?: I18nBaseType;
+
   [peoplePanelUserNotFoundLabel]?: I18nBaseType;
   [peoplePanelStreamingRequestSectionHeader]?: I18nBaseType;
   [peoplePanelLivestreamingApprovalBtnText]?: I18nBaseType;
@@ -1155,6 +1201,10 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     active ? 'Recording Started' : 'Recording Stopped',
   [videoRoomRecordingToastSubHeading]: name =>
     `This room is being recorded by ${name}`,
+  [videoRoomRecordingStartErrorToastHeading]: 'Recording failed to start',
+  [videoRoomRecordingStopErrorToastHeading]: 'Recording failed to stop',
+  [videoRoomRecordingErrorToastSubHeading]: 'There was an internal error.',
+
   [peoplePanelUserNotFoundLabel]: 'User not found',
   [peoplePanelStreamingRequestSectionHeader]: 'STREAMING REQUEST',
   [peoplePanelLivestreamingApprovalBtnText]: 'Accept',
@@ -1167,4 +1217,6 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [videoRoomPeopleCountTooltipHostText]: 'Host',
   [videoRoomPeopleCountTooltipAttendeeText]: ({eventMode}) =>
     eventMode ? 'Audience' : 'Attendee',
+  [whiteboardNativeInfoToastHeading]:
+    'Use two finger to move around the whiteboard',
 };

package/template/src/pages/VideoCall.tsx

@@ -11,12 +11,13 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
+import {useApolloClient} from '@apollo/client';
 import {View, StyleSheet, Text} from 'react-native';
 import {
   RtcConfigure,
   PropsProvider,
-  ClientRole,
-  ChannelProfile,
+  ClientRoleType,
+  ChannelProfileType,
   LocalUserContext,
   UidType,
   CallbacksInterface,
@@ -49,7 +50,6 @@ import {
   WaitingRoomStatus,
 } from '../components/room-info/useRoomInfo';
 import {SidePanelProvider} from '../utils/useSidePanel';
-import VideoCallScreen from './video-call/VideoCallScreen';
 import {NetworkQualityProvider} from '../components/NetworkQualityContext';
 import {ChatNotificationProvider} from '../components/chat-notification/useChatNotification';
 import {ChatUIControlsProvider} from '../components/chat-ui/useChatUIControls';
@@ -70,13 +70,13 @@ import {CaptionProvider} from '../subComponents/caption/useCaption';
 import SdkMuteToggleListener from '../components/SdkMuteToggleListener';
 import StorageContext from '../components/StorageContext';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
-import WhiteboardConfigure from '../components/whiteboard/WhiteboardConfigure';
 import {NoiseSupressionProvider} from '../app-state/useNoiseSupression';
 import {VideoQualityContextProvider} from '../app-state/useVideoQuality';
 import {VBProvider} from '../components/virtual-background/useVB';
 import {DisableChatProvider} from '../components/disable-chat/useDisableChat';
 import {WaitingRoomProvider} from '../components/contexts/WaitingRoomContext';
-import {isWeb} from '../utils/common';
+import VideoCallScreenWrapper from './video-call/VideoCallScreenWrapper';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 import {videoRoomStartingCallText} from '../language/default-labels/videoCallScreenLabels';
 import {useString} from '../utils/useString';
 import {useCustomization} from 'customization-implementation';
@@ -130,9 +130,26 @@ const VideoCall: React.FC = () => {
   const hasBrandLogo = useHasBrandLogo();
   const joiningLoaderLabel = useString(videoRoomStartingCallText)();
 
+  const client = useApolloClient();
+
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const {awake, release} = useWakeLock();
-  const [callActive, setCallActive] = useState($config.PRECALL ? false : true);
+  const {isRecordingBot} = useIsRecordingBot();
+  /**
+   *  Should we set the callscreen to active ??
+   *  a) If Recording bot( i.e prop: recordingBot) is TRUE then it means,
+   *     the recording bot is accessing the screen - so YES we should set
+   *     the callActive as true and we need not check for whether
+   *     $config.PRECALL is enabled or not.
+   *  b) If Recording bot( i.e prop: recordingBot) is FALSE then we should set
+   *     the callActive depending upon the value of magic variable - $config.PRECALL
+   */
+  const shouldCallBeSetToActive = isRecordingBot
+    ? true
+    : $config.PRECALL
+    ? false
+    : true;
+  const [callActive, setCallActive] = useState(shouldCallBeSetToActive);
 
   //layouts
   const layouts = useLayoutsData();
@@ -177,7 +194,7 @@ const VideoCall: React.FC = () => {
     encryption: $config.ENCRYPTION_ENABLED
       ? {key: null, mode: RnEncryptionEnum.AES128GCM2, screenKey: null}
       : false,
-    role: ClientRole.Broadcaster,
+    role: ClientRoleType.ClientRoleBroadcaster,
     geoFencing: $config.GEO_FENCING,
     audioRoom: $config.AUDIO_ROOM,
     activeSpeaker: $config.ACTIVE_SPEAKER,
@@ -185,6 +202,7 @@ const VideoCall: React.FC = () => {
       sdkCameraDevice.deviceId || store?.activeDeviceId?.videoinput || null,
     preferredMicrophoneId:
       sdkMicrophoneDevice.deviceId || store?.activeDeviceId?.audioinput || null,
+    recordingBot: isRecordingBot ? true : false,
   });
 
   const history = useHistory();
@@ -290,7 +308,9 @@ const VideoCall: React.FC = () => {
           : false,
         screenShareUid: data.screenShareUid,
         screenShareToken: data.screenShareToken,
-        role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
+        role: data.isHost
+          ? ClientRoleType.ClientRoleBroadcaster
+          : ClientRoleType.ClientRoleAudience,
         preventJoin:
           !$config.ENABLE_WAITING_ROOM ||
           ($config.ENABLE_WAITING_ROOM && data.isHost) ||
@@ -323,25 +343,14 @@ const VideoCall: React.FC = () => {
     //     SdkJoinState.promise?.res();
     //   }
     // },
-    EndCall: (isHost, isTriggeredByHost) => {
-      if (afterEndCall) {
-        clearState('join');
-        setTimeout(() => {
-          // TODO: These callbacks are being called twice
-          SDKEvents.emit('leave');
-          try {
-            afterEndCall(isHost, history, isTriggeredByHost);
-          } catch (error) {
-            console.error('ERROR on useAfterEndCall hook', error);
-          }
-        }, 0);
-      } else {
-        setTimeout(() => {
-          // TODO: These callbacks are being called twice
-          SDKEvents.emit('leave');
-          history.push('/');
-        }, 0);
-      }
+    EndCall: () => {
+      clearState('join');
+      setTimeout(() => {
+        // TODO: These callbacks are being called twice
+        SDKEvents.emit('leave');
+        history.push('/');
+        client.resetStore();
+      }, 0);
     },
     UserJoined: (uid: UidType) => {
       console.log('UIKIT Callback: UserJoined', uid);
@@ -388,8 +397,8 @@ const VideoCall: React.FC = () => {
                 callbacks,
                 styleProps,
                 mode: $config.EVENT_MODE
-                  ? ChannelProfile.LiveBroadcasting
-                  : ChannelProfile.Communication,
+                  ? ChannelProfileType.ChannelProfileLiveBroadcasting
+                  : ChannelProfileType.ChannelProfileCommunication,
               }}>
               <RtcConfigure>
                 <DeviceConfigure>
@@ -445,14 +454,7 @@ const VideoCall: React.FC = () => {
                                                                 <VideoMeetingDataProvider>
                                                                   <VideoCallProvider>
                                                                     <DisableChatProvider>
-                                                                      {$config.ENABLE_WHITEBOARD &&
-                                                                      isWebInternal() ? (
-                                                                        <WhiteboardConfigure>
-                                                                          <VideoCallScreen />
-                                                                        </WhiteboardConfigure>
-                                                                      ) : (
-                                                                        <VideoCallScreen />
-                                                                      )}
+                                                                      <VideoCallScreenWrapper />
                                                                     </DisableChatProvider>
                                                                   </VideoCallProvider>
                                                                 </VideoMeetingDataProvider>

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

@@ -10,7 +10,7 @@ import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
 import Recording from '../../subComponents/Recording';
 import ChatContext from '../../components/ChatContext';
 import {PropsContext, ToggleState} from '../../../agora-rn-uikit';
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 import {
   RoomInfoContextInterface,
   useRoomInfo,
@@ -355,8 +355,9 @@ const ActionSheetContent = props => {
   }, [sttLanguage]);
 
   const isLiveStream = $config.EVENT_MODE && !$config.AUDIO_ROOM;
-  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 isHandRaised = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
 
   const isAudioRoom = $config.AUDIO_ROOM;

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

@@ -105,7 +105,8 @@ const style = StyleSheet.create({
     bottom: 8,
     borderRadius: 4,
     flexDirection: 'row',
-    zIndex: 5,
+    zIndex: 999,
+    elevation: 5,
   },
   name: {
     color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,