agora-appbuilder-core 4.0.21-beta.2 → 4.0.21-beta.3

package/package.json

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

package/template/customization-api/typeDefinition.ts

@@ -38,7 +38,7 @@ export interface PreCallInterface extends BeforeAndAfterInterface {
   deviceSelect?: React.ComponentType;
   joinButton?: React.ComponentType;
   textBox?: React.ComponentType;
-  virtualBackgroundPanel?: React.ComponentType;
+  virtualBackgroundPanel?: React.ComponentType<VBPanelProps>;
 }
 export interface ChatCmpInterface {
   //commented for v1 release
@@ -59,6 +59,10 @@ export interface LayoutItem {
   component: LayoutComponent;
 }
 
+export interface VBPanelProps {
+  isOnPrecall?: boolean;
+}
+
 export type ToolbarType = React.ComponentType | Array<ToolbarCustomItem>;
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
@@ -71,7 +75,7 @@ export interface VideoCallInterface extends BeforeAndAfterInterface {
   chat?: ChatCmpInterface;
   captionPanel?: React.ComponentType;
   transcriptPanel?: React.ComponentType;
-  virtualBackgroundPanel?: React.ComponentType;
+  virtualBackgroundPanel?: React.ComponentType<VBPanelProps>;
   customLayout?: (layouts: LayoutItem[]) => LayoutItem[];
   wrapper?: React.ComponentType;
   invitePopup?: {
@@ -86,13 +90,13 @@ export type ComponentsInterface = {
    */
   appRoot?: React.ComponentType;
   // commented for v1 release
-  precall?: PreCallInterface | React.ComponentType;
+  precall?: PreCallInterface;
   preferenceWrapper?: React.ComponentType;
   //precall?: React.ComponentType;
   //create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;
-  videoCall?: VideoCallInterface | React.ComponentType;
+  videoCall?: VideoCallInterface;
 };
 
 export interface CustomRoutesInterface {

package/template/customization-api/types.ts

@@ -34,6 +34,6 @@ export {UploadStatus} from '../src/components/chat-ui/useChatUIControls';
 export {type VBPanelProps} from '../src/components/virtual-background/VBPanel';
 export {
   type VBMode,
-  type Option,
+  type Option as VBOption,
 } from '../src/components/virtual-background/useVB';
 export {type VBCardProps} from '../src/components/virtual-background/VBCard';

package/template/src/app-state/useVirtualBackground.ts

@@ -1,5 +1,8 @@
 import {useEffect, useRef} from 'react';
-import {convertBlobToBase64} from '../../src/components/virtual-background/VButils';
+import {
+  convertBlobToBase64,
+  retrieveImagesFromStorage,
+} from '../../src/components/virtual-background/VButils';
 import {
   Option,
   useVB,
@@ -21,8 +24,9 @@ export interface virtualBackgroundInterface {
   addVirtualBackgrounds: (options: Option[]) => void;
   setVBPreview: (type: VBMode, path: string) => void;
   applyVirtualBackground: () => void;
-  isVirtualBackgroundSelected: (type: VBMode, path: string) => boolean;
+  isVirtualBackgroundPanelOpen: boolean;
   hideVirtualBackgroundPanel: () => void;
+  showVirtualBackgroundPanel: () => void;
 }
 
 export const useVirtualBackground: () => virtualBackgroundInterface = () => {
@@ -43,17 +47,17 @@ export const useVirtualBackground: () => virtualBackgroundInterface = () => {
   const {setSidePanel} = useSidePanel();
 
   const updateVBOptions = async (options: Option[]) => {
-    console.warn('Sdsd');
     const vbOptions = [];
     for (let i = 0; i < options.length; i++) {
       const option = options[i];
 
-      if (option.type === 'image' && option?.isBase64Image === false) {
+      if (option.type === 'image') {
         const imgObj = {
           type: 'image',
           icon: 'vb',
           path: '',
           id: `VBOption_${i + 1}`,
+          isSelected: false,
         };
         try {
           imgObj.path = await convertBlobToBase64(option.path);
@@ -65,14 +69,27 @@ export const useVirtualBackground: () => virtualBackgroundInterface = () => {
         }
         vbOptions.push(imgObj);
         if (option?.isSelected && !selectedImage) {
+          imgObj.isSelected = true;
           setSelectedImage(imgObj.path);
           setVBmode('image');
         }
       } else {
+        option.isSelected = false;
         vbOptions.push(option);
       }
     }
-    setOptions(vbOptions);
+
+    const customImages = await retrieveImagesFromStorage();
+    const savedImagesArr = customImages?.map(
+      base64Data =>
+        ({
+          type: 'image',
+          icon: 'vb',
+          path: base64Data,
+        } as Option),
+    );
+    // also fetch from db
+    setOptions([...vbOptions, ...savedImagesArr]);
   };
 
   const setVBPreview = (type: VBMode, path: string) => {
@@ -83,20 +100,33 @@ export const useVirtualBackground: () => virtualBackgroundInterface = () => {
     }
     setVBmode(type);
     setSaveVB(false);
+    // update selected options
+    // Update selected options
+    options.forEach(option => {
+      // Reset isSelected for all options
+      option.isSelected = false;
+
+      // Set isSelected for the matching option
+      if (type === 'image' && path && option.path === path) {
+        option.isSelected = true;
+      } else if (type !== 'image' && type === option.type) {
+        option.isSelected = true;
+      }
+    });
   };
 
   const applyVirtualBackground = () => {
     setSaveVB(true);
   };
 
-  const isVirtualBackgroundSelected = (type: VBMode, path: string) => {
-    return path ? path === selectedImage : type === vbMode;
-  };
-
   const hideVirtualBackgroundPanel = () => {
     setSidePanel(SidePanelType.None);
     setIsVBActive(false);
   };
+  const showVirtualBackgroundPanel = () => {
+    setSidePanel(SidePanelType.VirtualBackground);
+    setIsVBActive(true);
+  };
 
   //TODO: later
   // const applyVirtualBackground = (config: VBConfig) => {
@@ -111,7 +141,8 @@ export const useVirtualBackground: () => virtualBackgroundInterface = () => {
     addVirtualBackgrounds: updateVBOptions,
     setVBPreview,
     applyVirtualBackground,
-    isVirtualBackgroundSelected,
+    isVirtualBackgroundPanelOpen: isVBActive,
     hideVirtualBackgroundPanel,
+    showVirtualBackgroundPanel,
   };
 };

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

@@ -15,7 +15,7 @@ import DocumentPicker from 'react-native-document-picker';
 import Toast from '../../../react-native-toast-message';
 import RNFS from 'react-native-fs';
 import {saveImagesToAsyncStorage} from './VButils.native';
-import getUniqueID from '../../../src/utils/getUniqueID';
+
 import {useString} from '../../../src/utils/useString';
 import {
   vbPanelImageSizeLimitErrorToastHeading,
@@ -25,14 +25,14 @@ import {
   vbPanelImageUploadErrorToastHeading,
   vbPanelImageUploadErrorToastSubHeading,
 } from '../../../src/language/default-labels/videoCallScreenLabels';
-import {TextDataInterface} from 'customization-api';
+
+import {vbOptionText} from '../../../src/language/default-labels/precallScreenLabels';
 
 interface VBCardProps {
   type: VBMode;
   icon: keyof IconsInterface;
   path?: ImageSourcePropType;
   label?: string;
-  translationKey?: keyof TextDataInterface;
   position?: number;
   isOnPrecall?: boolean;
   isMobile?: boolean;
@@ -61,7 +61,6 @@ const VBCard: React.FC<VBCardProps> = ({
   position,
   isOnPrecall,
   isMobile,
-  translationKey,
 }) => {
   const {
     setVBmode,
@@ -83,7 +82,7 @@ const VBCard: React.FC<VBCardProps> = ({
   const uploadErrorSubHeading = useString(
     vbPanelImageUploadErrorToastSubHeading,
   )();
-  const translation = useString(translationKey)();
+  const vbOptionLabel = useString<VBMode>(vbOptionText);
 
   const isSelected = path ? path == selectedImage : vbMode === type;
 
@@ -136,7 +135,6 @@ const VBCard: React.FC<VBCardProps> = ({
           type: 'image' as VBMode,
           icon: 'vb' as keyof IconsInterface,
           path: base64Data,
-          id: getUniqueID(),
         };
 
         setOptions(prevOptions => {
@@ -201,7 +199,7 @@ const VBCard: React.FC<VBCardProps> = ({
             name={icon}
             tintColor={$config.SECONDARY_ACTION_COLOR}
           />
-          {label && translation ? (
+          {label ? (
             <View>
               <Text
                 style={{
@@ -211,7 +209,7 @@ const VBCard: React.FC<VBCardProps> = ({
                   color: $config.SECONDARY_ACTION_COLOR,
                   paddingVertical: 4,
                 }}>
-                {translation}
+                {vbOptionLabel(type)}
               </Text>
             </View>
           ) : (

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

@@ -6,9 +6,8 @@ import {IconsInterface} from '../../atoms/CustomIcon';
 import Toast from '../../../react-native-toast-message';
 import {saveImagesToIndexDB, convertBlobToBase64} from './VButils';
 import ImageIcon from '../../atoms/ImageIcon';
-import getUniqueID from '../../../src/utils/getUniqueID';
+
 import {useString} from '../../../src/utils/useString';
-import {TextDataInterface} from '../../../src/language/default-labels';
 import {
   vbPanelImageSizeLimitErrorToastHeading,
   vbPanelImageSizeLimitErrorToastSubHeading,
@@ -18,12 +17,12 @@ import {
   vbPanelImageUploadErrorToastSubHeading,
 } from '../../../src/language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
+import {vbOptionText} from '../../../src/language/default-labels/precallScreenLabels';
 
 export interface VBCardProps {
   type: VBMode;
   icon: keyof IconsInterface;
   path?: string & {default?: string};
-  translationKey?: keyof TextDataInterface;
   label?: string;
   position?: number;
   isOnPrecall?: boolean;
@@ -53,7 +52,6 @@ const VBCard: React.FC<VBCardProps> = ({
   position,
   isOnPrecall,
   isMobile,
-  translationKey,
 }) => {
   const {
     setVBmode,
@@ -76,8 +74,8 @@ const VBCard: React.FC<VBCardProps> = ({
     vbPanelImageUploadErrorToastSubHeading,
   )();
 
-  const translation = useString(translationKey)();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const vbOptionLabel = useString<VBMode>(vbOptionText);
 
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     logger.log(
@@ -138,7 +136,6 @@ const VBCard: React.FC<VBCardProps> = ({
                 type: 'image',
                 icon: 'vb',
                 path: base64Data,
-                id: getUniqueID(),
               };
               setOptions(prevOptions => {
                 const updatedOptions = [...prevOptions];
@@ -232,7 +229,7 @@ const VBCard: React.FC<VBCardProps> = ({
             name={icon}
             tintColor={$config.SECONDARY_ACTION_COLOR}
           />
-          {label && translation ? (
+          {label ? (
             <Text
               style={{
                 fontSize: ThemeConfig.FontSize.tiny,
@@ -241,7 +238,7 @@ const VBCard: React.FC<VBCardProps> = ({
                 color: $config.SECONDARY_ACTION_COLOR,
                 paddingVertical: 4,
               }}>
-              {translation}
+              {vbOptionLabel(type)}
             </Text>
           ) : (
             <></>

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

@@ -167,12 +167,11 @@ const VBPanel = (props?: VBPanelProps) => {
           decelerationRate={0}>
           {options.map((item, index) => (
             <VBCard
-              key={item.id}
+              key={`VBOption_${index + 1}`}
               type={item.type}
               icon={item.icon}
               path={item.path}
               label={item?.label}
-              translationKey={item?.translationKey}
               position={index + 1}
               isOnPrecall={isOnPrecall}
               isMobile={isMobile}

package/template/src/components/virtual-background/VButils.native.ts

@@ -24,7 +24,7 @@ export const saveImagesToAsyncStorage = async (
   }
 };
 
-export const retrieveImagesFromAsyncStorage = async (): Promise<string[]> => {
+export const retrieveImagesFromStorage = async (): Promise<string[]> => {
   try {
     const keys = await AsyncStorage.getAllKeys();
 

package/template/src/components/virtual-background/VButils.ts

@@ -72,7 +72,7 @@ export const saveImagesToIndexDB = async (
   }
 };
 
-export const retrieveImagesFromIndexDB = async (): Promise<string[]> => {
+export const retrieveImagesFromStorage = async (): Promise<string[]> => {
   return new Promise<string[]>(async (resolve, reject) => {
     try {
       const db = await openIndexedDB('vb-image-db', 1);

package/template/src/components/virtual-background/imagePaths.ts

@@ -1,86 +1,81 @@
 import {Option} from './useVB';
 import images from './images';
-import {
-  vbPanelOptionBlurText,
-  vbPanelOptionCustomText,
-  vbPanelOptionNoneText,
-} from '../../language/default-labels/precallScreenLabels';
 
 const imagePathsArray: Option[] = [
   {
     type: 'none',
     icon: 'remove',
     label: 'None',
-    translationKey: vbPanelOptionNoneText,
-    id: 'VBOption_1',
+
+    isSelected: false,
   },
   {
     type: 'blur',
     icon: 'blur',
     label: 'Blur',
-    translationKey: vbPanelOptionBlurText,
-    id: 'VBOption_2',
+
+    isSelected: false,
   },
   {
     type: 'custom',
     icon: 'upload-new',
     label: 'Custom',
-    translationKey: vbPanelOptionCustomText,
-    id: 'VBOption_3',
+
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.bookImageBase64,
-    id: 'VBOption_4',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.beachImageBase64,
-    id: 'VBOption_5',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.office1ImageBase64,
-    id: 'VBOption_6',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.bedroomImageBase64,
-    id: 'VBOption_7',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.officeImageBase64,
-    id: 'VBOption_8',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.earthImageBase64,
-    id: 'VBOption_9',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.mountainsImageBase64,
-    id: 'VBOption_10',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.plantsImageBase64,
-    id: 'VBOption_11',
+    isSelected: false,
   },
   {
     type: 'image',
     icon: 'vb',
     path: images.wallImageBase64,
-    id: 'VBOption_12',
+    isSelected: false,
   },
 ];
 

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

@@ -2,7 +2,7 @@ import {createHook} from 'customization-implementation';
 import React from 'react';
 import {IconsInterface} from '../../atoms/CustomIcon';
 import {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
-import {retrieveImagesFromAsyncStorage} from './VButils.native';
+import {retrieveImagesFromStorage} from './VButils.native';
 
 import RtcEngine, {
   BackgroundBlurDegree,
@@ -13,7 +13,6 @@ import {useLocalUserInfo, useRtc} from 'customization-api';
 import RNFS from 'react-native-fs';
 import {ImageSourcePropType} from 'react-native/types';
 import imagePathsArray from './imagePaths';
-import getUniqueID from '../../../src/utils/getUniqueID';
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {ToggleState} from '../../../agora-rn-uikit';
 
@@ -96,7 +95,7 @@ const VBProvider: React.FC = ({children}) => {
   React.useEffect(() => {
     const fetchData = async () => {
       try {
-        const customImages = await retrieveImagesFromAsyncStorage();
+        const customImages = await retrieveImagesFromStorage();
         logger.debug(
           LogSource.Internals,
           'VIRTUAL_BACKGROUND',
@@ -111,7 +110,6 @@ const VBProvider: React.FC = ({children}) => {
                 type: 'image',
                 icon: 'vb',
                 path: base64Data,
-                id: getUniqueID(),
               } as Option),
           ) || []),
         ]);

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

@@ -15,11 +15,8 @@ import wasm1 from '../../wasms/agora-virtual-background.wasm';
 import {IconsInterface} from '../../atoms/CustomIcon';
 import {PropsContext, ToggleState} from '../../../agora-rn-uikit';
 import {isMobileUA} from '../../utils/common';
-import {retrieveImagesFromIndexDB} from './VButils';
+import {retrieveImagesFromStorage} from './VButils';
 import imagePathsArray from './imagePaths';
-import getUniqueID from '../../../src/utils/getUniqueID';
-import {TextDataInterface} from '../../../src/language/default-labels';
-//@ts-ignore
 
 export type VBMode = 'blur' | 'image' | 'custom' | 'none';
 
@@ -28,9 +25,6 @@ export type Option = {
   icon?: keyof IconsInterface;
   path?: string & {default?: string};
   label?: string;
-  id?: string;
-  translationKey?: keyof TextDataInterface;
-  isBase64Image?: boolean;
   isSelected?: boolean;
 };
 
@@ -156,7 +150,7 @@ const VBProvider: React.FC = ({children}) => {
   React.useEffect(() => {
     const fetchData = async () => {
       try {
-        const customImages = await retrieveImagesFromIndexDB();
+        const customImages = await retrieveImagesFromStorage();
         setOptions((prevOptions: Option[]) => [
           ...prevOptions,
           ...(customImages?.map(
@@ -165,7 +159,6 @@ const VBProvider: React.FC = ({children}) => {
                 type: 'image',
                 icon: 'vb',
                 path: base64Data,
-                id: getUniqueID(),
               } as Option),
           ) || []),
         ]);

package/template/src/language/default-labels/precallScreenLabels.ts

@@ -1,5 +1,6 @@
 import {ClientRoleType} from '../../../agora-rn-uikit';
 import {I18nBaseType, I18nConditionalType} from '../i18nTypes';
+import {VBMode} from '../../components/virtual-background/useVB';
 
 export interface PrecallJoinBtnTextInterface {
   ready: boolean;
@@ -45,9 +46,8 @@ export const precallInputGettingName = 'precallInputGettingName';
 
 export const vbPanelHeading = 'vbPanelHeading';
 export const vbPanelInfo = 'vbPanelInfo';
-export const vbPanelOptionNoneText = 'vbPanelOptionNoneText';
-export const vbPanelOptionBlurText = 'vbPanelOptionBlurText';
-export const vbPanelOptionCustomText = 'vbPanelOptionCustomText';
+
+export const vbOptionText = 'vbOptionText';
 
 export interface I18nPrecallScreenLabelsInterface {
   [permissionPopupHeading]?: I18nBaseType;
@@ -81,9 +81,8 @@ export interface I18nPrecallScreenLabelsInterface {
 
   [vbPanelHeading]?: I18nBaseType;
   [vbPanelInfo]?: I18nConditionalType;
-  [vbPanelOptionNoneText]?: I18nBaseType;
-  [vbPanelOptionBlurText]?: I18nBaseType;
-  [vbPanelOptionCustomText]?: I18nBaseType;
+
+  [vbOptionText]?: I18nBaseType<VBMode>;
 
   [precallInputGettingName]?: I18nBaseType;
 }
@@ -151,7 +150,17 @@ export const PrecallScreenLabels: I18nPrecallScreenLabelsInterface = {
     isCamOn
       ? 'Camera is currently off. Selected background will be applied as soon as your camera turns on.'
       : 'Your camera is switched off. Save a background to apply once it’s turned on.',
-  [vbPanelOptionNoneText]: 'None',
-  [vbPanelOptionBlurText]: 'Blur',
-  [vbPanelOptionCustomText]: 'Custom',
+
+  [vbOptionText]: mode => {
+    switch (mode) {
+      case 'none':
+        return 'None';
+      case 'custom':
+        return 'Custom';
+      case 'blur':
+        return 'Blur';
+      default:
+        return '';
+    }
+  },
 };

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

@@ -90,6 +90,7 @@ export const ChatEmojiPicker: React.FC = () => {
         previewConfig={{showPreview: false}}
         height={370}
         autoFocusSearch={false}
+        emojiStyle={EmojiStyle.NATIVE}
       />
       <View
         style={{