agora-appbuilder-core 4.0.0-beta.64 → 4.0.0-beta.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.64",
+  "version": "4.0.0-beta.66",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/components/RTMConfigure.tsx

@@ -46,6 +46,7 @@ import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
 import {PSTNUserLabel} from '../language/default-labels/videoCallScreenLabels';
+import {controlMessageEnum} from '../components/ChatContext';
 export enum UserType {
   ScreenShare = 'screenshare',
 }
@@ -495,9 +496,15 @@ const RtmConfigure = (props: any) => {
         waitingRoomStatusRef.current?.waitingRoomStatus !==
           WaitingRoomStatus.APPROVED
       ) {
-        //todo: hari/bhupen added important rtm message in the queue and run it later when user join the call
-        evt = data.evt;
-        value = data.value;
+        if (
+          data.evt === controlMessageEnum.muteAudio ||
+          data.evt === controlMessageEnum.muteVideo
+        ) {
+          return;
+        } else {
+          evt = data.evt;
+          value = data.value;
+        }
       } else {
         evt = data.evt;
         value = data.value;

package/template/src/components/virtual-background/VBButton.tsx

@@ -6,6 +6,7 @@ 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;
@@ -18,7 +19,7 @@ const VBButton = (props: VBButtonProps) => {
   const {isVBOpen, setIsVBOpen, showLabel = false} = props;
   const {isToolbarMenuItem} = useToolbarMenu();
   const {isOnActionSheet} = useActionSheet();
-  const vbLabel = useString('toolbarItemVirtualBackgroundText')();
+  const vbLabel = useString(toolbarItemVirtualBackgroundText)();
 
   const onPress = () => {
     setIsVBOpen(prev => !prev);

package/template/src/components/virtual-background/VBCard.native.tsx

@@ -25,12 +25,14 @@ import {
   vbPanelImageUploadErrorToastHeading,
   vbPanelImageUploadErrorToastSubHeading,
 } from '../../../src/language/default-labels/videoCallScreenLabels';
+import {TextDataInterface} from 'customization-api';
 
 interface VBCardProps {
   type: VBMode;
   icon: keyof IconsInterface;
   path?: ImageSourcePropType;
   label?: string;
+  translationKey?: keyof TextDataInterface;
   position?: number;
   isOnPrecall?: boolean;
   isMobile?: boolean;
@@ -59,6 +61,7 @@ const VBCard: React.FC<VBCardProps> = ({
   position,
   isOnPrecall,
   isMobile,
+  translationKey,
 }) => {
   const {
     setVBmode,
@@ -80,6 +83,7 @@ const VBCard: React.FC<VBCardProps> = ({
   const uploadErrorSubHeading = useString(
     vbPanelImageUploadErrorToastSubHeading,
   )();
+  const translation = useString(translationKey)();
 
   const isSelected = path ? path == selectedImage : vbMode === type;
 
@@ -197,7 +201,7 @@ const VBCard: React.FC<VBCardProps> = ({
             name={icon}
             tintColor={$config.SECONDARY_ACTION_COLOR}
           />
-          {label ? (
+          {label && translation ? (
             <View>
               <Text
                 style={{
@@ -207,7 +211,7 @@ const VBCard: React.FC<VBCardProps> = ({
                   color: $config.SECONDARY_ACTION_COLOR,
                   paddingVertical: 4,
                 }}>
-                {label}
+                {translation}
               </Text>
             </View>
           ) : (

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -201,42 +201,13 @@ const CaptionIconBtn = (props: CaptionIconBtnProps) => {
     (isHost || (!isHost && isSTTActive))
   );
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <CaptionIcon
-          isOnActionSheet={true}
-          showLabel={false}
-          closeActionSheet={onPress}
-        />
-      </View>
-      {showLabel && (
-        <View>
-          <Text
-            style={[
-              styles.iconText,
-              {
-                color: isDisabled
-                  ? $config.SEMANTIC_NEUTRAL
-                  : $config.FONT_COLOR,
-              },
-            ]}>
-            {isCaptionON ? 'Hide' : 'Show'}
-          </Text>
-          <Text
-            style={[
-              styles.iconText,
-              {
-                color: isDisabled
-                  ? $config.SEMANTIC_NEUTRAL
-                  : $config.FONT_COLOR,
-                marginTop: 0,
-              },
-            ]}>
-            Caption
-          </Text>
-        </View>
-      )}
-    </View>
+    <ToolbarItem>
+      <CaptionIcon
+        isOnActionSheet={true}
+        showLabel={true}
+        closeActionSheet={onPress}
+      />
+    </ToolbarItem>
   );
 };
 
@@ -257,38 +228,9 @@ const TranscriptIconBtn = (props: TranscriptIconProps) => {
     (isHost || (!isHost && isSTTActive))
   );
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <TranscriptIcon isOnActionSheet={true} showLabel={false} />
-      </View>
-      {showLabel && (
-        <View>
-          <Text
-            style={[
-              styles.iconText,
-              {
-                color: isDisabled
-                  ? $config.SEMANTIC_NEUTRAL
-                  : $config.FONT_COLOR,
-              },
-            ]}>
-            {isTranscriptON ? 'Hide' : 'Show'}
-          </Text>
-          <Text
-            style={[
-              styles.iconText,
-              {
-                color: isDisabled
-                  ? $config.SEMANTIC_NEUTRAL
-                  : $config.FONT_COLOR,
-                marginTop: 0,
-              },
-            ]}>
-            Transcript
-          </Text>
-        </View>
-      )}
-    </View>
+    <ToolbarItem>
+      <TranscriptIcon isOnActionSheet={true} showLabel={true} />
+    </ToolbarItem>
   );
 };
 
@@ -541,16 +483,16 @@ const ActionSheetContent = props => {
       order: 8,
       hide: 'no',
       align: 'start',
-      component: <LayoutIcon />,
+      component:
+        !isAudioRoom &&
+        (isAudioVideoControlsDisabled ? null : <SwitchCameraIcon />),
     },
     {
       default: true,
       order: 9,
       hide: 'no',
       align: 'start',
-      component:
-        !isAudioRoom &&
-        (isAudioVideoControlsDisabled ? null : <SwitchCameraIcon />),
+      component: <LayoutIcon />,
     },
     {
       default: true,

package/template/src/subComponents/caption/CaptionIcon.tsx

@@ -62,8 +62,13 @@ const CaptionIcon = (props: CaptionIconProps) => {
         : $config.SECONDARY_ACTION_COLOR,
     },
     btnTextProps: {
-      text: showLabel ? label : '',
+      text: showLabel
+        ? isOnActionSheet
+          ? label?.replace(' ', '\n')
+          : label
+        : '',
       textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
     },
   };
   iconButtonProps.isOnActionSheet = isOnActionSheet;

package/template/src/subComponents/caption/Transcript.tsx

@@ -114,7 +114,7 @@ const Transcript = (props: TranscriptProps) => {
     ) : (
       <TranscriptText
         user={defaultContent[item.uid].name}
-        time={item.time}
+        time={item?.time}
         value={item.text}
         searchQuery={searchQuery}
       />
@@ -285,7 +285,7 @@ const Transcript = (props: TranscriptProps) => {
               style={styles.contentContainer}
               data={renderedData}
               renderItem={renderItem}
-              keyExtractor={item => item.uid + '-' + item.time}
+              keyExtractor={item => item.uid + '-' + item?.time}
               onContentSizeChange={handleContentSizeChange}
               onScroll={
                 isWebInternal()

package/template/src/subComponents/caption/TranscriptIcon.tsx

@@ -68,8 +68,13 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
     },
     disabled: isDisabled,
     btnTextProps: {
-      text: showLabel ? label(isTranscriptON) : '',
+      text: showLabel
+        ? isOnActionSheet
+          ? label(isTranscriptON)?.replace(' ', '\n')
+          : label(isTranscriptON)
+        : '',
       textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
     },
   };
   iconButtonProps.isOnActionSheet = isOnActionSheet;

package/template/src/subComponents/caption/utils.ts

@@ -88,12 +88,14 @@ export const formatTranscriptContent = (
         return `${defaultContent[item?.uid?.split('-')[1]]?.name} ${item.text}`;
       }
       return `${defaultContent[item.uid].name} ${formatTime(
-        Number(item.time),
+        Number(item?.time),
       )}:\n${item.text}`;
     })
     .join('\n\n');
 
-  const startTime = formatDateWithTimeZone(new Date(meetingTranscript[0].time));
+  const startTime = formatDateWithTimeZone(
+    new Date(meetingTranscript[0]?.time),
+  );
 
   const attendees = Object.entries(defaultContent)
     .filter(

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

@@ -68,6 +68,7 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
       }
     },
   };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
   if (isOnActionSheet) {
     // iconButtonProps.containerStyle = {
     //   backgroundColor: $config.CARD_LAYER_2_COLOR,