agora-appbuilder-core 4.0.0-beta.63 → 4.0.0-beta.65

package/package.json

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

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/language/default-labels/videoCallScreenLabels.ts

@@ -807,6 +807,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     active ? 'Hide Transcript' : 'Show Transcript',
 
   [toolbarItemRaiseHandText]: active => (active ? 'Lower Hand' : 'Raise Hand'),
+  [toolbarItemSwitchCameraText]: 'Switch Camera',
 
   [inviteTileWelcomeText]: 'Welcome',
   [inviteTileNoElseJoinedYetText]: 'No one else has joined yet',

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

@@ -45,7 +45,10 @@ import {useSetRoomInfo} from '../../components/room-info/useSetRoomInfo';
 import VBButton from '../../components/virtual-background/VBButton';
 import {useVB} from '../../components/virtual-background/useVB';
 import {useString} from '../../utils/useString';
-import {sttSpokenLanguageToastSubHeading} from '../../language/default-labels/videoCallScreenLabels';
+import {
+  sttSpokenLanguageToastHeading,
+  sttSpokenLanguageToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 //Icon for expanding Action Sheet
 interface ShowMoreIconProps {
   isExpanded: boolean;
@@ -198,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>
   );
 };
 
@@ -254,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>
   );
 };
 
@@ -296,9 +241,7 @@ const ToastIcon = ({color}) => (
 );
 
 const ActionSheetContent = props => {
-  const heading = useString<'Set' | 'Changed'>(
-    sttSpokenLanguageToastSubHeading,
-  );
+  const heading = useString<'Set' | 'Changed'>(sttSpokenLanguageToastHeading);
   const subheading = useString<{
     action: 'Set' | 'Changed';
     newLanguage: string;
@@ -540,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/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/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,