agora-appbuilder-core 4.0.7 → 4.0.8

package/template/src/pages/Join.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext} from 'react';
+import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
 //import Logo from '../subComponents/Logo';
@@ -48,6 +48,7 @@ import {
   joinRoomInputLabel,
   joinRoomInputPlaceHolderText,
 } from '../language/default-labels/joinScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 const mobileOrTablet = isMobileOrTablet();
 
@@ -90,19 +91,44 @@ const Join = () => {
     null,
   );
 
-  const useJoin = useJoinRoom();
+  const apiJoinCall = useJoinRoom();
   const {setRoomInfo} = useSetRoomInfo();
+
   const createMeeting = () => {
+    logger.log(
+      LogSource.Internals,
+      'JOIN_MEETING',
+      'User is navigated to create-room screen',
+    );
     history.push('/create');
   };
 
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'JOIN_MEETING',
+      'user landed on join-meeting screen',
+    );
+  }, []);
+
   const startCall = async () => {
-    useJoin(phrase)
+    logger.log(
+      LogSource.Internals,
+      'JOIN_MEETING',
+      'User wants to join meeting',
+      phrase,
+    );
+    apiJoinCall(phrase)
       .then(() => {
         setRoomInfo(RoomInfoDefaultValue);
+        logger.log(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Navigating the user to precall screen or video call screen depending upon the project config',
+          phrase,
+        );
         history.push(phrase);
       })
-
       .catch(error => {
         const isInvalidUrl =
           error?.message.toLowerCase().trim() === 'invalid passphrase' || false;
@@ -122,6 +148,7 @@ const Join = () => {
         });
       });
   };
+
   const {JoinComponent} = useCustomization(data => {
     let components: {
       JoinComponent?: React.ComponentType;

package/template/src/pages/VideoCall.tsx

@@ -1,12 +1,12 @@
 /*
 ********************************************
  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. 
+ 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.
 *********************************************
 */
 // @ts-nocheck
@@ -27,13 +27,7 @@ import {useParams, useHistory} from '../components/Router';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import Logo from '../subComponents/Logo';
-import {
-  useHasBrandLogo,
-  isArray,
-  isMobileUA,
-  isWebInternal,
-} from '../utils/common';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
+import {useHasBrandLogo, isMobileUA, isWebInternal} from '../utils/common';
 import {videoView} from '../../theme.json';
 import {LiveStreamContextProvider} from '../components/livestream';
 import ScreenshareConfigure from '../subComponents/screenshare/ScreenshareConfigure';
@@ -41,7 +35,6 @@ import {ErrorContext} from '.././components/common/index';
 import {PreCallProvider} from '../components/precall/usePreCall';
 import {LayoutProvider} from '../utils/useLayout';
 import Precall from '../components/Precall';
-import useLayoutsData from './video-call/useLayoutsData';
 import {RecordingProvider} from '../subComponents/recording/useRecording';
 import useJoinRoom from '../utils/useJoinRoom';
 import {
@@ -62,7 +55,7 @@ import SDKEvents from '../utils/SdkEvents';
 import {UserPreferenceProvider} from '../components/useUserPreference';
 import EventsConfigure from '../components/EventsConfigure';
 import PermissionHelper from '../components/precall/PermissionHelper';
-import {currentFocus, FocusProvider} from '../utils/useFocus';
+import {FocusProvider} from '../utils/useFocus';
 import {VideoCallProvider} from '../components/useVideoCall';
 import {SdkApiContext} from '../components/SdkApiContext';
 import isSDK from '../utils/isSDK';
@@ -79,6 +72,7 @@ import VideoCallScreenWrapper from './video-call/VideoCallScreenWrapper';
 import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 import {videoRoomStartingCallText} from '../language/default-labels/videoCallScreenLabels';
 import {useString} from '../utils/useString';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 import {useCustomization} from 'customization-implementation';
 
 enum RnEncryptionEnum {
@@ -151,20 +145,10 @@ const VideoCall: React.FC = () => {
     : true;
   const [callActive, setCallActive] = useState(shouldCallBeSetToActive);
 
-  //layouts
-  const layouts = useLayoutsData();
-  const defaultLayoutName = isArray(layouts) ? layouts[0].name : '';
-  const [currentLayout, setLayout] = useState(defaultLayoutName);
-  //layouts
-
-  const [isRecordingActive, setRecordingActive] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
   const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
     useState(false);
-  const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
-  const [currentFocus, setFocus] = useState<currentFocus>({
-    editName: false,
-  });
+
   const {phrase} = useParams<{phrase: string}>();
 
   const {store} = useContext(StorageContext);
@@ -215,7 +199,11 @@ const VideoCall: React.FC = () => {
 
   React.useEffect(() => {
     return () => {
-      console.log('Videocall unmounted');
+      logger.debug(
+        LogSource.Internals,
+        'VIDEO_CALL_ROOM',
+        'Videocall unmounted',
+      );
       setRoomInfo(RoomInfoDefaultValue);
       if (awake) {
         release();
@@ -275,7 +263,6 @@ const VideoCall: React.FC = () => {
   React.useEffect(() => {
     if (
       //isJoinDataFetched === true && (!queryComplete || !isInWaitingRoom)
-
       //non waiting room - host/attendee
       (!$config.ENABLE_WAITING_ROOM &&
         isJoinDataFetched === true &&
@@ -377,10 +364,7 @@ const VideoCall: React.FC = () => {
       }
     },
   };
-  const [isCameraAvailable, setCameraAvailable] = useState(false);
-  const [isMicAvailable, setMicAvailable] = useState(false);
-  const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
-  const [isPermissionRequested, setIsPermissionRequested] = useState(false);
+
   return (
     <>
       {queryComplete ? (
@@ -406,30 +390,18 @@ const VideoCall: React.FC = () => {
                     <VideoQualityContextProvider>
                       <ChatUIControlsProvider>
                         <ChatNotificationProvider>
-                          <LayoutProvider
-                            value={{
-                              currentLayout,
-                              setLayout,
-                            }}>
-                            <FocusProvider value={{currentFocus, setFocus}}>
-                              <SidePanelProvider
-                                value={{
-                                  sidePanel,
-                                  setSidePanel,
-                                }}>
+                          <LayoutProvider>
+                            <FocusProvider>
+                              <SidePanelProvider>
                                 <ChatMessagesProvider callActive={callActive}>
                                   <ScreenShareProvider>
-                                    <RtmConfigure
-                                      setRecordingActive={setRecordingActive}
-                                      callActive={callActive}>
+                                    <RtmConfigure callActive={callActive}>
                                       <UserPreferenceProvider>
                                         <CaptionProvider>
                                           <WaitingRoomProvider>
                                             <EventsConfigure>
                                               <RecordingProvider
                                                 value={{
-                                                  setRecordingActive,
-                                                  isRecordingActive,
                                                   callActive,
                                                 }}>
                                                 <ScreenshareConfigure>
@@ -463,14 +435,6 @@ const VideoCall: React.FC = () => {
                                                                   value={{
                                                                     callActive,
                                                                     setCallActive,
-                                                                    isCameraAvailable,
-                                                                    isMicAvailable,
-                                                                    setCameraAvailable,
-                                                                    setMicAvailable,
-                                                                    isPermissionRequested,
-                                                                    setIsPermissionRequested,
-                                                                    isSpeakerAvailable,
-                                                                    setSpeakerAvailable,
                                                                   }}>
                                                                   <Precall />
                                                                 </PreCallProvider>

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -8,6 +8,7 @@ import {
   toolbarItemLayoutOptionGridText,
   toolbarItemLayoutOptionSidebarText,
 } from '../../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 const isMobileView = isMobileUA();
 const DefaultLayouts: LayoutItem[] = [
   {
@@ -70,8 +71,15 @@ export const useChangeDefaultLayout = () => {
   }
 
   return () => {
-    setLayout((activeLayout: string) =>
-      activeLayout === layout[1].name ? layout[0].name : layout[1].name,
-    );
+    setLayout((activeLayout: string) => {
+      const layoutIs =
+        activeLayout === layout[1].name ? layout[0].name : layout[1].name;
+      logger.log(
+        LogSource.Internals,
+        'LAYOUT',
+        `layout changed to - ${layoutIs}`,
+      );
+      return layoutIs;
+    });
   };
 };

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

@@ -45,6 +45,7 @@ import {
   sttDownloadTranscriptBtnText,
   sttTranscriptPanelHeaderText,
 } from '../../language/default-labels/videoCallScreenLabels';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
 
 export const SettingsHeader = props => {
   const {setSidePanel} = useSidePanel();
@@ -277,10 +278,19 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
     if (langChanged) {
       restart(language)
         .then(() => {
-          console.log('stt restarted successfully');
+          logger.debug(
+            LogSource.Internals,
+            'STT',
+            'stt restarted successfully',
+          );
         })
         .catch(error => {
-          console.log('Error in restarting', error);
+          logger.error(
+            LogSource.Internals,
+            'STT',
+            'Error in restarting',
+            error,
+          );
           // Handle the error case
         });
     }

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

@@ -40,6 +40,7 @@ import Leftbar, {LeftbarProps} from '../../components/Leftbar';
 import Rightbar, {RightbarProps} from '../../components/Rightbar';
 import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
 import VBPanel from '../../components/virtual-background/VBPanel';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
 
 const VideoCallScreen = () => {
@@ -231,6 +232,13 @@ const VideoCallScreen = () => {
   const isDesktop = useIsDesktop();
   const isSmall = useIsSmall();
 
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'VIDEO_CALL_ROOM',
+      'User has landed on video call room',
+    );
+  }, []);
   const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
 
   return VideocallComponent ? (

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

@@ -37,6 +37,7 @@ import {
   moreBtnViewInLarge,
   moreBtnViewWhiteboard,
 } from '../../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 export interface VideoRendererProps {
   user: ContentInterface;
   isMax?: boolean;
@@ -361,6 +362,11 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           !isMobileUA() ? (
             <IconButton
               onPress={() => {
+                logger.log(
+                  LogSource.Internals,
+                  'LAYOUT',
+                  `Pin user -> ${user.uid}`,
+                );
                 dispatch({type: 'UserPin', value: [user.uid]});
               }}
               containerStyle={

package/template/src/rtm/RTMEngine.ts

@@ -50,9 +50,11 @@ class RTMEngine {
 
     return RTMEngine._instance;
   }
+
   setLocalUID(localUID: string) {
     this.localUID = localUID;
   }
+
   setChannelId(channelID: string) {
     this.channelId = channelID;
   }
@@ -61,12 +63,15 @@ class RTMEngine {
     this.localUID = localUID;
     this.channelId = channelID;
   }
+
   get localUid() {
     return this.localUID;
   }
+
   get channelUid() {
     return this.channelId;
   }
+
   async destroy() {
     try {
       await this.destroyClientInstance();

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

@@ -21,6 +21,7 @@ import {
   PersistanceLevel,
 } from './types';
 import {adjustUID} from '../rtm/utils';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 class Events {
   private source: EventSource = EventSource.core;
@@ -45,8 +46,10 @@ class Events {
       // Step 1: Call RTM API to update local attributes
       await rtmEngine.addOrUpdateLocalUserAttributes([rtmAttribute]);
     } catch (error) {
-      console.log(
-        'CUSTOM_EVENT_API error occured while updating the value ',
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'error occured while updating the value ',
         error,
       );
     }
@@ -106,18 +109,31 @@ class Events {
       (typeof to === 'number' && to <= 0) ||
       (Array.isArray(to) && to?.length === 0)
     ) {
-      console.log('CUSTOM_EVENT_API: case 1 executed');
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'case 1 executed - sending in channel',
+      );
       try {
         const channelId = RTMEngine.getInstance().channelUid;
         await rtmEngine.sendMessageByChannelId(channelId, text);
       } catch (error) {
-        console.log('CUSTOM_EVENT_API: send event case 1 error : ', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'send event case 1 error',
+          error,
+        );
         throw error;
       }
     }
     // Case 2: send to indivdual
-    if (typeof to === 'number' && to !== 0) {
-      console.log('CUSTOM_EVENT_API: case 2 executed', to);
+    if (typeof to === 'number' && to >= 0) {
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        `case 2 executed - sending to individual ${to}`,
+      );
       const adjustedUID = adjustUID(to);
       try {
         await rtmEngine.sendMessageToPeer({
@@ -126,14 +142,23 @@ class Events {
           text,
         });
       } catch (error) {
-        console.log('CUSTOM_EVENT_API: send event case 2 error : ', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'send event case 2 error',
+          error,
+        );
         throw error;
       }
     }
     // Case 3: send to multiple individuals
     if (typeof to === 'object' && Array.isArray(to)) {
-      console.log('CUSTOM_EVENT_API: case 3 executed', to);
-
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'case 3 executed - sending to multiple individuals',
+        to,
+      );
       try {
         for (const uid of to) {
           const adjustedUID = adjustUID(uid);
@@ -144,7 +169,12 @@ class Events {
           });
         }
       } catch (error) {
-        console.log('CUSTOM_EVENT_API: send event case 3 error : ', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'send event case 3 error',
+          error,
+        );
         throw error;
       }
     }
@@ -162,8 +192,9 @@ class Events {
    */
   on = (eventName: string, listener: EventCallback): Function => {
     try {
-      if (!this._validateEvt(eventName) || !this._validateListener(listener))
+      if (!this._validateEvt(eventName) || !this._validateListener(listener)) {
         return;
+      }
       EventUtils.addListener(eventName, listener, this.source);
       console.log('CUSTOM_EVENT_API event listener registered', eventName);
       return () => {
@@ -171,7 +202,12 @@ class Events {
         EventUtils.removeListener(eventName, listener, this.source);
       };
     } catch (error) {
-      console.log('CUSTOM_EVENT_API on error: ', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'Error: events.on',
+        error,
+      );
     }
   };
 
@@ -202,7 +238,12 @@ class Events {
         EventUtils.removeAll(this.source);
       }
     } catch (error) {
-      console.log('CUSTOM_EVENT_API off error: ', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'Error: events.off',
+        error,
+      );
     }
   };
 
@@ -224,7 +265,9 @@ class Events {
     persistLevel: PersistanceLevel = PersistanceLevel.None,
     receiver: ReceiverUid = -1,
   ) => {
-    if (!this._validateEvt(eventName)) return;
+    if (!this._validateEvt(eventName)) {
+      return;
+    }
 
     const persistValue = JSON.stringify({
       payload,
@@ -244,13 +287,24 @@ class Events {
       try {
         await this._persist(eventName, persistValue);
       } catch (error) {
-        console.log('CUSTOM_EVENT_API persist error: ', error);
+        logger.error(LogSource.Events, 'CUSTOM_EVENTS', 'persist error', error);
       }
     }
     try {
+      logger.log(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        `sending event -> ${eventName}`,
+        persistValue,
+      );
       await this._send(rtmPayload, receiver);
     } catch (error) {
-      console.log('CUSTOM_EVENT_API: sending failed. ', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'sending event failed',
+        error,
+      );
     }
   };
 }

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -14,6 +14,7 @@ import {
   toolbarItemLayoutOptionGridText,
   toolbarItemLayoutOptionSidebarText,
 } from '../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 interface LayoutIconDropdownProps {
   modalPosition?: {
@@ -52,6 +53,11 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
   const renderDropdown = () => {
     const data = layouts.map((item, index) => {
       let onPress = () => {
+        logger.log(
+          LogSource.Internals,
+          'LAYOUT',
+          `Layout changed to - ${item.name}`,
+        );
         setLayout(item.name);
         setShowDropdown(false);
       };

package/template/src/subComponents/LocalAudioMute.tsx

@@ -39,6 +39,7 @@ import {
   toolbarItemMicrophoneText,
   toolbarItemMicrophoneTooltipText,
 } from '../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 /**
  * A component to mute / unmute the local audio
@@ -79,15 +80,24 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     rtcProps: {callActive},
   } = useContext(PropsContext);
 
-  const onPress = () => {
-    localMute(MUTE_LOCAL_TYPE.audio);
-  };
   const isAudioEnabled = local.audio === ToggleState.enabled;
 
   const permissionDenied =
     local.permissionStatus === PermissionState.REJECTED ||
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
 
+  const onPress = () => {
+    logger.log(
+      LogSource.Internals,
+      'LOCAL_MUTE',
+      'toggle mute/unmute local audio',
+      {
+        isAudioEnabled,
+        permissionDenied,
+      },
+    );
+    localMute(MUTE_LOCAL_TYPE.audio);
+  };
   const audioLabel = permissionDenied
     ? micButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)
     : isAudioEnabled

package/template/src/subComponents/LocalEndCall.tsx

@@ -9,8 +9,9 @@ import {useScreenshare} from './screenshare/useScreenshare';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
-import {useString} from '../utils/useString';
-import {toolbarItemLeaveText} from '../language/default-labels/videoCallScreenLabels';
+import {useString} from '../../src/utils/useString';
+import {toolbarItemLeaveText} from '../../src/language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 import useEndCall from '../utils/useEndCall';
 
 export interface LocalEndcallProps {
@@ -22,7 +23,11 @@ export interface LocalEndcallProps {
 export const stopForegroundService = () => {
   if (Platform.OS === 'android') {
     ReactNativeForegroundService.stop();
-    console.log('stopping foreground service');
+    logger.debug(
+      LogSource.Internals,
+      'CONTROLS',
+      'Local end call - stopping foreground service, bg audio for android only',
+    );
   }
 };
 

package/template/src/subComponents/LocalVideoMute.tsx

@@ -42,7 +42,7 @@ import {
   toolbarItemCameraText,
   toolbarItemCameraTooltipText,
 } from '../language/default-labels/videoCallScreenLabels';
-
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 /**
  * A component to mute / unmute the local video
  */
@@ -86,7 +86,21 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   const onPress = () => {
     //if screensharing is going on native - to turn on video screenshare should be turn off
     //show confirm popup to stop the screenshare
+    logger.log(
+      LogSource.Internals,
+      'LOCAL_MUTE',
+      'toggle mute/unmute local video',
+      {
+        isVideoEnabled,
+        permissionDenied,
+      },
+    );
     if ((isAndroid() || isIOS()) && isScreenshareActive) {
+      logger.log(
+        LogSource.Internals,
+        'LOCAL_MUTE',
+        'Screenshare is active. To turn on video screenshare should be turn off',
+      );
       setShowStopScreenSharePopup(true);
     } else {
       localMute(MUTE_LOCAL_TYPE.video);