agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/subComponents/chat/ChatParticipants.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useReducer, useState} from 'react';
 import {
   View,
   Text,
@@ -14,11 +14,17 @@ import {isIOS, isMobileUA, isWebInternal} from '../../utils/common';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
 import ImageIcon from '../../atoms/ImageIcon';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import UserAvatar from '../../atoms/UserAvatar';
 import ThemeConfig from '../../theme';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import Spacer from '../../atoms/Spacer';
+import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
+import {useWaitingRoomContext} from '../../components/contexts/WaitingRoomContext';
+import {
+  inviteTileNoElseJoinedYetText,
+  videoRoomUserFallbackText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const ChatIcon = () => (
   <View style={{alignSelf: 'center', marginRight: 20}}>
@@ -31,34 +37,64 @@ const ChatIcon = () => (
 );
 
 const ChatParticipants = (props: any) => {
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const {selectUser} = props;
-  const {renderList, activeUids} = useRender();
+  const {defaultContent, activeUids, customContent} = useContent();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const localUid = useLocalUid();
   const {unreadIndividualMessageCount} = useChatNotification();
   const isMobile = isMobileUA();
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const {waitingRoomUids} = useWaitingRoomContext();
+  const [_, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM) {
+      forceUpdate();
+    }
+  }, [waitingRoomUids, activeUids]);
+
+  const noOneElseJoinedYet = useString(inviteTileNoElseJoinedYetText)();
+
   return (
     <ScrollView>
-      {activeUids && activeUids.length === 1 ? (
-        <View style={style.defaultMessageContainer}>
-          <Text style={style.defaultMessageText}>
-            No one else has joined yet.
-          </Text>
-        </View>
-      ) : (
-        <></>
-      )}
-      {Object.keys(renderList)
-        .map((i) => parseInt(i))
-        .filter((i) => {
+      {
+        //video meeting vertical
+        (!$config.EVENT_MODE && activeUids && activeUidsLen === 1) ||
+        //livestreaming vertical
+        ($config.EVENT_MODE && hostUids.length + audienceUids.length === 1) ? (
+          <View style={style.defaultMessageContainer}>
+            <Text style={style.defaultMessageText}>{noOneElseJoinedYet}</Text>
+          </View>
+        ) : (
+          <></>
+        )
+      }
+      {Object.keys(defaultContent)
+        .map(i => parseInt(i))
+        .filter(i => {
           try {
             if (isNaN(i)) {
               return false;
             } else {
               const userId = i;
-              const userInfo = renderList[userId];
+              const userInfo = defaultContent[userId];
+              //video meeting with waiting room
+              if (
+                $config.ENABLE_WAITING_ROOM &&
+                !$config.EVENT_MODE &&
+                activeUids?.indexOf(userId) === -1
+              ) {
+                return false;
+              }
+              //livestreaming with waiting room
+              if (
+                $config.ENABLE_WAITING_ROOM &&
+                $config.EVENT_MODE &&
+                hostUids?.concat(audienceUids)?.indexOf(userId) === -1
+              ) {
+                return false;
+              }
               return (
                 userId !== localUid && //user can't chat with own user
                 // @ts-ignore
@@ -73,14 +109,14 @@ const ChatParticipants = (props: any) => {
         })
         .sort((a, b) => {
           return (
-            renderList[b]?.lastMessageTimeStamp -
-            renderList[a]?.lastMessageTimeStamp
+            defaultContent[b]?.lastMessageTimeStamp -
+            defaultContent[a]?.lastMessageTimeStamp
           );
         })
-        .map((uid) => {
+        .map(uid => {
           const uidAsNumber = uid;
-          const name = renderList[uidAsNumber]
-            ? renderList[uidAsNumber].name + ''
+          const name = defaultContent[uidAsNumber]
+            ? defaultContent[uidAsNumber].name + ''
             : remoteUserDefaultLabel;
           return (
             <PlatformWrapper key={'chat-participant' + uid}>

package/template/src/subComponents/livestream/ApprovedLiveStreamControlsView.tsx

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import {View} from 'react-native';
 import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
 import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 
 const ApprovedLiveStreamControlsView = (props: {
   uid: number;
@@ -13,7 +13,7 @@ const ApprovedLiveStreamControlsView = (props: {
 
   if (
     raiseHandList[uid]?.raised === RaiseHandValue.TRUE &&
-    raiseHandList[uid]?.role == ClientRole.Broadcaster
+    raiseHandList[uid]?.role == ClientRoleType.ClientRoleBroadcaster
   ) {
     return (
       <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>

package/template/src/subComponents/livestream/CurrentLiveStreamRequestsView.tsx

@@ -6,24 +6,21 @@ import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {filterObject} from '../../utils/index';
 import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
 import {useString} from '../../utils/useString';
-import {ClientRole} from '../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {ClientRoleType} from '../../../agora-rn-uikit';
+import {useContent} from 'customization-api';
 import UserAvatar from '../../atoms/UserAvatar';
 import Spacer from '../../atoms/Spacer';
+import {
+  peoplePanelStreamingRequestSectionHeader,
+  peoplePanelUserNotFoundLabel,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const CurrentLiveStreamRequestsView = (props: any) => {
-  //commented for v1 release
-  // const noLiveStreamingRequestsLabel = useString(
-  //   'raisedHandsListPlaceholder',
-  // )();
-  // const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  // const noUserFoundLabel = useString('noUserFoundLabel')();
-  // const raisedHandsListTitleLabel = useString('raisedHandsListTitleLabel')();
-  const noLiveStreamingRequestsLabel = 'No streaming request(s)';
-  const remoteUserDefaultLabel = 'User';
-  const noUserFoundLabel = 'User not found';
-  const raisedHandsListTitleLabel = 'Streaming Request';
-  const {renderList} = useRender();
+  const noUserFoundLabel = useString(peoplePanelUserNotFoundLabel)();
+  const raisedHandsListTitleLabel = useString(
+    peoplePanelStreamingRequestSectionHeader,
+  )();
+  const {defaultContent} = useContent();
   const {raiseHandList, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
   const [activeLiveStreamRequests, setActiveLiveStreamRequests] =
@@ -34,7 +31,8 @@ const CurrentLiveStreamRequestsView = (props: any) => {
       filterObject(
         raiseHandList,
         ([k, v]) =>
-          v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
+          v?.raised === RaiseHandValue.TRUE &&
+          v?.role == ClientRoleType.ClientRoleAudience,
       ),
     );
   }, [raiseHandList]);
@@ -73,11 +71,11 @@ const CurrentLiveStreamRequestsView = (props: any) => {
           {showRequestSection ? (
             Object.keys(activeLiveStreamRequests).map(
               (userUID: any, index: number) =>
-                renderList[userUID] ? (
+                defaultContent[userUID] ? (
                   <View style={styles.container}>
                     <View style={styles.userInfoContainer}>
                       <UserAvatar
-                        name={renderList[userUID].name}
+                        name={defaultContent[userUID].name}
                         containerStyle={containerStyle}
                         textStyle={textStyle}
                       />
@@ -85,10 +83,11 @@ const CurrentLiveStreamRequestsView = (props: any) => {
                         <Text
                           style={styles.participantNameText}
                           numberOfLines={1}>
-                          {renderList[userUID].name}
+                          {defaultContent[userUID].name}
                         </Text>
                       </View>
                     </View>
+                    <Spacer size={24} horizontal={true} />
                     <View style={styles.btnContainer}>
                       <RemoteLiveStreamRequestReject
                         uid={userUID}
@@ -117,9 +116,9 @@ const CurrentLiveStreamRequestsView = (props: any) => {
 };
 const styles = StyleSheet.create({
   btnContainer: {
-    flex: 1,
+    //  flex: 1,
     flexDirection: 'row',
-    justifyContent: 'center',
+    //  justifyContent: 'center',
     alignItems: 'center',
   },
   container: {

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -18,49 +18,80 @@ import Styles from '../../../components/styles';
 import ChatContext from '../../../components/ChatContext';
 import IconButton from '../../../atoms/IconButton';
 import ThemeConfig from '../../../theme';
-import {ClientRole, PropsContext} from '../../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {PropsContext} from '../../../../agora-rn-uikit';
+import {useContent} from 'customization-api';
 import {isMobileUA} from '../../../utils/common';
+import {IconButtonProps} from '../../../atoms/IconButton';
+import {useToolbarMenu} from '../../../utils/useMenu';
+import ToolbarMenuItem from '../../../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../../../utils/useActionSheet';
+import {toolbarItemRaiseHandText} from '../../../language/default-labels/videoCallScreenLabels';
 
-interface LocalRaiseHandProps {
-  showLabel?: boolean;
-}
+interface LocalRaiseHandProps {}
 const LocalRaiseHand = (props: LocalRaiseHandProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
   const {rtcProps} = useContext(PropsContext);
   const {localUid} = useContext(ChatContext);
-  const {activeUids} = useRender();
-  const {showLabel = $config.ICON_TEXT} = props;
-  //commented for v1 release
-  //const handStatusText = useString<boolean>('raiseHandButton');
-  const handStatusText = (toggle: boolean) =>
-    toggle ? 'Lower hand' : 'Raise Hand';
+  const {activeUids} = useContent();
+  const {isOnActionSheet, showLabel} = useActionSheet();
+
+  const handStatusText = useString<boolean>(toolbarItemRaiseHandText);
   const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
-  return (
-    <IconButton
-      iconProps={{
-        name: isHandRasied ? 'lower-hand' : 'raise-hand',
-        tintColor: isHandRasied
-          ? $config.PRIMARY_ACTION_TEXT_COLOR
-          : $config.SECONDARY_ACTION_COLOR,
-        iconBackgroundColor: isHandRasied
-          ? $config.PRIMARY_ACTION_BRAND_COLOR
-          : '',
-        base64: isMobileUA() ? true : false,
-      }}
-      btnTextProps={{
-        text: showLabel ? handStatusText(isHandRasied) : '',
-        textColor: $config.FONT_COLOR,
-      }}
-      onPress={() => {
-        if (isHandRasied) {
-          audienceRecallsRequest();
-        } else {
-          audienceSendsRequest();
-        }
-      }}
-    />
+  const iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isHandRasied ? 'lower-hand' : 'raise-hand',
+      tintColor: isHandRasied
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isHandRasied
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+      base64: isMobileUA() ? true : false,
+    },
+    btnTextProps: {
+      text: showLabel
+        ? handStatusText(isHandRasied)?.replace(
+            ' ',
+            isOnActionSheet ? '\n' : ' ',
+          )
+        : '',
+      textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
+    },
+    onPress: () => {
+      if (isHandRasied) {
+        audienceRecallsRequest();
+      } else {
+        audienceSendsRequest();
+      }
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
+  return isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
+  ) : (
+    <IconButton {...iconButtonProps} />
   );
 };
 

package/template/src/subComponents/livestream/controls/RemoteLiveStreamApprovedRequestRecall.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import IconButton from '../../../atoms/IconButton';
 import {UidType} from '../../../../agora-rn-uikit';
 import {LiveStreamControlMessageEnum} from '../../../components/livestream';
-import events, {EventPersistLevel} from '../../../rtm-events-api';
+import events, {PersistanceLevel} from '../../../rtm-events-api';
 
 export interface RemoteLiveStreamApprovedRequestRecallProps {
   uid: UidType;
@@ -11,12 +11,13 @@ const RemoteLiveStreamApprovedRequestRecall = (
   props: RemoteLiveStreamApprovedRequestRecallProps,
 ) => {
   return (
+    //@ts-ignore
     <IconButton
       onPress={() => {
         events.send(
           LiveStreamControlMessageEnum.raiseHandRequestRejected,
           '',
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           props.uid,
         );
       }}

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestApprove.tsx

@@ -5,6 +5,8 @@ import LiveStreamContext from '../../../components/livestream';
 import PrimaryButton from '../../../atoms/PrimaryButton';
 import ThemeConfig from '../../../theme';
 import Toast from '../../../../react-native-toast-message';
+import {useString} from '../../../utils/useString';
+import {peoplePanelLivestreamingApprovalBtnText} from '../../../language/default-labels/videoCallScreenLabels';
 
 export interface RemoteLiveStreamControlProps {
   uid: UidType;
@@ -16,23 +18,25 @@ const RemoteLiveStreamRequestApprove = (
 ) => {
   const {uid, toastId} = props;
   const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
-
+  const btnText = useString(peoplePanelLivestreamingApprovalBtnText)();
   return (
-    <View style={{flex: 1}}>
+    <View>
       <PrimaryButton
         containerStyle={{
           minWidth: 'auto',
-          borderRadius: ThemeConfig.BorderRadius.small,
-          height: 38,
-          paddingHorizontal: 8,
+          paddingHorizontal: 13,
           paddingVertical: 8,
+          borderRadius: 4,
         }}
         textStyle={{
           fontWeight: '600',
           fontSize: 12,
+          lineHeight: 12,
+          fontFamily: ThemeConfig.FontFamily.sansPro,
+          textTransform: 'capitalize',
         }}
         disabled={!uid}
-        text={'Accept'}
+        text={btnText}
         onPress={() => {
           //Hiding the toast if its get approved in the participant panel
           if (Toast.getToastId() === toastId) {

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestReject.tsx

@@ -4,6 +4,9 @@ import {PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
 import TertiaryButton from '../../../atoms/TertiaryButton';
 import Toast from '../../../../react-native-toast-message';
+import ThemeConfig from '../../../theme';
+import {useString} from '../../../utils/useString';
+import {peoplePanelLivestreamingDenyBtnText} from '../../../language/default-labels/videoCallScreenLabels';
 
 interface RemoteLiveStreamControlProps {
   uid: UidType;
@@ -13,26 +16,32 @@ interface RemoteLiveStreamControlProps {
 const RemoteLiveStreamRequestReject = (props: RemoteLiveStreamControlProps) => {
   const {uid, toastId} = props;
   const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
-
+  const denyBtntext = useString(peoplePanelLivestreamingDenyBtnText)();
   return (
-    <View style={{flex: 1}}>
-      <TertiaryButton
-        containerStyle={{
-          paddingHorizontal: 8,
-          paddingVertical: 8,
-          height: 38,
-        }}
-        disabled={!uid}
-        onPress={() => {
-          //Hiding the toast if its get rejected in the participant panel
-          if (Toast.getToastId() === toastId) {
-            Toast.hide();
-          }
-          hostRejectsRequestOfUID(uid);
-        }}
-        text={'DENY'}
-      />
-    </View>
+    <TertiaryButton
+      containerStyle={{
+        minWidth: 'auto',
+        paddingHorizontal: 13,
+        paddingVertical: 7,
+        borderRadius: 4,
+      }}
+      textStyle={{
+        fontWeight: '600',
+        fontSize: 12,
+        lineHeight: 12,
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        textTransform: 'capitalize',
+      }}
+      disabled={!uid}
+      onPress={() => {
+        //Hiding the toast if its get rejected in the participant panel
+        if (Toast.getToastId() === toastId) {
+          Toast.hide();
+        }
+        hostRejectsRequestOfUID(uid);
+      }}
+      text={denyBtntext}
+    />
   );
 };
 

package/template/src/subComponents/recording/useIsRecordingBot.tsx

@@ -0,0 +1,38 @@
+import {useSearchParams} from '../../utils/useSearchParams';
+
+interface RecordingBotUIConfig {
+  chat: boolean;
+  topBar: boolean;
+  bottomBar: boolean;
+  stt: boolean;
+}
+
+const regexPattern = new RegExp('true');
+
+export function useIsRecordingBot() {
+  // Reading and setting URL params
+  const isRecordingBot = useSearchParams().get('bot');
+  const recordingBotToken = useSearchParams().get('token');
+  const recordingBotName = useSearchParams().get('user_name');
+  const isRecordingBotRoute = isRecordingBot && recordingBotToken;
+
+  const chatParam = useSearchParams().get('chat');
+  const topBarParam = useSearchParams().get('topBar');
+  const bottomBarParam = useSearchParams().get('bottomBar');
+  const sttParam = useSearchParams().get('stt');
+
+  const recordingBotUIConfig: RecordingBotUIConfig = {
+    chat: chatParam ? regexPattern.test(chatParam) : true,
+    topBar: topBarParam ? regexPattern.test(topBarParam) : false,
+    bottomBar: bottomBarParam ? regexPattern.test(bottomBarParam) : false,
+    stt: sttParam ? regexPattern.test(sttParam) : false,
+  };
+
+  return {
+    isRecordingBotRoute,
+    isRecordingBot,
+    recordingBotToken,
+    recordingBotName,
+    recordingBotUIConfig,
+  };
+}