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

package/template/customization-api/customize.ts

@@ -9,6 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import {LogSource, logger} from '../src/logger/AppBuilderLogger';
 import {CustomizationApiInterface} from './typeDefinition';
 import ReactIs from 'react-is';
 /**
@@ -46,7 +47,7 @@ function isComponent(data: any) {
 }
 
 //These keys value are not react component. so doing indexOf and checking whether its function or not
-const ignoreTheseKeys = ['customLayout', 'useUserContext'];
+const ignoreTheseKeys = ['customLayout'];
 
 function validateComponents(components: any) {
   for (const key in components) {
@@ -58,15 +59,21 @@ function validateComponents(components: any) {
             validateComponents(comp);
           }
         } else {
-          console.error(
-            `Customize:Error ${key} should be a react component or object`,
+          logger.error(
+            LogSource.CustomizationAPI,
+            'Log',
+            `Error ${key} should be a react component or object`,
           );
         }
       }
     } else {
       let comp = components[key];
       if (comp && !isFunction(comp)) {
-        console.error(`Customize:Error ${key} should be an function`);
+        logger.error(
+          LogSource.CustomizationAPI,
+          'Log',
+          `Error ${key} should be an function`,
+        );
       }
     }
   }
@@ -76,8 +83,10 @@ function validateLifecycle(data: any) {
   for (const key in data) {
     const callback = data[key];
     if (callback && !isFunction(callback)) {
-      console.error(
-        `Customize:Error ${key} should be a function that return async function`,
+      logger.error(
+        LogSource.CustomizationAPI,
+        'Log',
+        `Error ${key} should be a function that return async function`,
       );
     }
   }
@@ -85,23 +94,33 @@ function validateLifecycle(data: any) {
 
 function validateCustomRoutes(routes: any) {
   if (routes && !Array.isArray(routes)) {
-    console.error(`Customize:Error customRoutes should be an array`);
+    logger.error(
+      LogSource.CustomizationAPI,
+      'Log',
+      'Error customRoutes should be an array',
+    );
   }
 }
 
 function validatei18n(data: any) {
   if (data) {
     if (!Array.isArray(data)) {
-      console.error(`Customize:Error i18n should be an array`);
+      logger.error(
+        LogSource.CustomizationAPI,
+        'Log',
+        'Error i18n should be an array',
+      );
     } else {
-      data.map((item) => {
+      data.map(item => {
         const langData = item.data;
         for (const key in langData) {
           const value = langData[key];
           if (value) {
             if (!(isString(value) || isFunction(value))) {
-              console.error(
-                `Customize:Error ${item.locale} ${key} should be a string or function`,
+              logger.error(
+                LogSource.CustomizationAPI,
+                'Log',
+                `Error ${item.locale} ${key} should be a string or function`,
               );
             }
           }

package/template/customization-api/index.ts

@@ -24,3 +24,8 @@ export * from './customEvents';
 export * from './sub-components';
 export * from './typeDefinition';
 export * from './utils';
+export * from './types';
+export * from './atoms';
+
+//TODO: hari remove later - used for simple-practice demo
+export * from './temp';

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

@@ -1,10 +1,7 @@
 //Common components
-export {default as HorizontalRule} from '../src/atoms/HorizontalRule';
-export {default as PrimaryButton} from '../src/atoms/PrimaryButton';
-export {default as SecondaryButton} from '../src/atoms/SecondaryButton';
 export {default as TextInput} from '../src/atoms/TextInput';
 //Icons
-export {default as icons} from '../src/assets/icons';
+//export {Icons} from '../agora-rn-uikit';
 
 // commented for v1 release
 //create screen
@@ -16,30 +13,33 @@ export {default as icons} from '../src/assets/icons';
 
 // commented for v1 release
 //Precall components
-//export * from '../src/components/precall/index';
+export * from '../src/components/precall/index';
 
 //video call components
 export {
   ParticipantsView,
-  Controls,
-  ControlsComponentsArray,
-  Navbar,
-  NavBarComponentsArray,
   ChatBubble,
-  ChatSendButton,
-  ChatTextInput,
+  ChatInput,
   Chat,
   SettingsView,
+  ChatAttachmentButton,
+  ChatEmojiButton,
+  ChatUploadStatus,
+  ChatSendButton,
+  ToolbarComponents,
 } from '../src/pages/video-call/index';
 export {default as GridLayout} from '../src/components/GridVideo';
 export {default as PinnedLayout} from '../src/components/PinnedVideo';
 export {default as VideoComponent} from '../src/pages/video-call/VideoComponent';
 export {default as MaxVideoView} from '../src/pages/video-call/VideoRenderer';
-export {default as RenderComponent} from '../src/pages/video-call/RenderComponent';
+export type {VideoRendererProps as MaxVideoViewProps} from '../src/pages/video-call/VideoRenderer';
 export {default as NameWithMicIcon} from '../src/pages/video-call/NameWithMicIcon';
 export {default as NetworkQualityPill} from '../src/subComponents/NetworkQualityPill';
 //videocall screen
 export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScreen';
+export {default as PrecallScreen} from '../src/components/Precall';
+export {default as VBPanel} from '../src/components/virtual-background/VBPanel';
+export {WhiteboardListener} from '../src/components/Controls';
 
 // commented for v1 release
 //Settings screen
@@ -51,12 +51,37 @@ export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScree
 //export {default as LanguageSelector} from '../src/subComponents/LanguageSelector';
 
 //Sidepanel buttons
-export {SidePanelButtonsArray} from '../src/subComponents/SidePanelButtons';
+//export {SidePanelButtonsArray} from '../src/subComponents/SidePanelButtons';
 export {
-  ImageIcon as UiKitImageIcon,
   MaxVideoView as UiKitMaxVideoView,
-  BtnTemplate as UiKitBtnTemplate,
-  ClientRole as UikitClientRole,
-  ChannelProfile as UikitChannelProfile,
+  ClientRoleType as UikitClientRole,
+  ChannelProfileType as UikitChannelProfile,
+  PropsContext as UikitPropsContext,
 } from '../agora-rn-uikit';
-export type {BtnTemplateInterface as UikitBtnTemplateInterface} from '../agora-rn-uikit';
+export {default as Toolbar} from '../src/atoms/Toolbar';
+export {default as ToolbarItem} from '../src/atoms/ToolbarItem';
+export {default as ToolbarPreset} from '../src/atoms/ToolbarPreset';
+export {default as ToolbarMenu} from '../src/atoms/ToolbarMenu';
+export type {
+  ToolbarPresetAlign,
+  ToolbarDefaultItem,
+  ToolbarDefaultItemsConfig,
+  ToolbarHideCallback,
+  ToolbarMoreButtonDefaultFields,
+  ToolbarMoreButtonCustomFields,
+  ToolbarMoreDefaultItem,
+  ToolbarItemsConfig,
+  TopToolbarItemsConfig,
+  BottomToolbarItemsConfig,
+  TopToolbarDefaultKeys,
+  BottomToolbarDefaultKeys,
+  ToolbarItemAlign,
+  ToolbarItemHide,
+  ToolbarPresetProps,
+  ToolbarItemLabel,
+  ToolbarItemLabelCallback,
+} 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/temp.ts

@@ -0,0 +1,51 @@
+//exporting for simple-practice demo
+
+import VideoRenderer from '../src/pages/video-call/VideoRenderer';
+import {DispatchContext} from '../agora-rn-uikit';
+import IconButton from '../src/atoms/IconButton';
+import WhiteboardView from '../src/components/whiteboard/WhiteboardView';
+import {
+  useWhiteboard,
+  whiteboardContext,
+} from '../src/components/whiteboard/WhiteboardConfigure';
+import {useVideoCall} from '../src/components/useVideoCall';
+import {useScreenshare} from '../src/subComponents/screenshare/useScreenshare';
+import EndcallPopup from '../src/subComponents/EndcallPopup';
+import useSTTAPI from '../src/subComponents/caption/useSTTAPI';
+import {useCaption} from '../src/subComponents/caption/useCaption';
+import useMuteToggleLocal, {
+  MUTE_LOCAL_TYPE,
+} from '../src/utils/useMuteToggleLocal';
+import {RoomPhase} from 'white-web-sdk';
+import {useScreenContext} from '../src/components/contexts/ScreenShareContext';
+import {filterObject} from '../src/utils/index';
+import {useToggleWhiteboard} from '../src/components/Controls';
+import {ShowInputURL} from '../src/components/Share';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../src/utils/useRemoteMute';
+import getCustomRoute from '../src/utils/getCustomRoute';
+import useEndCall from '../src/utils/useEndCall';
+
+export {
+  VideoRenderer,
+  DispatchContext,
+  IconButton,
+  WhiteboardView,
+  whiteboardContext,
+  useVideoCall,
+  useScreenshare,
+  EndcallPopup,
+  useSTTAPI,
+  useCaption,
+  useWhiteboard,
+  useMuteToggleLocal,
+  MUTE_LOCAL_TYPE,
+  RoomPhase,
+  useScreenContext,
+  filterObject,
+  useToggleWhiteboard,
+  ShowInputURL,
+  useRemoteMute,
+  MUTE_REMOTE_TYPE,
+  getCustomRoute,
+  useEndCall,
+};

package/template/customization-api/typeDefinition.ts

@@ -12,22 +12,11 @@
 import React from 'react';
 export type {ChatBubbleProps} from '../src/components/ChatContext';
 import {ChatBubbleProps} from '../src/components/ChatContext';
-import {
-  RenderInterface,
-  RenderStateInterface,
-  UidType,
-} from '../agora-rn-uikit';
+import {ContentStateInterface} from '../agora-rn-uikit';
 import {I18nInterface} from '../src/language/i18nTypes';
-import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
-export type {RenderInterface, RenderStateInterface, UidType};
-export type {
-  ChatTextInputProps,
-  ChatSendButtonProps,
-} from '../src/subComponents/ChatInput';
-import {
-  ChatTextInputProps,
-  ChatSendButtonProps,
-} from '../src/subComponents/ChatInput';
+import {ToolbarPresetProps} from './sub-components';
+import {TextDataInterface} from '../src/language/default-labels';
+import {VBPanelProps} from '../src/components/virtual-background/VBPanel';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -45,53 +34,60 @@ export interface PreCallInterface extends BeforeAndAfterInterface {
   deviceSelect?: React.ComponentType;
   joinButton?: React.ComponentType;
   textBox?: React.ComponentType;
+  virtualBackgroundPanel?: React.ComponentType<VBPanelProps>;
 }
 export interface ChatCmpInterface {
   //commented for v1 release
   //extends BeforeAndAfterInterface
   chatBubble?: React.ComponentType<ChatBubbleProps>;
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+  chatInput?: React.ComponentType;
 }
 
-export interface renderComponentInterface {
-  user: RenderInterface;
-}
-
-export interface renderComponentObjectInterface {
-  [key: string]: React.ComponentType<renderComponentInterface>;
-}
-
-export type layoutComponent = React.ComponentType<{
-  renderData: RenderStateInterface['activeUids'];
+export type LayoutComponent = React.ComponentType<{
+  renderData: ContentStateInterface['activeUids'];
 }>;
 
-export interface layoutObjectBase {
+export interface SidePanelItem {
   name: string;
-  label: string;
-  component: layoutComponent;
+  title: string;
+  component: React.ComponentType;
+  onClose?: () => void;
 }
 
-export interface layoutObjectWithIcon extends layoutObjectBase {
+export interface LayoutItem {
+  name: string;
+  label: string;
+  translationKey?: keyof TextDataInterface;
   icon: string;
-  iconName?: never;
+  component: LayoutComponent;
 }
-export interface layoutObjectWithIconName extends layoutObjectBase {
-  icon?: never;
-  iconName: keyof IconsInterface;
-}
-export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
+
+export type ToolbarType = React.ComponentType | ToolbarPresetProps['items'];
+export type CustomLogger = (
+  message: string,
+  data: any,
+  type: 'debug' | 'error' | 'info' | 'warn',
+) => void;
 
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
-  topBar?: React.ComponentType;
+  topToolBar?: ToolbarType;
+  bottomToolBar?: ToolbarType;
+  leftToolBar?: ToolbarType;
+  rightToolBar?: ToolbarType;
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
-  bottomBar?: React.ComponentType;
   chat?: ChatCmpInterface;
-  customContent?: renderComponentObjectInterface;
-  customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
-  useUserContext?: () => void;
+  captionPanel?: React.ComponentType;
+  transcriptPanel?: React.ComponentType;
+  virtualBackgroundPanel?: React.ComponentType<VBPanelProps>;
+  customLayout?: (layouts: LayoutItem[]) => LayoutItem[];
+  wrapper?: React.ComponentType;
+  customSidePanel?: () => SidePanelItem[];
+  invitePopup?: {
+    title: string;
+    renderComponent?: React.ComponentType;
+  };
 }
 
 export type ComponentsInterface = {
@@ -100,11 +96,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 {
@@ -118,6 +116,14 @@ export interface CustomRoutesInterface {
 }
 
 export type CustomHookType = () => () => Promise<void>;
+export type EndCallHookType = () => (
+  isHost: boolean,
+  history: History,
+) => Promise<void>;
+
+export interface AppConfig {
+  defaultRootFallback?: React.ComponentType;
+}
 
 export interface CustomizationApiInterface {
   /**
@@ -128,17 +134,27 @@ export interface CustomizationApiInterface {
    * custom routes used to add new page/routes
    */
   // commented for v1 release
-  //customRoutes?: CustomRoutesInterface[];
+  customRoutes?: CustomRoutesInterface[];
+  /**
+   * app config
+   */
+  config?: AppConfig;
   /**
    * Internationlization
    */
   i18n?: I18nInterface[];
+  /**
+   * Custom logger
+   */
+  logger?: CustomLogger;
   /**
    * Life cycle events
    */
   // commented for v1 release
-  // lifecycle?: {
-  //   useBeforeJoin?: CustomHookType;
-  //   useBeforeCreate?: CustomHookType;
-  // };
+  lifecycle?: {
+    useAfterEndCall?: EndCallHookType;
+    useBeforeEndCall?: EndCallHookType;
+    // useBeforeJoin?: CustomHookType;
+    // useBeforeCreate?: CustomHookType;
+  };
 }

package/template/customization-api/types.ts

@@ -0,0 +1,48 @@
+//audio/video toggle state
+export {
+  ToggleState,
+  ClientRoleType,
+} from '../agora-rn-uikit/src/Contexts/PropsContext';
+export type {
+  ContentInterface,
+  ContentStateInterface,
+  ExtenedContentInterface,
+  UidType,
+  useLocalUid,
+} from '../agora-rn-uikit';
+export {
+  I18nDeviceStatus,
+  I18nMuteType,
+  videoRoomUserFallbackText,
+} from '../src/language/default-labels/videoCallScreenLabels';
+export type {
+  NetworkQualities,
+  I18nRequestConfirmation,
+  I18nMuteConfirmation,
+  deviceDetectionToastSubHeadingDataInterface,
+  sttSpokenLanguageToastHeadingDataType,
+  whiteboardFileUploadToastDataType,
+  publicChatToastSubHeadingDataInterface,
+  privateChatToastHeadingDataInterface,
+  publicAndPrivateChatToastSubHeadingDataInterface,
+} from '../src/language/default-labels/videoCallScreenLabels';
+export type {TextDataInterface} from '../src/language/default-labels';
+export {
+  type ChatOption,
+  ChatMessageType,
+  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 as VBOption,
+} from '../src/components/virtual-background/useVB';
+export {type VBCardProps} from '../src/components/virtual-background/VBCard';
+export {type BeautyEffects} from '../src/components/beauty-effect/useBeautyEffects';
+export {
+  type VideoEncoderConfigurationPreset,
+  type ScreenEncoderConfigurationPreset,
+  type VideoEncoderConfiguration,
+} from '../src/app-state/useVideoQuality';
+export {type ActionMenuItem} from '../src/atoms/ActionMenu';

package/template/customization-api/utils.ts

@@ -21,10 +21,28 @@ export {default as useIsPSTN} from '../src/utils/useIsPSTN';
 export {default as useIsAudioEnabled} from '../src/utils/useIsAudioEnabled';
 export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
 
+//hook to get active speaker uid
+export {default as useActiveSpeaker} from '../src/utils/useActiveSpeaker';
+
 //hooks used for navigation
 export {useHistory, useParams} from '../src/components/Router';
 
 //export common function
-export {isWeb, isIOS, isAndroid, isDesktop} from '../src/utils/common';
+export {
+  isWeb,
+  isIOS,
+  isAndroid,
+  isDesktop,
+  calculatePosition,
+} 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 {useString} from '../src/utils/useString';
+export type {LanguageType} from '../src/subComponents/caption/utils';
+export {default as useSpeechToText} from '../src/utils/useSpeechToText';
+export {isMobileUA} from '../src/utils/common';
+export {default as ThemeConfig} from '../src/theme';
+export {default as hexadecimalTransparency} from '../src/utils/hexadecimalTransparency';
+export {useFullScreen} from '../src/utils/useFullScreen';

package/template/customization-implementation/createHook.ts

@@ -9,25 +9,43 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, { useContext } from 'react';
+import React, {useContext} from 'react';
 /**
- * 
+ *
  * @param context - any context data which we want to extract the data.
  * @returns useContextWithSelector in which we can pass selector function to extract data from the context that we passed.
  */
 function createHook<T>(context: React.Context<T>) {
-
   function useContextWithSelector<U>(contextSelector: (data: T) => U): U;
   function useContextWithSelector(): T;
   /**
-   * 
+   *
    * @param contextSelector is used to pass callback function used to select data from the context data
    * @returns the data selected from the context
    */
   function useContextWithSelector<U>(contextSelector?: (data: T) => U): U | T {
     const data = useContext(context);
-    return contextSelector ? contextSelector(data) : data
+    return contextSelector ? contextSelector(data) : data;
   }
   return useContextWithSelector;
 }
-export default createHook;
+
+export function createConcealedHook<T, V>(
+  context: React.Context<T>,
+  preselect: (data: T) => V,
+) {
+  function useContextWithSelector<U>(contextSelector: (data: V) => U): U;
+  function useContextWithSelector(): V;
+  /**
+   *
+   * @param contextSelector is used to pass callback function used to select data from the context data
+   * @returns the data selected from the context
+   */
+  function useContextWithSelector<U>(contextSelector?: (data: V) => U): U | V {
+    const data = useContext(context);
+    return contextSelector ? contextSelector(preselect(data)) : preselect(data);
+  }
+  return useContextWithSelector;
+}
+
+export default createHook;

package/template/customization-implementation/index.ts

@@ -1,4 +1,3 @@
-export {default as createHook} from './createHook';
+export {default as createHook, createConcealedHook} from './createHook';
 export {CustomizationProvider, useCustomization} from './useCustomization';
-export type {CustomizationProviderProps} from './useCustomization';
 export {default as customizationConfig} from 'customization';

package/template/customization-implementation/useCustomization.tsx

@@ -9,22 +9,20 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {CustomizationApiInterface} from 'customization-api';
 import customizationConfig from 'customization';
 import createHook from './createHook';
+import {SdkApiContext} from '../src/components/SdkApiContext';
 
 const CustomizationContext: React.Context<CustomizationApiInterface> =
   React.createContext(customizationConfig);
 
-export interface CustomizationProviderProps {
-  children: React.ReactNode;
-  value: CustomizationApiInterface;
-}
+const CustomizationProvider: React.FC = (props) => {
+  const {customize: userCustomization} = useContext(SdkApiContext);
 
-const CustomizationProvider = (props: CustomizationProviderProps) => {
   return (
-    <CustomizationContext.Provider value={props.value}>
+    <CustomizationContext.Provider value={userCustomization.customization}>
       {props.children}
     </CustomizationContext.Provider>
   );