agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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

@@ -9,7 +9,10 @@ import {
   useContent,
   useSidePanel,
 } from 'customization-api';
-import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
+import {
+  DefaultLayouts,
+  getPinnedLayoutName,
+} from '../../pages/video-call/DefaultLayouts';
 import useRemoteRequest, {
   REQUEST_REMOTE_TYPE,
 } from '../../utils/useRemoteRequest';
@@ -33,6 +36,29 @@ import {useFocus} from '../../utils/useFocus';
 import Toast from '../../../react-native-toast-message';
 import RemoteMutePopup from '../../subComponents/RemoteMutePopup';
 import {calculatePosition, trimText} from '../../utils/common';
+import {useVideoCall} from '../useVideoCall';
+import {customEvents} from 'customization-api';
+import {useDisableChat} from '../disable-chat/useDisableChat';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import {useString} from '../../utils/useString';
+import {
+  I18nMuteType,
+  moreBtnAddAsPresenter,
+  moreBtnAudio,
+  moreBtnChangeName,
+  moreBtnMessagePrivately,
+  moreBtnPinToTop,
+  moreBtnRemoveAsPresenter,
+  moreBtnRemoveFromLarge,
+  moreBtnRemoveFromRoom,
+  moreBtnRemoveFromTop,
+  moreBtnRemoveScreenShare,
+  moreBtnStopScreenShare,
+  moreBtnVideo,
+  moreBtnViewInLarge,
+  moreBtnViewWhiteboard,
+  userRemovedFromTheRoomToastHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 interface UserActionMenuOptionsOptionsProps {
   user: ContentInterface;
@@ -55,7 +81,9 @@ export default function UserActionMenuOptionsOptions(
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
   const {user, actionMenuVisible, setActionMenuVisible} = props;
-  const {pinnedUid, activeUids} = useContent();
+  const {currentLayout} = useLayout();
+  const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
+    useContent();
   const {dispatch} = useContext(DispatchContext);
   const {setLayout} = useLayout();
   const localuid = useLocalUid();
@@ -71,6 +99,40 @@ export default function UserActionMenuOptionsOptions(
     useContext(LiveStreamContext);
   const [removeMeetingPopupVisible, setRemoveMeetingPopupVisible] =
     useState(false);
+  const {enablePinForMe} = useVideoCall();
+  const {setDisableChatUids, disableChatUids} = useDisableChat();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
+
+  const viewWhiteboardLabel = useString(moreBtnViewWhiteboard)();
+  const removeFromLargeLabel = useString(moreBtnRemoveFromLarge)();
+  const viewInLargeLabel = useString(moreBtnViewInLarge)();
+  const pinToTopLabel = useString(moreBtnPinToTop)();
+  const removeFromTopLabel = useString(moreBtnRemoveFromTop)();
+  const messagePrivatelyLabel = useString(moreBtnMessagePrivately)();
+  const audioLabel = useString<boolean>(moreBtnAudio);
+  const videoLabel = useString<boolean>(moreBtnVideo);
+  const addAsPresenterLabel = useString(moreBtnAddAsPresenter)();
+  const removeAsPresenterLabel = useString(moreBtnRemoveAsPresenter)();
+  const changeNameLabel = useString(moreBtnChangeName)();
+  const stopScreenShareLabel = useString(moreBtnStopScreenShare)();
+  const removeScreenShareLabel = useString(moreBtnRemoveScreenShare)();
+  const removeFromRoomLabel = useString(moreBtnRemoveFromRoom)();
+
+  useEffect(() => {
+    customEvents.on('DisableChat', data => {
+      // for other users
+      const {disableChatUid, disableChat} = JSON.parse(data?.payload);
+      setDisableChatUids(prevState => {
+        // upate disable uids
+        return {
+          ...prevState,
+          [disableChatUid]: {
+            disableChat,
+          },
+        };
+      });
+    });
+  }, []);
 
   useEffect(() => {
     const items: ActionMenuItem[] = [];
@@ -87,26 +149,62 @@ export default function UserActionMenuOptionsOptions(
         audienceUids.indexOf(user.uid) !== -1
       )
     ) {
-      items.push({
-        disabled: activeUids.length === 1,
-        icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
-        onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.SECONDARY_ACTION_COLOR,
-        title: pinnedUid
-          ? user.uid === pinnedUid
-            ? 'Unpin'
-            : 'Replace Pin'
-          : 'Pin for me',
-        callback: () => {
-          setActionMenuVisible(false);
-          dispatch({
-            type: 'UserPin',
-            value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
+      if (enablePinForMe) {
+        //if (pinnedUid !== user.uid) {
+        items.push({
+          //disabled: activeUids?.filter(i => !customContent[i])?.length === 1,
+          disabled: activeUids?.length === 1,
+          icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
+          onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
+          iconColor: $config.SECONDARY_ACTION_COLOR,
+          textColor: $config.SECONDARY_ACTION_COLOR,
+          title: pinnedUid
+            ? user.uid === pinnedUid
+              ? removeFromLargeLabel
+              : user.uid === getWhiteboardUid()
+              ? viewWhiteboardLabel
+              : viewInLargeLabel
+            : user.uid === getWhiteboardUid()
+            ? viewWhiteboardLabel
+            : viewInLargeLabel,
+          callback: () => {
+            setActionMenuVisible(false);
+            dispatch({
+              type: 'UserPin',
+              value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
+            });
+            setLayout(getPinnedLayoutName());
+          },
+        });
+        if (currentLayout === DefaultLayouts[1].name) {
+          items.push({
+            // disabled:
+            //   activeUids?.filter(i => !customContent[i])?.length === 1,
+            disabled: activeUids?.length === 1,
+            icon: secondaryPinnedUid ? 'unpin-outlined' : 'pin-outlined',
+            onHoverIcon: secondaryPinnedUid ? 'unpin-outlined' : 'pin-filled',
+            iconColor: $config.SECONDARY_ACTION_COLOR,
+            textColor: $config.SECONDARY_ACTION_COLOR,
+            title: secondaryPinnedUid
+              ? user.uid === secondaryPinnedUid
+                ? removeFromTopLabel
+                : pinToTopLabel
+              : pinToTopLabel,
+            callback: () => {
+              setActionMenuVisible(false);
+              dispatch({
+                type: 'UserSecondaryPin',
+                value: [
+                  secondaryPinnedUid && user.uid === secondaryPinnedUid
+                    ? 0
+                    : user.uid,
+                ],
+              });
+            },
           });
-          setLayout(getPinnedLayoutName());
-        },
-      });
+        }
+        //}
+      }
     }
 
     /**
@@ -116,18 +214,19 @@ export default function UserActionMenuOptionsOptions(
       /**
        * Chat menu
        */
-      items.push({
-        icon: 'chat-outlined',
-        onHoverIcon: 'chat-filled',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.SECONDARY_ACTION_COLOR,
-        title: 'Message Privately',
-        callback: () => {
-          setActionMenuVisible(false);
-          openPrivateChat(user.uid);
-        },
-      });
-
+      if ($config.CHAT) {
+        items.push({
+          icon: 'chat-outlined',
+          onHoverIcon: 'chat-filled',
+          iconColor: $config.SECONDARY_ACTION_COLOR,
+          textColor: $config.SECONDARY_ACTION_COLOR,
+          title: messagePrivatelyLabel,
+          callback: () => {
+            setActionMenuVisible(false);
+            openPrivateChat(user.uid);
+          },
+        });
+      }
       /**
        * Only host can see this menu item - request/mute - video/audio, promote to co host,demote to audience,remove form meeting
        */
@@ -152,7 +251,7 @@ export default function UserActionMenuOptionsOptions(
             onHoverIcon: user.audio ? 'mic-off-filled' : 'mic-on-filled',
             iconColor: $config.SECONDARY_ACTION_COLOR,
             textColor: $config.SECONDARY_ACTION_COLOR,
-            title: user.audio ? 'Mute Audio' : 'Request Audio',
+            title: audioLabel(user.audio),
             callback: () => {
               setActionMenuVisible(false);
               user.audio
@@ -166,7 +265,7 @@ export default function UserActionMenuOptionsOptions(
               onHoverIcon: user.video ? 'video-off-filled' : 'video-on-filled',
               iconColor: $config.SECONDARY_ACTION_COLOR,
               textColor: $config.SECONDARY_ACTION_COLOR,
-              title: user.video ? 'Mute Video' : 'Request Video',
+              title: videoLabel(user.video),
               callback: () => {
                 setActionMenuVisible(false);
                 user.video
@@ -190,7 +289,7 @@ export default function UserActionMenuOptionsOptions(
             onHoverIcon: 'promote-filled',
             iconColor: $config.SECONDARY_ACTION_COLOR,
             textColor: $config.SECONDARY_ACTION_COLOR,
-            title: 'Add as Presenter',
+            title: addAsPresenterLabel,
             callback: () => {
               setActionMenuVisible(false);
               promoteAudienceAsCoHost(user.uid);
@@ -208,7 +307,7 @@ export default function UserActionMenuOptionsOptions(
               onHoverIcon: 'demote-filled',
               iconColor: $config.SECONDARY_ACTION_COLOR,
               textColor: $config.SECONDARY_ACTION_COLOR,
-              title: 'Remove as Presenter',
+              title: removeAsPresenterLabel,
               callback: () => {
                 setActionMenuVisible(false);
                 events.send(
@@ -226,7 +325,7 @@ export default function UserActionMenuOptionsOptions(
           icon: 'remove-meeting',
           iconColor: $config.SEMANTIC_ERROR,
           textColor: $config.SEMANTIC_ERROR,
-          title: 'Remove From Room',
+          title: removeFromRoomLabel,
           callback: () => {
             setActionMenuVisible(false);
             setRemoveMeetingPopupVisible(true);
@@ -244,9 +343,9 @@ export default function UserActionMenuOptionsOptions(
         onHoverIcon: 'pencil-filled',
         iconColor: $config.SECONDARY_ACTION_COLOR,
         textColor: $config.SECONDARY_ACTION_COLOR,
-        title: 'Change Name',
+        title: changeNameLabel,
         callback: () => {
-          setFocus((prevState) => {
+          setFocus(prevState => {
             return {
               ...prevState,
               editName: true,
@@ -269,8 +368,8 @@ export default function UserActionMenuOptionsOptions(
         textColor: $config.SEMANTIC_ERROR,
         title:
           localuid === user?.parentUid
-            ? 'Stop Screenshare'
-            : 'Remove Screenshare',
+            ? stopScreenShareLabel
+            : removeScreenShareLabel,
         callback: () => {
           setActionMenuVisible(false);
           //for local user directly stop the screenshare
@@ -285,11 +384,20 @@ export default function UserActionMenuOptionsOptions(
       });
     }
     setActionMenuitems(items);
-  }, [pinnedUid, isHost, raiseHandList, hostUids, user]);
+  }, [
+    pinnedUid,
+    isHost,
+    raiseHandList,
+    hostUids,
+    user,
+    disableChatUids,
+    secondaryPinnedUid,
+    currentLayout,
+  ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const [modalPosition, setModalPosition] = useState({});
-
+  const toastlabel = useString(userRemovedFromTheRoomToastHeading);
   useEffect(() => {
     if (actionMenuVisible) {
       //getting btnRef x,y
@@ -321,7 +429,7 @@ export default function UserActionMenuOptionsOptions(
     <>
       {isHost ? (
         <RemoteMutePopup
-          type="audio"
+          type={I18nMuteType.audio}
           actionMenuVisible={showAudioMuteModal}
           setActionMenuVisible={setShowAudioMuteModal}
           name={props?.user.name}
@@ -336,7 +444,7 @@ export default function UserActionMenuOptionsOptions(
       )}
       {isHost ? (
         <RemoteMutePopup
-          type="video"
+          type={I18nMuteType.video}
           actionMenuVisible={showVideoMuteModal}
           setActionMenuVisible={setShowVideoMuteModal}
           name={props?.user.name}
@@ -370,13 +478,13 @@ export default function UserActionMenuOptionsOptions(
           username={user.name}
           removeUserFromMeeting={() => {
             Toast.show({
+              leadingIconName: 'info',
               type: 'info',
-              text1: `The system will remove ${trimText(
-                user.name,
-              )} from this call after 5 secs.`,
+              text1: toastlabel(trimText(user.name)),
               visibilityTime: 5000,
               primaryBtn: null,
               secondaryBtn: null,
+              leadingIcon: null,
             });
             endRemoteCall(user.uid);
           }}

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

@@ -0,0 +1,74 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import {useContent} from 'customization-api';
+import {filterObject} from '../../utils';
+import Participant from './Participant';
+import ParticipantSectionTitle from './ParticipantSectionTitle';
+import {useWaitingRoomContext} from '../contexts/WaitingRoomContext';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelWaitingText,
+  peoplePanelWantToJoinText,
+  videoRoomUserFallbackText,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const WaitingRoomParticipants = props => {
+  const wanttojoinLabel = useString(peoplePanelWantToJoinText)();
+  const waitingLabel = useString(peoplePanelWaitingText)();
+  const {defaultContent} = useContent();
+  const [showWaitingRoomSection, setShowWaitingRoomSection] = useState(true);
+  const {isMobile = false, handleClose, updateActionSheet} = props;
+  const WaitingRoomParticipantsLabel = $config.EVENT_MODE
+    ? wanttojoinLabel
+    : waitingLabel;
+
+  const videoRoomUserFallbackTextLabel = useString(videoRoomUserFallbackText)();
+
+  const getParticipantName = uid => {
+    return defaultContent[uid]?.name || videoRoomUserFallbackTextLabel;
+  };
+
+  const getScreenShareUid = uid => {
+    return defaultContent[uid]?.screenUid || '';
+  };
+
+  const {waitingRoomUids} = useWaitingRoomContext();
+
+  return (
+    <>
+      <ParticipantSectionTitle
+        title={WaitingRoomParticipantsLabel}
+        count={waitingRoomUids.length}
+        isOpen={showWaitingRoomSection}
+        onPress={() => setShowWaitingRoomSection(!showWaitingRoomSection)}
+      />
+      {showWaitingRoomSection ? (
+        <View>
+          {waitingRoomUids.map(uid => (
+            <Participant
+              isLocal={false}
+              name={getParticipantName(uid)}
+              user={defaultContent[uid]}
+              showControls={false}
+              isAudienceUser={true}
+              isHostUser={false}
+              key={uid}
+              isMobile={isMobile}
+              handleClose={handleClose}
+              updateActionSheet={updateActionSheet}
+              waitingRoomUser={true}
+              uid={uid}
+              screenUid={getScreenShareUid(uid)}
+            />
+          ))}
+        </View>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default WaitingRoomParticipants;
+
+const styles = StyleSheet.create({});

package/template/src/components/popups/InvitePopup.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {
   SHARE_LINK_CONTENT_TYPE,
@@ -21,70 +21,135 @@ import PrimaryButton from '../../atoms/PrimaryButton';
 import TertiaryButton from '../../atoms/TertiaryButton';
 import ThemeConfig from '../../theme';
 import {CopyMeetingInfo} from '../../components/Share';
-import {isMobileUA, useIsDesktop} from '../../utils/common';
+import {
+  isMobileUA,
+  isValidReactComponent,
+  useIsDesktop,
+} from '../../utils/common';
 import {useVideoCall} from '../useVideoCall';
 import {useParams} from '../Router';
 import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
+import {ErrorContext} from '../common';
+import {useCustomization} from 'customization-implementation';
+import {useString} from '../../utils/useString';
+import {
+  invitePopupPrimaryBtnText,
+  invitePopupHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
   const isDesktop = useIsDesktop();
   const {copyShareLinkToClipboard} = useShareLink();
   const {phrase} = useParams<{phrase: string}>();
+  const {setGlobalErrorMessage} = useContext(ErrorContext);
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
-    getMeeting(phrase);
+    getMeeting(phrase).catch(error => {
+      setGlobalErrorMessage(error);
+    });
   }, [phrase]);
+
+  const {InvitePopupContent, InvitePopupTitle} = useCustomization(data => {
+    let components: {
+      InvitePopupContent?: React.ComponentType;
+      InvitePopupTitle?: string;
+    } = {
+      InvitePopupContent: null,
+      InvitePopupTitle: null,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      if (
+        data?.components?.videoCall?.invitePopup?.renderComponent &&
+        typeof data?.components?.videoCall?.invitePopup?.renderComponent !==
+          'object' &&
+        isValidReactComponent(
+          data?.components?.videoCall?.invitePopup?.renderComponent,
+        )
+      ) {
+        components.InvitePopupContent =
+          data?.components?.videoCall.invitePopup.renderComponent;
+      }
+      if (data?.components?.videoCall?.invitePopup?.title) {
+        components.InvitePopupTitle =
+          data?.components?.videoCall?.invitePopup.title;
+      }
+    }
+    return components;
+  });
+  const inviteOtherToJoinRoomInfo = useString(invitePopupHeading)();
+  const copyInvitationButton = useString(invitePopupPrimaryBtnText)();
+  const cancelLabel = useString(cancelText)();
   return (
     <Popup
       modalVisible={showInvitePopup}
       setModalVisible={setShowInvitePopup}
-      title="Invite others to join this room"
+      title={InvitePopupTitle ? InvitePopupTitle : inviteOtherToJoinRoomInfo}
       showCloseIcon={true}
       containerStyle={{alignItems: isDesktop('popup') ? 'center' : 'stretch'}}
       contentContainerStyle={style.contentContainer}>
-      <CopyMeetingInfo showSubLabel={false} />
-      <View
-        style={
-          isDesktop('popup') ? style.btnContainer : style.btnContainerMobile
-        }>
-        {isDesktop('popup') ? (
-          <View style={{flex: 1}}>
-            <TertiaryButton
-              text={'CANCEL'}
-              textStyle={style.btnText}
-              containerStyle={{
-                width: '100%',
-                height: 48,
-                paddingVertical: 12,
-                paddingHorizontal: 12,
-                borderRadius: ThemeConfig.BorderRadius.medium,
-              }}
-              onPress={() => {
-                setShowInvitePopup(false);
-              }}
-            />
+      {InvitePopupContent ? (
+        <>
+          <Spacer size={10} />
+          <InvitePopupContent />
+          <Spacer size={10} />
+        </>
+      ) : (
+        <>
+          <CopyMeetingInfo showSubLabel={false} />
+          <View
+            style={
+              isDesktop('popup') ? style.btnContainer : style.btnContainerMobile
+            }>
+            {isDesktop('popup') ? (
+              <View style={{flex: 1}}>
+                <TertiaryButton
+                  text={cancelLabel}
+                  textStyle={style.btnText}
+                  containerStyle={{
+                    width: '100%',
+                    height: 48,
+                    paddingVertical: 12,
+                    paddingHorizontal: 12,
+                    borderRadius: ThemeConfig.BorderRadius.medium,
+                  }}
+                  onPress={() => {
+                    setShowInvitePopup(false);
+                  }}
+                />
+              </View>
+            ) : null}
+            {isDesktop('popup') ? (
+              <Spacer size={10} horizontal={true} />
+            ) : (
+              <></>
+            )}
+            <View style={{flex: 1}}>
+              <PrimaryButton
+                textStyle={style.btnText}
+                containerStyle={{
+                  minWidth: 'auto',
+                  width: '100%',
+                  borderRadius: ThemeConfig.BorderRadius.medium,
+                  height: 48,
+                  paddingVertical: 12,
+                  paddingHorizontal: 12,
+                }}
+                onPress={() => {
+                  copyShareLinkToClipboard(
+                    SHARE_LINK_CONTENT_TYPE.MEETING_INVITE,
+                  );
+                }}
+                text={copyInvitationButton}
+              />
+            </View>
           </View>
-        ) : null}
-        {isDesktop('popup') ? <Spacer size={10} horizontal={true} /> : <></>}
-        <View style={{flex: 1}}>
-          <PrimaryButton
-            textStyle={style.btnText}
-            containerStyle={{
-              minWidth: 'auto',
-              width: '100%',
-              borderRadius: ThemeConfig.BorderRadius.medium,
-              height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-            }}
-            onPress={() => {
-              copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
-            }}
-            text={'COPY INVITATION'}
-          />
-        </View>
-      </View>
+        </>
+      )}
     </Popup>
   );
 };