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

package/package.json

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

package/template/customization-api/app-state.ts

@@ -58,3 +58,4 @@ export {
   ChatType,
 } from '../src/components/chat-ui/useChatUIControls';
 export type {ChatUIControlsInterface} from '../src/components/chat-ui/useChatUIControls';
+export {useVirtualBackground} from '../src/app-state/useVirtualBackground';

package/template/customization-api/sub-components.ts

@@ -72,3 +72,7 @@ export type {
   ToolbarCustomItem,
   ToolbarPresetProps,
 } from '../src/atoms/ToolbarPreset';
+export {default as TranscriptPanel} from '../src/subComponents/caption/Transcript';
+export type {TranscriptProps} from '../src/subComponents/caption/Transcript';
+export {default as CaptionPanel} from '../src/subComponents/caption/CaptionContainer';
+export {default as VBPreview} from '../src/components/virtual-background/VideoPreview';

package/template/customization-api/typeDefinition.ts

@@ -38,6 +38,7 @@ export interface PreCallInterface extends BeforeAndAfterInterface {
   deviceSelect?: React.ComponentType;
   joinButton?: React.ComponentType;
   textBox?: React.ComponentType;
+  virtualBackgroundPanel?: React.ComponentType;
 }
 export interface ChatCmpInterface {
   //commented for v1 release
@@ -68,6 +69,9 @@ export interface VideoCallInterface extends BeforeAndAfterInterface {
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
   chat?: ChatCmpInterface;
+  captionPanel?: React.ComponentType;
+  transcriptPanel?: React.ComponentType;
+  virtualBackgroundPanel?: React.ComponentType;
   customLayout?: (layouts: LayoutItem[]) => LayoutItem[];
   wrapper?: React.ComponentType;
   invitePopup?: {
@@ -82,8 +86,9 @@ export type ComponentsInterface = {
    */
   appRoot?: React.ComponentType;
   // commented for v1 release
-  // precall?: PreCallInterface | React.ComponentType;
-  precall?: React.ComponentType;
+  precall?: PreCallInterface | React.ComponentType;
+  preferenceWrapper?: React.ComponentType;
+  //precall?: React.ComponentType;
   //create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;

package/template/customization-api/types.ts

@@ -31,3 +31,9 @@ export {
   SDKChatType,
 } from '../src/components/chat-messages/useChatMessages';
 export {UploadStatus} from '../src/components/chat-ui/useChatUIControls';
+export {type VBPanelProps} from '../src/components/virtual-background/VBPanel';
+export {
+  type VBMode,
+  type Option,
+} from '../src/components/virtual-background/useVB';
+export {type VBCardProps} from '../src/components/virtual-background/VBCard';

package/template/customization-api/utils.ts

@@ -32,3 +32,6 @@ export {isWeb, isIOS, isAndroid, isDesktop} from '../src/utils/common';
 export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
 export {useLocalUid} from '../agora-rn-uikit';
 export {default as useLocalAudio} from '../src/utils/useLocalAudio';
+export {default as useLocalVideo} from '../src/utils/useLocalVideo';
+export type {LanguageType} from '../src/subComponents/caption/utils';
+export {default as useSpeechToText} from '../src/utils/useSpeechToText';

package/template/defaultConfig.js

@@ -11,6 +11,7 @@ const DefaultConfig = {
   PRECALL: true,
   CHAT: true,
   CLOUD_RECORDING: false,
+  RECORDING_MODE: 'WEB',
   SCREEN_SHARING: true,
   LANDING_SUB_HEADING: 'The Real-Time Engagement Platform',
   ENCRYPTION_ENABLED: false,
@@ -61,6 +62,8 @@ const DefaultConfig = {
   ENABLE_IDP_AUTH: false,
   ENABLE_TOKEN_AUTH: false,
   ENABLE_STT: false,
+  ENABLE_CAPTION: true,
+  ENABLE_MEETING_TRANSCRIPT: true,
   ENABLE_NOISE_CANCELLATION: true,
   ENABLE_VIRTUAL_BACKGROUND: true,
   ENABLE_WHITEBOARD: false,
@@ -69,7 +72,7 @@ const DefaultConfig = {
   WHITEBOARD_APPIDENTIFIER: '',
   WHITEBOARD_REGION: '',
   ENABLE_NOISE_CANCELLATION_BY_DEFAULT: false,
-  CHAT_ORG_NAME:'',
+  CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
 };

package/template/global.d.ts

@@ -53,6 +53,7 @@ interface ConfigInterface {
   PRECALL: boolean;
   CHAT: boolean;
   CLOUD_RECORDING: boolean;
+  RECORDING_MODE: 'WEB' | 'MIX';
   SCREEN_SHARING: boolean;
   CLIENT_ID: string;
   LANDING_SUB_HEADING: string;
@@ -104,6 +105,8 @@ interface ConfigInterface {
   ENABLE_IDP_AUTH: boolean;
   PROJECT_ID: string;
   ENABLE_STT: boolean;
+  ENABLE_CAPTION: boolean;
+  ENABLE_MEETING_TRANSCRIPT: boolean;
   ENABLE_NOISE_CANCELLATION: boolean;
   ENABLE_VIRTUAL_BACKGROUND: boolean;
   ENABLE_WHITEBOARD: boolean;

package/template/src/AppRoutes.tsx

@@ -22,10 +22,17 @@ import {CUSTOM_ROUTES_PREFIX, CustomRoutesInterface} from 'customization-api';
 import PrivateRoute from './components/PrivateRoute';
 import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
 import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
+import {LogSource, logger} from './logger/AppBuilderLogger';
 import {isValidReactComponent} from './utils/common';
 
 function VideoCallWrapper(props) {
   const {isRecordingBotRoute} = useIsRecordingBot();
+  logger.debug(
+    LogSource.Internals,
+    'RECORDING',
+    'Check if this is a recording bot route',
+    isRecordingBotRoute,
+  );
   return isRecordingBotRoute ? (
     <RecordingBotRoute history={props.history}>
       <VideoCall />

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

@@ -0,0 +1,117 @@
+import {useEffect, useRef} from 'react';
+import {convertBlobToBase64} from '../../src/components/virtual-background/VButils';
+import {
+  Option,
+  useVB,
+  type VBMode,
+} from '../../src/components/virtual-background/useVB';
+
+import {useSidePanel} from '../utils/useSidePanel';
+import {SidePanelType} from '../subComponents/SidePanelEnum';
+
+export interface VBConfig {
+  target: 'mainView' | 'preview';
+  blurDegree?: number;
+  type: 'blur' | 'img' | 'custom'; // Adjust this as needed based on your configuration options
+  source?: HTMLImageElement;
+}
+
+export interface virtualBackgroundInterface {
+  virtualBackgrounds: Option[]; // options available in vb panel
+  addVirtualBackgrounds: (options: Option[]) => void;
+  setVBPreview: (type: VBMode, path: string) => void;
+  applyVirtualBackground: () => void;
+  isVirtualBackgroundSelected: (type: VBMode, path: string) => boolean;
+  hideVirtualBackgroundPanel: () => void;
+}
+
+export const useVirtualBackground: () => virtualBackgroundInterface = () => {
+  const {
+    options,
+    setOptions,
+    selectedImage,
+    vbMode,
+    setSelectedImage,
+    setVBmode,
+    setSaveVB,
+    isVBActive,
+    setIsVBActive,
+    applyVirtualBackgroundToMainView,
+    applyVirtualBackgroundToPreviewView,
+  } = useVB();
+
+  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) {
+        const imgObj = {
+          type: 'image',
+          icon: 'vb',
+          path: '',
+          id: `VBOption_${i + 1}`,
+        };
+        try {
+          imgObj.path = await convertBlobToBase64(option.path);
+        } catch (error) {
+          console.error(
+            `Error fetching and converting image ${option.path}:`,
+            error,
+          );
+        }
+        vbOptions.push(imgObj);
+        if (option?.isSelected && !selectedImage) {
+          setSelectedImage(imgObj.path);
+          setVBmode('image');
+        }
+      } else {
+        vbOptions.push(option);
+      }
+    }
+    setOptions(vbOptions);
+  };
+
+  const setVBPreview = (type: VBMode, path: string) => {
+    if (path) {
+      setSelectedImage(path);
+    } else {
+      setSelectedImage(null);
+    }
+    setVBmode(type);
+    setSaveVB(false);
+  };
+
+  const applyVirtualBackground = () => {
+    setSaveVB(true);
+  };
+
+  const isVirtualBackgroundSelected = (type: VBMode, path: string) => {
+    return path ? path === selectedImage : type === vbMode;
+  };
+
+  const hideVirtualBackgroundPanel = () => {
+    setSidePanel(SidePanelType.None);
+    setIsVBActive(false);
+  };
+
+  //TODO: later
+  // const applyVirtualBackground = (config: VBConfig) => {
+  //   if (config.target === 'mainView') {
+  //     applyVirtualBackgroundToMainView(config);
+  //   } else {
+  //     applyVirtualBackgroundToPreviewView(config);
+  //   }
+  // };
+  return {
+    virtualBackgrounds: options,
+    addVirtualBackgrounds: updateVBOptions,
+    setVBPreview,
+    applyVirtualBackground,
+    isVirtualBackgroundSelected,
+    hideVirtualBackgroundPanel,
+  };
+};