agora-appbuilder-core 4.0.0-beta.11 → 4.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.11",
+  "version": "4.0.0-beta.13",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-implementation/createHook.ts

@@ -9,25 +9,43 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, { useContext } from 'react';
+import React, {useContext} from 'react';
 /**
- * 
+ *
  * @param context - any context data which we want to extract the data.
  * @returns useContextWithSelector in which we can pass selector function to extract data from the context that we passed.
  */
 function createHook<T>(context: React.Context<T>) {
-
   function useContextWithSelector<U>(contextSelector: (data: T) => U): U;
   function useContextWithSelector(): T;
   /**
-   * 
+   *
    * @param contextSelector is used to pass callback function used to select data from the context data
    * @returns the data selected from the context
    */
   function useContextWithSelector<U>(contextSelector?: (data: T) => U): U | T {
     const data = useContext(context);
-    return contextSelector ? contextSelector(data) : data
+    return contextSelector ? contextSelector(data) : data;
   }
   return useContextWithSelector;
 }
-export default createHook;
+
+export function createConcealedHook<T, V>(
+  context: React.Context<T>,
+  preselect: (data: T) => V,
+) {
+  function useContextWithSelector<U>(contextSelector: (data: V) => U): U;
+  function useContextWithSelector(): V;
+  /**
+   *
+   * @param contextSelector is used to pass callback function used to select data from the context data
+   * @returns the data selected from the context
+   */
+  function useContextWithSelector<U>(contextSelector?: (data: V) => U): U | V {
+    const data = useContext(context);
+    return contextSelector ? contextSelector(preselect(data)) : preselect(data);
+  }
+  return useContextWithSelector;
+}
+
+export default createHook;

package/template/customization-implementation/index.ts

@@ -1,4 +1,4 @@
-export {default as createHook} from './createHook';
+export {default as createHook, createConcealedHook} from './createHook';
 export {CustomizationProvider, useCustomization} from './useCustomization';
 export type {CustomizationProviderProps} from './useCustomization';
 export {default as customizationConfig} from 'customization';

package/template/customization-implementation/useCustomization.tsx

@@ -9,22 +9,20 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {CustomizationApiInterface} from 'customization-api';
 import customizationConfig from 'customization';
 import createHook from './createHook';
+import {SdkApiContext} from '../src/components/SdkApiContext';
 
 const CustomizationContext: React.Context<CustomizationApiInterface> =
   React.createContext(customizationConfig);
 
-export interface CustomizationProviderProps {
-  children: React.ReactNode;
-  value: CustomizationApiInterface;
-}
+const CustomizationProvider: React.FC = (props) => {
+  const {customize: userCustomization} = useContext(SdkApiContext);
 
-const CustomizationProvider = (props: CustomizationProviderProps) => {
   return (
-    <CustomizationContext.Provider value={props.value}>
+    <CustomizationContext.Provider value={userCustomization.customization}>
       {props.children}
     </CustomizationContext.Provider>
   );

package/template/index.wsdk.tsx

@@ -12,12 +12,19 @@ export * from 'customization-implementation';
 
 interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
 
+const clearEvent = {
+  clear: () => {},
+};
+
 const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = {
   ...AppBuilderSdkApi,
   // Override customize function for web-sdk
   customize: (customization) => {
-    SDKEvents.on('addFpeInit', () => {
+    SDKEvents.emit('addFpe', customization);
+    clearEvent.clear = SDKEvents.on('addFpeInit', () => {
+      console.log('addFpeInit called');
       SDKEvents.emit('addFpe', customization);
+      clearEvent.clear();
     });
   },
 };

package/template/src/App.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
 import {Platform} from 'react-native';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';

package/template/src/AppWrapper.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {Router} from './components/Router';
 import Navigation from './components/Navigation';
 import {StorageProvider} from './components/StorageContext';
@@ -32,6 +32,8 @@ import {LanguageProvider} from './language/useLanguage';
 import {PropsConsumer} from 'agora-rn-uikit';
 import ToastComponent from './components/ToastComponent';
 import {ToastContext, ToastProvider} from './components/useToast';
+import {SdkApiContext} from './components/SdkApiContext';
+import isSDK from './utils/isSDK';
 
 interface AppWrapperProps {
   children: React.ReactNode;
@@ -73,6 +75,8 @@ const AppWrapper = (props: AppWrapperProps) => {
     return React.Fragment;
   });
 
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
   return (
     <AppRoot>
       <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
@@ -88,7 +92,13 @@ const AppWrapper = (props: AppWrapperProps) => {
             </ToastContext.Consumer>
             <StorageProvider>
               <GraphQLProvider>
-                <Router>
+                <Router
+                  /*@ts-ignore Router will be memory Router in sdk*/
+                  initialEntries={[
+                    isSDK && SdkJoinState.phrase
+                      ? `/${SdkJoinState.phrase}`
+                      : '',
+                  ]}>
                   <SessionProvider>
                     <ColorConfigure>
                       <DimensionProvider>

package/template/src/SDKAppWrapper.tsx

@@ -1,86 +1,82 @@
-import React, {useEffect, useState} from 'react';
-import {CustomizationApiInterface, customize} from 'customization-api';
+import React from 'react';
 import {
-  customizationConfig,
-  CustomizationProvider,
-} from 'customization-implementation';
-import SDKEvents from './utils/SdkEvents';
-import {Unsubscribe} from 'nanoevents';
+  CustomizationApiInterface,
+  customize,
+  MeetingInfoContextInterface,
+  customEvents,
+} from 'customization-api';
+import {CustomizationProvider} from 'customization-implementation';
+import SDKEvents, {userEventsMapInterface} from './utils/SdkEvents';
+import SDKMethodEventsManager from './utils/SdkMethodEvents';
 import App from './App';
+import SdkApiContextProvider from './components/SdkApiContext';
+import {Unsubscribe} from 'nanoevents';
 
-export interface userEventsMapInterface {
-  leave: () => void;
-  create: (
-    hostPhrase: string,
-    attendeePhrase?: string,
-    pstnNumer?: {
-      number: string;
-      pin: string;
-    },
-  ) => void;
-  'ready-to-join': (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
-  join: (
-    meetingTitle: string,
-    devices: MediaDeviceInfo[],
-    isHost: boolean,
-  ) => void;
-}
+// type makeAsync<T extends (...p: any) => void> = (
+//   ...p: Parameters<T>
+// ) => PromiseLike<ReturnType<T>>;
+//
+// type takeOnlyFirstParam<T extends (...p: any) => void> = (
+//   p: Parameters<T>[0],
+// ) => ReturnType<T>;
 
-export interface AppBuilderSdkApiInterface {
+export interface SdkMethodEvents {
   customize: (customization: CustomizationApiInterface) => void;
-  createCustomization: (
-    customization: CustomizationApiInterface,
-  ) => CustomizationApiInterface;
-  join: (roomid: string) => Promise<void>;
-  on: <T extends keyof userEventsMapInterface>(
-    userEventName: T,
-    callBack: userEventsMapInterface[T],
-  ) => Unsubscribe;
+  join(
+    roomid: string | Partial<MeetingInfoContextInterface['data']>,
+    skipPrecall?: boolean,
+  ): MeetingInfoContextInterface['data'];
 }
 
-let joinInit = false;
+// interface AppBuilderSdkApiInterface {
+//   customize: makeAsync<SdkMethodEvents['customize']>;
+//   joinRoom: makeAsync<takeOnlyFirstParam<SdkMethodEvents['join']>>;
+//   joinPrecall: makeAsync<takeOnlyFirstParam<SdkMethodEvents['join']>>;
+//   createCustomization: (
+//     customization: CustomizationApiInterface,
+//   ) => CustomizationApiInterface;
+//   on: <T extends keyof userEventsMapInterface>(
+//     userEventName: T,
+//     callBack: userEventsMapInterface[T],
+//   ) => Unsubscribe;
+// }
 
-export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
-  customize: (customization: CustomizationApiInterface) => {
-    SDKEvents.emit('addFpe', customization);
+export const AppBuilderSdkApi = {
+  customize: async (customization: CustomizationApiInterface) => {
+    return await SDKMethodEventsManager.emit('customize', customization);
+  },
+  customEvents: customEvents,
+  join: async (roomDetails: string) => {
+    await SDKMethodEventsManager.emit('join', roomDetails, false);
+  },
+  joinRoom: async (
+    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
+  ) => {
+    return await SDKMethodEventsManager.emit('join', roomDetails, true);
+  },
+  joinPrecall: async (
+    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
+  ) => {
+    const t = await SDKMethodEventsManager.emit('join', roomDetails);
+    return t as unknown as [MeetingInfoContextInterface['data'], () => {}];
   },
-  join: (roomid: string) =>
-    new Promise((resolve, reject) => {
-      if (joinInit) {
-        console.log('[SDKEvents] Join listener emitted preemptive');
-        SDKEvents.emit('joinMeetingWithPhrase', roomid, resolve, reject);
-      }
-      SDKEvents.on('joinInit', () => {
-        if (!joinInit) {
-          console.log('[SDKEvents] Join listener emitted');
-          SDKEvents.emit('joinMeetingWithPhrase', roomid, resolve, reject);
-          joinInit = true;
-        }
-      });
-    }),
   createCustomization: customize,
-  on: (userEventName, cb) => {
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    cb: userEventsMapInterface[T],
+  ): Unsubscribe => {
     console.log('SDKEvents: Event Registered', userEventName);
     return SDKEvents.on(userEventName, cb);
   },
 };
 
 const SDKAppWrapper = () => {
-  const [fpe, setFpe] = useState(customizationConfig);
-  useEffect(() => {
-    SDKEvents.on('addFpe', (sdkFpeConfig) => {
-      console.log('SDKEvents: addFpe event called');
-      setFpe(sdkFpeConfig);
-    });
-    SDKEvents.emit('addFpeInit');
-    // Join event consumed in Create.tsx
-  }, []);
   return (
-    <>
-      <CustomizationProvider value={fpe}>
+    <SdkApiContextProvider>
+      <CustomizationProvider>
         <App />
       </CustomizationProvider>
-    </>
+    </SdkApiContextProvider>
   );
 };
 

package/template/src/components/DeviceConfigure.tsx

@@ -45,11 +45,15 @@ type deviceKind = deviceInfo['kind'];
 
 const DeviceConfigure: React.FC<Props> = (props: any) => {
   const rtc = useRtc();
-  const [selectedCam, setUiSelectedCam] = useState('');
-  const [selectedMic, setUiSelectedMic] = useState('');
-  const [selectedSpeaker, setUiSelectedSpeaker] = useState('');
+  const [uiSelectedCam, setUiSelectedCam] = useState('');
+  const [uiSelectedMic, setUiSelectedMic] = useState('');
+  const [uiSelectedSpeaker, setUiSelectedSpeaker] = useState('');
   const [deviceList, setDeviceList] = useState<deviceInfo[]>([]);
 
+  const micSelectInProgress = useRef(false);
+  const camSelectInProgress = useRef(false);
+  const speakerSelectInProgress = useRef(false);
+
   const {primaryColor} = useContext(ColorContext);
   const {store, setStore} = useContext(StorageContext);
   const {rememberedDevicesList, activeDeviceId} = store;
@@ -241,7 +245,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
     if (activeDeviceId && deviceList.length > 0) {
       // If stream exists and selected devices are empty, check for devices again
-      if (!selectedCam || selectedCam.trim().length == 0) {
+      if (!uiSelectedCam || uiSelectedCam.trim().length == 0) {
         log(logTag, 'cam: Device list populated but No selected cam');
         const currentVideoDevice = getAgoraTrackDeviceId('video');
         const {videoinput: storedVideoInput} = activeDeviceId;
@@ -259,7 +263,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         }
       }
 
-      if (!selectedMic || selectedMic.trim().length == 0) {
+      if (!uiSelectedMic || uiSelectedMic.trim().length == 0) {
         log(logTag, 'mic: Device list populated but No selected mic');
         const currentAudioDevice = getAgoraTrackDeviceId('audio');
         const {audioinput: storedAudioInput} = activeDeviceId;
@@ -277,7 +281,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         }
       }
 
-      if (!selectedSpeaker || selectedSpeaker.trim().length == 0) {
+      if (!uiSelectedSpeaker || uiSelectedSpeaker.trim().length == 0) {
         log(logTag, 'speaker: Device list populated but No selected speaker');
         const {audiooutput: storedAudioOutput} = activeDeviceId;
         const defaultSpeaker = deviceList.find(
@@ -323,17 +327,17 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     const {logTag, currentDevice, setCurrentDevice} = {
       audioinput: {
         logTag: 'mic: on-microphone-changed',
-        currentDevice: selectedMic,
+        currentDevice: uiSelectedMic,
         setCurrentDevice: setSelectedMic,
       },
       audiooutput: {
         logTag: 'speaker: on-speaker-changed',
-        currentDevice: selectedSpeaker,
+        currentDevice: uiSelectedSpeaker,
         setCurrentDevice: setSelectedSpeaker,
       },
       videoinput: {
         logTag: 'cam: on-camera-changed',
-        currentDevice: selectedCam,
+        currentDevice: uiSelectedCam,
         setCurrentDevice: setSelectedCam,
       },
     }[changedDevice.kind];
@@ -398,27 +402,45 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   useEffect(() => {
     log('previous devicelist updated', deviceList);
     AgoraRTC.onMicrophoneChanged = commonOnChangedEvent;
-  }, [selectedMic, deviceList]);
+    return () => {
+      AgoraRTC.onMicrophoneChanged = null;
+    };
+  }, [uiSelectedMic, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onPlaybackDeviceChanged = commonOnChangedEvent;
-  }, [selectedSpeaker, deviceList]);
+    return () => {
+      AgoraRTC.onPlaybackDeviceChanged = null;
+    };
+  }, [uiSelectedSpeaker, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onCameraChanged = commonOnChangedEvent;
-  }, [selectedCam, deviceList]);
+    return () => {
+      AgoraRTC.onCameraChanged = null;
+    };
+  }, [uiSelectedCam, deviceList]);
 
   const setSelectedMic = (deviceId: deviceId) => {
     log('mic: setting to', deviceId);
     return new Promise((res, rej) => {
+      if (micSelectInProgress.current) {
+        const e = new Error('Change already in progress');
+        console.error('DeviceConfigure: Error setting mic', e);
+        rej(e);
+        return;
+      }
+      micSelectInProgress.current = true;
       RtcEngine.changeMic(
         deviceId,
         () => {
           syncSelectedDeviceUi('audioinput');
           updateActiveDeviceId('audioinput', deviceId);
+          micSelectInProgress.current = false;
           res(null);
         },
         (e: any) => {
+          micSelectInProgress.current = false;
           console.error('DeviceConfigure: Error setting mic', e);
           rej(e);
         },
@@ -429,14 +451,23 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const setSelectedCam = (deviceId: deviceId) => {
     log('cam: setting  to', deviceId);
     return new Promise((res, rej) => {
+      if (camSelectInProgress.current) {
+        const e = new Error('Change already in progress');
+        console.error('DeviceConfigure: Error setting webcam', e);
+        rej(e);
+        return;
+      }
+      camSelectInProgress.current = true;
       RtcEngine.changeCamera(
         deviceId,
         () => {
           syncSelectedDeviceUi('videoinput');
           updateActiveDeviceId('videoinput', deviceId);
+          camSelectInProgress.current = false;
           res(null);
         },
         (e: any) => {
+          camSelectInProgress.current = false;
           console.error('Device Configure: Error setting webcam', e);
           rej(e);
         },
@@ -447,16 +478,25 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const setSelectedSpeaker = (deviceId: deviceId) => {
     log('speaker: setting to', deviceId);
     return new Promise((res, rej) => {
+      if (speakerSelectInProgress.current) {
+        const e = new Error('Change already in progress');
+        console.error('DeviceConfigure: Error setting speaker', e);
+        rej(e);
+        return;
+      }
+      speakerSelectInProgress.current = true;
       RtcEngine.changeSpeaker(
         deviceId,
         () => {
           setUiSelectedSpeaker(deviceId);
           updateActiveDeviceId('audiooutput', deviceId);
+          speakerSelectInProgress.current = false;
           res(null);
         },
         (e: any) => {
+          speakerSelectInProgress.current = false;
           console.error('Device Configure: Error setting speaker', e);
-          rej(selectedSpeaker);
+          rej(uiSelectedSpeaker);
         },
       );
     });
@@ -517,11 +557,11 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   return (
     <DeviceContext.Provider
       value={{
-        selectedCam,
+        selectedCam: uiSelectedCam,
         setSelectedCam,
-        selectedMic,
+        selectedMic: uiSelectedMic,
         setSelectedMic,
-        selectedSpeaker,
+        selectedSpeaker: uiSelectedSpeaker,
         setSelectedSpeaker,
         deviceList,
         setDeviceList,

package/template/src/components/Navigation.tsx

@@ -9,9 +9,23 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useEffect, useContext} from 'react';
+import {SdkApiContext} from './SdkApiContext';
+import {useHistory} from './Router';
+import isSDK from '../utils/isSDK';
 
 const Navigation = () => {
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
+  const history = useHistory();
+
+  useEffect(() => {
+    if (isSDK() && SdkJoinState.initialized) {
+      if (SdkJoinState.phrase) {
+        history.push(`/${SdkJoinState.phrase}`);
+      }
+    }
+  }, [SdkJoinState]);
   return <></>;
 };
 

package/template/src/components/RTMConfigure.tsx

@@ -114,6 +114,7 @@ const RtmConfigure = (props: any) => {
         uid: localUid.toString(),
         token: rtcProps.rtm,
       });
+      RTMEngine.getInstance().setLocalUID(localUid.toString());
       timerValueRef.current = 5;
       setAttribute();
     } catch (error) {
@@ -144,7 +145,12 @@ const RtmConfigure = (props: any) => {
 
   const joinChannel = async () => {
     try {
-      await engine.current.joinChannel(rtcProps.channel);
+      if (RTMEngine.getInstance().channelUid !== rtcProps.channel) {
+        await engine.current.joinChannel(rtcProps.channel);
+        RTMEngine.getInstance().setChannelId(rtcProps.channel);
+      } else {
+        console.log('RTM already joined channel skipping');
+      }
       timerValueRef.current = 5;
       await getMembers();
     } catch (error) {
@@ -260,7 +266,7 @@ const RtmConfigure = (props: any) => {
 
   const init = async () => {
     engine.current = RTMEngine.getInstance().engine;
-    RTMEngine.getInstance().setLoginInfo(localUid.toString(), rtcProps.channel);
+    RTMEngine.getInstance();
 
     engine.current.on('connectionStateChanged', (evt: any) => {
       //console.log(evt);
@@ -414,6 +420,17 @@ const RtmConfigure = (props: any) => {
       const {payload, persistLevel, source} = JSON.parse(value);
       console.log('CUSTOM_EVENT_API:  emiting event..: ');
       EventUtils.emitEvent(evt, source, {payload, persistLevel, sender, ts});
+      // Because async gets evaluated in a different order when in an sdk
+      if (evt === 'name') {
+        setTimeout(() => {
+          EventUtils.emitEvent(evt, source, {
+            payload,
+            persistLevel,
+            sender,
+            ts,
+          });
+        }, 200);
+      }
     } catch (error) {
       console.log('CUSTOM_EVENT_API: error while emiting event: ', error);
     }

package/template/src/components/SdkApiContext.tsx

@@ -0,0 +1,161 @@
+import React, {createContext, useState, useEffect} from 'react';
+import SDKMethodEventsManager, {
+  _InternalSDKMethodEventsMap,
+} from '../utils/SdkMethodEvents';
+import {
+  validateMeetingInfoData,
+  MeetingInfoContextInterface,
+} from './meeting-info/useMeetingInfo';
+import {CustomizationApiInterface} from 'customization-api';
+import {Unsubscribe} from 'nanoevents';
+
+type SdkApiContextInterface = {
+  join:
+    | {
+        initialized: true;
+        phrase: string;
+        meetingDetails?: Partial<MeetingInfoContextInterface['data']>;
+        skipPrecall: boolean;
+        promise: {
+          res: Parameters<_InternalSDKMethodEventsMap['join']>[0];
+          rej: Parameters<_InternalSDKMethodEventsMap['join']>[1];
+        };
+      }
+    | {
+        initialized: false;
+      };
+  customize: {
+    customization?: CustomizationApiInterface;
+    promise?: {
+      res: Parameters<_InternalSDKMethodEventsMap['customize']>[0];
+      rej: Parameters<_InternalSDKMethodEventsMap['customize']>[1];
+    };
+  };
+  clearState: (key: keyof _InternalSDKMethodEventsMap) => void;
+};
+
+const SdkApiInitState: SdkApiContextInterface = {
+  join: {
+    initialized: false,
+  },
+  customize: {},
+  clearState: () => {},
+};
+
+export const SDK_MEETING_TAG = 'sdk-initiated-meeting';
+
+export const SdkApiContext = createContext(SdkApiInitState);
+
+let moduleEventsUnsub: any[] = [];
+
+type commonEventHandlers = {
+  [K in keyof _InternalSDKMethodEventsMap]?: (
+    setter: (p: SdkApiContextInterface[K]) => void,
+  ) => Unsubscribe;
+};
+
+const commonEventHandlers: commonEventHandlers = {
+  join: (setter) => {
+    return SDKMethodEventsManager.on(
+      'join',
+      (res, rej, roomDetail, skipPrecall) => {
+        if (typeof roomDetail === 'object') {
+          if (!validateMeetingInfoData(roomDetail)) {
+            rej(new Error('Invalid meeting details'));
+            return;
+          }
+          setter({
+            initialized: true,
+            phrase: SDK_MEETING_TAG,
+            meetingDetails: roomDetail,
+            skipPrecall,
+            promise: {res, rej},
+          });
+        } else if (
+          typeof roomDetail === 'string' &&
+          roomDetail.trim().length > 0
+        ) {
+          setter({
+            initialized: true,
+            phrase: roomDetail,
+            skipPrecall,
+            promise: {res, rej},
+          });
+        } else {
+          rej(new Error('Invalid room detail'));
+        }
+      },
+    );
+  },
+  customize: (setter) => {
+    return SDKMethodEventsManager.on('customize', (res, rej, customization) => {
+      setter({
+        customization: customization,
+      });
+      res();
+    });
+  },
+};
+
+const registerListener = () => {
+  moduleEventsUnsub = [
+    commonEventHandlers.customize((state) => {
+      SdkApiInitState.customize = state;
+    }),
+    commonEventHandlers.join((state) => {
+      SdkApiInitState.join = state;
+    }),
+  ];
+};
+
+const deRegisterListener = () => {
+  moduleEventsUnsub.forEach((v) => v());
+};
+
+const SdkApiContextProvider: React.FC = (props) => {
+  const [joinState, setJoinState] = useState(SdkApiInitState.join);
+  const [userCustomization, setUserCustomization] = useState(
+    SdkApiInitState.customize,
+  );
+
+  const clearState: SdkApiContextInterface['clearState'] = (key) => {
+    switch (key) {
+      case 'join':
+        setJoinState(SdkApiInitState.join);
+        return;
+      case 'customize':
+        setUserCustomization(SdkApiInitState.customize);
+    }
+  };
+
+  useEffect(() => {
+    deRegisterListener();
+    console.log('[SDKContext] join state is ', joinState);
+    const unsub = [
+      commonEventHandlers.customize((state) => {
+        setUserCustomization(state);
+      }),
+      commonEventHandlers.join((state) => {
+        setJoinState(state);
+      }),
+    ];
+
+    return () => {
+      unsub.forEach((v) => v());
+      registerListener();
+    };
+  }, []);
+
+  return (
+    <SdkApiContext.Provider
+      value={{
+        join: joinState,
+        customize: userCustomization,
+        clearState,
+      }}>
+      {props.children}
+    </SdkApiContext.Provider>
+  );
+};
+
+export default SdkApiContextProvider;

package/template/src/components/meeting-info/useMeetingInfo.tsx

@@ -36,6 +36,30 @@ export interface MeetingInfoContextInterface {
   };
 }
 
+export const validateMeetingInfoData = (
+  meetingInfo: Partial<MeetingInfoContextInterface['data']>,
+) => {
+  const {
+    channel,
+    encryptionSecret,
+    rtmToken,
+    screenShareToken,
+    screenShareUid,
+    token,
+    uid,
+  } = meetingInfo;
+  if ($config.ENCRYPTION_ENABLED && !encryptionSecret) {
+    return false;
+  }
+  if ($config.SCREEN_SHARING && (!screenShareToken || !screenShareUid)) {
+    return false;
+  }
+  if (!channel || !rtmToken || !token || !uid) {
+    return false;
+  }
+  return true;
+};
+
 export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
   isJoinDataFetched: false,
   data: {

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

@@ -9,9 +9,15 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {createContext} from 'react';
+import React, {createContext, useContext, useEffect} from 'react';
 import {createHook} from 'customization-implementation';
 import {ApolloError} from '@apollo/client';
+import {SdkApiContext} from '../SdkApiContext';
+import {
+  useMeetingInfo,
+} from '../meeting-info/useMeetingInfo';
+import SDKEvents from '../../utils/SdkEvents';
+import DeviceContext from '../DeviceContext';
 
 export interface PreCallContextInterface {
   callActive: boolean;
@@ -46,6 +52,24 @@ interface PreCallProviderProps {
 }
 
 const PreCallProvider = (props: PreCallProviderProps) => {
+  const {join} = useContext(SdkApiContext);
+  const meetingInfo = useMeetingInfo();
+  const {deviceList} = useContext(DeviceContext);
+
+  useEffect(() => {
+    if (join.phrase) {
+      //@ts-ignore
+      join?.promise?.res([
+        meetingInfo.data,
+        () => {
+          props.value.setCallActive(true);
+        },
+      ]);
+    }
+
+    SDKEvents.emit('ready-to-join', meetingInfo.data.meetingTitle, deviceList);
+  }, []);
+
   return (
     <PreCallContext.Provider value={{...props.value}}>
       {props.children}

package/template/src/components/useVideoCall.tsx

@@ -10,10 +10,14 @@
 *********************************************
 */
 
-import React, {SetStateAction, useState} from 'react';
+import React, {SetStateAction, useState, useContext, useEffect} from 'react';
 import {createHook} from 'customization-implementation';
 import InvitePopup from './popups/InvitePopup';
 import StopRecordingPopup from './popups/StopRecordingPopup';
+import {SdkApiContext} from './SdkApiContext';
+import {useRtc, useMeetingInfo} from 'customization-api';
+import SDKEvents from '../utils/SdkEvents';
+import DeviceContext from './DeviceContext';
 
 export interface VideoCallContextInterface {
   showInvitePopup: boolean;
@@ -40,6 +44,21 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
   const [showLayoutOption, setShowLayoutOption] = useState(false);
   const [showInvitePopup, setShowInvitePopup] = useState(false);
   const [showStopRecordingPopup, setShowStopRecordingPopup] = useState(false);
+  const {join} = useContext(SdkApiContext);
+  const meetingInfo = useMeetingInfo();
+  const {deviceList} = useContext(DeviceContext);
+
+  useEffect(() => {
+    if (join.initialized && join.phrase) {
+      join.promise.res(meetingInfo.data);
+    }
+    SDKEvents.emit(
+      'join',
+      meetingInfo.data.meetingTitle,
+      deviceList,
+      meetingInfo.data.isHost,
+    );
+  }, []);
   return (
     <VideoCallContext.Provider
       value={{

package/template/src/pages/Create.tsx

@@ -28,9 +28,7 @@ import {useString} from '../utils/useString';
 import useCreateMeeting from '../utils/useCreateMeeting';
 import {CreateProvider} from './create/useCreate';
 import useJoinMeeting from '../utils/useJoinMeeting';
-import SDKEvents from '../utils/SdkEvents';
 import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 import Input from '../atoms/Input';
 import Toggle from '../atoms/Toggle';
 import Card from '../atoms/Card';
@@ -42,6 +40,7 @@ import Tooltip from '../atoms/Tooltip';
 import ImageIcon from '../atoms/ImageIcon';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {randomNameGenerator} from '../utils';
+import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 
 const Create = () => {
   const {CreateComponent} = useCustomization((data) => {
@@ -121,23 +120,7 @@ const Create = () => {
       document.title = $config.APP_NAME;
     }
     console.log('[SDKEvents] Join listener registered');
-    const unbind = SDKEvents.on(
-      'joinMeetingWithPhrase',
-      (phrase, resolve, reject) => {
-        console.log('SDKEvents: joinMeetingWithPhrase event called', phrase);
-        try {
-          setMeetingInfo(MeetingInfoDefaultValue);
-          history.push(phrase);
-          resolve();
-        } catch (error) {
-          reject(error);
-        }
-      },
-    );
-    SDKEvents.emit('joinInit');
-    return () => {
-      unbind();
-    };
+    return () => {};
   }, []);
 
   const showShareScreen = () => {

package/template/src/pages/VideoCall.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 // @ts-nocheck
-import React, {useState, useContext, useEffect} from 'react';
+import React, {useState, useContext, useEffect, useRef} from 'react';
 import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {
   RtcConfigure,
@@ -18,6 +18,9 @@ import {
   ClientRole,
   ChannelProfile,
   LocalUserContext,
+  UidType,
+  CallbacksInterface,
+  ToggleState,
 } from '../../agora-rn-uikit';
 import styles from '../components/styles';
 import {useParams, useHistory} from '../components/Router';
@@ -38,7 +41,11 @@ import {useString} from '../utils/useString';
 import useLayoutsData from './video-call/useLayoutsData';
 import {RecordingProvider} from '../subComponents/recording/useRecording';
 import useJoinMeeting from '../utils/useJoinMeeting';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {
+  useMeetingInfo,
+  MeetingInfoDefaultValue,
+  validateMeetingInfoData,
+} from '../components/meeting-info/useMeetingInfo';
 import {SidePanelProvider} from '../utils/useSidePanel';
 import VideoCallScreen from './video-call/VideoCallScreen';
 import {NetworkQualityProvider} from '../components/NetworkQualityContext';
@@ -57,6 +64,9 @@ import EventsConfigure from '../components/EventsConfigure';
 import PermissionHelper from '../components/precall/PermissionHelper';
 import {currentFocus, FocusProvider} from '../utils/useFocus';
 import {VideoCallProvider} from '../components/useVideoCall';
+import {SdkApiContext, SDK_MEETING_TAG} from '../components/SdkApiContext';
+import isSDK from '../utils/isSDK';
+import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 
 enum RnEncryptionEnum {
   /**
@@ -127,11 +137,18 @@ const VideoCall: React.FC = () => {
     activeSpeaker: $config.ACTIVE_SPEAKER,
   });
 
+  const {join: SdkJoinState, clearState} = useContext(SdkApiContext);
+  const history = useHistory();
+  const currentMeetingPhrase = useRef(history.location.pathname);
+
   const useJoin = useJoinMeeting();
+  const {setMeetingInfo} = useSetMeetingInfo();
+  const {isJoinDataFetched, data} = useMeetingInfo();
 
   React.useEffect(() => {
     return () => {
       console.log('Videocall unmounted');
+      setMeetingInfo(MeetingInfoDefaultValue);
       if (awake) {
         release();
       }
@@ -139,18 +156,56 @@ const VideoCall: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    useJoin(phrase)
-      .then(() => {})
-      .catch((error) => {
+    if (!SdkJoinState.phrase) {
+      useJoin(phrase)
+        .then(() => {})
+        .catch((error) => {
+          setGlobalErrorMessage(error);
+          history.push('/');
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isSDK() || !SdkJoinState.initialized) {
+      return;
+    }
+    const {
+      phrase: sdkMeetingPhrase,
+      meetingDetails: sdkMeetingDetails,
+      skipPrecall,
+      promise,
+    } = SdkJoinState;
+
+    const sdkMeetingPath = `/${sdkMeetingPhrase}`;
+
+    setCallActive(skipPrecall);
+
+    if (sdkMeetingDetails) {
+      setQueryComplete(false);
+      setMeetingInfo((meetingInfo) => {
+        return {
+          isJoinDataFetched: true,
+          data: {
+            ...meetingInfo.data,
+            ...sdkMeetingDetails,
+          },
+        };
+      });
+    } else if (sdkMeetingPhrase) {
+      setQueryComplete(false);
+      currentMeetingPhrase.current = sdkMeetingPath;
+      useJoin(sdkMeetingPhrase).catch((error) => {
         setGlobalErrorMessage(error);
         history.push('/');
+        currentMeetingPhrase.current = '';
+        promise.rej(error);
       });
-  }, []);
-
-  const {isJoinDataFetched, data} = useMeetingInfo();
+    }
+  }, [SdkJoinState]);
 
   React.useEffect(() => {
-    if (isJoinDataFetched === true) {
+    if (isJoinDataFetched === true && !queryComplete) {
       setRtcProps({
         appId: $config.APP_ID,
         channel: data.channel,
@@ -178,17 +233,48 @@ const VideoCall: React.FC = () => {
       // if (data.username) {
       //   setUsername(data.username);
       // }
-      queryComplete ? {} : setQueryComplete(isJoinDataFetched);
+      setQueryComplete(true);
     }
-  }, [isJoinDataFetched]);
+  }, [isJoinDataFetched, data, queryComplete]);
 
-  const history = useHistory();
-  const callbacks = {
-    EndCall: () =>
+  const callbacks: CallbacksInterface = {
+    // RtcLeft: () => {},
+    // RtcJoined: () => {
+    //   if (SdkJoinState.phrase && SdkJoinState.skipPrecall) {
+    //     SdkJoinState.promise?.res();
+    //   }
+    // },
+    EndCall: () => {
+      clearState('join');
       setTimeout(() => {
         SDKEvents.emit('leave');
         history.push('/');
-      }, 0),
+      }, 0);
+    },
+    UserJoined: (uid: UidType) => {
+      console.log("UIKIT Callback: UserJoined", uid)
+      SDKEvents.emit('rtc-user-joined', uid);
+    },
+    UserOffline: (uid: UidType) => {
+      console.log("UIKIT Callback: UserOffline", uid)
+      SDKEvents.emit('rtc-user-joined', uid);
+    },
+    RemoteAudioStateChanged: (uid: UidType, status: 0 | 2) => {
+      console.log("UIKIT Callback: RemoteAudioStateChanged", uid, status)
+      if (status === 0) {
+        SDKEvents.emit('rtc-user-unpublished', uid, 'audio');
+      } else {
+        SDKEvents.emit('rtc-user-published', uid, 'audio');
+      }
+    },
+    RemoteVideoStateChanged: (uid: UidType, status: 0 | 2) => {
+      console.log("UIKIT Callback: RemoteVideoStateChanged", uid, status)
+      if (status === 0) {
+        SDKEvents.emit('rtc-user-unpublished', uid, 'video');
+      } else {
+        SDKEvents.emit('rtc-user-published', uid, 'video');
+      }
+    },
   };
   const [isCameraAvailable, setCameraAvailable] = useState(false);
   const [isMicAvailable, setMicAvailable] = useState(false);

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

@@ -142,33 +142,6 @@ const VideoCallScreen = () => {
     return components;
   });
 
-  useEffect(() => {
-    // setTimeout(() => {
-    //   events.send(
-    //     controlMessageEnum.newUserJoined,
-    //     JSON.stringify({name}),
-    //     EventPersistLevel.LEVEL1,
-    //   );
-    // }, 1000);
-
-    /**
-     * OLD: Commenting this code as getDevices API is web only
-     * The below code fails on native app
-     * RESPONSE: Added isWebInternal check to restrict execution only on web.
-     */
-    if (isWebInternal()) {
-      new Promise((res) =>
-        //@ts-ignore
-        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-          res(devices);
-        }),
-      ).then((devices: MediaDeviceInfo[]) => {
-        SDKEvents.emit('join', meetingTitle, devices, isHost);
-        console.log('SDKEvents: Event Called join');
-      });
-    }
-  }, []);
-
   const isDesktop = useIsDesktop();
 
   return VideocallComponent ? (

package/template/src/rtm/RTMEngine.ts

@@ -47,6 +47,12 @@ class RTMEngine {
 
     return RTMEngine._instance;
   }
+  setLocalUID(localUID: string) {
+    this.localUID = localUID;
+  }
+  setChannelId(channelID: string) {
+    this.channelId = channelID;
+  }
 
   setLoginInfo(localUID: string, channelID: string) {
     this.localUID = localUID;
@@ -62,6 +68,8 @@ class RTMEngine {
     try {
       this.destroyClientInstance();
       RTMEngine._instance = null;
+      this.localUID = '';
+      this.channelId = '';
     } catch (error) {
       console.log('Error destroying instance error: ', error);
     }

package/template/src/rtm-events-api/Events.ts

@@ -165,6 +165,7 @@ class Events {
       if (!this._validateEvt(eventName) || !this._validateListener(listener))
         return;
       EventUtils.addListener(eventName, listener, this.source);
+      console.log('CUSTOM_EVENT_API event listener registered', eventName);
       return () => {
         EventUtils.removeListener(eventName, listener, this.source);
       };

package/template/src/utils/SdkEvents.ts

@@ -9,24 +9,33 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-/**
- * @format
- */
-type callBackType = (...args: any[]) => void;
-import {userEventsMapInterface} from '../SDKAppWrapper';
+
 import {createNanoEvents} from 'nanoevents';
+import {UidType} from 'agora-rn-uikit';
+import {IRemoteTrack} from 'agora-rtc-sdk-ng';
 
-interface eventsMapInterface extends userEventsMapInterface {
-  addFpe?: callBackType;
-  addFpeInit?: () => void;
-  joinInit?: () => void;
-  joinMeetingWithPhrase?: (
-    phrase: string,
-    resolve: () => void,
-    reject: (e: Error) => void,
+export interface userEventsMapInterface {
+  leave: () => void;
+  create: (
+    hostPhrase: string,
+    attendeePhrase?: string,
+    pstnNumer?: {
+      number: string;
+      pin: string;
+    },
+  ) => void;
+  'ready-to-join': (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  join: (
+    meetingTitle: string,
+    devices: MediaDeviceInfo[],
+    isHost: boolean,
   ) => void;
+  'rtc-user-published': (uid: UidType, trackType: 'audio' | 'video') => void;
+  'rtc-user-unpublished': (uid: UidType, trackType: 'audio' | 'video') => void;
+  'rtc-user-joined': (uid: UidType) => void;
+  'rtc-user-left': (uid: UidType) => void;
 }
 
-const SDKEvents = createNanoEvents<eventsMapInterface>();
+const SDKEvents = createNanoEvents<userEventsMapInterface>();
 
 export default SDKEvents;

package/template/src/utils/SdkMethodEvents.ts

@@ -0,0 +1,81 @@
+import {SdkMethodEvents} from '../SDKAppWrapper';
+import {createNanoEvents, Emitter} from 'nanoevents';
+
+type EventParameterHelper<T extends keyof SdkMethodEvents> = Parameters<
+  SdkMethodEvents[T]
+>;
+
+type EventReturnTypeHelper<T extends keyof SdkMethodEvents> = ReturnType<
+  SdkMethodEvents[T]
+>;
+
+type EventKeyNameHelper = keyof SdkMethodEvents;
+
+type injectAsync<T extends (...p: any) => any> = (
+  res: (result?: ReturnType<T> | PromiseLike<ReturnType<T>>) => void,
+  rej: (reason?: any) => void,
+  ...params: Parameters<T>
+) => void;
+
+export type _InternalSDKMethodEventsMap = {
+  [K in EventKeyNameHelper]: injectAsync<SdkMethodEvents[K]>;
+};
+
+type emitCacheType = {
+  [K in EventKeyNameHelper]?: Parameters<_InternalSDKMethodEventsMap[K]>;
+};
+
+type emitCacheEnabledType = {
+  [K in EventKeyNameHelper]?: boolean;
+};
+
+class SDKMethodEvents {
+  constructor() {
+    this.emitter = createNanoEvents();
+  }
+
+  emitter: Emitter;
+
+  emitCache: emitCacheType = {};
+  emitCacheDisabled: emitCacheEnabledType = {};
+
+  async emit<T extends EventKeyNameHelper>(
+    event: T,
+    ...params: EventParameterHelper<T>
+  ) {
+    if (this.emitCache[event]) {
+      throw new Error(`Event: ${event} already in callstack`);
+    }
+
+    const result = await new Promise<EventReturnTypeHelper<T>>((res, rej) => {
+      this.emitCache[event] = [res, rej, ...params] as any;
+      this.emitter.emit(event, res, rej, ...params);
+    })
+      .then((res) => {
+        delete this.emitCache[event];
+        return res;
+      })
+      .catch((e) => {
+        delete this.emitCache[event];
+        throw e;
+      });
+
+    return result;
+  }
+
+  on<T extends EventKeyNameHelper>(
+    event: T,
+    callback: _InternalSDKMethodEventsMap[T],
+  ) {
+    const unsub = this.emitter.on(event, callback);
+    if (this.emitCache[event] && !this.emitCacheDisabled[event]) {
+      this.emitter.emit(event, ...this.emitCache[event]);
+    }
+    this.emitCacheDisabled[event] = true;
+    return unsub;
+  }
+}
+
+const SDKMethodEventsManager = new SDKMethodEvents();
+
+export default SDKMethodEventsManager;

package/template/src/utils/useJoinMeeting.ts

@@ -111,16 +111,22 @@ export default function useJoinMeeting() {
           // if (data?.getUser?.name) {
           //   meetingInfo.username = data.getUser.name;
           // }
+          console.log('!!!!!Meetinginfo', {
+            meetingInfo,
+            response: response.data,
+          });
           setMeetingInfo((prevState) => {
+            let compiledMeetingInfo = {
+              ...prevState.data,
+              ...meetingInfo,
+            };
             return {
               ...prevState,
               isJoinDataFetched: true,
-              data: {
-                ...prevState.data,
-                ...meetingInfo,
-              },
+              data: compiledMeetingInfo,
             };
           });
+          return meetingInfo;
         } else {
           throw new Error('An error occurred in parsing the channel data.');
         }

package/template/webpack.rsdk.config.js

@@ -17,13 +17,12 @@ module.exports = merge(commons, {
     'react-router': 'react-router',
     'react-router-dom': 'react-router-dom',
     '@apollo/client': '@apollo/client',
-    nanoid: 'nanoid',
   },
   // Main entry point for the web application
   entry: {
     main: './index.rsdk.tsx',
   },
-  target: 'node',
+  target: 'web',
   output: {
     path: path.resolve(__dirname, `../Builds/react-sdk`),
     filename: 'index.js',