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

package/template/src/components/Precall.native.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
-import {PropsContext, ClientRole, ToggleState} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType, ToggleState} from '../../agora-rn-uikit';
 import {isValidReactComponent, isWebInternal, trimText} from '../utils/common';
 import ColorContext from './ColorContext';
 import {useRoomInfo} from './room-info/useRoomInfo';
@@ -96,7 +96,9 @@ const JoinRoomInputView = ({isDesktop}) => {
           {/* <Text style={style.subTextStyle}>
             Enter the name you would like to join the room as
           </Text> */}
-          {rtcProps.role == ClientRole.Audience && <Spacer size={20} />}
+          {rtcProps.role == ClientRoleType.ClientRoleAudience && (
+            <Spacer size={20} />
+          )}
         </>
       ) : (
         <></>
@@ -104,7 +106,7 @@ const JoinRoomInputView = ({isDesktop}) => {
       <View
         style={
           $config.EVENT_MODE &&
-          rtcProps.role == ClientRole.Audience && {
+          rtcProps.role == ClientRoleType.ClientRoleAudience && {
             justifyContent: 'space-between',
             flex: 1,
           }
@@ -117,7 +119,7 @@ const JoinRoomInputView = ({isDesktop}) => {
               : {width: '100%'}
           }>
           {$config.ENABLE_WAITING_ROOM &&
-          rtcProps.role === ClientRole.Audience ? (
+          rtcProps.role === ClientRoleType.ClientRoleAudience ? (
             <JoinWaitingRoomBtn />
           ) : (
             <JoinButton />
@@ -203,7 +205,7 @@ const JoinRoomButton = () => {
     return components;
   });
   return $config.ENABLE_WAITING_ROOM &&
-    rtcProps.role === ClientRole.Audience ? (
+    rtcProps.role === ClientRoleType.ClientRoleAudience ? (
     <JoinWaitingRoomBtn />
   ) : (
     <JoinButton />
@@ -350,7 +352,8 @@ const Precall = (props: any) => {
           contentContainerStyle={style.mainMobile}
           testID="precall-screen">
           {/* Precall screen only changes for audience in Live Stream event */}
-          {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+          {$config.EVENT_MODE &&
+          rtcProps.role == ClientRoleType.ClientRoleAudience ? (
             //  Live (Audience)
             <View style={{flex: 1}}>
               <View

package/template/src/components/Precall.tsx

@@ -18,7 +18,7 @@ import {
   ScrollView,
   useWindowDimensions,
 } from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
 import {
   isMobileUA,
   isWebInternal,
@@ -108,7 +108,9 @@ const JoinRoomInputView = ({isDesktop}) => {
           {/* <Text style={style.subTextStyle}>
             Enter the name you would like to join the room as
           </Text> */}
-          {rtcProps.role == ClientRole.Audience && <Spacer size={40} />}
+          {rtcProps.role == ClientRoleType.ClientRoleAudience && (
+            <Spacer size={40} />
+          )}
         </>
       ) : (
         <></>
@@ -116,7 +118,7 @@ const JoinRoomInputView = ({isDesktop}) => {
       <View
         style={
           $config.EVENT_MODE &&
-          rtcProps.role == ClientRole.Audience && {
+          rtcProps.role == ClientRoleType.ClientRoleAudience && {
             justifyContent: 'space-between',
             flex: 1,
           }
@@ -129,7 +131,7 @@ const JoinRoomInputView = ({isDesktop}) => {
               : {width: '100%'}
           }>
           {$config.ENABLE_WAITING_ROOM &&
-          rtcProps.role === ClientRole.Audience ? (
+          rtcProps.role === ClientRoleType.ClientRoleAudience ? (
             <JoinWaitingRoomBtn />
           ) : (
             <JoinButton />
@@ -217,7 +219,7 @@ const JoinRoomButton = () => {
   });
 
   return $config.ENABLE_WAITING_ROOM &&
-    rtcProps.role === ClientRole.Audience ? (
+    rtcProps.role === ClientRoleType.ClientRoleAudience ? (
     <JoinWaitingRoomBtn />
   ) : (
     <JoinButton />
@@ -355,7 +357,8 @@ const Precall = () => {
   ) : (
     <>
       <PrecallBeforeView />
-      {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+      {$config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience ? (
         <View style={style.root}>
           {!isMobileUA() ? <IDPLogoutComponent /> : <></>}
           <ScrollView contentContainerStyle={style.main}>

package/template/src/components/StorageContext.tsx

@@ -28,6 +28,7 @@ export interface StoreInterface {
     rememberedDevicesListEntries
   >;
   activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
+  whiteboardNativeInfoToast?: boolean;
 }
 
 export interface StorageContextInterface {
@@ -36,6 +37,7 @@ export interface StorageContextInterface {
 }
 
 export const initStoreValue: StoreInterface = {
+  whiteboardNativeInfoToast: false,
   token: null,
   displayName: '',
   selectedLanguageCode: '',
@@ -78,15 +80,16 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           setReady(true);
         } else {
           const storeFromStorage = JSON.parse(storeString);
-          Object.keys(initStoreValue).forEach((key) => {
+          Object.keys(initStoreValue).forEach(key => {
             if (!storeFromStorage[key]) {
               storeFromStorage[key] = initStoreValue[key];
             }
           });
-          //unauth flow delete token from the localstoage if any
+          // unauth flow delete token from the localstoage if any
           if (!ENABLE_AUTH) {
             storeFromStorage['token'] = null;
           }
+          storeFromStorage['whiteboardNativeInfoToast'] = false;
           setStore(storeFromStorage);
           setReady(true);
         }

package/template/src/components/ToastComponent.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import Toast from '../../react-native-toast-message';
 import ToastConfig from '../subComponents/ToastConfig';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 const ToastComponent = () => {
+  const {isRecordingBot} = useIsRecordingBot();
+
   // if ($config.TOAST_NOTIFICATIONS) {
   //   return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
   // } else return <></>;
-  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+  if (isRecordingBot) {
+    return <></>;
+  }
+  return <Toast ref={ref => Toast.setRef(ref)} config={ToastConfig} />;
 };
 export default ToastComponent;

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

@@ -10,7 +10,7 @@ import {createHook} from 'customization-implementation';
 import LiveStreamContext, {
   raiseHandListInterface,
 } from '../../components/livestream';
-import {ClientRole, useLocalUid} from '../../../agora-rn-uikit';
+import {ClientRoleType, useLocalUid} from '../../../agora-rn-uikit';
 import {filterObject} from '../../utils';
 import {useContent} from 'customization-api';
 
@@ -49,7 +49,7 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
           (v?.type === 'rtc' || v?.type === 'live') && //||
           //(v?.type === 'screenshare' && v?.video == 1)
           (raiseHandList[k]
-            ? raiseHandList[k]?.role == ClientRole.Broadcaster
+            ? raiseHandList[k]?.role == ClientRoleType.ClientRoleBroadcaster
             : true) &&
           !v?.offline &&
           activeUids.indexOf(v?.uid) !== -1,
@@ -58,7 +58,7 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
         defaultContent,
         ([k, v]) =>
           (v?.type === 'rtc' || v?.type === 'live') &&
-          raiseHandList[k]?.role == ClientRole.Audience &&
+          raiseHandList[k]?.role == ClientRoleType.ClientRoleAudience &&
           !v.offline,
       );
       const hUids = Object.keys(hostList).map(uid => parseInt(uid));

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

@@ -18,7 +18,7 @@ import {
   RaiseHandValue,
   raiseHandListInterface,
 } from './Types';
-import {ClientRole, useLocalUid, UidType} from '../../../agora-rn-uikit';
+import {ClientRoleType, useLocalUid, UidType} from '../../../agora-rn-uikit';
 import {filterObject, isEmptyObject} from '../../utils';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
@@ -219,13 +219,13 @@ export const LiveStreamContextProvider: React.FC<
     });
   };
 
-  const updateRtcProps = (newClientRole: ClientRole) => {
+  const updateRtcProps = (newClientRole: ClientRoleType) => {
     setRtcProps((prevState: any) => ({
       ...prevState,
       role:
-        newClientRole === ClientRole.Audience
-          ? ClientRole.Audience
-          : ClientRole.Broadcaster,
+        newClientRole === ClientRoleType.ClientRoleAudience
+          ? ClientRoleType.ClientRoleAudience
+          : ClientRoleType.ClientRoleBroadcaster,
     }));
   };
 
@@ -250,23 +250,23 @@ export const LiveStreamContextProvider: React.FC<
           role:
             payload?.role ||
             oldRaisedHandList[userId]?.role ||
-            ClientRole.Audience,
+            ClientRoleType.ClientRoleAudience,
         },
       }));
     }
   };
 
-  const changeClientRoleTo = (newRole: ClientRole) => {
+  const changeClientRoleTo = (newRole: ClientRoleType) => {
     updateRtcProps(newRole);
   };
 
-  const UpdtLocStateAndBCastAttr = (newRole: ClientRole, ts: number) => {
+  const UpdtLocStateAndBCastAttr = (newRole: ClientRoleType, ts: number) => {
     switch (newRole) {
-      case ClientRole.Audience:
+      case ClientRoleType.ClientRoleAudience:
         addOrUpdateLiveStreamRequest(localUidRef.current, {
           raised: RaiseHandValue.FALSE,
           ts: ts,
-          role: ClientRole.Audience,
+          role: ClientRoleType.ClientRoleAudience,
         });
         // Audience notfies all host when request is rejected
         events.send(
@@ -292,12 +292,12 @@ export const LiveStreamContextProvider: React.FC<
           PersistanceLevel.Sender,
         );
         break;
-      case ClientRole.Broadcaster:
+      case ClientRoleType.ClientRoleBroadcaster:
         // Update local state
         addOrUpdateLiveStreamRequest(localUidRef.current, {
           raised: RaiseHandValue.TRUE,
           ts: ts,
-          role: ClientRole.Broadcaster,
+          role: ClientRoleType.ClientRoleBroadcaster,
         });
         // Audience notfies all host when request is approved
         events.send(
@@ -329,7 +329,8 @@ export const LiveStreamContextProvider: React.FC<
   const pendingRequests = filterObject(
     raiseHandList,
     ([k, v]) =>
-      v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
+      v?.raised === RaiseHandValue.TRUE &&
+      v?.role == ClientRoleType.ClientRoleAudience,
   );
 
   React.useEffect(() => {
@@ -368,9 +369,9 @@ export const LiveStreamContextProvider: React.FC<
           [data.sender]: {
             ...prevState[data.sender],
             role:
-              data.payload in ClientRole
+              data.payload in ClientRoleType
                 ? parseInt(data.payload)
-                : ClientRole.Audience,
+                : ClientRoleType.ClientRoleAudience,
           },
         };
       });
@@ -386,7 +387,9 @@ export const LiveStreamContextProvider: React.FC<
     events.send(
       EventNames.ROLE_ATTRIBUTE,
       JSON.stringify(
-        rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+        rtcProps.role in ClientRoleType
+          ? rtcProps.role
+          : ClientRoleType.ClientRoleAudience,
       ),
       PersistanceLevel.Sender,
     );
@@ -396,7 +399,9 @@ export const LiveStreamContextProvider: React.FC<
         [localUid]: {
           ...prevState[localUid],
           role:
-            rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+            rtcProps.role in ClientRoleType
+              ? rtcProps.role
+              : ClientRoleType.ClientRoleAudience,
         },
       };
     });
@@ -440,7 +445,7 @@ export const LiveStreamContextProvider: React.FC<
                 addOrUpdateLiveStreamRequest(data.sender, {
                   ts: data.ts,
                   raised: RaiseHandValue.TRUE,
-                  role: ClientRole.Audience,
+                  role: ClientRoleType.ClientRoleAudience,
                   isProcessed: isProcessed,
                 });
                 break;
@@ -461,7 +466,7 @@ export const LiveStreamContextProvider: React.FC<
                 addOrUpdateLiveStreamRequest(data.sender, {
                   ts: data.ts,
                   raised: RaiseHandValue.FALSE,
-                  role: ClientRole.Audience,
+                  role: ClientRoleType.ClientRoleAudience,
                   isProcessed: isProcessed,
                 });
               default:
@@ -476,7 +481,7 @@ export const LiveStreamContextProvider: React.FC<
                 addOrUpdateLiveStreamRequest(data.sender, {
                   ts: data.ts,
                   raised: RaiseHandValue.TRUE,
-                  role: ClientRole.Broadcaster,
+                  role: ClientRoleType.ClientRoleBroadcaster,
                   isProcessed: isProcessed,
                 });
                 break;
@@ -484,7 +489,7 @@ export const LiveStreamContextProvider: React.FC<
                 addOrUpdateLiveStreamRequest(data.sender, {
                   ts: data.ts,
                   raised: RaiseHandValue.FALSE,
-                  role: ClientRole.Audience,
+                  role: ClientRoleType.ClientRoleAudience,
                   isProcessed: isProcessed,
                 });
                 break;
@@ -511,9 +516,9 @@ export const LiveStreamContextProvider: React.FC<
           raiseHandRequestAcceptedToastSubHeading?.current(),
         );
         // Promote user's privileges to host
-        changeClientRoleTo(ClientRole.Broadcaster);
+        changeClientRoleTo(ClientRoleType.ClientRoleBroadcaster);
         // Audience updates its local attributes and notfies all host when request is approved
-        UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
+        UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleBroadcaster, data.ts);
       },
     );
     /** 2. Audience receives this when the request is rejected by host
@@ -526,12 +531,12 @@ export const LiveStreamContextProvider: React.FC<
         /** 2.a */
         if (
           raiseHandListRef.current[localUidRef.current].role ==
-          ClientRole.Audience
+          ClientRoleType.ClientRoleAudience
         ) {
           showToast(raiseHandRequestRejectedToastHeading?.current(), null);
         } else if (
           raiseHandListRef.current[localUidRef.current].role ==
-          ClientRole.Broadcaster
+          ClientRoleType.ClientRoleBroadcaster
         ) {
           /** 2.b */
           showToast(
@@ -541,16 +546,16 @@ export const LiveStreamContextProvider: React.FC<
           screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
 
           // Demote user's privileges to audience
-          changeClientRoleTo(ClientRole.Audience);
+          changeClientRoleTo(ClientRoleType.ClientRoleAudience);
         }
         // Audience updates its local attributes and notfies all host when demoted/request rejected
-        UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
+        UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleAudience, data.ts);
       },
     );
     // 3. Audience when receives kickUser notifies all host when is kicked out
     const unsubKickUser = 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);
+      UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleAudience, data.ts);
     });
     // 4. Host promote audience as co-host
     const unsubPromoteAsCoHost = events.on(
@@ -558,9 +563,9 @@ export const LiveStreamContextProvider: React.FC<
       data => {
         showToast(promoteAsCoHostToastHeading.current(), null);
         // Promote user's privileges to host
-        changeClientRoleTo(ClientRole.Broadcaster);
+        changeClientRoleTo(ClientRoleType.ClientRoleBroadcaster);
         // Audience updates its local attributes and notfies all host when request is approved
-        UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
+        UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleBroadcaster, data.ts);
       },
     );
     // 4. New co-host has joined
@@ -707,12 +712,13 @@ export const LiveStreamContextProvider: React.FC<
      * else: Audience Request was not approved by host, and was pending
      */
     if (
-      raiseHandList[localUidRef.current]?.role == ClientRole.Broadcaster &&
+      raiseHandList[localUidRef.current]?.role ==
+        ClientRoleType.ClientRoleBroadcaster &&
       raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE
     ) {
       screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
       // Change role
-      changeClientRoleTo(ClientRole.Audience);
+      changeClientRoleTo(ClientRoleType.ClientRoleAudience);
     }
     //notify host users
     events.send(
@@ -725,7 +731,10 @@ export const LiveStreamContextProvider: React.FC<
       }),
       PersistanceLevel.Sender,
     );
-    UpdtLocStateAndBCastAttr(ClientRole.Audience, new Date().getTime());
+    UpdtLocStateAndBCastAttr(
+      ClientRoleType.ClientRoleAudience,
+      new Date().getTime(),
+    );
     showToast(raiseHandRequestRecallLocalToastHeading?.current(), null);
   };
 

package/template/src/components/livestream/Types.ts

@@ -1,6 +1,6 @@
 // DECLARE ENUMS & CONTANTS
 import {TextDataInterface} from '../../language/default-labels';
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 
 export enum RaiseHandValue {
   TRUE = 'TRUE',
@@ -14,7 +14,7 @@ export interface raiseHandListInterface {
 }
 
 export interface raiseHandItemInterface {
-  role: ClientRole;
+  role: ClientRoleType;
   raised: RaiseHandValue;
   ts: number;
   isProcessed: boolean;

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

@@ -13,7 +13,7 @@ import React, {useContext, useRef, useState} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import RemoteAudioMute from '../../subComponents/RemoteAudioMute';
 import RemoteVideoMute from '../../subComponents/RemoteVideoMute';
-import {ClientRole, ContentInterface, UidType} from '../../../agora-rn-uikit';
+import {ContentInterface, UidType} from '../../../agora-rn-uikit';
 import UserAvatar from '../../atoms/UserAvatar';
 import {isMobileUA, isWebInternal} from '../../utils/common';
 import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';

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

@@ -21,7 +21,11 @@ import {useChatMessages} from '../chat-messages/useChatMessages';
 import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
 import useRemoteEndCall from '../../utils/useRemoteEndCall';
 import LiveStreamContext from '../livestream/LiveStreamContext';
-import {ClientRole, DispatchContext, UidType} from '../../../agora-rn-uikit';
+import {
+  ClientRoleType,
+  DispatchContext,
+  UidType,
+} from '../../../agora-rn-uikit';
 import {useWindowDimensions} from 'react-native';
 import {
   LiveStreamControlMessageEnum,
@@ -299,7 +303,8 @@ export default function UserActionMenuOptionsOptions(
         if ($config.EVENT_MODE) {
           if (
             raiseHandList[user.uid]?.raised === RaiseHandValue.TRUE &&
-            raiseHandList[user.uid]?.role == ClientRole.Broadcaster
+            raiseHandList[user.uid]?.role ==
+              ClientRoleType.ClientRoleBroadcaster
           ) {
             items.push({
               isBase64Icon: true,

package/template/src/components/recording-bot/RecordingBotRoute.tsx

@@ -0,0 +1,42 @@
+/*
+********************************************
+ Copyright © 2024 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useContext, useEffect, useState} from 'react';
+import type {RouteProps} from 'react-router';
+import StorageContext from '../StorageContext';
+import Loading from '../../subComponents/Loading';
+import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
+
+interface RecordingBotRouteProps extends RouteProps {
+  children: React.ReactNode;
+  history: any;
+}
+
+const RecordingBotRoute: React.FC<RecordingBotRouteProps> = props => {
+  const {setStore, store} = useContext(StorageContext);
+  const [ready, setReady] = useState(false);
+  const {recordingBotToken} = useIsRecordingBot();
+  useEffect(() => {
+    setStore &&
+      setStore(prevState => ({
+        ...prevState,
+        token: recordingBotToken,
+      }));
+  }, []);
+
+  useEffect(() => {
+    store?.token === recordingBotToken && setReady(true);
+  }, [store?.token, recordingBotToken]);
+
+  return ready ? <>{props.children}</> : <Loading text={'Loading...'} />;
+};
+
+export default RecordingBotRoute;

package/template/src/components/virtual-background/useVB.native.tsx

@@ -5,9 +5,9 @@ import {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
 import {retrieveImagesFromAsyncStorage} from './VButils.native';
 
 import RtcEngine, {
-  VirtualBackgroundBlurDegree,
+  BackgroundBlurDegree,
   VirtualBackgroundSource,
-  VirtualBackgroundSourceType,
+  BackgroundSourceType,
 } from 'react-native-agora';
 import {useRtc} from 'customization-api';
 import RNFS from 'react-native-fs';
@@ -45,7 +45,7 @@ type VBContextValue = {
 export const VBContext = React.createContext<VBContextValue>({
   isVBActive: false,
   setIsVBActive: () => {},
-  vbMode: 'none',
+  vbMode: null,
   setVBmode: () => {},
   selectedImage: null,
   setSelectedImage: () => {},
@@ -72,7 +72,7 @@ const downloadBase64Image = async (base64Data, filename) => {
 
 const VBProvider: React.FC = ({children}) => {
   const [isVBActive, setIsVBActive] = React.useState<boolean>(false);
-  const [vbMode, setVBmode] = React.useState<VBMode>('none');
+  const [vbMode, setVBmode] = React.useState<VBMode>(null);
   const [selectedImage, setSelectedImage] = React.useState<
     ImageSourcePropType | string | null
   >(null);
@@ -114,9 +114,9 @@ const VBProvider: React.FC = ({children}) => {
     disable = false,
   ) => {
     if (disable) {
-      await rtc?.RtcEngineUnsafe.enableVirtualBackground(false, config);
+      await rtc?.RtcEngineUnsafe.enableVirtualBackground(false, config, {});
     } else {
-      await rtc?.RtcEngineUnsafe.enableVirtualBackground(true, config);
+      await rtc?.RtcEngineUnsafe.enableVirtualBackground(true, config, {});
     }
   };
 
@@ -133,32 +133,29 @@ const VBProvider: React.FC = ({children}) => {
         disableVB();
         break;
       default:
-        disableVB();
+        break;
     }
   }, [vbMode, selectedImage, saveVB, previewVideoTrack]);
 
   const blurVB = async () => {
-    const blurConfig: VirtualBackgroundSource = new VirtualBackgroundSource({
-      backgroundSourceType: VirtualBackgroundSourceType.Blur,
-      blur_degree: VirtualBackgroundBlurDegree.Medium,
-    });
+    const blurConfig: VirtualBackgroundSource = new VirtualBackgroundSource();
+    blurConfig.background_source_type = BackgroundSourceType.BackgroundBlur;
+    blurConfig.blur_degree = BackgroundBlurDegree.BlurDegreeMedium;
     await applyVirtualBackgroundToMainView(blurConfig);
   };
 
   const imageVB = async () => {
     const savedImagePath = await downloadBase64Image(selectedImage, 'img.png');
-    const imageConfig = new VirtualBackgroundSource({
-      backgroundSourceType: VirtualBackgroundSourceType.Img,
-      source: savedImagePath,
-    });
+    const imageConfig: VirtualBackgroundSource = new VirtualBackgroundSource();
+    imageConfig.background_source_type = BackgroundSourceType.BackgroundImg;
+    imageConfig.source = savedImagePath;
     await applyVirtualBackgroundToMainView(imageConfig);
   };
 
   const disableVB = async () => {
-    const disableConfig: VirtualBackgroundSource = new VirtualBackgroundSource(
-      {},
-    );
-
+    const disableConfig: VirtualBackgroundSource =
+      new VirtualBackgroundSource();
+    disableConfig.background_source_type = BackgroundSourceType.BackgroundNone;
     await applyVirtualBackgroundToMainView(disableConfig, true);
   };
 

package/template/src/components/virtual-background/useVB.tsx

@@ -6,7 +6,7 @@ import AgoraRTC, {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
 import Image from 'react-native';
 import VirtualBackgroundExtension from 'agora-extension-virtual-background';
 //@ts-ignore
-import wasm1 from '../../../node_modules/agora-extension-virtual-background/wasms/agora-wasm.wasm';
+import wasm1 from '../../wasms/agora-virtual-background.wasm';
 import {IconsInterface} from '../../atoms/CustomIcon';
 import {PropsContext} from '../../../agora-rn-uikit';
 import {isMobileUA} from '../../utils/common';

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

@@ -77,6 +77,8 @@ export interface whiteboardContextInterface {
   getWhiteboardUid: () => number;
   whiteboardStartedFirst?: boolean;
   clearAllCallback: () => void;
+  isWhiteboardOnFullScreen?: boolean;
+  setWhiteboardOnFullScreen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface WhiteboardPropsInterface {
@@ -90,6 +92,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   const [boardColor, setBoardColor] = useState<BoardColor>(BoardColor.White);
   // Defines whiteboard room state, whether disconnected, Connected, Connecting etc.
   const [whiteboardRoomState, setWhiteboardRoomState] = useState();
+  const [isWhiteboardOnFullScreen, setWhiteboardOnFullScreen] = useState(false);
   const whiteboardUidRef = useRef(Date.now());
   const whiteboardRoom = useRef({});
 
@@ -109,6 +112,12 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     return whiteboardUidRef?.current;
   };
 
+  useEffect(() => {
+    if (!whiteboardActive && isWhiteboardOnFullScreen) {
+      setWhiteboardOnFullScreen(false);
+    }
+  }, [whiteboardActive]);
+
   const clearAllCallback = () => {};
   return (
     <whiteboardContext.Provider
@@ -126,6 +135,8 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         insertImageIntoWhiteboard,
         whiteboardStartedFirst,
         clearAllCallback,
+        isWhiteboardOnFullScreen,
+        setWhiteboardOnFullScreen,
       }}>
       {props.children}
     </whiteboardContext.Provider>