agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -10,62 +10,78 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {StyleSheet} from 'react-native';
 import LiveStreamContext, {
   RaiseHandValue,
 } from '../../../components/livestream';
-import {PropsContext} from '../../../../agora-rn-uikit';
-import {BtnTemplate} from '../../../../agora-rn-uikit';
-import icons from '../../../assets/icons';
 import {useString} from '../../../utils/useString';
 import ChatContext from '../../../components/ChatContext';
+import IconButton from '../../../atoms/IconButton';
+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';
+import {useToolbarProps} from '../../../atoms/ToolbarItem';
 
 const LocalRaiseHand = () => {
-  const {styleProps} = useContext(PropsContext);
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
+
   const {localUid} = useContext(ChatContext);
-  const {localBtnStyles} = styleProps || {};
-  const {theme} = styleProps || {};
-  const {muteLocalAudio} = localBtnStyles || {};
-  //commented for v1 release
-  //const handStatusText = useString<boolean>('raiseHandButton');
-  const handStatusText = (toggle: boolean) =>
-    toggle ? 'Lower hand' : 'Raise Hand';
-  return (
-    <BtnTemplate
-      icon={icons['raiseHandIcon']}
-      btnText={handStatusText(
-        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE,
-      )}
-      color={
-        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE
-          ? '#FD0845'
-          : theme
-      }
-      style={{
-        ...style.localBtn,
-        ...(localBtnStyles as object),
-        ...(muteLocalAudio as object),
-      }}
-      onPress={() => {
-        if (raiseHandList[localUid]?.raised === RaiseHandValue.TRUE) {
-          audienceRecallsRequest();
-        } else {
-          audienceSendsRequest();
-        }
-      }}
-    />
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+
+  const handStatusText = useString<boolean>(toolbarItemRaiseHandText);
+  const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
+  const 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
+        ? label ||
+          handStatusText(isHandRasied)?.replace(
+            ' ',
+            isOnActionSheet ? '\n' : ' ',
+          )
+        : '',
+      textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
+    },
+    onPress: onPressCustom || onPress,
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    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} />
   );
 };
 
-const style = StyleSheet.create({
-  localBtn: {
-    borderRadius: 23,
-    borderWidth: 4 * StyleSheet.hairlineWidth,
-    borderColor: '#007aff',
-    backgroundColor: '#007aff',
-  },
-});
-
 export default LocalRaiseHand;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import {BtnTemplate, UidType} from '../../../../agora-rn-uikit';
+import IconButton from '../../../atoms/IconButton';
+import {UidType} from '../../../../agora-rn-uikit';
 import {LiveStreamControlMessageEnum} from '../../../components/livestream';
-import icons from '../../../assets/icons';
-import events, {EventPersistLevel} from '../../../rtm-events-api';
+import events, {PersistanceLevel} from '../../../rtm-events-api';
 
 export interface RemoteLiveStreamApprovedRequestRecallProps {
   uid: UidType;
@@ -11,18 +11,19 @@ const RemoteLiveStreamApprovedRequestRecall = (
   props: RemoteLiveStreamApprovedRequestRecallProps,
 ) => {
   return (
-    <BtnTemplate
-      style={{width: 24, height: 22}}
+    //@ts-ignore
+    <IconButton
       onPress={() => {
         events.send(
           LiveStreamControlMessageEnum.raiseHandRequestRejected,
           '',
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           props.uid,
         );
       }}
-      color="#FD0845"
-      icon={icons['demoteIcon']}
+      // color="#FD0845"
+      //todo hari
+      //icon={Icons['demoteIcon']}
     />
   );
 };

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

@@ -1,30 +1,47 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
+import {PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
-import icons from '../../../assets/icons';
+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;
+  toastId: number;
 }
 
 const RemoteLiveStreamRequestApprove = (
   props: RemoteLiveStreamControlProps,
 ) => {
-  const {uid} = props;
+  const {uid, toastId} = props;
   const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
-  const {styleProps} = useContext(PropsContext);
-  const {remoteBtnStyles} = styleProps || {};
-
-  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
-
+  const btnText = useString(peoplePanelLivestreamingApprovalBtnText)();
   return (
-    <View style={{...(liveStreamHostControlBtns as object), marginRight: 15}}>
-      <BtnTemplate
+    <View>
+      <PrimaryButton
+        containerStyle={{
+          minWidth: 'auto',
+          paddingHorizontal: 13,
+          paddingVertical: 8,
+          borderRadius: 4,
+        }}
+        textStyle={{
+          fontWeight: '600',
+          fontSize: 12,
+          lineHeight: 12,
+          fontFamily: ThemeConfig.FontFamily.sansPro,
+          textTransform: 'capitalize',
+        }}
         disabled={!uid}
-        icon={icons['checkCircleIcon']}
-        style={{...(liveStreamHostControlBtns as object)}}
+        text={btnText}
         onPress={() => {
+          //Hiding the toast if its get approved in the participant panel
+          if (Toast.getToastId() === toastId) {
+            Toast.hide();
+          }
           hostApprovesRequestOfUID(uid);
         }}
       />

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

@@ -1,31 +1,47 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
+import {PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
-import icons from '../../../assets/icons';
+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;
+  toastId: number;
 }
 
 const RemoteLiveStreamRequestReject = (props: RemoteLiveStreamControlProps) => {
-  const {uid} = props;
+  const {uid, toastId} = props;
   const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
-  const {styleProps} = useContext(PropsContext);
-  const {remoteBtnStyles} = styleProps || {};
-  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
-
+  const denyBtntext = useString(peoplePanelLivestreamingDenyBtnText)();
   return (
-    <View style={{...(liveStreamHostControlBtns as object)}}>
-      <BtnTemplate
-        disabled={!uid}
-        icon={icons['crossCircleIcon']}
-        style={{...(liveStreamHostControlBtns as object)}}
-        onPress={() => {
-          hostRejectsRequestOfUID(uid);
-        }}
-      />
-    </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,76 @@
+import {useEffect} from 'react';
+import {useSearchParams} from '../../utils/useSearchParams';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import jwt_decode from 'jwt-decode';
+
+interface RecordingBotUIConfig {
+  chat: boolean;
+  topBar: boolean;
+  bottomBar: boolean;
+  stt: boolean;
+}
+
+interface BotToken {
+  authentication_type: number;
+  app_id: string;
+  user_id: string;
+  project_id: string;
+  exp: number;
+}
+
+const regexPattern = new RegExp('true');
+
+const isValidBotUserId = (token: string): boolean => {
+  if (!token) {
+    return false;
+  }
+  const decoded = jwt_decode<BotToken>(token);
+  return decoded?.user_id?.startsWith('bc-') || false;
+};
+
+export function useIsRecordingBot() {
+  /**
+   * Reading and setting URL params.
+   * To identify its a recording bot user
+   * 1. Check if bot param is there
+   * 2. Check if token param is there
+   * 3. Decode that token and check if user_id contains ******
+   */
+
+  const botParam = useSearchParams().get('bot');
+  const recordingBotParam = botParam ? regexPattern.test(botParam) : false;
+  const recordingBotToken = useSearchParams().get('token');
+  const recordingBotName = useSearchParams().get('user_name');
+  const isRecordingBot =
+    recordingBotParam &&
+    recordingBotToken &&
+    isValidBotUserId(recordingBotToken);
+
+  useEffect(() => {
+    logger.log(LogSource.Internals, 'RECORDING', 'Recording bot check', {
+      isBot: recordingBotParam,
+      token: recordingBotToken,
+      name: recordingBotName,
+      isRecordingBot: isRecordingBot,
+    });
+  }, [isRecordingBot, recordingBotName, recordingBotToken, recordingBotParam]);
+
+  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 {
+    isRecordingBot,
+    recordingBotToken,
+    recordingBotName,
+    recordingBotUIConfig,
+  };
+}