agora-appbuilder-core 4.0.0-spl.3 → 4.0.0-spl.5

package/package.json

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

package/template/Gulpfile.js

@@ -460,11 +460,11 @@ module.exports.androidWin = series(
 );
 
 module.exports.test = series(
-  general.generateNpmPackage,
-  // general.typescript,
-  // general.typescriptFix,
-  // reactSdk.typescript,
-  // reactSdk.typescriptFix,
-  // webSdk.typescript,
-  // webSdk.typescriptFix,
+  general.createBuildDirectory,
+  general.generateApiTypedefs,
+  general.bundleApiTypedefs,
+  webSdk.generateSdkTypedefs,
+  webSdk.bundleSdkTypedefs,
+  general.cleanTempFiles,
+  general.genTsDefs,
 );

package/template/customization-api/typeDefinition.ts

@@ -101,7 +101,8 @@ export type ComponentsInterface = {
    */
   appRoot?: React.ComponentType;
   // commented for v1 release
-  //precall?: PreCallInterface | React.ComponentType;
+  // precall?: PreCallInterface | React.ComponentType;
+  precall?: React.ComponentType;
   //create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;

package/template/index.wsdk.tsx

@@ -3,31 +3,13 @@ import SDKAppWrapper, {
   AppBuilderSdkApi,
   AppBuilderSdkApiInterface,
 } from './src/SDKAppWrapper';
-import SDKEvents from './src/utils/SdkEvents';
 import React from 'react';
 import * as RN from 'react-native-web';
 import './src/assets/font-styles.css';
 export * from 'customization-api';
 export * from 'customization-implementation';
 
-interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
-
-const clearEvent = {
-  clear: () => {},
-};
-
-const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = {
-  ...AppBuilderSdkApi,
-  // Override customize function for web-sdk
-  customize: (customization) => {
-    SDKEvents.emit('addFpe', customization);
-    clearEvent.clear = SDKEvents.on('addFpeInit', () => {
-      console.log('addFpeInit called');
-      SDKEvents.emit('addFpe', customization);
-      clearEvent.clear();
-    });
-  },
-};
+const AppBuilderWebSdkApi: AppBuilderSdkApiInterface = AppBuilderSdkApi;
 
 // init code
 class AppBuilder extends HTMLElement {

package/template/src/SDKAppWrapper.tsx

@@ -11,82 +11,65 @@ import SDKMethodEventsManager from './utils/SdkMethodEvents';
 import App from './App';
 import SdkApiContextProvider from './components/SdkApiContext';
 import {Unsubscribe} from 'nanoevents';
+import {deviceId} from './components/DeviceConfigure';
 
-// 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>;
+type meetingData = Partial<MeetingInfoContextInterface['data']>;
 
-type deviceId = MediaDeviceInfo['deviceId'];
-
-export interface SdkMethodEvents {
-  customize: (customization: CustomizationApiInterface) => void;
-  join(
-    roomid: string | Partial<MeetingInfoContextInterface['data']>,
-    skipPrecall?: boolean,
-  ): MeetingInfoContextInterface['data'];
-  // mediaDevice: (deviceId: string, kind: MediaDeviceInfo['kind']) => void;
-  microphoneDevice: (deviceId: deviceId) => void;
-  speakerDevice: (deviceId: deviceId) => void;
-  cameraDevice: (deviceId: deviceId) => void;
+// Hard defined since its an api.
+export interface AppBuilderSdkApiInterface {
+  customize: (customization: CustomizationApiInterface) => Promise<void>;
+  joinRoom: (roomDetails: string | meetingData) => Promise<meetingData>;
+  joinPrecall: (
+    roomDetails: string | meetingData,
+  ) => Promise<[meetingData, () => void]>;
+  setMicrophone: (deviceId: deviceId) => Promise<void>;
+  setCamera: (deviceId: deviceId) => Promise<void>;
+  setSpeaker: (deviceId: deviceId) => Promise<void>;
+  muteAudio: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => Promise<void>;
+  muteVideo: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => Promise<void>;
+  createCustomization: (
+    customization: CustomizationApiInterface,
+  ) => CustomizationApiInterface;
+  customEvents: typeof customEvents;
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    cb: userEventsMapInterface[T],
+  ) => Unsubscribe;
 }
 
-// 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 = {
-  customize: async (customization: CustomizationApiInterface) => {
+export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
+  customize: async (customization) => {
     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']>,
-  ) => {
+  joinRoom: async (roomDetails) => {
     return await SDKMethodEventsManager.emit('join', roomDetails, true);
   },
-  joinPrecall: async (
-    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
-  ) => {
+  joinPrecall: async (roomDetails) => {
     const t = await SDKMethodEventsManager.emit('join', roomDetails);
     return t as unknown as [MeetingInfoContextInterface['data'], () => {}];
   },
-  // setMediaDevice: async (device: MediaDeviceInfo) => {
-  //   return await SDKMethodEventsManager.emit(
-  //     'mediaDevice',
-  //     device.deviceId,
-  //     device.kind,
-  //   );
-  // },
-  setMicrophone: async (deviceId: MediaDeviceInfo['deviceId']) => {
+  setMicrophone: async (deviceId) => {
     return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
   },
-  setSpeaker: async (deviceId: MediaDeviceInfo['deviceId']) => {
+  setSpeaker: async (deviceId) => {
     return await SDKMethodEventsManager.emit('speakerDevice', deviceId);
   },
-  setCamera: async (deviceId: MediaDeviceInfo['deviceId']) => {
+  setCamera: async (deviceId) => {
     return await SDKMethodEventsManager.emit('cameraDevice', deviceId);
   },
+  muteAudio: async (state) => {
+    return await SDKMethodEventsManager.emit('muteAudio', state);
+  },
+  muteVideo: async (state) => {
+    return await SDKMethodEventsManager.emit('muteVideo', state);
+  },
   createCustomization: customize,
-  on: <T extends keyof userEventsMapInterface>(
-    userEventName: T,
-    cb: userEventsMapInterface[T],
-  ): Unsubscribe => {
+  on: (userEventName, cb) => {
     console.log('SDKEvents: Event Registered', userEventName);
     return SDKEvents.on(userEventName, cb);
   },

package/template/src/components/Chat.tsx

@@ -81,14 +81,15 @@ const Chat = (props?: ChatProps) => {
 
   const {primaryColor} = useContext(ColorContext);
 
-  React.useEffect(() => {
-    return () => {
-      // reset both the active tabs
-      setGroupActive(false);
-      setPrivateActive(false);
-      setSelectedUser(0);
-    };
-  }, []);
+  //not need since state are controlled by chatUIControl
+  // React.useEffect(() => {
+  //   return () => {
+  //     // reset both the active tabs
+  //     setGroupActive(false);
+  //     setPrivateActive(false);
+  //     setSelectedUser(0);
+  //   };
+  // }, []);
 
   const selectUser = (userUID: UidType) => {
     setSelectedUser(userUID);

package/template/src/components/DeviceConfigure.tsx

@@ -20,20 +20,17 @@ import React, {
 import {ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
 import AgoraRTC, {DeviceInfo} from 'agora-rtc-sdk-ng';
-import {useRtc, PrimaryButton} from 'customization-api';
+import {useRtc} from 'customization-api';
 import Toast from '../../react-native-toast-message';
-import TertiaryButton from '../atoms/TertiaryButton';
-import {StyleSheet, Text} from 'react-native';
-import CustomIcon from '../atoms/CustomIcon';
+import {Text} from 'react-native';
 import StorageContext from './StorageContext';
 
 import type RtcEngine from '../../bridge/rtc/webNg/';
 import ColorContext from './ColorContext';
 import {SdkApiContext} from './SdkApiContext';
-import SDKMethodEventsManager from '../utils/SdkMethodEvents';
 import SDKEvents from '../utils/SdkEvents';
 
-const log = (...args) => {
+const log = (...args: any[]) => {
   console.log('[DeviceConfigure] ', ...args);
 };
 
@@ -42,9 +39,9 @@ type WebRtcEngineInstance = InstanceType<typeof RtcEngine>;
 interface Props {
   userRole: ClientRole;
 }
-type deviceInfo = MediaDeviceInfo;
-type deviceId = deviceInfo['deviceId'];
-type deviceKind = deviceInfo['kind'];
+export type deviceInfo = MediaDeviceInfo;
+export type deviceId = deviceInfo['deviceId'];
+export type deviceKind = deviceInfo['kind'];
 
 const DeviceConfigure: React.FC<Props> = (props: any) => {
   const rtc = useRtc();
@@ -213,7 +210,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         break;
       case 'audiooutput':
         //@ts-ignore
-        const speakerId = RtcEngine.speakerDeviceId;
+        let speakerId = RtcEngine.speakerDeviceId;
         speakerId &&
           SDKEvents.emit('devices-selected-speaker-changed', speakerId);
         setUiSelectedSpeaker(speakerId);

package/template/src/components/ParticipantsView.tsx

@@ -163,7 +163,7 @@ const ParticipantView = (props) => {
                     onPress={() => setShowHostSection(!showHostSection)}
                   />
                   {showHostSection ? (
-                    <AllAudienceParticipants
+                    <AllHostParticipants
                       emptyMessage={'No Host has joined yet.'}
                       uids={hostUids}
                       isMobile={isSmall()}

package/template/src/components/Precall.tsx

@@ -19,6 +19,7 @@ import {
   trimText,
   useIsDesktop,
   useResponsive,
+  isValidReactComponent,
 } from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import {useCustomization} from 'customization-implementation';
@@ -276,23 +277,23 @@ const Precall = () => {
           res(devices);
         }),
       ).then((devices: MediaDeviceInfo[]) => {
-        SDKEvents.emit('preJoin', meetingTitle, devices);
+        SDKEvents.emit('ready-to-join', meetingTitle, devices);
       });
     }
   }, [isJoinDataFetched]);
 
   const FpePrecallComponent = useCustomization((data) => {
     // commented for v1 release
-    // if (
-    //   data?.components?.precall &&
-    //   typeof data?.components?.precall !== 'object'
-    // ) {
-    //   if (isValidReactComponent(data?.components?.precall)) {
-    //     return data?.components?.precall;
-    //   }
-    //   return undefined;
-    // }
-    return undefined;
+    if (
+      data?.components?.precall &&
+      typeof data?.components?.precall !== 'object'
+    ) {
+      if (isValidReactComponent(data?.components?.precall)) {
+        return data?.components?.precall;
+      }
+      return undefined;
+    }
+    // return undefined;
   });
 
   const isDesktop = useIsDesktop();

package/template/src/components/SdkApiContext.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useState, useEffect} from 'react';
+import React, {createContext, useState, useEffect, useRef} from 'react';
 import SDKMethodEventsManager, {
   _InternalSDKMethodEventsMap,
 } from '../utils/SdkMethodEvents';
@@ -31,12 +31,6 @@ type SdkApiContextInterface = {
     customization?: CustomizationApiInterface;
     promise?: extractPromises<_InternalSDKMethodEventsMap['customize']>;
   };
-  // mediaDevice: {
-  //   [k in MediaDeviceInfo['kind']]?: {
-  //     deviceId: string;
-  //     promise?: extractPromises<_InternalSDKMethodEventsMap['mediaDevice']>;
-  //   };
-  // };
   microphoneDevice: {
     deviceId?: string;
     promise?: extractPromises<_InternalSDKMethodEventsMap['microphoneDevice']>;
@@ -49,9 +43,19 @@ type SdkApiContextInterface = {
     deviceId?: string;
     promise?: extractPromises<_InternalSDKMethodEventsMap['cameraDevice']>;
   };
+  onMuteAudio: (callback: _InternalSDKMethodEventsMap['muteAudio']) => void;
+  onMuteVideo: (callback: _InternalSDKMethodEventsMap['muteVideo']) => void;
   clearState: (key: keyof _InternalSDKMethodEventsMap, param?: any) => void;
 };
 
+const defaultMuteListener = ((_, rej) => {
+  rej(
+    new Error(
+      "Video call not initialized, call this method on 'join' or 'ready-to-join' event listener callback",
+    ),
+  );
+}) as _InternalSDKMethodEventsMap['muteVideo'];
+
 const SdkApiInitState: SdkApiContextInterface = {
   join: {
     initialized: false,
@@ -61,17 +65,20 @@ const SdkApiInitState: SdkApiContextInterface = {
   microphoneDevice: {},
   speakerDevice: {},
   cameraDevice: {},
+  onMuteVideo: (_) => {},
+  onMuteAudio: (_) => {},
   clearState: () => {},
 };
 
 export const SDK_MEETING_TAG = 'sdk-initiated-meeting';
 
-export const SdkApiContext = createContext(SdkApiInitState);
+export const SdkApiContext =
+  createContext<SdkApiContextInterface>(SdkApiInitState);
 
 let moduleEventsUnsub: any[] = [];
 
 type commonEventHandlers = {
-  [K in keyof _InternalSDKMethodEventsMap]?: (
+  [K in keyof Omit<_InternalSDKMethodEventsMap, 'muteVideo' | 'muteAudio'>]?: (
     setter: (p: SdkApiContextInterface[K]) => void,
   ) => Unsubscribe;
 };
@@ -117,19 +124,6 @@ const commonEventHandlers: commonEventHandlers = {
       res();
     });
   },
-  // mediaDevice: (setter) => {
-  //   return SDKMethodEventsManager.on(
-  //     'mediaDevice',
-  //     (res, rej, deviceId, kind) => {
-  //       setter({
-  //         [kind]: {
-  //           deviceId,
-  //           promise: {res, rej},
-  //         },
-  //       });
-  //     },
-  //   );
-  // },
   microphoneDevice: (setter) => {
     return SDKMethodEventsManager.on(
       'microphoneDevice',
@@ -167,12 +161,6 @@ const registerListener = () => {
     commonEventHandlers.join((state) => {
       SdkApiInitState.join = state;
     }),
-    // commonEventHandlers.mediaDevice((state) => {
-    //   SdkApiInitState.mediaDevice = {
-    //     ...SdkApiInitState.mediaDevice,
-    //     ...state,
-    //   };
-    // }),
     commonEventHandlers.microphoneDevice((state) => {
       SdkApiInitState.microphoneDevice = state;
     }),
@@ -182,6 +170,8 @@ const registerListener = () => {
     commonEventHandlers.cameraDevice((state) => {
       SdkApiInitState.cameraDevice = state;
     }),
+    SDKMethodEventsManager.on('muteVideo', defaultMuteListener),
+    SDKMethodEventsManager.on('muteAudio', defaultMuteListener),
   ];
 };
 
@@ -194,9 +184,6 @@ const SdkApiContextProvider: React.FC = (props) => {
   const [userCustomization, setUserCustomization] = useState(
     SdkApiInitState.customize,
   );
-  // const [mediaDeviceState, setMediaDeviceState] = useState(
-  //   SdkApiInitState.setCamera,
-  // );
   const [microphoneDeviceState, setMicrophoneDeviceState] = useState(
     SdkApiInitState.microphoneDevice,
   );
@@ -207,57 +194,50 @@ const SdkApiContextProvider: React.FC = (props) => {
     SdkApiInitState.cameraDevice,
   );
 
-  const clearState: SdkApiContextInterface['clearState'] = (key, param) => {
+  const muteVideoListener = useRef(defaultMuteListener);
+  const muteAudioListener = useRef(defaultMuteListener);
+
+  const setMuteVideoListener = (
+    value: _InternalSDKMethodEventsMap['muteVideo'],
+  ) => {
+    muteVideoListener.current = value;
+  };
+
+  const setMuteAudioListener = (
+    value: _InternalSDKMethodEventsMap['muteAudio'],
+  ) => {
+    muteAudioListener.current = value;
+  };
+
+  const clearState: SdkApiContextInterface['clearState'] = (key) => {
     switch (key) {
       case 'join':
         setJoinState(SdkApiInitState.join);
-        return;
+        break;
       case 'customize':
         setUserCustomization(SdkApiInitState.customize);
-        return;
+        break;
       case 'microphoneDevice':
         setMicrophoneDeviceState({});
+        break;
       case 'speakerDevice':
         setSpeakerDeviceState({});
+        break;
       case 'cameraDevice':
         setCameraDeviceState({});
-      // case 'mediaDevice':
-      //   setMediaDeviceState((currentState) => {
-      //     currentState[param] = undefined;
-      //     return currentState;
-      //   });
+        break;
+      case 'muteVideo':
+        setMuteVideoListener(defaultMuteListener);
+        break;
+      case 'muteAudio':
+        setMuteVideoListener(defaultMuteListener);
+        break;
     }
   };
 
   useEffect(() => {
     deRegisterListener();
 
-    // const applyPromiseWrapper = (
-    //   state: SdkApiContextInterface['mediaDevice'],
-    //   kind: MediaDeviceInfo['kind'],
-    // ) => {
-    //   if (state[kind]) {
-    //     state[kind].promise.res = () => {
-    //       const resolve = state[kind].promise.res;
-    //       clearState('mediaDevice', kind);
-    //       resolve();
-    //     };
-    //     state[kind].promise.rej = (reason?: any) => {
-    //       const reject = state[kind].promise.rej;
-    //       clearState('mediaDevice', kind);
-    //       reject(reason);
-    //     };
-    //   }
-    // };
-
-    // setMediaDeviceState((currentState) => {
-    //   // applyPromiseWrapper(currentState, 'audiooutput');
-    //   // applyPromiseWrapper(currentState, 'audioinput');
-    //   // applyPromiseWrapper(currentState, 'videoinput');
-    //
-    //   return currentState;
-    // });
-
     const unsub = [
       commonEventHandlers.customize((state) => {
         setUserCustomization(state);
@@ -274,18 +254,12 @@ const SdkApiContextProvider: React.FC = (props) => {
       commonEventHandlers.cameraDevice((state) => {
         setCameraDeviceState(state);
       }),
-      // commonEventHandlers.mediaDevice((state) => {
-      //   // applyPromiseWrapper(state, 'audioinput');
-      //   // applyPromiseWrapper(state, 'audiooutput');
-      //   // applyPromiseWrapper(state, 'videoinput');
-      //
-      //   setMediaDeviceState((currentState) => {
-      //     return {
-      //       ...currentState,
-      //       ...state,
-      //     };
-      //   });
-      // }),
+      SDKMethodEventsManager.on('muteVideo', (...args) => {
+        muteVideoListener.current(...args);
+      }),
+      SDKMethodEventsManager.on('muteAudio', (...args) => {
+        muteAudioListener.current(...args);
+      }),
     ];
 
     return () => {
@@ -302,6 +276,8 @@ const SdkApiContextProvider: React.FC = (props) => {
         microphoneDevice: microphoneDeviceState,
         speakerDevice: speakerDeviceState,
         cameraDevice: cameraDeviceState,
+        onMuteAudio: setMuteAudioListener,
+        onMuteVideo: setMuteVideoListener,
         clearState,
       }}>
       {props.children}

package/template/src/components/SdkMuteToggleListener.tsx

@@ -0,0 +1,92 @@
+import React, { useContext, useEffect, createContext, useRef } from 'react';
+import { SdkApiContext } from './SdkApiContext';
+import {
+  useMuteToggleLocal,
+  useLocalUserInfo,
+  ToggleState,
+  MUTE_LOCAL_TYPE,
+} from 'customization-api';
+
+export const SdkMuteQueueContext = createContext({
+  videoMuteQueue: { current: [] },
+  audioMuteQueue: { current: [] },
+});
+
+const SdkMuteToggleListener = (props) => {
+  const videoMuteQueue = useRef([]);
+  const audioMuteQueue = useRef([]);
+
+  const {
+    onMuteVideo: onSdkMuteVideo,
+    onMuteAudio: onSdkMuteAudio,
+    clearState,
+  } = useContext(SdkApiContext);
+  const local = useLocalUserInfo();
+  const toggleMute = useMuteToggleLocal();
+
+  const queuedToggleMute = (type, status) => {
+    const localstatus =
+      local[type === MUTE_LOCAL_TYPE.video ? 'video' : 'audio'];
+
+    // if ([ToggleState.enabling, ToggleState.disabling].includes(localstatus)) {
+    // if ({[ToggleState.enabling]: true, [ToggleState.disabling]: true}[localstatus]) {
+    if (
+      ToggleState.enabling === localstatus ||
+      ToggleState.disabling === localstatus
+    ) {
+      return new Promise((res, rej) => {
+        if (type === MUTE_LOCAL_TYPE.video) {
+          videoMuteQueue.current.push({
+            resolveQueued: res,
+            rejectQueued: rej,
+            action: status ? ToggleState.disabled : ToggleState.enabled,
+          });
+        } else {
+          audioMuteQueue.current.push({
+            resolveQueued: res,
+            rejectQueued: rej,
+            action: status ? ToggleState.disabled : ToggleState.enabled,
+          });
+        }
+      });
+    } else
+      return toggleMute(
+        type,
+        status ? ToggleState.disabled : ToggleState.enabled,
+      );
+  };
+
+  useEffect(() => {
+    onSdkMuteVideo(async (res, rej, mute) => {
+      const status = typeof mute === 'function' ? mute(!local.video) : mute;
+      try {
+        await queuedToggleMute(MUTE_LOCAL_TYPE.video, status);
+        res();
+      } catch (e) {
+        rej(e);
+      }
+    });
+    onSdkMuteAudio(async (res, rej, mute) => {
+      const status = typeof mute === 'function' ? mute(!local.audio) : mute;
+      try {
+        await queuedToggleMute(MUTE_LOCAL_TYPE.audio, status);
+        res();
+      } catch (e) {
+        rej(e);
+      }
+    });
+
+    return () => {
+      clearState('muteVideo');
+      clearState('muteAudio');
+    };
+  }, [local]);
+
+  return (
+    <SdkMuteQueueContext.Provider value={{ videoMuteQueue, audioMuteQueue }}>
+      {props.children}
+    </SdkMuteQueueContext.Provider>
+  );
+};
+
+export default SdkMuteToggleListener;

package/template/src/pages/VideoCall.tsx

@@ -67,6 +67,7 @@ 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';
+import SdkMuteToggleListener from '../components/SdkMuteToggleListener';
 
 enum RnEncryptionEnum {
   /**
@@ -252,15 +253,15 @@ const VideoCall: React.FC = () => {
       }, 0);
     },
     UserJoined: (uid: UidType) => {
-      console.log("UIKIT Callback: UserJoined", uid)
+      console.log('UIKIT Callback: UserJoined', uid);
       SDKEvents.emit('rtc-user-joined', uid);
     },
     UserOffline: (uid: UidType) => {
-      console.log("UIKIT Callback: UserOffline", uid)
+      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)
+      console.log('UIKIT Callback: RemoteAudioStateChanged', uid, status);
       if (status === 0) {
         SDKEvents.emit('rtc-user-unpublished', uid, 'audio');
       } else {
@@ -268,7 +269,7 @@ const VideoCall: React.FC = () => {
       }
     },
     RemoteVideoStateChanged: (uid: UidType, status: 0 | 2) => {
-      console.log("UIKIT Callback: RemoteVideoStateChanged", uid, status)
+      console.log('UIKIT Callback: RemoteVideoStateChanged', uid, status);
       if (status === 0) {
         SDKEvents.emit('rtc-user-unpublished', uid, 'video');
       } else {
@@ -342,31 +343,33 @@ const VideoCall: React.FC = () => {
                                                       {!isMobileUA() && (
                                                         <PermissionHelper />
                                                       )}
-                                                      {callActive ? (
-                                                        <VideoMeetingDataProvider>
-                                                          <VideoCallProvider>
-                                                            <VideoCallScreen />
-                                                          </VideoCallProvider>
-                                                        </VideoMeetingDataProvider>
-                                                      ) : $config.PRECALL ? (
-                                                        <PreCallProvider
-                                                          value={{
-                                                            callActive,
-                                                            setCallActive,
-                                                            isCameraAvailable,
-                                                            isMicAvailable,
-                                                            setCameraAvailable,
-                                                            setMicAvailable,
-                                                            isPermissionRequested,
-                                                            setIsPermissionRequested,
-                                                            isSpeakerAvailable,
-                                                            setSpeakerAvailable,
-                                                          }}>
-                                                          <Precall />
-                                                        </PreCallProvider>
-                                                      ) : (
-                                                        <></>
-                                                      )}
+                                                      <SdkMuteToggleListener>
+                                                        {callActive ? (
+                                                          <VideoMeetingDataProvider>
+                                                            <VideoCallProvider>
+                                                              <VideoCallScreen />
+                                                            </VideoCallProvider>
+                                                          </VideoMeetingDataProvider>
+                                                        ) : $config.PRECALL ? (
+                                                          <PreCallProvider
+                                                            value={{
+                                                              callActive,
+                                                              setCallActive,
+                                                              isCameraAvailable,
+                                                              isMicAvailable,
+                                                              setCameraAvailable,
+                                                              setMicAvailable,
+                                                              isPermissionRequested,
+                                                              setIsPermissionRequested,
+                                                              isSpeakerAvailable,
+                                                              setSpeakerAvailable,
+                                                            }}>
+                                                            <Precall />
+                                                          </PreCallProvider>
+                                                        ) : (
+                                                          <></>
+                                                        )}
+                                                      </SdkMuteToggleListener>
                                                     </NetworkQualityProvider>
                                                   </CustomUserContextHolder>
                                                 </LocalUserContext>

package/template/src/utils/SdkEvents.ts

@@ -44,9 +44,6 @@ export interface userEventsMapInterface {
   'devices-selected-speaker-changed': (
     deviceId: MediaDeviceInfo['deviceId'],
   ) => void;
-  'devices-device-list-updated': (
-    deviceId: MediaDeviceInfo['deviceId'],
-  ) => void;
 }
 
 const SDKEvents = createNanoEvents<userEventsMapInterface>();

package/template/src/utils/SdkMethodEvents.ts

@@ -1,5 +1,22 @@
-import {SdkMethodEvents} from '../SDKAppWrapper';
 import {createNanoEvents, Emitter} from 'nanoevents';
+import {
+  CustomizationApiInterface,
+  MeetingInfoContextInterface,
+} from 'customization-api';
+import {deviceId} from '../components/DeviceConfigure';
+
+export interface SdkMethodEvents {
+  customize: (customization: CustomizationApiInterface) => void;
+  join(
+    roomid: string | Partial<MeetingInfoContextInterface['data']>,
+    skipPrecall?: boolean,
+  ): MeetingInfoContextInterface['data'];
+  microphoneDevice: (deviceId: deviceId) => void;
+  speakerDevice: (deviceId: deviceId) => void;
+  cameraDevice: (deviceId: deviceId) => void;
+  muteAudio: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  muteVideo: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+}
 
 type EventParameterHelper<T extends keyof SdkMethodEvents> = Parameters<
   SdkMethodEvents[T]

package/template/src/utils/useMuteToggleLocal.ts

@@ -15,6 +15,7 @@ import {useContext, useEffect, useRef, useState} from 'react';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 import {isMobileUA, isWebInternal} from './common';
 import {AppState} from 'react-native';
+import {SdkMuteQueueContext} from '../components/SdkMuteToggleListener';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -27,6 +28,8 @@ function useMuteToggleLocal() {
   const {RtcEngine, dispatch} = useRtc();
   const local = useLocalUserInfo();
 
+  const {videoMuteQueue, audioMuteQueue} = useContext(SdkMuteQueueContext);
+
   const appState = useRef(AppState.currentState);
   const [appStateVisible, setAppStateVisible] = useState(appState.current);
   const isCamON = useRef(local.video);
@@ -69,7 +72,26 @@ function useMuteToggleLocal() {
     }
   }, [appStateVisible]);
 
-  return async (type: MUTE_LOCAL_TYPE) => {
+  const toggleMute = async (
+    type: MUTE_LOCAL_TYPE,
+    _action?: ToggleState,
+    _fromSdk?: boolean,
+  ) => {
+    const queueRef =
+      type === MUTE_LOCAL_TYPE.video ? videoMuteQueue : audioMuteQueue;
+
+    const handleQueue = async () => {
+      if (queueRef.current.length > 0) {
+        const queueItem = queueRef.current.shift();
+        try {
+          await toggleMute(type, queueItem.action, true);
+          queueItem.resolveQueued();
+        } catch (e) {
+          queueItem.rejectQueued(e);
+        }
+      }
+    };
+
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
         let localAudioState = local.audio;
@@ -78,35 +100,45 @@ function useMuteToggleLocal() {
           localAudioState === ToggleState.enabled ||
           localAudioState === ToggleState.disabled
         ) {
-          // Disable UI
-          dispatch({
-            type: 'LocalMuteAudio',
-            value: [
-              localAudioState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            await RtcEngine.muteLocalAudioStream(
-              localAudioState === ToggleState.enabled,
-            );
-            // Enable UI
+          if (localAudioState !== _action) {
+            // Disable UI
             dispatch({
               type: 'LocalMuteAudio',
               value: [
                 localAudioState === ToggleState.enabled
-                  ? ToggleState.disabled
-                  : ToggleState.enabled,
+                  ? ToggleState.disabling
+                  : ToggleState.enabling,
               ],
             });
-          } catch (e) {
-            console.error(e);
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [localAudioState],
-            });
+
+            try {
+              await RtcEngine.muteLocalAudioStream(
+                localAudioState === ToggleState.enabled,
+              );
+              // Enable UI
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [
+                  localAudioState === ToggleState.enabled
+                    ? ToggleState.disabled
+                    : ToggleState.enabled,
+                ],
+              });
+              handleQueue();
+            } catch (e) {
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [localAudioState],
+              });
+              handleQueue();
+              if (_fromSdk) {
+                throw e;
+              } else {
+                console.error('Error toggling audio', e);
+              }
+            }
+          } else {
+            handleQueue();
           }
         }
         break;
@@ -118,45 +150,57 @@ function useMuteToggleLocal() {
           localVideoState === ToggleState.disabled
         ) {
           // Disable UI
-          dispatch({
-            type: 'LocalMuteVideo',
-            value: [
-              localVideoState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            //enableLocalVideo not available on web
-            isWebInternal()
-              ? await RtcEngine.muteLocalVideoStream(
-                  localVideoState === ToggleState.enabled ? true : false,
-                )
-              : await RtcEngine.enableLocalVideo(
-                  localVideoState === ToggleState.enabled ? false : true,
-                );
-
-            // Enable UI
+          if (localVideoState !== _action) {
             dispatch({
               type: 'LocalMuteVideo',
               value: [
                 localVideoState === ToggleState.enabled
-                  ? ToggleState.disabled
-                  : ToggleState.enabled,
+                  ? ToggleState.disabling
+                  : ToggleState.enabling,
               ],
             });
-          } catch (e) {
-            console.log('error while dispatching');
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [localVideoState],
-            });
+
+            try {
+              //enableLocalVideo not available on web
+              isWebInternal()
+                ? await RtcEngine.muteLocalVideoStream(
+                    localVideoState === ToggleState.enabled ? true : false,
+                  )
+                : await RtcEngine.enableLocalVideo(
+                    localVideoState === ToggleState.enabled ? false : true,
+                  );
+
+              // Enable UI
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [
+                  localVideoState === ToggleState.enabled
+                    ? ToggleState.disabled
+                    : ToggleState.enabled,
+                ],
+              });
+              handleQueue();
+            } catch (e) {
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [localVideoState],
+              });
+              handleQueue();
+              if (_fromSdk) {
+                throw e;
+              } else {
+                console.error('Error toggling video', e);
+              }
+            }
+          } else {
+            handleQueue();
           }
         }
         break;
     }
   };
+
+  return toggleMute;
 }
 
 export default useMuteToggleLocal;

package/template/tsconfig_rsdk_index.json

@@ -4,7 +4,7 @@
   // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files": ["./src/SDKAppWrapper.tsx", "./index.rsdk.tsx", "./global.d.ts"],
+  "files": ["./index.rsdk.tsx", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */
@@ -47,8 +47,8 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-    "noResolve": true /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "noResolve": false /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     "resolveJsonModule": true,
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */

package/template/tsconfig_wsdk_index.json

@@ -4,7 +4,7 @@
   // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files": ["./src/SDKAppWrapper.tsx", "./index.wsdk.tsx", "./global.d.ts"],
+  "files": ["./index.wsdk.tsx", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */