agora-appbuilder-core 4.0.0-beta.16 → 4.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.18",
   "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/redesign/ui-kit-v1",
+    "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 mb-with-react18-support",
     "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/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/_package-lock.json

@@ -25,6 +25,7 @@
         "electron-updater": "4.3.9",
         "exponential-backoff": "3.1.0",
         "graphql": "15.5.0",
+        "jwt-decode": "3.1.2",
         "nanoevents": "7.0.1",
         "nanoid": "4.0.0",
         "nosleep.js": "0.12.0",
@@ -33,6 +34,7 @@
         "react-is": "18.0.0",
         "react-native": "0.64",
         "react-native-agora": "3.7.1",
+        "react-native-exit-app": "1.1.0",
         "react-native-gesture-handler": "2.8.0",
         "react-native-hyperlink": "0.0.19",
         "react-native-inappbrowser-reborn": "3.5.1",
@@ -19419,6 +19421,11 @@
       "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
       "dev": true
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -23553,6 +23560,11 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-exit-app": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-exit-app/-/react-native-exit-app-1.1.0.tgz",
+      "integrity": "sha512-Spne19zfMfJvnUTX909EHUqWMk69rATtLJq9XMBGpNSHhx0M7v5yetx2Z87egBhLOqQm+CWfD/oxWzDG8rbIQA=="
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",
@@ -44616,6 +44628,11 @@
       "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
       "dev": true
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -48011,6 +48028,11 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-exit-app": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-exit-app/-/react-native-exit-app-1.1.0.tgz",
+      "integrity": "sha512-Spne19zfMfJvnUTX909EHUqWMk69rATtLJq9XMBGpNSHhx0M7v5yetx2Z87egBhLOqQm+CWfD/oxWzDG8rbIQA=="
+    },
     "react-native-gesture-handler": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",

package/template/agora-rn-uikit/src/Controls/Icons.ts

@@ -9,6 +9,8 @@ export interface IconsInterface {
   'demote-outlined': string;
   'lower-hand': string;
   'raise-hand': string;
+  'turn-off-stt': string;
+  'live-caption-mode': string;
 }
 
 const icons: IconsInterface = {
@@ -32,6 +34,10 @@ const icons: IconsInterface = {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADvSURBVHgB5ZRREcIwDIZbB5MQCZOABBxQCUMBSJgEHCBhczAJlTAJITmyo1dW2vTKC/x3ubVZky9JbzPmr4SInmySdcemCR7I7nFQmAhFAcxrAE7ilyBhJ75pBxCu+VxfC3FbpR8Ai2zzI5OEq4wAxAcZgJctmBJxuzFE/GsTQAqy+ZoAJPAggblxVQMAX/LRuHxrwFsnQWIsBtChkcwlACj30icgkEveR9VecV8pCJR0cMMyMeQYQfIAJYR1khj1z08NUUsJGUyNlJCLqVEhZNqDWAXE0QMSr2dr7cyF0Jrv40z70XxD+Px2nPkZPQCoHCglmaLpAgAAAABJRU5ErkJggg==',
   'raise-hand':
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADxSURBVHgB5ZTtEYIwDIYD5391gzqBjIAbOIojsIFuoBs4AmyAG+AIblATDSdW+pFSf3g+d+81V0jeNrQA/BVa644EKcGCNapFFfqFQi1IvvxZgEfJ43wwR3HN8cqVnI9N8uoKRx6tXLGc2HbQUjKaLGEiuWVe8ejtcaxBMpIYYCvPqP1XDOjI4rBF7SRJPeUgri2x6oOxWpnNAMKhe/C43RliPpzaosb3QqzBFbVhgyNI0X6o7xdzEgQ7uIGdBp7/p7Ug52MHJ8fqO5ZJeKv0+/EMRYEETKgExSuIIdAk/AZbTOjE0DdpB0U71EHclp/kDilNkhWhg0nUAAAAAElFTkSuQmCC',
+  'turn-off-stt':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAECSURBVHgBzVQLEcIwDE25CZgDhoNJQMJQADiYA4YCcDAsoIA6GChYHQAKSnJLj1LaXvncwbt710/SlyzpCvAP0FrnxBTHFbIPcMs+JfLMLF2NzI6KQ4OskVdPPMVjhTTZkeDRK2g57YUQCt7ECL6MJEFuQhGxF6ZJqRlS3TqeS2vf1K+HoZ5PUbQvE86Qulrzemo6bN2MPFmQ7TXbWxaskBveq3wHooLss0B2+o4DiYecHwSdS906vjt3zyCDMNbW/AKJiAkW9oKbIPHSSxj+ppcF5549ylRGzoQFMZMJhEEPhUYuY4KmTtRJBXGMkSefQdgLFGrA/6kuKPjsk0fkd7gBEy7vamLyRFEAAAAASUVORK5CYII=',
+  'live-caption-mode':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgB5VPtDYIwEL0S/ssIHYERGEE3qBPoBuIGMgFsAk6iI7hBfadHUpsirZFfvOSlxx333RKtDmoUrLUax4nS8QDPSik+KXMMBqwoHUb4Qu4Z78i0pwRIZ8X4ndGfkVM4q8GhHdWFZwT90amGu+l836kKW0c+gCWCVfS5tJa+AQ412ItsA/YKvAX0PfvOVfgz8ikDso4tbcEdve9b4egNZqhiA/LV0SI38BsQiJfReP/EVRjanryEmmaw6Ay5gtKZUSw0eA0F7MS4oTQM4rtWPAFxAE4MEjNhpQAAAABJRU5ErkJggg==',
 };
 
 export default icons;

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

@@ -21,10 +21,14 @@ const Create = ({
   children,
 }: {
   dispatch: DispatchType;
-  children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
+  children: (
+    engine: React.MutableRefObject<RtcEngine>,
+    tracksReady: boolean,
+  ) => JSX.Element;
 }) => {
   const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
+  const [tracksReady, setTracksReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   const {
     geoFencing = true,
@@ -285,8 +289,10 @@ const Create = ({
             Platform.OS === 'web'
           )
         ) {
-          await enableVideoAndAudioWithInitialStates();
-          isVideoEnabledRef.current = true;
+          enableVideoAndAudioWithInitialStates().then(() => {
+            setTracksReady(true);
+            isVideoEnabledRef.current = true;
+          });
         }
 
         engine.current.addListener(
@@ -304,7 +310,11 @@ const Create = ({
           },
         );
 
-        engine.current.addListener('UserJoined', (...args) => {
+        engine.current.addListener('UserJoined', async (...args) => {
+          // preventing STT pusher bot in renderlist
+          if (args[0] === 111111) {
+            return;
+          }
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
@@ -461,7 +471,7 @@ const Create = ({
     <>
       {
         // Render children once RTCEngine has been initialized
-        ready && engine ? children(engine) : <></>
+        ready && engine ? children(engine, tracksReady) : <></>
       }
     </>
   );

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

@@ -10,7 +10,8 @@ const Join: React.FC<{
   engineRef: React.MutableRefObject<RtcEngine>;
   uidState: RenderStateInterface;
   dispatch: DispatchType;
-}> = ({children, precall, engineRef, uidState, dispatch}) => {
+  tracksReady: boolean;
+}> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
   const {audioRoom = false} = rtcProps;
@@ -19,6 +20,13 @@ const Join: React.FC<{
   //   ? rtcProps.lifecycle.useBeforeJoin()
   //   : null;
 
+  useEffect(() => {
+    if (joinState.current && tracksReady && Platform.OS === 'web') {
+      //@ts-ignore
+      engineRef.current.publish();
+    }
+  }, [tracksReady]);
+
   useEffect(() => {
     const engine = engineRef.current;
     async function leave() {

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

@@ -332,12 +332,13 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   return (
     <Create dispatch={dispatch}>
-      {(engineRef) => (
+      {(engineRef, tracksReady) => (
         <Join
           precall={!rtcProps.callActive}
           engineRef={engineRef}
           uidState={uidState}
-          dispatch={dispatch}>
+          dispatch={dispatch}
+          tracksReady={tracksReady}>
           <RtcProvider
             value={{
               RtcEngine: engineRef.current,

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -730,11 +730,11 @@ export default class RtcEngine {
 
   async changeSpeaker(speakerId, callback, error) {
     try {
-      this.speakerDeviceId = speakerId;
       // setting sepeaker for all remote stream (previously joined users)
       this.remoteStreams?.forEach((stream, uid, map) => {
         stream?.audio?.setPlaybackDevice(speakerId);
       });
+      this.speakerDeviceId = speakerId;
       callback(speakerId);
     } catch (e) {
       error(e);

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/global.d.ts

@@ -98,6 +98,10 @@ interface ConfigInterface {
   ICON_BG_COLOR: string;
   TOOLBAR_COLOR: string;
   ACTIVE_SPEAKER: boolean;
+  // TOAST_NOTIFICATIONS: boolean;
+  ENABLE_TOKEN_AUTH: boolean;
+  ENABLE_IDP_AUTH: boolean;
+  PROJECT_ID: string;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

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/package.json

@@ -65,6 +65,7 @@
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
     "graphql": "15.5.0",
+    "jwt-decode": "3.1.2",
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
@@ -73,6 +74,7 @@
     "react-is": "18.0.0",
     "react-native": "0.64",
     "react-native-agora": "3.7.1",
+    "react-native-exit-app": "1.1.0",
     "react-native-gesture-handler": "2.8.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",

package/template/src/App.tsx

@@ -11,18 +11,7 @@
 */
 import React, {useState, useContext} from 'react';
 import {Platform} from 'react-native';
-import Join from './pages/Join';
-import VideoCall from './pages/VideoCall';
-import Create from './pages/Create';
-import {Route, Switch, Redirect} from './components/Router';
-import PrivateRoute from './components/PrivateRoute';
-import OAuth from './components/OAuth';
-import StoreToken from './components/StoreToken';
-import {shouldAuthenticate} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
-// commented for v1 release
-//import {CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'customization-api';
-//import {useCustomization} from 'customization-implementation';
 import AppWrapper from './AppWrapper';
 import {
   MeetingInfoContextInterface,
@@ -31,9 +20,9 @@ import {
 } from './components/meeting-info/useMeetingInfo';
 import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
 import {ShareLinkProvider} from './components/useShareLink';
-import Endcall from './pages/Endcall';
+import AppRoutes from './AppRoutes';
 
-//hook can't be used in the outside react function calls. so directly checking the platform.
+// hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
   KeyboardManager.setEnable(true);
   KeyboardManager.setEnableAutoToolbar(false);
@@ -56,35 +45,6 @@ declare module 'agora-rn-uikit' {
 }
 
 const App: React.FC = () => {
-  //commented for v1 release
-  //const CustomRoutes = useCustomization((data) => data?.customRoutes);
-  // const RenderCustomRoutes = () => {
-  //   try {
-  //     return (
-  //       CustomRoutes &&
-  //       Array.isArray(CustomRoutes) &&
-  //       CustomRoutes.length &&
-  //       CustomRoutes?.map((item: CustomRoutesInterface, i: number) => {
-  //         let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
-  //         return (
-  //           <RouteComponent
-  //             path={CUSTOM_ROUTES_PREFIX + item.path}
-  //             exact={item.exact}
-  //             key={i}
-  //             failureRedirectTo={
-  //               item.failureRedirectTo ? item.failureRedirectTo : '/'
-  //             }
-  //             {...item.routeProps}>
-  //             <item.component {...item.componentProps} />
-  //           </RouteComponent>
-  //         );
-  //       })
-  //     );
-  //   } catch (error) {
-  //     console.error('Error on rendering the custom routes');
-  //     return null;
-  //   }
-  // };
   const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
     MeetingInfoDefaultValue,
   );
@@ -94,40 +54,7 @@ const App: React.FC = () => {
       <SetMeetingInfoProvider value={{setMeetingInfo}}>
         <MeetingInfoProvider value={{...meetingInfo}}>
           <ShareLinkProvider>
-            <Switch>
-              {/* commented for v1 release */}
-              {/* {RenderCustomRoutes()} */}
-              <Route exact path={'/'}>
-                <Redirect to={'/create'} />
-              </Route>
-              <Route exact path={'/authenticate'}>
-                {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
-              </Route>
-              <Route path={'/auth-token/:token'}>
-                <StoreToken />
-              </Route>
-              <Route exact path={'/join'}>
-                <Join />
-              </Route>
-              {/* Will be used in the future
-              <Route exact path={'/leave'}>
-                <Endcall />
-              </Route> */}
-              {shouldAuthenticate ? (
-                <PrivateRoute
-                  path={'/create'}
-                  failureRedirectTo={'/authenticate'}>
-                  <Create />
-                </PrivateRoute>
-              ) : (
-                <Route path={'/create'}>
-                  <Create />
-                </Route>
-              )}
-              <Route path={'/:phrase'}>
-                <VideoCall />
-              </Route>
-            </Switch>
+            <AppRoutes />
           </ShareLinkProvider>
         </MeetingInfoProvider>
       </SetMeetingInfoProvider>

package/template/src/AppRoutes.tsx

@@ -0,0 +1,45 @@
+/*
+********************************************
+ Copyright © 2021 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 from 'react';
+import Join from './pages/Join';
+import VideoCall from './pages/VideoCall';
+import Create from './pages/Create';
+import {Route, Switch, Redirect} from './components/Router';
+import AuthRoute from './auth/AuthRoute';
+import {IDPAuth} from './auth/IDPAuth';
+import {Text} from 'react-native';
+
+function AppRoutes() {
+  return (
+    <Switch>
+      <Route exact path={'/'}>
+        <Redirect to={'/create'} />
+      </Route>
+      <Route exact path={'/authorize/:token?'}>
+        <IDPAuth />
+      </Route>
+      <AuthRoute exact path={'/join'}>
+        <Join />
+      </AuthRoute>
+      <AuthRoute exact path={'/create'}>
+        <Create />
+      </AuthRoute>
+      <AuthRoute path={'/:phrase'}>
+        <VideoCall />
+      </AuthRoute>
+      <Route path="*">
+        <Text>Page not found</Text>
+      </Route>
+    </Switch>
+  );
+}
+export default AppRoutes;

package/template/src/AppWrapper.tsx

@@ -29,6 +29,7 @@ import Error from './components/common/Error';
 import {ErrorProvider} from './components/common';
 import {useCustomization} from 'customization-implementation';
 import {LanguageProvider} from './language/useLanguage';
+import {AuthProvider} from './auth/AuthProvider';
 import {PropsConsumer} from 'agora-rn-uikit';
 import ToastComponent from './components/ToastComponent';
 import {ToastContext, ToastProvider} from './components/useToast';
@@ -99,19 +100,21 @@ const AppWrapper = (props: AppWrapperProps) => {
                       ? `/${SdkJoinState.phrase}`
                       : '',
                   ]}>
-                  <SessionProvider>
-                    <ColorConfigure>
-                      <DimensionProvider>
-                        <LanguageProvider>
-                          <ErrorProvider>
-                            <Error />
-                            <Navigation />
-                            {props.children}
-                          </ErrorProvider>
-                        </LanguageProvider>
-                      </DimensionProvider>
-                    </ColorConfigure>
-                  </SessionProvider>
+                  <AuthProvider>
+                    <SessionProvider>
+                      <ColorConfigure>
+                        <DimensionProvider>
+                          <LanguageProvider>
+                            <ErrorProvider>
+                              <Error />
+                              <Navigation />
+                              {props.children}
+                            </ErrorProvider>
+                          </LanguageProvider>
+                        </DimensionProvider>
+                      </ColorConfigure>
+                    </SessionProvider>
+                  </AuthProvider>
                 </Router>
               </GraphQLProvider>
             </StorageProvider>

package/template/src/SDKAppWrapper.tsx

@@ -11,60 +11,96 @@ 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']>;
 
-export interface SdkMethodEvents {
-  customize: (customization: CustomizationApiInterface) => void;
-  join(
-    roomid: string | Partial<MeetingInfoContextInterface['data']>,
-    skipPrecall?: boolean,
-  ): MeetingInfoContextInterface['data'];
+export interface AppBuilderSdkApiInterface {
+  customize: (customization: CustomizationApiInterface) => Promise<void>;
+  joinRoom: (
+    roomDetails: string | meetingData,
+    userName?: string,
+  ) => Promise<meetingData>;
+  joinPrecall: (
+    roomDetails: string | meetingData,
+    userName?: string,
+  ) => Promise<
+    [
+      meetingData,
+      (userName?: string) => Promise<MeetingInfoContextInterface['data']>,
+    ]
+  >;
+  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;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+  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 = {
+  login: async (token: string) => {
+    return await SDKMethodEventsManager.emit('login', token);
+  },
+  logout: async () => {
+    return await SDKMethodEventsManager.emit('logout');
+  },
+  customize: async (customization) => {
     return await SDKMethodEventsManager.emit('customize', customization);
   },
   customEvents: customEvents,
-  join: async (roomDetails: string) => {
-    await SDKMethodEventsManager.emit('join', roomDetails, false);
+  joinRoom: async (roomDetails, userName) => {
+    return await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      true,
+      userName,
+    );
+  },
+  joinPrecall: async (roomDetails, userName) => {
+    if (!$config.PRECALL)
+      throw new Error('Precall disabled in config, cant join precall');
+    const t = await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      false,
+      userName,
+    );
+    return t as unknown as [
+      MeetingInfoContextInterface['data'],
+      (userName?: string) => Promise<MeetingInfoContextInterface['data']>,
+    ];
   },
-  joinRoom: async (
-    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
-  ) => {
-    return await SDKMethodEventsManager.emit('join', roomDetails, true);
+  setMicrophone: async (deviceId) => {
+    return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
   },
-  joinPrecall: async (
-    roomDetails: string | Partial<MeetingInfoContextInterface['data']>,
-  ) => {
-    const t = await SDKMethodEventsManager.emit('join', roomDetails);
-    return t as unknown as [MeetingInfoContextInterface['data'], () => {}];
+  setSpeaker: async (deviceId) => {
+    return await SDKMethodEventsManager.emit('speakerDevice', 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);
   },