agora-appbuilder-core 4.0.0-beta.50 → 4.0.0-beta.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.50",
+  "version": "4.0.0-beta.52",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout v3-release-ui-kit",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout v3-release-fixes",
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -133,6 +133,7 @@ export interface RtcPropsInterface {
   geoFencing?: boolean;
   audioRoom?: boolean;
   activeSpeaker?: boolean;
+  preventJoin?: boolean;
 
   //core only
   screenShareUid?: number;
@@ -182,6 +183,7 @@ const initialValue: Partial<PropsInterface> = {
     channel: '',
     geoFencing: true,
     audioRoom: false,
+    preventJoin: true,
   },
 };
 

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -12,6 +12,7 @@ const Join: React.FC<{
   uidState: ContentStateInterface;
   dispatch: DispatchType;
   tracksReady: boolean;
+  preventJoin?: boolean;
 }> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
@@ -29,6 +30,9 @@ const Join: React.FC<{
   }, [tracksReady]);
 
   useEffect(() => {
+    if (rtcProps?.preventJoin) {
+      return;
+    }
     const engine = engineRef.current;
     async function leave() {
       try {
@@ -77,13 +81,16 @@ const Join: React.FC<{
       // } catch (error) {
       //   console.error('FPE:Error on executing useBeforeJoin', error);
       // }
-
-      await engine.joinChannel(
-        rtcProps.token || null,
-        rtcProps.channel,
-        null,
-        rtcProps.uid || 0,
-      );
+      try {
+        await engine.joinChannel(
+          rtcProps.token || null,
+          rtcProps.channel,
+          null,
+          rtcProps.uid || 0,
+        );
+      } catch (error) {
+        console.error('RTC joinChannel error', error);
+      }
       if (
         !audioRoom &&
         videoState === ToggleState.enabled &&
@@ -126,6 +133,7 @@ const Join: React.FC<{
     rtcProps.token,
     precall,
     rtcProps.encryption,
+    rtcProps.preventJoin,
   ]);
 
   return <>{children}</>;

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -414,6 +414,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       {(engineRef, tracksReady) => (
         <Join
           precall={!rtcProps.callActive}
+          preventJoin={rtcProps?.preventJoin}
           engineRef={engineRef}
           uidState={uidState}
           dispatch={dispatch}

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

@@ -21,7 +21,7 @@ import {
   useLocalUid,
 } from '../../../agora-rn-uikit';
 import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
-import {useRoomInfo} from '../room-info/useRoomInfo';
+import {WaitingRoomStatus, useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
 import {useUserPreference} from '../useUserPreference';
 import {useSetRoomInfo} from '../room-info/useSetRoomInfo';
@@ -107,6 +107,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           return {
             ...prev,
             isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.APPROVED,
             data: {
               ...prev.data,
               token: mainUser.rtc,
@@ -121,6 +122,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           return {
             ...prev,
             isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.REJECTED,
           };
         });
         // inform user that entry was denied by the host

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

@@ -30,7 +30,7 @@ import useSetName from '../../utils/useSetName';
 import {useUserPreference} from '../useUserPreference';
 import {useSetRoomInfo} from '../room-info/useSetRoomInfo';
 import {EventNames} from '../../rtm-events';
-import {useRoomInfo} from '../room-info/useRoomInfo';
+import {WaitingRoomStatus, useRoomInfo} from '../room-info/useRoomInfo';
 import Toast from '../../../react-native-toast-message';
 
 import events from '../../rtm-events-api';
@@ -114,6 +114,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           return {
             ...prev,
             isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.APPROVED,
             data: {
               ...prev.data,
               token: mainUser.rtc,
@@ -128,6 +129,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           return {
             ...prev,
             isInWaitingRoom: false,
+            waitingRoomStatus: WaitingRoomStatus.REJECTED,
           };
         });
         // inform user that entry was denied by the host

package/template/src/components/room-info/useRoomInfo.tsx

@@ -14,6 +14,13 @@ import {createHook} from 'customization-implementation';
 import {UidType} from '../../../agora-rn-uikit';
 import {LanguageType} from '../../subComponents/caption/utils';
 import {BoardColor} from '../whiteboard/WhiteboardConfigure';
+
+export enum WaitingRoomStatus {
+  NOT_REQUESTED = 1,
+  REQUESTED = 2,
+  APPROVED = 3,
+  REJECTED = 4,
+}
 export interface RoomInfoContextInterface {
   isJoinDataFetched?: boolean;
   data?: {
@@ -41,6 +48,7 @@ export interface RoomInfoContextInterface {
     screenShareToken?: string;
   };
   isInWaitingRoom?: boolean;
+  waitingRoomStatus?: WaitingRoomStatus;
   isWhiteBoardOn?: boolean;
   boardColor?: BoardColor;
   whiteboardLastImageUploadPosition?: {
@@ -83,6 +91,7 @@ export const validateMeetingInfoData = (
 export const RoomInfoDefaultValue: RoomInfoContextInterface = {
   isJoinDataFetched: false,
   isInWaitingRoom: false,
+  waitingRoomStatus: WaitingRoomStatus.NOT_REQUESTED,
   isWhiteBoardOn: false,
   sttLanguage: null,
   isSTTActive: false,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {MaxVideoView} from '../../../agora-rn-uikit';
+import {MaxVideoView, useLocalUid} from '../../../agora-rn-uikit';
 import {useContent, usePreCall, useRtc} from 'customization-api';
 import InlineNotification from '../../atoms/InlineNotification';
 
@@ -8,9 +8,9 @@ interface VideoPreviewProps {
 }
 
 const VideoPreview = ({isLocalVideoON = false}: VideoPreviewProps) => {
-  const {defaultContent, activeUids} = useContent();
-  const [maxUid] = activeUids;
+  const {defaultContent} = useContent();
   const {isCameraAvailable} = usePreCall();
+  const localUid = useLocalUid();
 
   const rtc = useRtc();
   const fallbackText = isCameraAvailable
@@ -25,8 +25,8 @@ as your camera turns on.`
 
   return (
     <MaxVideoView
-      user={defaultContent[maxUid]}
-      key={maxUid}
+      user={defaultContent[localUid]}
+      key={localUid}
       fallback={() => <InlineNotification text={fallbackText} />}
       isFullView={true}
       containerStyle={{

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

@@ -1,7 +1,7 @@
 import {StyleSheet, View} from 'react-native';
 import React, {useContext} from 'react';
 import {useContent, useLocalUserInfo, usePreCall} from 'customization-api';
-import {MaxVideoView, RtcContext} from '../../../agora-rn-uikit';
+import {MaxVideoView, RtcContext, useLocalUid} from '../../../agora-rn-uikit';
 import {ToggleState} from '../../../agora-rn-uikit/src/Contexts/PropsContext';
 import AgoraRTC from 'agora-rtc-sdk-ng';
 import {useVB} from './useVB';
@@ -18,6 +18,7 @@ const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
   const vContainerRef = React.useRef(null);
   const {video: localVideoStatus} = useLocalUserInfo();
   const {isCameraAvailable} = usePreCall();
+  const localUid = useLocalUid();
 
   const isMobileWeb = isMobileUA();
   const {defaultContent, activeUids} = useContent();
@@ -66,8 +67,8 @@ const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
       }>
       {isMobileWeb ? (
         <MaxVideoView
-          user={defaultContent[maxUid]}
-          key={maxUid}
+          user={defaultContent[localUid]}
+          key={localUid}
           fallback={() => (
             <InlineNotification
               text="Camera is currently off. Selected background will be applied as soon

package/template/src/pages/VideoCall.tsx

@@ -41,6 +41,7 @@ import useJoinRoom from '../utils/useJoinRoom';
 import {
   useRoomInfo,
   RoomInfoDefaultValue,
+  WaitingRoomStatus,
 } from '../components/room-info/useRoomInfo';
 import {SidePanelProvider} from '../utils/useSidePanel';
 import VideoCallScreen from './video-call/VideoCallScreen';
@@ -115,6 +116,8 @@ const VideoCall: React.FC = () => {
 
   const [isRecordingActive, setRecordingActive] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
+  const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
+    useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
   const [currentFocus, setFocus] = useState<currentFocus>({
     editName: false,
@@ -159,7 +162,8 @@ const VideoCall: React.FC = () => {
 
   const useJoin = useJoinRoom();
   const {setRoomInfo} = useSetRoomInfo();
-  const {isJoinDataFetched, data, isInWaitingRoom} = useRoomInfo();
+  const {isJoinDataFetched, data, isInWaitingRoom, waitingRoomStatus} =
+    useRoomInfo();
 
   React.useEffect(() => {
     return () => {
@@ -221,7 +225,25 @@ const VideoCall: React.FC = () => {
   }, [SdkJoinState]);
 
   React.useEffect(() => {
-    if (isJoinDataFetched === true && (!queryComplete || !isInWaitingRoom)) {
+    if (
+      //isJoinDataFetched === true && (!queryComplete || !isInWaitingRoom)
+
+      //non waiting room - host/attendee
+      (!$config.ENABLE_WAITING_ROOM &&
+        isJoinDataFetched === true &&
+        !queryComplete) ||
+      //waiting room - host
+      ($config.ENABLE_WAITING_ROOM &&
+        isJoinDataFetched === true &&
+        data.isHost &&
+        !queryComplete) ||
+      //waiting room - attendee
+      ($config.ENABLE_WAITING_ROOM &&
+        isJoinDataFetched === true &&
+        !data.isHost &&
+        (!queryComplete || !isInWaitingRoom) &&
+        !waitingRoomAttendeeJoined)
+    ) {
       setRtcProps(prevRtcProps => ({
         ...prevRtcProps,
         channel: data.channel,
@@ -238,8 +260,23 @@ const VideoCall: React.FC = () => {
         screenShareUid: data.screenShareUid,
         screenShareToken: data.screenShareToken,
         role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
+        preventJoin:
+          !$config.ENABLE_WAITING_ROOM ||
+          ($config.ENABLE_WAITING_ROOM && data.isHost) ||
+          ($config.ENABLE_WAITING_ROOM &&
+            !data.isHost &&
+            waitingRoomStatus === WaitingRoomStatus.APPROVED)
+            ? false
+            : true,
       }));
 
+      if (
+        $config.ENABLE_WAITING_ROOM &&
+        !data.isHost &&
+        waitingRoomStatus === WaitingRoomStatus.APPROVED
+      ) {
+        setWaitingRoomAttendeeJoined(true);
+      }
       // 1. Store the display name from API
       // if (data.username) {
       //   setUsername(data.username);

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -343,8 +343,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: 'Failed to start the screen sharing',
-        text2: 'Please allow the permission to start the screen sharing',
+        text1: 'Failed to initiate screen sharing',
+        text2: 'Permission denied',
         visibilityTime: 1000 * 10,
         primaryBtn: null,
         secondaryBtn: null