agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/components/{meeting-info/useMeetingInfo.tsx → room-info/useRoomInfo.tsx}

@@ -12,7 +12,16 @@
 import React, {createContext} from 'react';
 import {createHook} from 'customization-implementation';
 import {UidType} from '../../../agora-rn-uikit';
-export interface MeetingInfoContextInterface {
+import {LanguageType} from '../../subComponents/caption/utils';
+import {BoardColor} from '../whiteboard/WhiteboardConfigure';
+
+export enum WaitingRoomStatus {
+  NOT_REQUESTED = 1,
+  REQUESTED = 2,
+  APPROVED = 3,
+  REJECTED = 4,
+}
+export interface RoomInfoContextInterface {
   isJoinDataFetched?: boolean;
   data?: {
     isHost: boolean;
@@ -25,19 +34,39 @@ export interface MeetingInfoContextInterface {
       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;
   };
+  isInWaitingRoom?: boolean;
+  waitingRoomStatus?: WaitingRoomStatus;
+  isWhiteBoardOn?: boolean;
+  boardColor?: BoardColor;
+  whiteboardLastImageUploadPosition?: {
+    height: number;
+  };
+  sttLanguage?: {
+    username?: string;
+    prevLang?: LanguageType[];
+    newLang?: LanguageType[];
+    uid?: UidType;
+    langChanged?: Boolean;
+  };
+  isSTTActive?: boolean;
 }
 
 export const validateMeetingInfoData = (
-  meetingInfo: Partial<MeetingInfoContextInterface['data']>,
+  roomInfo: Partial<RoomInfoContextInterface['data']>,
 ) => {
   const {
     channel,
@@ -47,7 +76,7 @@ export const validateMeetingInfoData = (
     screenShareUid,
     token,
     uid,
-  } = meetingInfo;
+  } = roomInfo;
   if ($config.ENCRYPTION_ENABLED && !encryptionSecret) {
     return false;
   }
@@ -60,8 +89,13 @@ export const validateMeetingInfoData = (
   return true;
 };
 
-export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
+export const RoomInfoDefaultValue: RoomInfoContextInterface = {
   isJoinDataFetched: false,
+  isInWaitingRoom: false,
+  waitingRoomStatus: WaitingRoomStatus.NOT_REQUESTED,
+  isWhiteBoardOn: false,
+  sttLanguage: null,
+  isSTTActive: false,
   data: {
     isHost: false,
     meetingTitle: '',
@@ -72,23 +106,23 @@ export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
   },
 };
 
-const MeetingInfoContext = createContext(MeetingInfoDefaultValue);
+const RoomInfoContext = createContext(RoomInfoDefaultValue);
 
-interface MeetingInfoProviderProps {
+interface RoomInfoProviderProps {
   children: React.ReactNode;
-  value: MeetingInfoContextInterface;
+  value: RoomInfoContextInterface;
 }
 
-const MeetingInfoProvider = (props: MeetingInfoProviderProps) => {
+const RoomInfoProvider = (props: RoomInfoProviderProps) => {
   return (
-    <MeetingInfoContext.Provider value={{...props.value}}>
+    <RoomInfoContext.Provider value={{...props.value}}>
       {props.children}
-    </MeetingInfoContext.Provider>
+    </RoomInfoContext.Provider>
   );
 };
 /**
  * The MeetingInfo app state contains information about the active meeting.
  */
-const useMeetingInfo = createHook(MeetingInfoContext);
+const useRoomInfo = createHook(RoomInfoContext);
 
-export {MeetingInfoProvider, useMeetingInfo};
+export {RoomInfoProvider, useRoomInfo};

package/template/src/components/{meeting-info/useSetMeetingInfo.tsx → room-info/useSetRoomInfo.tsx}

@@ -11,28 +11,28 @@
 */
 import React, {createContext, SetStateAction} from 'react';
 import {createHook} from 'customization-implementation';
-import {MeetingInfoContextInterface} from './useMeetingInfo';
+import {RoomInfoContextInterface} from './useRoomInfo';
 
-export interface SetMeetingInfoContextInterface {
-  setMeetingInfo: React.Dispatch<SetStateAction<MeetingInfoContextInterface>>;
+export interface SetRoomInfoContextInterface {
+  setRoomInfo: React.Dispatch<SetStateAction<RoomInfoContextInterface>>;
 }
 
-const SetMeetingInfoContext = createContext<SetMeetingInfoContextInterface>({
-  setMeetingInfo: () => {},
+const SetRoomInfoContext = createContext<SetRoomInfoContextInterface>({
+  setRoomInfo: () => {},
 });
 
-interface SetMeetingInfoProviderProps {
+interface SetRoomInfoProviderProps {
   children: React.ReactNode;
-  value: SetMeetingInfoContextInterface;
+  value: SetRoomInfoContextInterface;
 }
 
-const SetMeetingInfoProvider = (props: SetMeetingInfoProviderProps) => {
+const SetRoomInfoProvider = (props: SetRoomInfoProviderProps) => {
   return (
-    <SetMeetingInfoContext.Provider value={{...props.value}}>
+    <SetRoomInfoContext.Provider value={{...props.value}}>
       {props.children}
-    </SetMeetingInfoContext.Provider>
+    </SetRoomInfoContext.Provider>
   );
 };
-const useSetMeetingInfo = createHook(SetMeetingInfoContext);
+const useSetRoomInfo = createHook(SetRoomInfoContext);
 
-export {SetMeetingInfoProvider, useSetMeetingInfo};
+export {SetRoomInfoProvider, useSetRoomInfo};

package/template/src/components/useShareLink.tsx

@@ -14,10 +14,16 @@ import {createHook} from 'customization-implementation';
 import React from 'react';
 import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {useRoomInfo} from './room-info/useRoomInfo';
 import platform from '../subComponents/Platform';
 import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
 import Clipboard from '../subComponents/Clipboard';
+import {
+  shareRoomCopyInviteToClipboardContent,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+} from '../language/default-labels/shareLinkScreenLabels';
 
 export const GetMeetingInviteURL = (
   baseUrl: string,
@@ -79,7 +85,10 @@ export enum SHARE_LINK_CONTENT_TYPE {
 }
 
 export interface ShareLinkContextInterface {
-  copyShareLinkToClipboard: (type: SHARE_LINK_CONTENT_TYPE) => void;
+  copyShareLinkToClipboard: (
+    type: SHARE_LINK_CONTENT_TYPE,
+    callbackFn?: () => void,
+  ) => void;
   getShareLink: (type: SHARE_LINK_CONTENT_TYPE) => string;
 }
 const ShareLinkContext = React.createContext<ShareLinkContextInterface>({
@@ -94,63 +103,16 @@ interface ShareLinkProvideProps {
 const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   const {
     data: {meetingTitle, roomId, pstn, isSeparateHostLink, isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
-  //commmented for v1 release
-  // const copiedToClipboardText = useString(
-  //   'copiedToClipboardNotificationLabel',
-  // )();
-  // const meetingIdText = useString('meetingIdLabel')();
-  // const PSTNNumberText = useString('PSTNNumber')();
-  // const PSTNPinText = useString('PSTNPin')();
-  // const meetingInviteText =
-  //   useString<MeetingInviteInterface>('meetingInviteText');
-  const copiedToClipboardText = 'Copied to Clipboard';
-  const meetingIdText = 'Meeting ID';
-  const PSTNNumberText = 'PSTN Number';
-  const PSTNPinText = 'PSTN Pin';
-  const meetingInviteText = ({
-    meetingName,
-    id,
-    url,
-    pstn,
-    isHost,
-    isSeparateHostLink,
-  }: MeetingInviteInterface) => {
-    let inviteContent = '';
-    if (url) {
-      //for host
-      if (isHost) {
-        if (isSeparateHostLink) {
-          //seperate link for host and attendee
-          inviteContent += `Meeting: ${meetingName}\n\nAttendee Link:\n${url?.attendee}\n\nHost Link:\n${url?.host}`;
-        } else {
-          //single link for everyone
-          inviteContent += `Meeting: ${meetingName}\n\nMeeting Link:\n${url?.host}`;
-        }
-      }
-      //for attendee
-      else {
-        inviteContent += `Meeting: ${meetingName}\n\nAttendee Link:\n${url?.attendee}`;
-      }
-    } else {
-      if (isHost) {
-        if (isSeparateHostLink) {
-          inviteContent += `Meeting: ${meetingName}\n\nAttendee Meeting ID:\n${id?.attendee}\n\nHost Meeting ID:\n${id?.host}`;
-        } else {
-          inviteContent += `Meeting: ${meetingName}\n\nMeeting ID:\n${id?.host}`;
-        }
-      } else {
-        //copy this label on videocall screen
-        inviteContent += `Meeting: ${meetingName}\n\nAttendee Meeting ID:\n${id?.attendee}`;
-      }
-    }
-    // Adding pstn data into meeting data if present
-    if (pstn?.number && pstn?.pin) {
-      inviteContent += `\n\nPSTN Number:\n${pstn.number}\n\nPSTN Pin:\n${pstn.pin}`;
-    }
-    return inviteContent;
-  };
+  const pstnLabel = useString(shareRoomPSTNLabel)();
+  const pstnNumberLabel = useString(shareRoomPSTNNumberLabel)();
+  const pinLabel = useString(shareRoomPSTNPinLabel)();
+  const meetingInviteText = useString<MeetingInviteInterface>(
+    shareRoomCopyInviteToClipboardContent,
+  );
+  const PSTNNumberText = `${pstnLabel} ${pstnNumberLabel}`;
+  const PSTNPinText = `${pstnLabel} ${pinLabel}`;
 
   const isSDK = isSDKCheck();
 
@@ -178,8 +140,9 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
 
   const getBaseURL = () => {
     let baseURL = !isSDK
-      ? $config.FRONTEND_ENDPOINT ||
-        (platform === 'web' && window.location.origin)
+      ? platform === 'web'
+        ? window.location.origin
+        : $config.FRONTEND_ENDPOINT
       : undefined;
     return baseURL;
   };

package/template/src/components/useUserPreference.tsx

@@ -9,17 +9,28 @@
  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';
 
 interface UserPreferenceContextInterface {
   displayName: string;
@@ -46,7 +57,7 @@ const UPDATE_USER_NAME_MUTATION = gql`
 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);
@@ -55,6 +66,36 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
   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]);
+
+  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() !== '') {
       try {
@@ -62,7 +103,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           variables: {
             name,
           },
-        }).catch((error) => {
+        }).catch(error => {
           console.log('ERROR, could not save the name', error);
         });
       } catch (error) {
@@ -70,16 +111,12 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
       }
     }
   };
-  //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`;
+  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) {
@@ -104,7 +141,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,
@@ -126,14 +163,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]});
   };

package/template/src/components/useVideoCall.tsx

@@ -10,18 +10,28 @@
 *********************************************
 */
 
-import React, {SetStateAction, useState, useContext, useEffect} from 'react';
+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 {useRtc, useMeetingInfo} from 'customization-api';
+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>>;
@@ -33,6 +43,12 @@ export interface VideoCallContextInterface {
   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>({
@@ -46,12 +62,21 @@ const VideoCallContext = React.createContext<VideoCallContextInterface>({
   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);
@@ -60,25 +85,37 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
   const [showStopScreenSharePopup, setShowStopScreenSharePopup] =
     useState(false);
   const {join, enterRoom} = useContext(SdkApiContext);
-  const meetingInfo = useMeetingInfo();
+  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(meetingInfo.data);
+      join.promise.res(roomInfo.data);
     }
     if (enterRoom.promise) {
-      enterRoom.promise.res(meetingInfo.data);
+      enterRoom.promise.res(roomInfo.data);
     }
     SDKEvents.emit(
       'join',
-      meetingInfo.data.meetingTitle,
+      roomInfo.data.meetingTitle,
       deviceList,
-      meetingInfo.data.isHost,
+      roomInfo.data.isHost,
     );
   }, []);
   return (
@@ -94,11 +131,19 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
         setShowStartScreenSharePopup,
         showStopScreenSharePopup,
         setShowStopScreenSharePopup,
+        enablePinForMe,
+        setEnablePinForMe,
+        setVideoTileInViewPortState,
+        //videoTileInViewPortState: videoTileInViewPortStateRef.current,
+        videoTileInViewPortState,
+        showWhiteboardClearAllPopup,
+        setShowWhiteboardClearAllPopup,
       }}>
       <StartScreenSharePopup />
       <StopScreenSharePopup />
       <StopRecordingPopup />
       <InvitePopup />
+      <WhiteboardClearAllPopup />
       {props.children}
     </VideoCallContext.Provider>
   );

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

@@ -0,0 +1,64 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import {ToolbarItem} from 'customization-api';
+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';
+
+interface VBButtonProps {
+  isVBOpen: boolean;
+  setIsVBOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  showLabel?: boolean;
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+const VBButton = (props: VBButtonProps) => {
+  const {isVBOpen, setIsVBOpen, showLabel = false} = props;
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {isOnActionSheet} = useActionSheet();
+  const vbLabel = useString(toolbarItemVirtualBackgroundText)();
+
+  const onPress = () => {
+    setIsVBOpen(prev => !prev);
+  };
+
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPress,
+    iconProps: {
+      tintColor: $config.SECONDARY_ACTION_COLOR,
+      name: 'vb',
+    },
+
+    btnTextProps: {
+      text: showLabel ? 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;
+
+const styles = StyleSheet.create({});