agora-appbuilder-core 4.0.0 → 4.0.2

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();
 
@@ -177,10 +139,11 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   };
 
   const getBaseURL = () => {
-    let baseURL =
-      platform === 'web' && !isSDK
-        ? $config.FRONTEND_ENDPOINT || window.location.origin
-        : undefined;
+    let baseURL = !isSDK
+      ? platform === 'web'
+        ? window.location.origin
+        : $config.FRONTEND_ENDPOINT
+      : undefined;
     return baseURL;
   };
 
@@ -212,7 +175,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
 
   const getPstn = () => {
     let stringToCopy = '';
-    if (pstn && pstn?.number && pstn?.pin) {
+    if (pstn && pstn?.number && pstn.pin) {
       stringToCopy += `${PSTNNumberText}: ${pstn.number} ${PSTNPinText}: ${pstn.pin}`;
     }
 
@@ -233,6 +196,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
       case SHARE_LINK_CONTENT_TYPE.PSTN:
         stringToCopy = getPstn();
+        break;
       default:
         break;
     }
@@ -256,6 +220,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
       case SHARE_LINK_CONTENT_TYPE.PSTN:
         stringToCopy = getPstn();
+        break;
       default:
         break;
     }

package/template/src/components/useUserPreference.tsx

@@ -9,49 +9,114 @@
  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;
   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]);
+
+  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]);
 
-  //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 saveName = (name: string) => {
+    if (name && name?.trim() !== '') {
+      try {
+        updateUserName({
+          variables: {
+            name,
+          },
+        }).catch(error => {
+          console.log('ERROR, could not save the name', error);
+        });
+      } catch (error) {
+        console.log('ERROR, could not save the name', error);
+      }
+    }
+  };
+  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) {
@@ -76,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,
@@ -98,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]});
   };
@@ -115,6 +180,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
       value={{
         setDisplayName,
         displayName,
+        saveName,
       }}>
       {props.children}
     </UserPreferenceContext.Provider>

package/template/src/components/useVideoCall.tsx

@@ -10,11 +10,28 @@
 *********************************************
 */
 
-import React, {SetStateAction, useState} 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 {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>>;
@@ -22,6 +39,16 @@ export interface VideoCallContextInterface {
   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>({
@@ -31,15 +58,66 @@ const VideoCallContext = React.createContext<VideoCallContextInterface>({
   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={{
@@ -49,9 +127,23 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
         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>
   );

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({});