agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/useUserPreference.tsx

@@ -9,49 +9,187 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
-import {RenderInterface, useLocalUid} from '../../agora-rn-uikit';
+import React, {useState, useContext, useEffect, useRef} from 'react';
+import {
+  DispatchContext,
+  ContentInterface,
+  useLocalUid,
+} from '../../agora-rn-uikit';
 import {useString} from '../utils/useString';
 import StorageContext from './StorageContext';
-import events, {EventPersistLevel} from '../rtm-events-api';
+import events, {PersistanceLevel} from '../rtm-events-api';
 import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 import {createHook} from 'customization-implementation';
 import ChatContext from './ChatContext';
-import {useRtc} from 'customization-api';
+import {filterObject, useContent, useRtc} from 'customization-api';
+import {gql, useMutation} from '@apollo/client';
+import {
+  PSTNUserLabel,
+  videoRoomScreenshareText,
+  videoRoomUserFallbackText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {useLanguage} from '../language/useLanguage';
+import {useScreenContext} from '../components/contexts/ScreenShareContext';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import getUniqueID from '../utils/getUniqueID';
 
 interface UserPreferenceContextInterface {
   displayName: string;
   setDisplayName: React.Dispatch<React.SetStateAction<string>>;
+  saveName: (name: string) => void;
 }
 
 const UserPreferenceContext =
   React.createContext<UserPreferenceContextInterface>({
     displayName: '',
     setDisplayName: () => {},
+    saveName: () => {},
   });
 
+const UPDATE_USER_NAME_MUTATION = gql`
+  mutation updateUserName($name: String!) {
+    updateUserName(name: $name) {
+      name
+      email
+    }
+  }
+`;
+
 const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
   const localUid = useLocalUid();
   const screenShareUid = useLocalScreenShareUid();
-  const {dispatch} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
 
   const {store, setStore} = useContext(StorageContext);
   const {hasUserJoinedRTM} = useContext(ChatContext);
   const getInitialUsername = () =>
     store?.displayName ? store.displayName : '';
   const [displayName, setDisplayName] = useState(getInitialUsername());
+  const [updateUserName] = useMutation(UPDATE_USER_NAME_MUTATION);
+
+  const {languageCode} = useLanguage();
+  const {screenShareData} = useScreenContext();
+  const {defaultContent} = useContent();
+  const screenShareDataRef = useRef({screenShareData});
+  useEffect(() => {
+    screenShareDataRef.current.screenShareData = screenShareData;
+  }, [screenShareData]);
 
-  //commented for v1 release
-  // const userText = useString('remoteUserDefaultLabel')();
-  const userText = 'User';
-  const pstnUserLabel = useString('pstnUserLabel')();
-  //commented for v1 release
-  //const getScreenShareName = useString('screenshareUserName');
-  const getScreenShareName = (name: string) => `${name}'s screenshare`;
+  useEffect(() => {
+    try {
+      if (languageCode) {
+        Object.keys(screenShareDataRef.current.screenShareData).map(i => {
+          let screenShareUidToUpdate = parseInt(i);
+          const users = filterObject(
+            defaultContent,
+            ([k, v]) => v?.screenUid === screenShareUidToUpdate,
+          );
+          const keys = Object.keys(users);
+          if (users && keys && keys?.length) {
+            updateRenderListState(screenShareUidToUpdate, {
+              name: getScreenShareName(
+                users[parseInt(keys[0])]?.name || userText,
+              ),
+            });
+          }
+        });
+      }
+    } catch (error) {}
+  }, [languageCode, screenShareData]);
+
+  const saveName = (name: string) => {
+    if (name && name?.trim() !== '') {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
+      try {
+        logger.log(
+          LogSource.Internals,
+          'NAME',
+          'Trying to save the display name',
+          {
+            requestId,
+            startReqTs,
+          },
+        );
+        updateUserName({
+          context: {
+            headers: {
+              'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
+            },
+          },
+          variables: {
+            name,
+          },
+        })
+          .then(res => {
+            const endReqTs = Date.now();
+            logger.log(
+              LogSource.Internals,
+              'NAME',
+              'name updated successfully',
+              {
+                responseData: res,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                requestId,
+              },
+            );
+          })
+          .catch(error => {
+            const endReqTs = Date.now();
+            logger.error(
+              LogSource.Internals,
+              'NAME',
+              'ERROR, could not save the name',
+              error,
+              {
+                networkError: {
+                  name: error?.networkError?.name,
+                  //@ts-ignore
+                  code: error?.networkError?.result?.error?.code,
+                  //@ts-ignore
+                  message: error?.networkError?.result?.error?.message,
+                },
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                requestId,
+              },
+            );
+          });
+      } catch (error) {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'NAME',
+          'ERROR, could not save the name',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
+      }
+    }
+  };
+  const userText = useString(videoRoomUserFallbackText)();
+  const pstnUserLabel = useString(PSTNUserLabel)();
+  const getScreenShareName = useString(videoRoomScreenshareText);
 
   useEffect(() => {
-    events.on(EventNames.NAME_ATTRIBUTE, (data) => {
+    events.on(EventNames.NAME_ATTRIBUTE, data => {
       const value = JSON.parse(data?.payload);
       if (value) {
         if (value?.uid) {
@@ -65,6 +203,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
         if (value?.screenShareUid) {
           updateRenderListState(value?.screenShareUid, {
             name: getScreenShareName(value?.name || userText),
+            type: 'screenshare',
           });
         }
       }
@@ -76,7 +215,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
 
   useEffect(() => {
     //Update the store displayName value if the state is changed
-    setStore((prevState) => {
+    setStore(prevState => {
       return {
         ...prevState,
         displayName,
@@ -87,6 +226,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
     updateRenderListState(localUid, {name: displayName || userText});
     updateRenderListState(screenShareUid, {
       name: getScreenShareName(displayName || userText),
+      type: 'screenshare',
     });
 
     if (hasUserJoinedRTM) {
@@ -98,14 +238,14 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           screenShareUid: screenShareUid,
           name: displayName || userText,
         }),
-        EventPersistLevel.LEVEL2,
+        PersistanceLevel.Sender,
       );
     }
   }, [displayName, hasUserJoinedRTM]);
 
   const updateRenderListState = (
     uid: number,
-    data: Partial<RenderInterface>,
+    data: Partial<ContentInterface>,
   ) => {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };
@@ -115,6 +255,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
       value={{
         setDisplayName,
         displayName,
+        saveName,
       }}>
       {props.children}
     </UserPreferenceContext.Provider>

package/template/src/components/useVideoCall.tsx

@@ -0,0 +1,157 @@
+/*
+********************************************
+ 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, {
+  SetStateAction,
+  useState,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {createHook} from 'customization-implementation';
+import InvitePopup from './popups/InvitePopup';
+import StopRecordingPopup from './popups/StopRecordingPopup';
+import StartScreenSharePopup from './popups/StartScreenSharePopup';
+import StopScreenSharePopup from './popups/StopScreenSharePopup';
+import {SdkApiContext} from './SdkApiContext';
+import {UidType, useRoomInfo} from 'customization-api';
+import SDKEvents from '../utils/SdkEvents';
+import DeviceContext from './DeviceContext';
+import useSetName from '../utils/useSetName';
+import WhiteboardClearAllPopup from './popups/WhiteboardClearAllPopup';
+
+interface InViewPortState {
+  [key: number]: boolean;
+}
+export interface VideoCallContextInterface {
+  showInvitePopup: boolean;
+  setShowInvitePopup: React.Dispatch<SetStateAction<boolean>>;
+  showStopRecordingPopup: boolean;
+  setShowStopRecordingPopup: React.Dispatch<SetStateAction<boolean>>;
+  showLayoutOption: boolean;
+  setShowLayoutOption: React.Dispatch<SetStateAction<boolean>>;
+  showStartScreenSharePopup: boolean;
+  setShowStartScreenSharePopup: React.Dispatch<SetStateAction<boolean>>;
+  showStopScreenSharePopup: boolean;
+  setShowStopScreenSharePopup: React.Dispatch<SetStateAction<boolean>>;
+  enablePinForMe: boolean;
+  setEnablePinForMe: React.Dispatch<SetStateAction<boolean>>;
+  videoTileInViewPortState: InViewPortState;
+  setVideoTileInViewPortState: (uid: UidType, visible: boolean) => void;
+  showWhiteboardClearAllPopup: boolean;
+  setShowWhiteboardClearAllPopup: React.Dispatch<SetStateAction<boolean>>;
+}
+
+const VideoCallContext = React.createContext<VideoCallContextInterface>({
+  showInvitePopup: false,
+  setShowInvitePopup: () => {},
+  showStopRecordingPopup: false,
+  setShowStopRecordingPopup: () => {},
+  showLayoutOption: false,
+  setShowLayoutOption: () => {},
+  showStartScreenSharePopup: false,
+  setShowStartScreenSharePopup: () => {},
+  showStopScreenSharePopup: false,
+  setShowStopScreenSharePopup: () => {},
+  enablePinForMe: true,
+  setEnablePinForMe: () => {},
+  videoTileInViewPortState: {},
+  setVideoTileInViewPortState: () => {},
+  showWhiteboardClearAllPopup: false,
+  setShowWhiteboardClearAllPopup: () => {},
+});
+
+interface VideoCallProviderProps {
+  children: React.ReactNode;
+}
+const VideoCallProvider = (props: VideoCallProviderProps) => {
+  const [showWhiteboardClearAllPopup, setShowWhiteboardClearAllPopup] =
+    useState(false);
+  const [enablePinForMe, setEnablePinForMe] = useState(true);
+  const [showLayoutOption, setShowLayoutOption] = useState(false);
+  const [showInvitePopup, setShowInvitePopup] = useState(false);
+  const [showStopRecordingPopup, setShowStopRecordingPopup] = useState(false);
+  const [showStartScreenSharePopup, setShowStartScreenSharePopup] =
+    useState(false);
+  const [showStopScreenSharePopup, setShowStopScreenSharePopup] =
+    useState(false);
+  const {join, enterRoom} = useContext(SdkApiContext);
+  const roomInfo = useRoomInfo();
+  const {deviceList} = useContext(DeviceContext);
+  const setUsername = useSetName();
+  //const videoTileInViewPortStateRef = useRef({});
+  const [videoTileInViewPortState, setVideoTileInViewPortStateL] = useState({});
+
+  const setVideoTileInViewPortState = (uid: UidType, visible: boolean) => {
+    //videoTileInViewPortStateRef.current[uid] = visible;
+    setVideoTileInViewPortStateL(prevState => {
+      return {
+        ...prevState,
+        [uid]: visible,
+      };
+    });
+  };
+
+  useEffect(() => {
+    if (join.initialized && join.phrase) {
+      if (join.userName && join.skipPrecall) {
+        setUsername(join.userName);
+      }
+      join.promise.res(roomInfo.data);
+    }
+    if (enterRoom.promise) {
+      enterRoom.promise.res(roomInfo.data);
+    }
+    SDKEvents.emit(
+      'join',
+      roomInfo.data.meetingTitle,
+      deviceList,
+      roomInfo.data.isHost,
+    );
+  }, []);
+  return (
+    <VideoCallContext.Provider
+      value={{
+        showInvitePopup,
+        setShowInvitePopup,
+        showStopRecordingPopup,
+        setShowStopRecordingPopup,
+        showLayoutOption,
+        setShowLayoutOption,
+        showStartScreenSharePopup,
+        setShowStartScreenSharePopup,
+        showStopScreenSharePopup,
+        setShowStopScreenSharePopup,
+        enablePinForMe,
+        setEnablePinForMe,
+        setVideoTileInViewPortState,
+        //videoTileInViewPortState: videoTileInViewPortStateRef.current,
+        videoTileInViewPortState,
+        showWhiteboardClearAllPopup,
+        setShowWhiteboardClearAllPopup,
+      }}>
+      <StartScreenSharePopup />
+      <StopScreenSharePopup />
+      <StopRecordingPopup />
+      <InvitePopup />
+      <WhiteboardClearAllPopup />
+      {props.children}
+    </VideoCallContext.Provider>
+  );
+};
+
+/**
+ *
+ */
+const useVideoCall = createHook(VideoCallContext);
+
+export {VideoCallProvider, useVideoCall};

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/VBButton.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
+import {useToolbarMenu} from '../../utils/useMenu';
+import IconButton, {IconButtonProps} from '../../atoms/IconButton';
+import {useActionSheet} from '../../utils/useActionSheet';
+import {useString} from '../../utils/useString';
+import {toolbarItemVirtualBackgroundText} from '../../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../../atoms/ToolbarItem';
+
+interface VBButtonProps {
+  isVBOpen: boolean;
+  setIsVBOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  showLabel?: boolean;
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+const VBButton = (props: VBButtonProps) => {
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {setIsVBOpen, showLabel = false} = props;
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {isOnActionSheet} = useActionSheet();
+  const vbLabel = useString(toolbarItemVirtualBackgroundText)();
+
+  const onPress = () => {
+    setIsVBOpen(prev => !prev);
+  };
+
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPressCustom || onPress,
+    iconProps: {
+      tintColor: $config.SECONDARY_ACTION_COLOR,
+      name: 'vb',
+    },
+
+    btnTextProps: {
+      text: showLabel ? label || vbLabel?.replace(' ', '\n') : '',
+      numberOfLines: 2,
+      textStyle: {
+        marginTop: 8,
+        fontSize: 12,
+        fontWeight: '400',
+        fontFamily: 'Source Sans Pro',
+        textAlign: 'center',
+        color: $config.FONT_COLOR,
+      },
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <>
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
+    </>
+  );
+};
+
+export default VBButton;