agora-appbuilder-core 4.0.7 → 4.0.8-beta-01

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -78,7 +78,7 @@ export default function UserActionMenuOptionsOptions(
   const [showVideoMuteModal, setShowVideoMuteModal] = useState(false);
   const [isPosCalculated, setIsPosCalculated] = useState(false);
   const {setFocus} = useFocus();
-  const {stopScreenshare} = useScreenshare();
+  const {stopUserScreenShare} = useScreenshare();
   const remoteEndScreenshare = useRemoteEndScreenshare();
   const [removeScreensharePopupVisible, setRemoveScreensharePopupVisible] =
     useState(false);
@@ -379,7 +379,7 @@ export default function UserActionMenuOptionsOptions(
           setActionMenuVisible(false);
           //for local user directly stop the screenshare
           if (localuid === user.parentUid) {
-            stopScreenshare();
+            stopUserScreenShare();
           }
           //for remote user show popup and then user will use cta to stop screenshare
           else {

package/template/src/components/popups/StartScreenSharePopup.native.tsx

@@ -24,7 +24,7 @@ const StartScreenSharePopup = () => {
   const {showStartScreenSharePopup, setShowStartScreenSharePopup} =
     useVideoCall();
   const {video} = useLocalUserInfo();
-  const {startScreenshare, isScreenshareActive} = useScreenshare();
+  const {startUserScreenshare, isScreenshareActive} = useScreenshare();
   const isDesktop = useIsDesktop()('popup');
   const cancelLabel = useString(cancelText)();
   const proceedLabel = useString(nativeScreensharePopupPrimaryBtnText)();
@@ -42,7 +42,7 @@ const StartScreenSharePopup = () => {
   const doStartScreenShare = () => {
     if (!isScreenshareActive) {
       //@ts-ignore native only we will have argument
-      startScreenshare && startScreenshare(shareAudio);
+      startUserScreenshare && startUserScreenshare(shareAudio);
       setShowStartScreenSharePopup(false);
     }
   };

package/template/src/components/popups/StopScreenSharePopup.native.tsx

@@ -24,7 +24,7 @@ import {cancelText} from '../../language/default-labels/commonLabels';
 const StopScreenSharePopup = () => {
   const {showStopScreenSharePopup, setShowStopScreenSharePopup} =
     useVideoCall();
-  const {stopScreenshare, isScreenshareActive} = useScreenshare();
+  const {stopUserScreenShare, isScreenshareActive} = useScreenshare();
   const isDesktop = useIsDesktop()('popup');
   const localMute = useMuteToggleLocal();
   const screenshareLabelHeading = useString(
@@ -43,7 +43,7 @@ const StopScreenSharePopup = () => {
     if (isScreenshareActive) {
       //true means keep the video enabled and stop only the screenshare
       //@ts-ignore
-      stopScreenshare(true);
+      stopUserScreenShare(true);
       setShowStopScreenSharePopup(false);
     }
   };

package/template/src/components/precall/joinCallBtn.tsx

@@ -26,6 +26,7 @@ import isMobileOrTablet from '../../utils/isMobileOrTablet';
 import {isWebInternal} from '../../utils/common';
 import useSetName from '../../utils/useSetName';
 import {useUserPreference} from '../useUserPreference';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -59,6 +60,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   );
 
   const onSubmit = () => {
+    logger.log(
+      LogSource.Internals,
+      'PRECALL_SCREEN',
+      'User clicked on join call button. setting call active to true',
+    );
     setUsername(username.trim());
     setCallActive(true);
     //updating name in the backend

package/template/src/components/precall/usePreCall.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {createContext, useContext, useEffect} from 'react';
+import React, {createContext, useContext, useEffect, useState} from 'react';
 import {createHook} from 'customization-implementation';
 import {ApolloError} from '@apollo/client';
 import {SdkApiContext} from '../SdkApiContext';
@@ -55,6 +55,22 @@ const PreCallProvider = (props: PreCallProviderProps) => {
   const roomInfo = useRoomInfo();
   const {deviceList} = useContext(DeviceContext);
   const setUsername = useSetName();
+  const [isCameraAvailable, setCameraAvailable] = useState(false);
+  const [isMicAvailable, setMicAvailable] = useState(false);
+  const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
+  const [isPermissionRequested, setIsPermissionRequested] = useState(false);
+
+  const value = {
+    ...props.value,
+    setCameraAvailable,
+    isCameraAvailable,
+    isMicAvailable,
+    setMicAvailable,
+    isSpeakerAvailable,
+    setSpeakerAvailable,
+    isPermissionRequested,
+    setIsPermissionRequested,
+  };
 
   useEffect(() => {
     if (join.initialized && join.phrase) {
@@ -79,7 +95,7 @@ const PreCallProvider = (props: PreCallProviderProps) => {
   }, []);
 
   return (
-    <PreCallContext.Provider value={{...props.value}}>
+    <PreCallContext.Provider value={value}>
       {props.children}
     </PreCallContext.Provider>
   );

package/template/src/components/room-info/useRoomInfo.tsx

@@ -21,33 +21,36 @@ export enum WaitingRoomStatus {
   APPROVED = 3,
   REJECTED = 4,
 }
+
+export interface RoomData {
+  isHost: boolean;
+  meetingTitle: string;
+  roomId: {
+    attendee: string;
+    host?: string;
+  };
+  pstn?: {
+    number: string;
+    pin: string;
+  };
+  whiteboard?: {
+    room_uuid: string;
+    room_token: string;
+  };
+  isSeparateHostLink: boolean;
+  channel?: string;
+  uid?: UidType;
+  token?: string;
+  rtmToken?: string;
+  encryptionSecret?: string;
+  encryptionSecretSalt?: Uint8Array;
+  screenShareUid?: string;
+  screenShareToken?: string;
+}
+
 export interface RoomInfoContextInterface {
   isJoinDataFetched?: boolean;
-  data?: {
-    isHost: boolean;
-    meetingTitle: string;
-    roomId: {
-      attendee: string;
-      host?: string;
-    };
-    pstn?: {
-      number: string;
-      pin: string;
-    };
-    whiteboard?: {
-      room_uuid: string;
-      room_token: string;
-    };
-    isSeparateHostLink: boolean;
-    channel?: string;
-    uid?: UidType;
-    token?: string;
-    rtmToken?: string;
-    encryptionSecret?: string;
-    encryptionSecretSalt?: Uint8Array;
-    screenShareUid?: string;
-    screenShareToken?: string;
-  };
+  data?: RoomData;
   isInWaitingRoom?: boolean;
   waitingRoomStatus?: WaitingRoomStatus;
   isWhiteBoardOn?: boolean;

package/template/src/components/useUserPreference.tsx

@@ -31,6 +31,7 @@ import {
 } from '../language/default-labels/videoCallScreenLabels';
 import {useLanguage} from '../language/useLanguage';
 import {useScreenContext} from '../components/contexts/ScreenShareContext';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 interface UserPreferenceContextInterface {
   displayName: string;
@@ -104,10 +105,20 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
             name,
           },
         }).catch(error => {
-          console.log('ERROR, could not save the name', error);
+          logger.error(
+            LogSource.Internals,
+            'NAME',
+            'ERROR, could not save the name',
+            error,
+          );
         });
       } catch (error) {
-        console.log('ERROR, could not save the name', error);
+        logger.error(
+          LogSource.Internals,
+          'NAME',
+          'ERROR, could not save the name',
+          error,
+        );
       }
     }
   };

package/template/src/components/useWakeLock.tsx

@@ -2,6 +2,7 @@ import NoSleep from 'nosleep.js';
 import React from 'react';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {isWebInternal} from '../utils/common';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 const useWakeLock = () => {
   if (isMobileOrTablet() && isWebInternal()) {
@@ -12,18 +13,31 @@ const useWakeLock = () => {
       noSleep
         .enable()
         .then(() => {
-          console.log('enabled sleep successfully');
+          logger.debug(
+            LogSource.Internals,
+            'VIDEO_CALL_ROOM',
+            'enabled sleep successfully',
+          );
           set(noSleep.isEnabled);
         })
-        .catch((e) => {
-          console.log('error enabling sleep', e);
+        .catch(e => {
+          logger.error(
+            LogSource.Internals,
+            'VIDEO_CALL_ROOM',
+            'error enabling sleep',
+            e,
+          );
         });
     }, []);
 
     const release = React.useCallback(() => {
       noSleep.disable();
       set(noSleep.isEnabled);
-      console.log('disabled sleep successfully');
+      logger.debug(
+        LogSource.Internals,
+        'VIDEO_CALL_ROOM',
+        'disabled sleep successfully',
+      );
     }, []);
 
     return {

package/template/src/components/virtual-background/VBCard.tsx

@@ -17,6 +17,7 @@ import {
   vbPanelImageUploadErrorToastHeading,
   vbPanelImageUploadErrorToastSubHeading,
 } from '../../../src/language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 interface VBCardProps {
   type: VBMode;
@@ -79,21 +80,49 @@ const VBCard: React.FC<VBCardProps> = ({
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    logger.log(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'User wants to upload custom background',
+    );
     const selectedFile = e.target.files && e.target.files[0];
-
+    logger.log(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      `User selected a file ${e?.target?.files[0]?.name || 'none'}`,
+    );
     if (selectedFile) {
       // check if file size (less than 1MB)
+      logger.log(
+        LogSource.Internals,
+        'VIRTUAL_BACKGROUND',
+        'check if file is less than 1MB amd type is image/jpeg or image/png',
+        {
+          size: selectedFile.size,
+          type: selectedFile.type,
+        },
+      );
       if (selectedFile.size <= 1024 * 1024 * 1) {
         // check image format
         if (
           selectedFile.type === 'image/jpeg' ||
           selectedFile.type === 'image/png'
         ) {
+          logger.log(
+            LogSource.Internals,
+            'VIRTUAL_BACKGROUND',
+            'file uploaded satisfies the above constraint. Convert the file to base64',
+          );
           convertBlobToBase64(URL.createObjectURL(selectedFile))
             .then((base64Data: string) => {
               if (
                 options.filter(option => option.path === base64Data).length > 0
               ) {
+                logger.log(
+                  LogSource.Internals,
+                  'VIRTUAL_BACKGROUND',
+                  'file is already uploaded',
+                );
                 Toast.show({
                   leadingIconName: 'alert',
                   type: 'error',
@@ -116,6 +145,11 @@ const VBCard: React.FC<VBCardProps> = ({
                 updatedOptions.splice(3, 0, newCard);
                 return updatedOptions;
               });
+              logger.log(
+                LogSource.Internals,
+                'VIRTUAL_BACKGROUND',
+                'file uploaded successfully and storing to indexDB',
+              );
               saveImagesToIndexDB(base64Data);
             })
             .catch(error => {
@@ -143,6 +177,11 @@ const VBCard: React.FC<VBCardProps> = ({
   };
 
   const handleClick = () => {
+    logger.log(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      `User selected a virtual background type - ${type}`,
+    );
     setSaveVB(false);
     setVBmode(type);
     if (path) {

package/template/src/components/virtual-background/VButils.native.ts

@@ -1,4 +1,5 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 export const saveImagesToAsyncStorage = async (
   base64Data: string,
@@ -8,10 +9,18 @@ export const saveImagesToAsyncStorage = async (
     const key = `image_${timestampId}`;
 
     await AsyncStorage.setItem(key, base64Data);
-
-    console.log('Image saved to AsyncStorage with key:', key);
+    logger.debug(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      `Image saved to AsyncStorage with key - ${key}`,
+    );
   } catch (error) {
-    console.error('Error saving image to AsyncStorage:', error);
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Error saving image to AsyncStorage',
+      error,
+    );
   }
 };
 
@@ -28,10 +37,20 @@ export const retrieveImagesFromAsyncStorage = async (): Promise<string[]> => {
       }),
     );
 
-    console.log('Retrieved images from AsyncStorage:', retrievedImages);
+    logger.debug(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Retrieved images from AsyncStorage:',
+      retrievedImages,
+    );
     return retrievedImages;
   } catch (error) {
-    console.error('Error retrieving images from AsyncStorage:', error);
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'IError retrieving image from AsyncStorage',
+      error,
+    );
     throw error;
   }
 };

package/template/src/components/virtual-background/VButils.ts

@@ -1,3 +1,5 @@
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+
 interface ImageItem {
   id: number;
   data: string;
@@ -48,12 +50,25 @@ export const saveImagesToIndexDB = async (
     store.add(item);
 
     tx.oncomplete = () => {
-      console.log('Transaction completed');
+      logger.debug(
+        LogSource.Internals,
+        'VIRTUAL_BACKGROUND',
+        'Transaction completed',
+      );
     };
 
-    console.log('Added images to the store!');
+    logger.debug(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Added images to the store!',
+    );
   } catch (error) {
-    console.error('Error saving images to IndexedDB:', error);
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Error saving images to IndexedDB',
+      error,
+    );
   }
 };
 
@@ -74,12 +89,21 @@ export const retrieveImagesFromIndexDB = async (): Promise<string[]> => {
           retrievedImages.push(cursor.value.data);
           cursor.continue();
         } else {
-          console.log('Successfully Retrieved images from IndexedDB:');
+          logger.debug(
+            LogSource.Internals,
+            'VIRTUAL_BACKGROUND',
+            'Successfully retrieved images from IndexedDB!',
+          );
           resolve(retrievedImages);
         }
       };
     } catch (error) {
-      console.error('Error retrieving images from IndexedDB:', error);
+      logger.error(
+        LogSource.Internals,
+        'VIRTUAL_BACKGROUND',
+        'Error retrieving images from IndexedDB',
+        error,
+      );
       reject(error);
     }
   });

package/template/src/components/virtual-background/VideoPreview.tsx

@@ -10,6 +10,7 @@ import {isMobileUA} from '../../utils/common';
 import InlineNotification from '../../atoms/InlineNotification';
 import {useString} from '../../utils/useString';
 import {vbPanelInfo} from '../../language/default-labels/precallScreenLabels';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 interface VideoPreviewProps {
   isLocalVideoON?: boolean;
 }
@@ -43,12 +44,21 @@ const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
     let localVideo = null;
     const initialize = async () => {
       localVideo = await createCameraTrack();
+      logger.log(
+        LogSource.Internals,
+        isLocalVideoON ? 'VIRTUAL_BACKGROUND' : 'PRECALL_SCREEN',
+        'creating canera track for local preview',
+      );
     };
 
     initialize();
     return () => {
-      console.log('cleanup local preview');
       if (localVideo) {
+        logger.debug(
+          LogSource.Internals,
+          isLocalVideoON ? 'VIRTUAL_BACKGROUND' : 'PRECALL_SCREEN',
+          'cleaning up local video preview',
+        );
         localVideo.stop();
         localVideo.close();
         setPreviewVideoTrack(null);

package/template/src/components/virtual-background/useVB.native.tsx

@@ -14,6 +14,7 @@ import RNFS from 'react-native-fs';
 import {ImageSourcePropType} from 'react-native/types';
 import imagePathsArray from './imagePaths';
 import getUniqueID from '../../../src/utils/getUniqueID';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 export type VBMode = 'blur' | 'image' | 'custom' | 'none';
 
@@ -65,7 +66,12 @@ const downloadBase64Image = async (base64Data, filename) => {
     await RNFS.writeFile(filePath, extractData, 'base64');
     return filePath;
   } catch (error) {
-    console.error('Error saving base64 image:', error);
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Error saving base64 image',
+      error,
+    );
     return null;
   }
 };
@@ -88,7 +94,12 @@ const VBProvider: React.FC = ({children}) => {
     const fetchData = async () => {
       try {
         const customImages = await retrieveImagesFromAsyncStorage();
-        console.log('retrived from async storage', customImages);
+        logger.debug(
+          LogSource.Internals,
+          'VIRTUAL_BACKGROUND',
+          'retrived from async storage',
+          customImages,
+        );
         setOptions((prevOptions: Option[]) => [
           ...prevOptions,
           ...(customImages?.map(
@@ -102,7 +113,12 @@ const VBProvider: React.FC = ({children}) => {
           ) || []),
         ]);
       } catch (error) {
-        console.error('Error fetching data:', error);
+        logger.error(
+          LogSource.Internals,
+          'VIRTUAL_BACKGROUND',
+          'Error fetching data',
+          error,
+        );
       }
     };
 

package/template/src/components/whiteboard/WhiteboardConfigure.tsx

@@ -17,6 +17,7 @@ import useUserName from '../../utils/useUserName';
 import {DefaultLayouts} from '../../pages/video-call/DefaultLayouts';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 export const whiteboardPaper = isWebInternal()
   ? document.createElement('div')
@@ -162,7 +163,12 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         }
       }
     } catch (error) {
-      console.log('debugging error on whiteboard setWritable ', error);
+      logger.error(
+        LogSource.Internals,
+        'WHITEBOARD',
+        'error on whiteboard setWritable',
+        error,
+      );
     }
   }, [currentLayout, isHost, whiteboardRoomState, activeUids, pinnedUid]);
 
@@ -325,6 +331,9 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     try {
       const index = randomIntFromInterval(0, 9);
       setWhiteboardRoomState(RoomPhase.Connecting);
+      logger.log(LogSource.Internals, 'WHITEBOARD', 'Trying to join room', {
+        data: {},
+      });
       whiteWebSdkClient.current
         .joinRoom({
           cursorAdapter: cursorAdapter,
@@ -340,6 +349,14 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
           },
         })
         .then(room => {
+          logger.log(
+            LogSource.Internals,
+            'WHITEBOARD',
+            'Join room successful',
+            {
+              data: {},
+            },
+          );
           whiteboardRoom.current = room;
           cursorAdapter.setRoom(room);
           whiteboardRoom.current?.setViewMode(ViewMode.Freedom);
@@ -353,11 +370,16 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         })
         .catch(err => {
           setWhiteboardRoomState(InitState);
-          console.log(err);
+          logger.error(
+            LogSource.Internals,
+            'WHITEBOARD',
+            'Join room error',
+            err,
+          );
         });
     } catch (err) {
       setWhiteboardRoomState(InitState);
-      console.log(err);
+      logger.error(LogSource.Internals, 'WHITEBOARD', 'Join room error', err);
     }
   };
 
@@ -374,11 +396,16 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         })
         .catch(err => {
           setWhiteboardRoomState(InitState);
-          console.log(err);
+          logger.error(
+            LogSource.Internals,
+            'WHITEBOARD',
+            'leave room error',
+            err,
+          );
         });
     } catch (err) {
       setWhiteboardRoomState(InitState);
-      console.log(err);
+      logger.error(LogSource.Internals, 'WHITEBOARD', 'leave room error', err);
     }
   };