agora-appbuilder-core 4.0.0-beta.9 → 4.0.0-ms.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0-ms.2",
   "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",
+    "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",
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/_package-lock.json

@@ -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",
@@ -19419,6 +19420,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",
@@ -44616,6 +44622,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",

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

@@ -120,6 +120,7 @@ export interface RtcPropsInterface {
   // };
   geoFencing?: boolean;
   audioRoom?: boolean;
+  activeSpeaker?: boolean;
 }
 
 export interface CallbacksInterface {

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

@@ -25,7 +25,11 @@ const Create = ({
 }) => {
   const [ready, setReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
-  const {geoFencing = true, audioRoom = false} = rtcProps || {};
+  const {
+    geoFencing = true,
+    audioRoom = false,
+    activeSpeaker = false,
+  } = rtcProps || {};
   let engine = useRef<RtcEngine>({} as RtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
@@ -228,7 +232,9 @@ const Create = ({
         } else {
           await engine.current.setChannelProfile(ChannelProfile.Communication);
         }
-        await engine.current.enableAudioVolumeIndication(500, 3, true);
+        if (activeSpeaker) {
+          await engine.current.enableAudioVolumeIndication(500, 3, true);
+        }
         if (!audioRoom) {
           if (rtcProps.profile) {
             if (Platform.OS === 'web') {

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

@@ -192,8 +192,8 @@ export default class RtcEngine {
   private inScreenshare: Boolean = false;
   private videoProfile: VideoProfile = '480p_9';
   private isPublished = false;
-  private isAudioEnabled = true;
-  private isVideoEnabled = true;
+  private isAudioEnabled = false;
+  private isVideoEnabled = false;
   private isAudioPublished = false;
   private isVideoPublished = false;
   private isJoined = false;
@@ -229,6 +229,10 @@ export default class RtcEngine {
     try {
       let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
       this.localStream.audio = localAudio;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = e;
       e.status = {audioError};
@@ -262,6 +266,14 @@ export default class RtcEngine {
         );
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.videoDeviceId = localVideo
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isVideoEnabled = true;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = false;
       let videoError = false;
@@ -269,12 +281,20 @@ export default class RtcEngine {
         let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
 
         this.localStream.audio = localAudio;
+        this.audioDeviceId = localAudio
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isAudioEnabled = true;
       } catch (error) {
         audioError = error;
       }
       try {
         let localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
         this.localStream.video = localVideo;
+        this.videoDeviceId = localVideo
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isVideoEnabled = true;
       } catch (error) {
         videoError = error;
       }

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

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

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/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",

package/template/react-native-toast-message/src/components/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity, Text, Pressable } from 'react-native';
 import PropTypes from 'prop-types';
 import { stylePropType } from '../utils/prop-types';
@@ -115,6 +115,7 @@ function BaseToast({
                 {...primaryBtn}
                 onPress={(e) => {
                   primaryBtn.onPress(checked, e);
+                  setChecked(false);
                 }}
               />
             )}
@@ -127,6 +128,10 @@ function BaseToast({
                   paddingVertical: 0
                 }}
                 {...secondaryBtn}
+                onPress={(e) => {
+                  secondaryBtn.onPress(checked, e);
+                  setChecked(false);
+                }}
               />
             )}
           </View>
@@ -144,7 +149,7 @@ BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
   text1: PropTypes.string,
-  text2: PropTypes.string || PropTypes.element,
+  text2: PropTypes.string || PropTypes.element || PropTypes.any,
   onPress: PropTypes.func,
   style: stylePropType,
   contentContainerStyle: stylePropType,

package/template/src/App.tsx

@@ -9,20 +9,9 @@
  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';
-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,53 @@
+/*
+********************************************
+ 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 StoreToken from './components/StoreToken';
+import {IDPAuth} from './auth/IDPAuth';
+import Login from './pages/Login';
+import {Text} from 'react-native';
+
+function AppRoutes() {
+  return (
+    <Switch>
+      <Route exact path={'/login'}>
+        <Login />
+      </Route>
+      <Route exact path={'/'}>
+        <Redirect to={'/create'} />
+      </Route>
+      {/* <Route exact path={'/authorize/:token'}>
+        <StoreToken />
+      </Route> */}
+      <Route exact path={'/authorize'}>
+        <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

@@ -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';
@@ -29,9 +29,12 @@ 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';
+import {SdkApiContext} from './components/SdkApiContext';
+import isSDK from './utils/isSDK';
 
 interface AppWrapperProps {
   children: React.ReactNode;
@@ -73,6 +76,8 @@ const AppWrapper = (props: AppWrapperProps) => {
     return React.Fragment;
   });
 
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
   return (
     <AppRoot>
       <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
@@ -88,20 +93,28 @@ const AppWrapper = (props: AppWrapperProps) => {
             </ToastContext.Consumer>
             <StorageProvider>
               <GraphQLProvider>
-                <Router>
-                  <SessionProvider>
-                    <ColorConfigure>
-                      <DimensionProvider>
-                        <LanguageProvider>
-                          <ErrorProvider>
-                            <Error />
-                            <Navigation />
-                            {props.children}
-                          </ErrorProvider>
-                        </LanguageProvider>
-                      </DimensionProvider>
-                    </ColorConfigure>
-                  </SessionProvider>
+                <Router
+                  /*@ts-ignore Router will be memory Router in sdk*/
+                  initialEntries={[
+                    isSDK && SdkJoinState.phrase
+                      ? `/${SdkJoinState.phrase}`
+                      : '',
+                  ]}>
+                  <AuthProvider>
+                    <SessionProvider>
+                      <ColorConfigure>
+                        <DimensionProvider>
+                          <LanguageProvider>
+                            <ErrorProvider>
+                              <Error />
+                              <Navigation />
+                              {props.children}
+                            </ErrorProvider>
+                          </LanguageProvider>
+                        </DimensionProvider>
+                      </ColorConfigure>
+                    </SessionProvider>
+                  </AuthProvider>
                 </Router>
               </GraphQLProvider>
             </StorageProvider>