agora-appbuilder-core 4.1.9-beta.3 → 4.1.10-beta.1

package/template/src/components/chat/chatConfigure.tsx

@@ -7,6 +7,7 @@ import {useLocalUid} from '../../../agora-rn-uikit';
 import {UidType, useContent} from 'customization-api';
 import {
   ChatMessageType,
+  ChatNotificationType,
   ChatOption,
   SDKChatType,
   useChatMessages,
@@ -255,7 +256,7 @@ const ChatConfigure = ({children}) => {
               );
             }
           },
-          // text message is recieved
+          // Text message is recieved, update receiver side ui
           onTextMessage: message => {
             if (message?.ext?.channel !== data?.channel) {
               return;
@@ -272,11 +273,14 @@ const ChatConfigure = ({children}) => {
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               // show to notifcation- group msg received
+
               showMessageNotification(
                 message.msg,
                 fromUser,
                 false,
                 message.type,
+                false,
+                message.ext?.announcement,
               );
               addMessageToStore(Number(fromUser), {
                 msg: message.msg.replace(/^(\n)+|(\n)+$/g, ''),
@@ -285,6 +289,7 @@ const ChatConfigure = ({children}) => {
                 isDeleted: false,
                 type: ChatMessageType.TXT,
                 replyToMsgId: message.ext?.replyToMsgId,
+                announcement: message.ext?.announcement,
               });
             }
 
@@ -418,6 +423,7 @@ const ChatConfigure = ({children}) => {
             ext: option?.ext?.file_ext,
             fileName: option?.ext?.file_name,
             replyToMsgId: option?.ext?.replyToMsgId,
+            announcement: option?.ext?.announcement,
           };
 
           // update local user message store

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -46,6 +46,11 @@ interface ChatMessagesProviderProps {
   children: React.ReactNode;
   callActive: boolean;
 }
+
+export enum ChatNotificationType {
+  ANNOUNCEMENT = 'ANNOUNCEMENT',
+}
+
 export enum ChatMessageType {
   /**
    * Text message.
@@ -85,6 +90,10 @@ export enum ChatMessageType {
   COMBINE = 'combine',
 }
 
+export interface AnnouncementMessage {
+  sender: string;
+  heading: string;
+}
 export interface messageInterface {
   createdTimestamp: number;
   updatedTimestamp?: number;
@@ -99,6 +108,7 @@ export interface messageInterface {
   reactions?: Reaction[];
   replyToMsgId?: string;
   hide?: boolean;
+  announcement?: AnnouncementMessage;
 }
 
 export enum SDKChatType {
@@ -122,6 +132,7 @@ export interface ChatOption {
     channel?: string;
     msg?: string;
     replyToMsgId?: string;
+    announcement?: AnnouncementMessage;
   };
   url?: string;
 }
@@ -178,6 +189,8 @@ interface ChatMessagesInterface {
     uid: string,
     isPrivateMessage?: boolean,
     msgType?: ChatMessageType,
+    forceStop?: boolean,
+    notificationType?: ChatNotificationType,
   ) => void;
   openPrivateChat: (toUid: UidType) => void;
   removeMessageFromStore: (msgId: string, isMsgRecalled: boolean) => void;
@@ -277,11 +290,20 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
   //commented for v1 release
   //const fromText = useString('messageSenderNotificationLabel');
-  const fromText = (name: string, msgType: ChatMessageType) => {
+  const fromText = (
+    name: string,
+    msgType: ChatMessageType,
+    announcement?: AnnouncementText,
+  ) => {
     let text = '';
     switch (msgType) {
       case ChatMessageType.TXT:
-        text = txtToastHeading?.current(name);
+        if (announcement?.text) {
+          text = `${announcement.sender}: made an announcement in public chat`;
+        } else {
+          text = txtToastHeading?.current(name);
+        }
+
         break;
       case ChatMessageType.IMAGE:
         text = imgToastHeading?.current(name);
@@ -329,12 +351,15 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
   //TODO: check why need
 
-  const updateRenderListState = (
-    uid: number,
-    data: Partial<ContentInterface>,
-  ) => {
-    dispatch({type: 'UpdateRenderList', value: [uid, data]});
-  };
+  // If this is needed use syncUserState
+  //
+  // const updateRenderListState = (
+  //   uid: number,
+  //   data: Partial<ContentInterface>,
+  // ) => {
+  //   dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  // };
+  //
 
   const addMessageToStore = (uid: UidType, body: messageInterface) => {
     setMessageStore((m: messageStoreInterface[]) => {
@@ -353,6 +378,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           fileName: body?.fileName,
           replyToMsgId: body?.replyToMsgId,
           hide: false,
+          announcement: body?.announcement,
         },
       ];
     });
@@ -520,6 +546,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     isPrivateMessage: boolean = false,
     msgType: ChatMessageType,
     forceStop: boolean = false,
+    announcement: AnnouncementMessage,
   ) => {
     if (isUserBanedRef.current.isUserBaned) {
       return;
@@ -684,17 +711,22 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         primaryBtn: null,
         secondaryBtn: null,
         type: 'info',
-        leadingIconName: 'chat-nav',
-        text1: isPrivateMessage
+        leadingIconName: announcement ? 'announcement' : 'chat-nav',
+        text1: announcement
+          ? announcement.heading
+          : isPrivateMessage
           ? privateMessageLabel?.current()
           : //@ts-ignore
-          defaultContentRef.current.defaultContent[uidAsNumber]?.name
+          announcement?.sender
+          ? announcement.sender
+          : defaultContentRef.current.defaultContent[uidAsNumber]?.name
           ? fromText(
               trimText(
                 //@ts-ignore
                 defaultContentRef.current.defaultContent[uidAsNumber]?.name,
               ),
               msgType,
+              announcement,
             )
           : '',
         text2: isPrivateMessage

package/template/src/components/common/Dividers.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import ThemeConfig from '../../theme';
+
+interface DividerProps {
+  orientation?: 'horizontal' | 'vertical';
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  thickness?: number;
+  color?: string;
+  length?: number | string; // only for vertical dividers
+}
+
+const Divider: React.FC<DividerProps> = ({
+  orientation = 'horizontal',
+  marginTop = 8,
+  marginBottom = 8,
+  marginLeft = 0,
+  marginRight = 0,
+  thickness = 1,
+  color = $config.CARD_LAYER_4_COLOR,
+  length = '100%',
+}) => {
+  const isHorizontal = orientation === 'horizontal';
+
+  const style = isHorizontal
+    ? {
+        height: thickness,
+        width: '100%',
+        backgroundColor: color,
+        marginTop,
+        marginBottom,
+      }
+    : {
+        width: thickness,
+        height: length,
+        backgroundColor: color,
+        marginLeft,
+        marginRight,
+      };
+
+  return <View style={[styles.base, style]} />;
+};
+
+const styles = StyleSheet.create({
+  base: {
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+  },
+});
+
+export default Divider;

package/template/src/components/controls/toolbar-items/ExitBreakoutRoomToolbarItem.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ToolbarItem, {ToolbarItemProps} from '../../../atoms/ToolbarItem';
+import ExitBreakoutRoomIconButton from '../../breakout-room/ui/ExitBreakoutRoomIconButton';
+
+export interface Props extends ToolbarItemProps {}
+
+export const ExitBreakoutRoomToolbarItem = (props: Props) => {
+  return (
+    <ToolbarItem testID="exit-breakout-room-btn" toolbarProps={props}>
+      <ExitBreakoutRoomIconButton />
+    </ToolbarItem>
+  );
+};

package/template/src/components/controls/useControlPermissionMatrix.tsx

@@ -3,7 +3,9 @@ import {useContext} from 'react';
 import {ClientRoleType, PropsContext} from '../../../agora-rn-uikit/src';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import {joinRoomPreference} from '../../utils/useJoinRoom';
-import {isWeb} from '../../utils/common';
+import {isWeb, isWebInternal} from '../../utils/common';
+import {ENABLE_AUTH} from '../../auth/config';
+import {useBreakoutRoomInfo} from '../room-info/useSetBreakoutRoomInfo';
 
 /**
  * ControlPermissionKey represents the different keys
@@ -15,7 +17,12 @@ export type ControlPermissionKey =
   | 'participantControl'
   | 'screenshareControl'
   | 'settingsControl'
-  | 'viewAllTextTracks';
+  | 'viewAllTextTracksControl'
+  | 'breakoutRoomControl'
+  | 'whiteboardControl'
+  | 'recordingControl'
+  | 'captionsControl'
+  | 'transcriptsControl';
 
 /**
  * ControlPermissionRule defines the properties used to evaluate permission rules.
@@ -24,6 +31,7 @@ export type ControlPermissionRule = {
   isHost: boolean;
   role: ClientRoleType;
   preference: joinRoomPreference;
+  isInBreakoutRoom: boolean;
 };
 
 export const controlPermissionMatrix: Record<
@@ -36,12 +44,30 @@ export const controlPermissionMatrix: Record<
   settingsControl: ({preference}) => !preference.disableSettings,
   screenshareControl: ({preference}) =>
     $config.SCREEN_SHARING && !preference.disableScreenShare,
-  viewAllTextTracks: ({isHost}) =>
+
+  viewAllTextTracksControl: ({isHost, isInBreakoutRoom}) =>
     isHost &&
     $config.ENABLE_STT &&
     $config.ENABLE_MEETING_TRANSCRIPT &&
     $config.ENABLE_TEXT_TRACKS &&
-    isWeb(),
+    isWeb() &&
+    !isInBreakoutRoom,
+  whiteboardControl: ({isHost, isInBreakoutRoom}) =>
+    isHost && $config.ENABLE_WHITEBOARD && isWebInternal() && !isInBreakoutRoom,
+  recordingControl: ({isHost, isInBreakoutRoom}) =>
+    isHost && $config.CLOUD_RECORDING && !isInBreakoutRoom,
+  captionsControl: ({isInBreakoutRoom}) =>
+    $config.ENABLE_STT && $config.ENABLE_CAPTION && !isInBreakoutRoom,
+  transcriptsControl: ({isInBreakoutRoom}) =>
+    $config.ENABLE_MEETING_TRANSCRIPT && !isInBreakoutRoom,
+  breakoutRoomControl: () =>
+    isWeb() &&
+    $config.ENABLE_BREAKOUT_ROOM &&
+    ENABLE_AUTH &&
+    !$config.ENABLE_CONVERSATIONAL_AI &&
+    !$config.EVENT_MODE &&
+    !$config.RAISE_HAND &&
+    !$config.ENABLE_WAITING_ROOM,
 };
 
 export const useControlPermissionMatrix = (
@@ -49,12 +75,14 @@ export const useControlPermissionMatrix = (
 ): boolean => {
   const {data: roomData, roomPreference} = useRoomInfo();
   const {rtcProps} = useContext(PropsContext);
+  const {breakoutRoomChannelData} = useBreakoutRoomInfo();
 
   // Build the permission rule context for the current user.
   const rule: ControlPermissionRule = {
     isHost: roomData?.isHost || false,
     role: rtcProps.role,
     preference: {...roomPreference},
+    isInBreakoutRoom: breakoutRoomChannelData?.isBreakoutMode || false,
   };
   // Retrieve the permission function for the given key and evaluate it.
   const permissionFn = controlPermissionMatrix[key];

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

@@ -73,12 +73,14 @@ export default function AllHostParticipants(props: any) {
                 isAudienceUser={false}
                 name={getParticipantName(localUid)}
                 user={defaultContent[localUid]}
-                showControls={true}
+                showControls={props?.hideControls ? false : true}
                 isHostUser={hostUids.indexOf(localUid) !== -1}
                 key={localUid}
                 isMobile={isMobile}
                 handleClose={handleClose}
                 updateActionSheet={updateActionSheet}
+                showBreakoutRoomMenu={props?.showBreakoutRoomMenu}
+                from={props?.from}
               />
               {renderScreenShare(defaultContent[localUid])}
             </>
@@ -104,12 +106,18 @@ export default function AllHostParticipants(props: any) {
                     isAudienceUser={false}
                     name={getParticipantName(uid)}
                     user={defaultContent[uid]}
-                    showControls={defaultContent[uid]?.type === 'rtc' && isHost}
+                    showControls={
+                      defaultContent[uid]?.type === 'rtc' &&
+                      isHost &&
+                      (props?.hideControls ? false : true)
+                    }
                     isHostUser={hostUids.indexOf(uid) !== -1}
                     key={uid}
                     isMobile={isMobile}
                     handleClose={handleClose}
                     updateActionSheet={updateActionSheet}
+                    showBreakoutRoomMenu={props?.showBreakoutRoomMenu}
+                    from={props?.from}
                   />
                   {renderScreenShare(defaultContent[uid])}
                 </>

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

@@ -66,6 +66,12 @@ interface ParticipantInterface {
   updateActionSheet: (screenName: 'chat' | 'participants' | 'settings') => {};
   uid?: UidType;
   screenUid?: UidType;
+  showBreakoutRoomMenu?: boolean;
+  from?:
+    | 'breakout-room'
+    | 'partcipant'
+    | 'screenshare-participant'
+    | 'video-tile';
 }
 
 const Participant = (props: ParticipantInterface) => {
@@ -106,7 +112,7 @@ const Participant = (props: ParticipantInterface) => {
         setActionMenuVisible={setActionMenuVisible}
         user={props.user}
         btnRef={moreIconRef}
-        from={'partcipant'}
+        from={props?.from || 'partcipant'}
         spotlightUid={spotlightUid}
         setSpotlightUid={setSpotlightUid}
       />

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

@@ -77,13 +77,21 @@ import {
   DEFAULT_ACTION_KEYS,
   UserActionMenuItemsConfig,
 } from '../../atoms/UserActionMenuPreset';
+import {
+  MemberDropdownOption,
+  useBreakoutRoom,
+} from '../breakout-room/context/BreakoutRoomContext';
 
 interface UserActionMenuOptionsOptionsProps {
   user: ContentInterface;
   actionMenuVisible: boolean;
   setActionMenuVisible: (actionMenuVisible: boolean) => void;
   btnRef: any;
-  from: 'partcipant' | 'screenshare-participant' | 'video-tile';
+  from:
+    | 'partcipant'
+    | 'screenshare-participant'
+    | 'video-tile'
+    | 'breakout-room';
   spotlightUid?: UidType;
   setSpotlightUid?: (uid: UidType) => void;
   items?: UserActionMenuItemsConfig;
@@ -102,7 +110,8 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
-  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid} = props;
+  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid, from} =
+    props;
   const {currentLayout} = useLayout();
   const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
     useContent();
@@ -729,6 +738,7 @@ export default function UserActionMenuOptionsOptions(
     secondaryPinnedUid,
     currentLayout,
     spotlightUid,
+    from,
   ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -39,6 +39,7 @@ import {
   waitingRoomHostNotJoined,
   waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
+import ChatContext from '../ChatContext';
 
 export interface PreCallJoinWaitingRoomBtnProps {
   render?: (
@@ -58,6 +59,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
+  const {syncUserState} = useContext(ChatContext);
   const {setCallActive, callActive} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
@@ -139,10 +141,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
       if (callActive) return;
       // on approve/reject response from host, waiting room permission is reset
       // update waitinng room status on uid
-      dispatch({
-        type: 'UpdateRenderList',
-        value: [localUid, {isInWaitingRoom: false}],
-      });
+      // dispatch({
+      //   type: 'UpdateRenderList',
+      //   value: [localUid, {isInWaitingRoom: false}],
+      // });
+      syncUserState(localUid, {isInWaitingRoom: false});
 
       if (approved) {
         setRoomInfo(prev => {
@@ -219,10 +222,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
     });
 
     // add the waitingRoomStatus to the uid
-    dispatch({
-      type: 'UpdateRenderList',
-      value: [localUid, {isInWaitingRoom: true}],
-    });
+    // dispatch({
+    //   type: 'UpdateRenderList',
+    //   value: [localUid, {isInWaitingRoom: true}],
+    // });
+    syncUserState(localUid, {isInWaitingRoom: true});
 
     // join request API to server, server will send RTM message to all hosts regarding request from this user,
     requestServerToJoinRoom();

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

@@ -45,6 +45,7 @@ import {
   waitingRoomHostNotJoined,
   waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
+import ChatContext from '../ChatContext';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -84,7 +85,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
   const localUid = useLocalUid();
   const {dispatch} = useContext(DispatchContext);
-
+  const {syncUserState} = useContext(ChatContext);
   const [buttonText, setButtonText] = React.useState(
     waitingRoomButton({
       ready: isInWaitingRoom,
@@ -144,10 +145,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
       if (callActive) return;
       // on approve/reject response from host, waiting room permission is reset
       // update waitinng room status on uid
-      dispatch({
-        type: 'UpdateRenderList',
-        value: [localUid, {isInWaitingRoom: false}],
-      });
+      // dispatch({
+      //   type: 'UpdateRenderList',
+      //   value: [localUid, {isInWaitingRoom: false}],
+      // });
+      syncUserState(localUid, {isInWaitingRoom: false});
 
       if (approved) {
         setRoomInfo(prev => {
@@ -241,10 +243,12 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
     //setCallActive(true);
 
     // add the waitingRoomStatus to the uid
-    dispatch({
-      type: 'UpdateRenderList',
-      value: [localUid, {isInWaitingRoom: true}],
-    });
+    // dispatch({
+    //   type: 'UpdateRenderList',
+    //   value: [localUid, {isInWaitingRoom: true}],
+    // });
+    syncUserState(localUid, {isInWaitingRoom: true});
+
     // Enter waiting rooom;
     setRoomInfo(prev => {
       return {...prev, isInWaitingRoom: true};
@@ -281,7 +285,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom ||  username?.trim() === ''
+    ? !hasHostJoined || isInWaitingRoom || username?.trim() === ''
     : isInWaitingRoom || username?.trim() === '';
   return props?.render ? (
     props.render(onPress, title, disabled)

package/template/src/components/raise-hand/RaiseHandButton.tsx

@@ -0,0 +1,50 @@
+/*
+********************************************
+ 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 from 'react';
+import {useRaiseHand} from './RaiseHandProvider';
+import {StyleSheet} from 'react-native';
+import ThemeConfig from '../../theme';
+import TertiaryButton from '../../atoms/TertiaryButton';
+
+const RaiseHandButton: React.FC = () => {
+  const {isHandRaised, toggleHand} = useRaiseHand();
+
+  return (
+    <TertiaryButton
+      containerStyle={style.raiseHandBtn}
+      textStyle={style.raiseHandBtnText}
+      text={isHandRaised ? 'Lower Hand' : 'Raise Hand'}
+      iconName={isHandRaised ? 'lower-hand' : 'raise-hand'}
+      iconColor={$config.SEMANTIC_WARNING}
+      iconSize={15}
+      onPress={toggleHand}
+    />
+  );
+};
+
+export default RaiseHandButton;
+
+const style = StyleSheet.create({
+  raiseHandBtn: {
+    width: '100%',
+    borderRadius: 4,
+    borderColor: $config.SECONDARY_ACTION_COLOR,
+    backgroundColor: 'transparent',
+  },
+  raiseHandBtnText: {
+    textAlign: 'center',
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 16,
+  },
+});