agora-appbuilder-core 4.0.0-api.8 → 4.0.0-api.9

package/template/src/App.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext} from 'react';
+import React, {useState, useLayoutEffect} from 'react';
 import {Platform} from 'react-native';
 import KeyboardManager from 'react-native-keyboard-manager';
 import AppWrapper from './AppWrapper';
@@ -21,6 +21,7 @@ import {
 import {SetRoomInfoProvider} from './components/room-info/useSetRoomInfo';
 import {ShareLinkProvider} from './components/useShareLink';
 import AppRoutes from './AppRoutes';
+import {isWebInternal} from './utils/common';
 
 // hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
@@ -44,8 +45,64 @@ declare module 'agora-rn-uikit' {
   // }
 }
 
+declare global {
+  interface Navigator {
+    notifyReady?: () => boolean;
+  }
+}
+
 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 notifyReady = () => {
+    if (typeof window.navigator.notifyReady === 'function') {
+      console.log('recording-bot: notifyReady is available');
+      window.navigator.notifyReady();
+    } else {
+      console.log('recording-bot: notifyReady is un-available');
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (isWebInternal()) {
+      // Register only on web
+      window.addEventListener('load', notifyReady);
+    }
+    return () => {
+      if (isWebInternal()) {
+        window.removeEventListener('load', notifyReady);
+      }
+    };
+  }, []);
+
   const [roomInfo, setRoomInfo] =
     useState<RoomInfoContextInterface>(RoomInfoDefaultValue);
 

package/template/src/AppRoutes.tsx

@@ -20,6 +20,21 @@ import {Text} from 'react-native';
 import {useCustomization} from 'customization-implementation';
 import {CUSTOM_ROUTES_PREFIX, CustomRoutesInterface} from 'customization-api';
 import PrivateRoute from './components/PrivateRoute';
+import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
+import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
+
+function VideoCallWrapper(props) {
+  const {isRecordingBotRoute} = useIsRecordingBot();
+  return isRecordingBotRoute ? (
+    <RecordingBotRoute history={props.history}>
+      <VideoCall />
+    </RecordingBotRoute>
+  ) : (
+    <AuthRoute>
+      <VideoCall />
+    </AuthRoute>
+  );
+}
 
 function AppRoutes() {
   const CustomRoutes = useCustomization(data => data?.customRoutes);
@@ -65,9 +80,7 @@ function AppRoutes() {
         <Create />
       </AuthRoute>
       {RenderCustomRoutes()}
-      <AuthRoute path={'/:phrase'}>
-        <VideoCall />
-      </AuthRoute>
+      <Route exact path={'/:phrase'} component={VideoCallWrapper} />
       <Route path="*">
         <Text>Page not found</Text>
       </Route>

package/template/src/AppWrapper.tsx

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

package/template/src/components/Chat.tsx

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

package/template/src/components/Controls.tsx

@@ -29,7 +29,7 @@ import Recording from '../subComponents/Recording';
 import LocalSwitchCamera from '../subComponents/LocalSwitchCamera';
 import ScreenshareButton from '../subComponents/screenshare/ScreenshareButton';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
-import {ClientRole} from '../../agora-rn-uikit';
+import {ClientRoleType} from '../../agora-rn-uikit';
 import LiveStreamControls from './livestream/views/LiveStreamControls';
 import {
   BREAKPOINTS,
@@ -525,14 +525,14 @@ const MoreButton = () => {
     if ($config.SCREEN_SHARING) {
       if (
         !(
-          rtcProps.role == ClientRole.Audience &&
+          rtcProps.role == ClientRoleType.ClientRoleAudience &&
           $config.EVENT_MODE &&
           !$config.RAISE_HAND
         )
       ) {
         actionMenuitems.push({
           disabled:
-            rtcProps.role == ClientRole.Audience &&
+            rtcProps.role == ClientRoleType.ClientRoleAudience &&
             $config.EVENT_MODE &&
             $config.RAISE_HAND &&
             !isHost,
@@ -775,9 +775,9 @@ export const RaiseHandToolbarItem = () => {
     data: {isHost},
   } = useRoomInfo();
   return $config.EVENT_MODE ? (
-    rtcProps.role == ClientRole.Audience ? (
+    rtcProps.role == ClientRoleType.ClientRoleAudience ? (
       <LiveStreamControls showControls={true} />
-    ) : rtcProps?.role == ClientRole.Broadcaster ? (
+    ) : rtcProps?.role == ClientRoleType.ClientRoleBroadcaster ? (
       /**
        * In event mode when raise hand feature is active
        * and audience is promoted to host, the audience can also

package/template/src/components/Controls1.native.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {View, StyleSheet} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
 import LocalAudioMute, {
   LocalAudioMuteProps,
 } from '../subComponents/LocalAudioMute';
@@ -40,7 +40,8 @@ const Controls = () => {
 
   return (
     <View style={style.bottomBar}>
-      {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+      {$config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience ? (
         <LiveStreamControls showControls={true} />
       ) : (
         <>
@@ -51,7 +52,10 @@ const Controls = () => {
            */}
           {$config.EVENT_MODE && (
             <LiveStreamControls
-              showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
+              showControls={
+                rtcProps?.role == ClientRoleType.ClientRoleBroadcaster &&
+                !isHost
+              }
             />
           )}
           <View style={{alignSelf: 'center'}}>

package/template/src/components/DeviceConfigure.native.tsx

@@ -11,10 +11,10 @@
 */
 import React from 'react';
 import KeepAwake from 'react-native-keep-awake';
-import {ClientRole} from '../../agora-rn-uikit';
+import {ClientRoleType} from '../../agora-rn-uikit';
 
 interface Props {
-  userRole: ClientRole;
+  userRole: ClientRoleType;
 }
 const DeviceConfigure: React.FC<Props> = (props: any) => {
   return (

package/template/src/components/DeviceConfigure.tsx

@@ -17,7 +17,7 @@ import React, {
   useRef,
   useContext,
 } from 'react';
-import {ClientRole, RtcContext} from '../../agora-rn-uikit';
+import {ClientRoleType, RtcContext} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
 import AgoraRTC, {DeviceInfo} from 'agora-rtc-sdk-ng';
 import {useRtc} from 'customization-api';
@@ -49,7 +49,7 @@ const log = (...args: any[]) => {
 type WebRtcEngineInstance = InstanceType<typeof RtcEngine>;
 
 interface Props {
-  userRole: ClientRole;
+  userRole: ClientRoleType;
 }
 export type deviceInfo = MediaDeviceInfo;
 export type deviceId = deviceInfo['deviceId'];

package/template/src/components/EventsConfigure.tsx

@@ -306,7 +306,7 @@ const EventsConfigure: React.FC<Props> = props => {
         });
       }
     });
-    events.on(controlMessageEnum.muteAudio, ({sender}) => {
+    events.on(controlMessageEnum.muteAudio, async ({sender}) => {
       Toast.show({
         leadingIconName: 'mic-off',
         type: 'info',
@@ -319,7 +319,10 @@ const EventsConfigure: React.FC<Props> = props => {
         secondaryBtn: null,
         leadingIcon: null,
       });
-      RtcEngineUnsafe.muteLocalAudioStream(true);
+      isWebInternal()
+        ? await RtcEngineUnsafe.muteLocalAudioStream(true)
+        : //@ts-ignore
+          await RtcEngineUnsafe.enableLocalAudio(false);
       dispatch({
         type: 'LocalMuteAudio',
         value: [0],
@@ -364,8 +367,11 @@ const EventsConfigure: React.FC<Props> = props => {
               containerStyle={style.primaryBtn}
               textStyle={style.textStyle}
               text={requestUserAudioPrimaryBtnRef.current}
-              onPress={() => {
-                RtcEngineUnsafe.muteLocalAudioStream(false);
+              onPress={async () => {
+                isWebInternal()
+                  ? await RtcEngineUnsafe.muteLocalAudioStream(false)
+                  : //@ts-ignore
+                    await RtcEngineUnsafe.enableLocalAudio(true);
                 dispatch({
                   type: 'LocalMuteAudio',
                   value: [1],

package/template/src/components/GraphQLProvider.tsx

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

package/template/src/components/GridVideo.tsx

@@ -15,7 +15,11 @@ import {View, StyleSheet, Pressable, Text} from 'react-native';
 import {isWebInternal, useIsDesktop} from '../utils/common';
 import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
 import RenderComponent from '../pages/video-call/RenderComponent';
-import {ClientRole, DispatchContext, PropsContext} from '../../agora-rn-uikit';
+import {
+  ClientRoleType,
+  DispatchContext,
+  PropsContext,
+} from '../../agora-rn-uikit';
 import LiveStreamAttendeeLandingTile from './livestream/views/LiveStreamAttendeeLandingTile';
 
 const layout = (len: number, isDesktop: boolean = true) => {
@@ -53,7 +57,7 @@ const GridVideo: LayoutComponent = ({renderData}) => {
   //livestreaming audience will see this if no host joined the call
   if (
     $config.EVENT_MODE &&
-    rtcProps?.role === ClientRole.Audience &&
+    rtcProps?.role === ClientRoleType.ClientRoleAudience &&
     activeUids.filter(i => !customContent[i]).length === 0
   ) {
     return <LiveStreamAttendeeLandingTile />;

package/template/src/components/NetworkQualityContext.tsx

@@ -28,6 +28,12 @@ import {useRtc} from 'customization-api';
  * 7 - Unsupported
  * 8 - Loading
  */
+
+interface RtcConnection {
+  channelId?: string;
+  localUid?: number;
+}
+
 export const networkIconsObject: {
   [key: number]: {
     icon: keyof IconsInterface;
@@ -106,13 +112,14 @@ export const NetworkQualityProvider: React.FC = (props: {
 
   useMount(() => {
     function handleNetworkQuality(
+      connection: RtcConnection,
       uid: UidType,
-      downlinkQuality: number,
       // Currently unused , potential use might be to take weighted average
       // of this alongside the downlink quality.
-      uplinkQuality: number,
+      uplinkQuality: keyof typeof networkIconsObject,
+      downlinkQuality: keyof typeof networkIconsObject,
     ) {
-      setNetworkQualityStats((prevNetworkQualityStats) => {
+      setNetworkQualityStats(prevNetworkQualityStats => {
         const updatedNetworkQualityStats = {...prevNetworkQualityStats};
         if (uid === 0) {
           const displayedNetworkQuality =
@@ -130,8 +137,7 @@ export const NetworkQualityProvider: React.FC = (props: {
         return updatedNetworkQualityStats;
       });
     }
-
-    RtcEngineUnsafe.addListener('NetworkQuality', handleNetworkQuality);
+    RtcEngineUnsafe.addListener('onNetworkQuality', handleNetworkQuality);
   });
 
   return (

package/template/src/components/ParticipantsView.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useContext, useState} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
 import CopyJoinInfo from '../subComponents/CopyJoinInfo';
 import ParticipantSectionTitle from './participants/ParticipantSectionTitle';
 import AllHostParticipants from './participants/AllHostParticipants';
@@ -109,7 +109,7 @@ const ParticipantView = props => {
             {
               /*Live streaming is true            
                 Host and New host view */
-              rtcProps?.role == ClientRole.Broadcaster &&
+              rtcProps?.role == ClientRoleType.ClientRoleBroadcaster &&
                 (isHost ? (
                   /**
                    * Original Host
@@ -177,7 +177,7 @@ const ParticipantView = props => {
               /**
                *  Audience views all hosts without remote controls
                */
-              rtcProps?.role == ClientRole.Audience && (
+              rtcProps?.role == ClientRoleType.ClientRoleAudience && (
                 <>
                   <ParticipantSectionTitle
                     title={hostLabel}

package/template/src/components/PinnedVideo.tsx

@@ -24,7 +24,7 @@ import {useContent} from 'customization-api';
 import RenderComponent from '../pages/video-call/RenderComponent';
 import IconButton from '../atoms/IconButton';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {BREAKPOINTS, isMobileUA} from '../utils/common';
+import {BREAKPOINTS, isMobileUA, isWebInternal} from '../utils/common';
 import {DispatchContext} from '../../agora-rn-uikit';
 import {useVideoCall} from '../components/useVideoCall';
 import useActiveSpeaker from '../utils/useActiveSpeaker';
@@ -180,7 +180,7 @@ const PinnedVideo = ({renderData}) => {
               );
             })}
           </ScrollView>
-          {$config.ACTIVE_SPEAKER && !isOnTop && (
+          {$config.ACTIVE_SPEAKER && !isOnTop && isWebInternal() && (
             <View
               style={
                 isSidePinnedlayout

package/template/src/components/Precall.native.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
-import {PropsContext, ClientRole, ToggleState} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType, ToggleState} from '../../agora-rn-uikit';
 import {isValidReactComponent, isWebInternal, trimText} from '../utils/common';
 import ColorContext from './ColorContext';
 import {useRoomInfo} from './room-info/useRoomInfo';
@@ -96,7 +96,9 @@ const JoinRoomInputView = ({isDesktop}) => {
           {/* <Text style={style.subTextStyle}>
             Enter the name you would like to join the room as
           </Text> */}
-          {rtcProps.role == ClientRole.Audience && <Spacer size={20} />}
+          {rtcProps.role == ClientRoleType.ClientRoleAudience && (
+            <Spacer size={20} />
+          )}
         </>
       ) : (
         <></>
@@ -104,7 +106,7 @@ const JoinRoomInputView = ({isDesktop}) => {
       <View
         style={
           $config.EVENT_MODE &&
-          rtcProps.role == ClientRole.Audience && {
+          rtcProps.role == ClientRoleType.ClientRoleAudience && {
             justifyContent: 'space-between',
             flex: 1,
           }
@@ -117,7 +119,7 @@ const JoinRoomInputView = ({isDesktop}) => {
               : {width: '100%'}
           }>
           {$config.ENABLE_WAITING_ROOM &&
-          rtcProps.role === ClientRole.Audience ? (
+          rtcProps.role === ClientRoleType.ClientRoleAudience ? (
             <JoinWaitingRoomBtn />
           ) : (
             <JoinButton />
@@ -203,7 +205,7 @@ const JoinRoomButton = () => {
     return components;
   });
   return $config.ENABLE_WAITING_ROOM &&
-    rtcProps.role === ClientRole.Audience ? (
+    rtcProps.role === ClientRoleType.ClientRoleAudience ? (
     <JoinWaitingRoomBtn />
   ) : (
     <JoinButton />
@@ -350,7 +352,8 @@ const Precall = (props: any) => {
           contentContainerStyle={style.mainMobile}
           testID="precall-screen">
           {/* Precall screen only changes for audience in Live Stream event */}
-          {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+          {$config.EVENT_MODE &&
+          rtcProps.role == ClientRoleType.ClientRoleAudience ? (
             //  Live (Audience)
             <View style={{flex: 1}}>
               <View