agora-appbuilder-core 4.0.0-test.10 → 4.0.0-test.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-test.10",
+  "version": "4.0.0-test.12",
   "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 feature/recording-2-0",
+    "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-encryption",
     "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/_package-lock.json

@@ -20,7 +20,7 @@
         "agora-extension-ai-denoiser": "1.1.0",
         "agora-extension-virtual-background": "^1.1.3",
         "agora-react-native-rtm": "1.5.1",
-        "agora-rtc-sdk-ng": "4.20.1",
+        "agora-rtc-sdk-ng": "4.19.0",
         "agora-rtm-sdk": "1.5.1",
         "buffer": "^6.0.3",
         "electron-log": "4.3.5",
@@ -7668,14 +7668,14 @@
       }
     },
     "node_modules/agora-rtc-sdk-ng": {
-      "version": "4.20.1",
-      "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.20.1.tgz",
-      "integrity": "sha512-k/heeT3DE72K6D1sZCN1k5K2wIBzSwW4q1hsxk9AOQLdrdPY5GFWQVn66k/WGyP67lEPFe0ZTKFh9+8Gc284FA==",
-      "dependencies": {
-        "@agora-js/media": "4.20.1",
-        "@agora-js/report": "4.20.1",
-        "@agora-js/shared": "4.20.1",
-        "agora-rte-extension": "^1.2.4",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.19.0.tgz",
+      "integrity": "sha512-uVljhNooPWnJQGOvGWLPtjHuTET15pLz1lEPA1NFNoe94/yl6Ib5Ayl253+Y0gSzQwrQswRuRIITNNec/eXpSw==",
+      "dependencies": {
+        "@agora-js/media": "^4.19.0",
+        "@agora-js/report": "^4.19.0",
+        "@agora-js/shared": "^4.19.0",
+        "agora-rte-extension": "^1.2.3",
         "axios": "^0.27.2",
         "formdata-polyfill": "^4.0.7",
         "ua-parser-js": "^0.7.34",
@@ -37782,14 +37782,14 @@
       "requires": {}
     },
     "agora-rtc-sdk-ng": {
-      "version": "4.20.1",
-      "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.20.1.tgz",
-      "integrity": "sha512-k/heeT3DE72K6D1sZCN1k5K2wIBzSwW4q1hsxk9AOQLdrdPY5GFWQVn66k/WGyP67lEPFe0ZTKFh9+8Gc284FA==",
-      "requires": {
-        "@agora-js/media": "4.20.1",
-        "@agora-js/report": "4.20.1",
-        "@agora-js/shared": "4.20.1",
-        "agora-rte-extension": "^1.2.4",
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.19.0.tgz",
+      "integrity": "sha512-uVljhNooPWnJQGOvGWLPtjHuTET15pLz1lEPA1NFNoe94/yl6Ib5Ayl253+Y0gSzQwrQswRuRIITNNec/eXpSw==",
+      "requires": {
+        "@agora-js/media": "^4.19.0",
+        "@agora-js/report": "^4.19.0",
+        "@agora-js/shared": "^4.19.0",
+        "agora-rte-extension": "^1.2.3",
         "axios": "^0.27.2",
         "formdata-polyfill": "^4.0.7",
         "ua-parser-js": "^0.7.34",

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

@@ -136,7 +136,6 @@ export interface RtcPropsInterface {
   //core only
   screenShareUid?: number;
   screenShareToken?: string;
-  recordingBot?: false;
   //core only
 }
 

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

@@ -15,7 +15,6 @@ import PropsContext, {
   PermissionState,
 } from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
-import {isBotUser} from '../Utils/isBotUser';
 
 const Create = ({
   dispatch,
@@ -297,21 +296,14 @@ const Create = ({
         if (
           !(
             mode === ChannelProfile.LiveBroadcasting &&
-            rtcProps?.role == ClientRole.Audience &&
-            Platform.OS === 'web' &&
-            rtcProps?.recordingBot
+            rtcProps.role == ClientRole.Audience &&
+            Platform.OS === 'web'
           )
         ) {
-          if (rtcProps?.recordingBot) {
-            console.log(
-              'supriya recordingBot, hence not asking audio/video permission',
-            );
-          } else {
-            enableVideoAndAudioWithInitialStates().then(() => {
-              setTracksReady(true);
-              isVideoEnabledRef.current = true;
-            });
-          }
+          enableVideoAndAudioWithInitialStates().then(() => {
+            setTracksReady(true);
+            isVideoEnabledRef.current = true;
+          });
         }
 
         engine.current.addListener(
@@ -330,8 +322,9 @@ const Create = ({
         );
 
         engine.current.addListener('UserJoined', async (...args) => {
-          // preventing bots(ex: STT, recording) in renderlist
-          if (isBotUser(args)) {
+          // preventing STT pusher bot in renderlist
+          //@ts-ignore
+          if (args[0] === 111111) {
             return;
           }
           //Get current peer IDs

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

@@ -45,7 +45,7 @@ const Join: React.FC<{
     }
     const {defaultContent, activeUids} = uidState;
     const [maxUid] = activeUids;
-    const videoState = defaultContent[maxUid]?.video;
+    const videoState = defaultContent[maxUid].video;
     async function join() {
       if (
         rtcProps?.encryption &&

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

@@ -47,42 +47,23 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
   );
   const localUid = useLocalUid();
 
-  const initialLocalState: Partial<ContentStateInterface> =
-    rtcProps?.recordingBot
-      ? {
-          customContent: {},
-          defaultContent: {
-            [localUid]: {
-              uid: localUid,
-              audio: ToggleState.disabled,
-              video: ToggleState.disabled,
-              streamType: 'high',
-              type: 'rtc',
-              permissionStatus: PermissionState.NOT_REQUESTED,
-            },
-          },
-          activeUids: [],
-          pinnedUid: undefined,
-          secondaryPinnedUid: undefined,
-          lastJoinedUid: 0,
-        }
-      : {
-          customContent: {},
-          defaultContent: {
-            [localUid]: {
-              uid: localUid,
-              audio: ToggleState.disabled,
-              video: ToggleState.disabled,
-              streamType: 'high',
-              type: 'rtc',
-              permissionStatus: PermissionState.NOT_REQUESTED,
-            },
-          },
-          activeUids: [localUid],
-          pinnedUid: undefined,
-          secondaryPinnedUid: undefined,
-          lastJoinedUid: 0,
-        };
+  const initialLocalState: Partial<ContentStateInterface> = {
+    customContent: {},
+    defaultContent: {
+      [localUid]: {
+        uid: localUid,
+        audio: ToggleState.disabled,
+        video: ToggleState.disabled,
+        streamType: 'high',
+        type: 'rtc',
+        permissionStatus: PermissionState.NOT_REQUESTED,
+      },
+    },
+    activeUids: [localUid],
+    pinnedUid: undefined,
+    secondaryPinnedUid: undefined,
+    lastJoinedUid: 0,
+  };
 
   const [initialState, setInitialState] = React.useState(
     JSON.parse(JSON.stringify(initialLocalState)),

package/template/package.json

@@ -60,7 +60,7 @@
     "agora-extension-ai-denoiser": "1.1.0",
     "agora-extension-virtual-background": "^1.1.3",
     "agora-react-native-rtm": "1.5.1",
-    "agora-rtc-sdk-ng": "4.20.1",
+    "agora-rtc-sdk-ng": "4.19.0",
     "agora-rtm-sdk": "1.5.1",
     "buffer": "^6.0.3",
     "electron-log": "4.3.5",

package/template/src/AppRoutes.tsx

@@ -17,21 +17,6 @@ import {Route, Switch, Redirect} from './components/Router';
 import AuthRoute from './auth/AuthRoute';
 import {IDPAuth} from './auth/IDPAuth';
 import {Text} from 'react-native';
-import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
-import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
-
-function VideoCallWrapper(props) {
-  const {isRecordingBotRoute} = useIsRecordingBot();
-  return isRecordingBotRoute ? (
-    <RecordingBotRoute history={props.history}>
-      <VideoCall />
-    </RecordingBotRoute>
-  ) : (
-    <AuthRoute>
-      <VideoCall />
-    </AuthRoute>
-  );
-}
 
 function AppRoutes() {
   return (
@@ -48,7 +33,9 @@ function AppRoutes() {
       <AuthRoute exact path={'/create'}>
         <Create />
       </AuthRoute>
-      <Route exact path={'/:phrase'} component={VideoCallWrapper} />
+      <AuthRoute path={'/:phrase'}>
+        <VideoCall />
+      </AuthRoute>
       <Route path="*">
         <Text>Page not found</Text>
       </Route>

package/template/src/AppWrapper.tsx

@@ -87,24 +87,22 @@ const AppWrapper = (props: AppWrapperProps) => {
           <StatusBar hidden={true} />
           <StorageProvider>
             <LanguageProvider>
-              <GraphQLProvider>
-                <Router
-                  /*@ts-ignore Router will be memory Router in sdk*/
-                  initialEntries={[
-                    //@ts-ignore
-                    isSDK && SdkJoinState.phrase
-                      ? //@ts-ignore
-                        `/${SdkJoinState.phrase}`
-                      : '',
-                  ]}>
-                  <ToastProvider>
-                    <ToastContext.Consumer>
-                      {({isActionSheetVisible}) => {
-                        return !isActionSheetVisible ? (
-                          <ToastComponent />
-                        ) : null;
-                      }}
-                    </ToastContext.Consumer>
+              <ToastProvider>
+                <ToastContext.Consumer>
+                  {({isActionSheetVisible}) => {
+                    return !isActionSheetVisible ? <ToastComponent /> : null;
+                  }}
+                </ToastContext.Consumer>
+                <GraphQLProvider>
+                  <Router
+                    /*@ts-ignore Router will be memory Router in sdk*/
+                    initialEntries={[
+                      //@ts-ignore
+                      isSDK && SdkJoinState.phrase
+                        ? //@ts-ignore
+                          `/${SdkJoinState.phrase}`
+                        : '',
+                    ]}>
                     <AuthProvider>
                       <SessionProvider>
                         <ColorConfigure>
@@ -118,9 +116,9 @@ const AppWrapper = (props: AppWrapperProps) => {
                         </ColorConfigure>
                       </SessionProvider>
                     </AuthProvider>
-                  </ToastProvider>
-                </Router>
-              </GraphQLProvider>
+                  </Router>
+                </GraphQLProvider>
+              </ToastProvider>
             </LanguageProvider>
           </StorageProvider>
         </SafeAreaView>

package/template/src/components/Chat.tsx

@@ -39,7 +39,6 @@ import {useLayout} from '../utils/useLayout';
 import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import {ChatHeader} from '../pages/video-call/SidePanelHeader';
 import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
-import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 export interface ChatProps {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
@@ -52,7 +51,7 @@ const Chat = (props?: ChatProps) => {
   const isSmall = useIsSmall();
   const {setSidePanel} = useSidePanel();
   const {showHeader = true} = props;
-  const {isRecordingBot} = useIsRecordingBot();
+
   const {chatType, setChatType, setPrivateChatUser} = useChatUIControls();
 
   const {
@@ -171,13 +170,9 @@ const Chat = (props?: ChatProps) => {
         {chatType === ChatType.Group ? (
           <>
             <ChatContainer {...props} />
-            {isRecordingBot ? (
-              <></>
-            ) : (
-              <View style={style.chatInputContainer}>
-                <ChatInputComponent />
-              </View>
-            )}
+            <View style={style.chatInputContainer}>
+              <ChatInputComponent />
+            </View>
           </>
         ) : (
           <></>
@@ -190,15 +185,11 @@ const Chat = (props?: ChatProps) => {
         {chatType === ChatType.Private ? (
           <>
             <ChatContainer {...props} />
-            {isRecordingBot ? (
-              <></>
-            ) : (
-              <View>
-                <View style={style.chatInputContainer}>
-                  <ChatInputComponent />
-                </View>
+            <View>
+              <View style={style.chatInputContainer}>
+                <ChatInputComponent />
               </View>
-            )}
+            </View>
           </>
         ) : (
           <></>

package/template/src/components/GraphQLProvider.tsx

@@ -15,11 +15,13 @@ import {
   InMemoryCache,
   ApolloProvider,
   NormalizedCacheObject,
-  ApolloLink,
   // from,
 } from '@apollo/client';
+import {setContext} from '@apollo/client/link/context';
+// import useMount from './useMount';
 import React, {createContext, useContext, useEffect, useState} from 'react';
 import StorageContext from './StorageContext';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export const GraphQLContext = createContext<{
   client: ApolloClient<NormalizedCacheObject>;
@@ -33,57 +35,38 @@ const httpLink = createHttpLink({
   credentials: 'include',
 });
 
-const cache = new InMemoryCache();
-
-const DEFAULT_CLIENT = new ApolloClient({
-  link: httpLink,
-  cache: cache,
-});
-
-const authLink = (token: string) => {
-  /**
-   * Below we create a new link, whenever a token changes, set
-   * context with headers and forward the link so as to
-   * execute the next link in the chain
-   */
-  return new ApolloLink((operation, forward) => {
-    if (token) {
-      operation.setContext(({headers = {}}) => ({
-        headers: {
-          ...headers,
-          'X-Project-ID': $config.PROJECT_ID,
-          'X-Platform-ID': 'turnkey_web',
-          ...(token && {
-            authorization: token ? `Bearer ${token}` : '',
-          }),
-        },
-      }));
-    }
-    return forward(operation);
+const authLink = (token: string) =>
+  setContext(async (_, {headers}) => {
+    // get the authentication token from local storage if it exists
+    // return the headers to the context so httpLink can read them
+    return {
+      headers: {
+        ...headers,
+        'X-Project-ID': $config.PROJECT_ID,
+        'X-Platform-ID': 'turnkey_web',
+        ...(token && {
+          authorization: token ? `Bearer ${token}` : '',
+        }),
+      },
+    };
   });
-};
 
 const GraphQLProvider = (props: {children: React.ReactNode}) => {
   const {store} = useContext(StorageContext);
-  const [client, setClient] = useState(DEFAULT_CLIENT);
-
-  // useEffect(() => {
-  //   setClient(
-  //     new ApolloClient({
-  //       link: authLink(store?.token).concat(httpLink),
-  //       cache: new InMemoryCache(),
-  //     }),
-  //   );
-  // }, [store?.token]);
+  const [client, setClient] = useState(
+    new ApolloClient({
+      link: authLink(store?.token).concat(httpLink),
+      cache: new InMemoryCache(),
+    }),
+  );
 
   useEffect(() => {
-    if (!store?.token) {
-      return;
-    }
-    (async () => {
-      const link = authLink(store?.token).concat(httpLink);
-      setClient(new ApolloClient({link, cache}));
-    })();
+    setClient(
+      new ApolloClient({
+        link: authLink(store?.token).concat(httpLink),
+        cache: new InMemoryCache(),
+      }),
+    );
   }, [store?.token]);
 
   // const errorLink = onError(
@@ -91,7 +74,7 @@ const GraphQLProvider = (props: {children: React.ReactNode}) => {
   //     // To retry on network errors, we recommend the RetryLink
   //     // instead of the onError link. This just logs the error.
   //     if (networkError) {
-
+  
   //       // switch (err.extensions.code) {
   //       //   // Apollo Server sets code to UNAUTHENTICATED
   //       //   // when an AuthenticationError is thrown in a resolver

package/template/src/components/StorageContext.tsx

@@ -78,12 +78,12 @@ 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;
           }

package/template/src/components/ToastComponent.tsx

@@ -1,17 +1,11 @@
 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 <></>;
-  if (isRecordingBot) {
-    return <></>;
-  }
-  return <Toast ref={ref => Toast.setRef(ref)} config={ToastConfig} />;
+  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
 };
 export default ToastComponent;

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

@@ -438,12 +438,6 @@ export const videoRoomScreenShareErrorToastSubHeading = `video${room}ScreenShare
 
 export const videoRoomRecordingToastHeading = `video${room}RecordingToastHeading`;
 export const videoRoomRecordingToastSubHeading = `video${room}RecordingToastSubHeading`;
-export const videoRoomRecordingStartErrorToastHeading =
-  'videoRoomRecordingStartErrorToastHeading';
-export const videoRoomRecordingStopErrorToastHeading =
-  'videoRoomRecordingStopErrorToastHeading';
-export const videoRoomRecordingErrorToastSubHeading =
-  'videoRoomRecordingErrorToastSubHeading';
 
 export const peoplePanelUserNotFoundLabel = 'peoplePanelUserNotFoundLabel';
 export const peoplePanelStreamingRequestSectionHeader =
@@ -731,10 +725,6 @@ export interface I18nVideoCallScreenLabelsInterface {
   [videoRoomScreenShareErrorToastSubHeading]?: I18nBaseType;
   [videoRoomRecordingToastHeading]?: I18nConditionalType;
   [videoRoomRecordingToastSubHeading]?: I18nDynamicType;
-  [videoRoomRecordingStartErrorToastHeading]?: I18nBaseType;
-  [videoRoomRecordingStopErrorToastHeading]?: I18nBaseType;
-  [videoRoomRecordingErrorToastSubHeading]?: I18nBaseType;
-
   [peoplePanelUserNotFoundLabel]?: I18nBaseType;
   [peoplePanelStreamingRequestSectionHeader]?: I18nBaseType;
   [peoplePanelLivestreamingApprovalBtnText]?: I18nBaseType;
@@ -1165,10 +1155,6 @@ 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',

package/template/src/pages/VideoCall.tsx

@@ -11,7 +11,6 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import {useApolloClient} from '@apollo/client';
 import {View, StyleSheet, Text} from 'react-native';
 import {
   RtcConfigure,
@@ -50,6 +49,7 @@ 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 VideoCallScreenWrapper from './video-call/VideoCallScreenWrapper';
-import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
+import {isWeb} from '../utils/common';
 import {videoRoomStartingCallText} from '../language/default-labels/videoCallScreenLabels';
 import {useString} from '../utils/useString';
 
@@ -129,26 +129,9 @@ const VideoCall: React.FC = () => {
   const hasBrandLogo = useHasBrandLogo();
   const joiningLoaderLabel = useString(videoRoomStartingCallText)();
 
-  const client = useApolloClient();
-
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const {awake, release} = useWakeLock();
-  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);
+  const [callActive, setCallActive] = useState($config.PRECALL ? false : true);
 
   //layouts
   const layouts = useLayoutsData();
@@ -197,7 +180,6 @@ const VideoCall: React.FC = () => {
       sdkCameraDevice.deviceId || store?.activeDeviceId?.videoinput || null,
     preferredMicrophoneId:
       sdkMicrophoneDevice.deviceId || store?.activeDeviceId?.audioinput || null,
-    recordingBot: isRecordingBot ? true : false,
   });
 
   const history = useHistory();
@@ -342,7 +324,6 @@ const VideoCall: React.FC = () => {
         // TODO: These callbacks are being called twice
         SDKEvents.emit('leave');
         history.push('/');
-        client.resetStore();
       }, 0);
     },
     UserJoined: (uid: UidType) => {
@@ -447,7 +428,14 @@ const VideoCall: React.FC = () => {
                                                                 <VideoMeetingDataProvider>
                                                                   <VideoCallProvider>
                                                                     <DisableChatProvider>
-                                                                      <VideoCallScreenWrapper />
+                                                                      {$config.ENABLE_WHITEBOARD &&
+                                                                      isWebInternal() ? (
+                                                                        <WhiteboardConfigure>
+                                                                          <VideoCallScreen />
+                                                                        </WhiteboardConfigure>
+                                                                      ) : (
+                                                                        <VideoCallScreen />
+                                                                      )}
                                                                     </DisableChatProvider>
                                                                   </VideoCallProvider>
                                                                 </VideoMeetingDataProvider>

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,8 +231,6 @@ const VideoCallScreen = () => {
   const isDesktop = useIsDesktop();
   const isSmall = useIsSmall();
 
-  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
-
   return VideocallComponent ? (
     <VideocallComponent />
   ) : // ) : !isDesktop ? (
@@ -257,23 +255,16 @@ const VideoCallScreen = () => {
             )}
           </ToolbarProvider>
           <View style={style.full}>
-            <View
-              style={
-                isRecordingBot &&
-                !recordingBotUIConfig.topBar &&
-                style.zeroHeight
-              }>
-              <ToolbarProvider value={{position: ToolbarPosition.top}}>
-                {TopbarProps?.length ? (
-                  <TopbarComponent
-                    customItems={TopbarProps}
-                    includeDefaultItems={false}
-                  />
-                ) : (
-                  <TopbarComponent />
-                )}
-              </ToolbarProvider>
-            </View>
+            <ToolbarProvider value={{position: ToolbarPosition.top}}>
+              {TopbarProps?.length ? (
+                <TopbarComponent
+                  customItems={TopbarProps}
+                  includeDefaultItems={false}
+                />
+              ) : (
+                <TopbarComponent />
+              )}
+            </ToolbarProvider>
             <View
               style={[
                 style.videoView,
@@ -325,14 +316,7 @@ const VideoCallScreen = () => {
                   <>
                     <CaptionContainer />
                     <Spacer size={10} />
-                    <View
-                      style={
-                        isRecordingBot &&
-                        !recordingBotUIConfig.bottomBar &&
-                        style.zeroHeight
-                      }>
-                      <BottombarComponent />
-                    </View>
+                    <BottombarComponent />
                   </>
                 )}
               </ToolbarProvider>
@@ -378,8 +362,4 @@ const style = StyleSheet.create({
     flex: 12,
     flexDirection: 'row',
   },
-  zeroHeight: {
-    height: 0,
-    visibility: 'hidden',
-  },
 });

package/template/src/subComponents/recording/useRecording.tsx

@@ -17,31 +17,24 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import {gql, useMutation} from '@apollo/client';
+import {useParams} from '../../components/Router';
+import {PropsContext} from '../../../agora-rn-uikit';
 import Toast from '../../../react-native-toast-message';
 import {createHook} from 'customization-implementation';
 import {useString} from '../../utils/useString';
 import ChatContext from '../../components/ChatContext';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
+import useRecordingLayoutQuery from './useRecordingLayoutQuery';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useContent} from 'customization-api';
 import {trimText} from '../../utils/common';
 import {useRoomInfo} from 'customization-api';
-import StorageContext from '../../components/StorageContext';
-import {useSidePanel} from '../../utils/useSidePanel';
-import {useCaption} from '../caption/useCaption';
-import {SidePanelType} from '../SidePanelEnum';
-import {
-  ChatType,
-  useChatUIControls,
-} from '../../components/chat-ui/useChatUIControls';
-import {useIsRecordingBot} from './useIsRecordingBot';
 import {
   videoRoomRecordingToastHeading,
   videoRoomRecordingToastSubHeading,
   videoRoomUserFallbackText,
-  videoRoomRecordingStartErrorToastHeading,
-  videoRoomRecordingStopErrorToastHeading,
-  videoRoomRecordingErrorToastSubHeading,
 } from '../../language/default-labels/videoCallScreenLabels';
 
 export interface RecordingContextInterface {
@@ -58,6 +51,26 @@ const RecordingContext = createContext<RecordingContextInterface>({
   inProgress: false,
 });
 
+const START_RECORDING = gql`
+  mutation startRecordingSession(
+    $passphrase: String!
+    $secret: String
+    $config: recordingConfig!
+  ) {
+    startRecordingSession(
+      passphrase: $passphrase
+      secret: $secret
+      config: $config
+    )
+  }
+`;
+
+const STOP_RECORDING = gql`
+  mutation stopRecordingSession($passphrase: String!) {
+    stopRecordingSession(passphrase: $passphrase)
+  }
+`;
+
 /**
  * Component to start / stop Agora cloud recording.
  * Sends a control message to all users in the channel over RTM to indicate that
@@ -87,13 +100,17 @@ interface RecordingProviderProps {
  */
 
 const RecordingProvider = (props: RecordingProviderProps) => {
+  const {rtcProps} = useContext(PropsContext);
   const {setRecordingActive, isRecordingActive, callActive} = props?.value;
   const {
-    data: {isHost, roomId},
+    data: {isHost},
   } = useRoomInfo();
   const [inProgress, setInProgress] = useState(false);
   const [uidWhoStarted, setUidWhoStarted] = useState(0);
   const {defaultContent, activeUids} = useContent();
+  const {phrase} = useParams<{phrase: string}>();
+  const [startRecordingQuery] = useMutation(START_RECORDING);
+  const [stopRecordingQuery] = useMutation(STOP_RECORDING);
   const prevRecordingState = usePrevious<{isRecordingActive: boolean}>({
     isRecordingActive,
   });
@@ -101,41 +118,11 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     videoRoomRecordingToastHeading,
   );
   const subheading = useString(videoRoomRecordingToastSubHeading);
-
-  const headingStartError = useString(
-    videoRoomRecordingStartErrorToastHeading,
-  )();
-  const headingStopError = useString(videoRoomRecordingStopErrorToastHeading)();
-  const subheadingError = useString(videoRoomRecordingErrorToastSubHeading)();
-
   const userlabel = useString(videoRoomUserFallbackText)();
 
+  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
-  const {store} = React.useContext(StorageContext);
-
-  const {setChatType} = useChatUIControls();
-  const {setSidePanel} = useSidePanel();
-  const {setIsCaptionON} = useCaption();
-  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
-
-  const setRecordingBotUI = () => {
-    if (isRecordingBot) {
-      if (recordingBotUIConfig?.chat && $config.CHAT) {
-        setSidePanel(SidePanelType.Chat);
-        setChatType(ChatType.Group);
-      }
-      if (recordingBotUIConfig.stt && $config.ENABLE_STT) {
-        setIsCaptionON(true);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (callActive) {
-      setRecordingBotUI();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [callActive]);
+  const {screenShareData} = useScreenContext();
 
   React.useEffect(() => {
     events.on(EventNames.RECORDING_ATTRIBUTE, data => {
@@ -193,36 +180,25 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     }
   }, [isRecordingActive, callActive, isHost]);
 
-  const showErrorToast = (text1: string, text2?: string) => {
-    Toast.show({
-      leadingIconName: 'alert',
-      type: 'error',
-      text1: text1,
-      text2: text2 ? text2 : '',
-      visibilityTime: 3000,
-      primaryBtn: null,
-      secondaryBtn: null,
-      leadingIcon: null,
-    });
-  };
-
   const startRecording = () => {
-    const passphrase = roomId.host || '';
-    console.log('web-recording - start recording API called');
-    fetch(`${$config.BACKEND_ENDPOINT}/v1/recording/start`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        authorization: store.token ? `Bearer ${store.token}` : '',
+    setInProgress(true);
+    // If recording is not going on, start the recording by executing the graphql query
+    startRecordingQuery({
+      variables: {
+        passphrase: phrase,
+        secret:
+          rtcProps.encryption && rtcProps.encryption.key
+            ? rtcProps.encryption.key
+            : '',
+        config: {
+          resolution: 'SD360p',
+          trigger: 'AUTO',
+        },
       },
-      body: JSON.stringify({
-        passphrase: roomId.host,
-        url: `${$config.FRONTEND_ENDPOINT}/${passphrase}`,
-      }),
     })
-      .then((res: any) => {
+      .then(res => {
         setInProgress(false);
-        if (res.status === 200) {
+        if (res.data.startRecordingSession === 'success') {
           /**
            * 1. Once the backend sucessfuly starts recording, send message
            * in the channel indicating that cloud recording is now active.
@@ -238,10 +214,22 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           // 2. set the local recording state to true to update the UI
           setUidWhoStarted(localUid);
           setRecordingActive(true);
-        } else if (res.status === 500) {
-          showErrorToast(headingStartError, subheadingError);
-        } else {
-          showErrorToast(headingStartError);
+          // 3. set the presenter mode if screen share is active
+          // 3.a Get the most recent screenshare uid
+          const sorted = Object.entries(screenShareData)
+            .filter(el => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
+            .sort((a, b) => b[1].ts - a[1].ts);
+
+          const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
+          if (activeScreenshareUid) {
+            console.log(
+              'screenshare: Executing presenter query for screenuid',
+              activeScreenshareUid,
+            );
+            executePresenterQuery(parseInt(activeScreenshareUid));
+          } else {
+            executeNormalQuery();
+          }
         }
       })
       .catch(err => {
@@ -268,21 +256,11 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       activeUids.indexOf(uidWhoStarted) === -1
     ) {
       setInProgress(true);
-      // If recording is already going on, stop the recording by executing the below query.
-      console.log('web-recording - stop recording API called');
-      fetch(`${$config.BACKEND_ENDPOINT}/v1/recording/stop`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          authorization: store.token ? `Bearer ${store.token}` : '',
-        },
-        body: JSON.stringify({
-          passphrase: roomId.host,
-        }),
-      })
+      // If recording is already going on, stop the recording by executing the graphql query.
+      stopRecordingQuery({variables: {passphrase: phrase}})
         .then(res => {
           setInProgress(false);
-          if (res.status === 200) {
+          if (res.data.stopRecordingSession === 'success') {
             /**
              * 1. Once the backend sucessfuly starts recording, send message
              * in the channel indicating that cloud recording is now inactive.
@@ -297,10 +275,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
             );
             // 2. set the local recording state to false to update the UI
             setRecordingActive(false);
-          } else if (res.status === 500) {
-            showErrorToast(headingStopError, subheadingError);
-          } else {
-            showErrorToast(headingStopError);
           }
         })
         .catch(err => {

package/template/src/utils/useIsLocalUserSpeaking.ts

@@ -5,7 +5,6 @@ import {useAsyncEffect} from './useAsyncEffect';
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
-import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 const useIsLocalUserSpeaking = () => {
   const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
@@ -16,7 +15,6 @@ const useIsLocalUserSpeaking = () => {
   const speechRef = useRef(null);
   const audioRef = useRef(audio);
   const audioTrackRef = useRef(null);
-  const {isRecordingBot} = useIsRecordingBot();
 
   useEffect(() => {
     audioRef.current = audio;
@@ -42,9 +40,6 @@ const useIsLocalUserSpeaking = () => {
 
   useEffect(() => {
     LocalEventEmitter.on(LocalEventsEnum.MIC_CHANGED, () => {
-      if (isRecordingBot) {
-        return;
-      }
       listenForSpeaker();
     });
   }, []);
@@ -80,7 +75,7 @@ const useIsLocalUserSpeaking = () => {
   };
 
   useAsyncEffect(async () => {
-    if ($config.ACTIVE_SPEAKER && !isRecordingBot) {
+    if ($config.ACTIVE_SPEAKER) {
       await listenForSpeaker();
       return () => {
         try {

package/template/agora-rn-uikit/src/Utils/isBotUser.ts

@@ -1,16 +0,0 @@
-export function isBotUser(args: [uid: number, elapsed: number]): boolean {
-  console.log('supriya inside UserJoined verifying if bot user', args[0]);
-  // STT bot
-  if (args[0] === 111111) {
-    return true;
-  }
-  // Web Recording bot (userUid)
-  if (args[0] === 100000) {
-    return true;
-  }
-  // Web Recording bot (screenUid)
-  if (args[0] === 100001) {
-    return true;
-  }
-  return false;
-}

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

@@ -1,42 +0,0 @@
-/*
-********************************************
- 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/pages/video-call/VideoCallScreenWrapper.tsx

@@ -1,41 +0,0 @@
-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 && isWebInternal()) {
-    return (
-      <WhiteboardConfigure>
-        {rtcProps?.recordingBot ? (
-          <VideoCallScreenWithRecordingBot />
-        ) : (
-          <VideoCallScreen />
-        )}
-      </WhiteboardConfigure>
-    );
-  } else if (rtcProps?.recordingBot) {
-    return <VideoCallScreenWithRecordingBot />;
-  }
-  return <VideoCallScreen />;
-};
-
-export default VideoCallScreenWrapper;

package/template/src/subComponents/recording/useIsRecordingBot.tsx

@@ -1,38 +0,0 @@
-import {useSearchParams} from '../../utils/useSearchParams';
-
-interface RecordingBotUIConfig {
-  chat: boolean;
-  topBar: boolean;
-  bottomBar: boolean;
-  stt: boolean;
-}
-
-const regexPattern = new RegExp('true');
-
-export function useIsRecordingBot() {
-  // Reading and setting URL params
-  const isRecordingBot = useSearchParams().get('bot');
-  const recordingBotToken = useSearchParams().get('token');
-  const recordingBotName = useSearchParams().get('user_name');
-  const isRecordingBotRoute = isRecordingBot && recordingBotToken;
-
-  const chatParam = useSearchParams().get('chat');
-  const topBarParam = useSearchParams().get('topBar');
-  const bottomBarParam = useSearchParams().get('bottomBar');
-  const sttParam = useSearchParams().get('stt');
-
-  const recordingBotUIConfig: RecordingBotUIConfig = {
-    chat: chatParam ? regexPattern.test(chatParam) : true,
-    topBar: topBarParam ? regexPattern.test(topBarParam) : false,
-    bottomBar: bottomBarParam ? regexPattern.test(bottomBarParam) : false,
-    stt: sttParam ? regexPattern.test(sttParam) : false,
-  };
-
-  return {
-    isRecordingBotRoute,
-    isRecordingBot,
-    recordingBotToken,
-    recordingBotName,
-    recordingBotUIConfig,
-  };
-}

package/template/src/utils/useSearchParams.tsx

@@ -1,18 +0,0 @@
-import {useLocation} from '../components/Router';
-import {useMemo} from 'react';
-
-interface ReadOnlyURLSearchParams extends URLSearchParams {
-  append: never;
-  set: never;
-  delete: never;
-  sort: never;
-}
-
-export function useSearchParams() {
-  const {search} = useLocation();
-
-  return useMemo(
-    () => new URLSearchParams(search) as ReadOnlyURLSearchParams,
-    [search],
-  );
-}