agora-appbuilder-core 4.0.0 → 4.0.2

package/template/bridge/rtc/webNg/Types.ts

@@ -9,11 +9,26 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-export enum VideoRenderMode {
-  Hidden = 1,
-  Fit,
-  Adaptive,
+
+export interface RtcEngineContext {
+  appId?: string;
 }
+
+export enum RenderModeType {
+  /**
+   * 1: Hidden mode. Uniformly scale the video until one of its dimension fits the boundary (zoomed to fit). One dimension of the video may have clipped contents.
+   */
+  RenderModeHidden = 1,
+  /**
+   * 2: Fit mode. Uniformly scale the video until one of its dimension fits the boundary (zoomed to fit). Areas that are not filled due to disparity in the aspect ratio are filled with black.
+   */
+  RenderModeFit = 2,
+  /**
+   * @ignore
+   */
+  RenderModeAdaptive = 3,
+}
+
 export enum VideoMirrorMode {
   /**
    * 0: (Default) The SDK determines the mirror mode.
@@ -26,7 +41,7 @@ export enum VideoMirrorMode {
   /**
    * 2: Disables mirror mode.
    */
-  Disabled = 2
+  Disabled = 2,
 }
 /**
  *

package/template/bridge/rtc/webNg/index.ts

@@ -10,23 +10,90 @@
 *********************************************
 */
 import RtcEngine from './RtcEngine';
-import SurfaceView from './SurfaceView';
-import LocalView from './LocalView';
-import * as Types from './Types';
+export {default as RtcSurfaceView} from './RtcSurfaceView';
 
-export const RtcLocalView = {
-  SurfaceView: LocalView,
-  TextureView: LocalView,
-};
+import * as Types from './Types';
 
-export const RtcRemoteView = {
-  SurfaceView: SurfaceView as any,
-  TextureView: SurfaceView as any,
-};
+export const VideoMirrorMode = {...Types.RenderModeType};
+export const RenderModeType = {...Types.RenderModeType};
 
-export const VideoRenderMode = {...Types.VideoRenderMode};
-export const VideoMirrorMode = {...Types.VideoRenderMode};
+export function createAgoraRtcEngine() {
+  let engine = new RtcEngine();
+  window.engine = engine;
+  return engine;
+}
 
 export {RnEncryptionEnum as EncryptionMode} from './RtcEngine';
-export {AREAS as AreaCode} from './RtcEngine'
+export {AREAS as AreaCode} from './RtcEngine';
+export type VideoEncoderConfiguration = any;
+export declare enum AudioScenario {
+  /**
+   * 0: Default audio scenario.
+   *
+   * **Note**
+   *  If you run the iOS app on an M1 Mac, due to the hardware differences between M1 Macs, iPhones, and iPads,
+   * the default audio scenario of the Agora iOS SDK is the same as that of the Agora macOS SDK.
+   */
+  Default = 0,
+  /**
+   * 1: Entertainment scenario where users need to frequently switch the user role.
+   */
+  ChatRoomEntertainment = 1,
+  /**
+   * 2: Education scenario where users want smoothness and stability.
+   */
+  Education = 2,
+  /**
+   * 3: High-quality audio chatroom scenario where hosts mainly play music.
+   */
+  GameStreaming = 3,
+  /**
+   * 4: Showroom scenario where a single host wants high-quality audio.
+   */
+  ShowRoom = 4,
+  /**
+   * 5: Gaming scenario for group chat that only contains the human voice.
+   */
+  ChatRoomGaming = 5,
+  /**
+   * IoT (Internet of Things) scenario where users use IoT devices with low power consumption.
+   *
+   * @since v3.2.0.
+   */
+  IOT = 6,
+  /**
+   * Meeting scenario that mainly contains the human voice.
+   *
+   * @since v3.2.0.
+   */
+  MEETING = 8,
+}
+export declare enum AudioProfile {
+  /**
+   * 0: Default audio profile.
+   * - In the `Communication` profile: A sample rate of 32 KHz, audio encoding, mono, and a bitrate of up to 18 Kbps.
+   * - In the `LiveBroadcasting` profile: A sample rate of 48 KHz, music encoding, mono, and a bitrate of up to 64 Kbps.
+   */
+  Default = 0,
+  /**
+   * 1: A sample rate of 32 KHz, audio encoding, mono, and a bitrate of up to 18 Kbps.
+   */
+  SpeechStandard = 1,
+  /**
+   * 2: A sample rate of 48 KHz, music encoding, mono, and a bitrate of up to 64 Kbps.
+   */
+  MusicStandard = 2,
+  /**
+   * 3: A sample rate of 48 KHz, music encoding, stereo, and a bitrate of up to 80 Kbps.
+   */
+  MusicStandardStereo = 3,
+  /**
+   * 4: A sample rate of 48 KHz, music encoding, mono, and a bitrate of up to 96 Kbps.
+   */
+  MusicHighQuality = 4,
+  /**
+   * 5: A sample rate of 48 KHz, music encoding, stereo, and a bitrate of up to 128 Kbps.
+   */
+  MusicHighQualityStereo = 5,
+}
 export default RtcEngine;

package/template/bridge/rtm/web/index.ts

@@ -18,10 +18,10 @@ import {
 } from 'agora-react-native-rtm/lib/typescript/src';
 import {RtmClientEvents} from 'agora-react-native-rtm/lib/typescript/src/RtmEngine';
 import AgoraRTM, {VERSION} from 'agora-rtm-sdk';
+import RtmClient from 'agora-react-native-rtm';
 // export {RtmAttribute}
 //
-interface RtmAttributePlaceholder {
-};
+interface RtmAttributePlaceholder {}
 export {RtmAttributePlaceholder as RtmAttribute};
 
 type callbackType = (args?: any) => void;
@@ -99,6 +99,8 @@ export default class RtmEngine {
     this.appId = APP_ID;
     this.client = AgoraRTM.createInstance(this.appId);
 
+    window.rtmClient = this.client;
+
     this.client.on('ConnectionStateChanged', (state, reason) => {
       this.clientEventsMap.get('connectionStateChanged')({state, reason});
     });
@@ -174,7 +176,7 @@ export default class RtmEngine {
   }
 
   async logout(): Promise<any> {
-    return this.client.logout();
+    return await this.client.logout();
   }
 
   async joinChannel(channelId: string): Promise<any> {

package/template/configTransform.js

@@ -12,7 +12,22 @@
 let jsonFile = require('./config.json');
 let PREFIX = '$config';
 let config = {};
-Object.keys(jsonFile).map((key) => {
+Object.keys(jsonFile).map(key => {
   config[`${PREFIX}.${key}`] = jsonFile[key];
 });
+
+//find any missing config
+const defaultConfig = require('./defaultConfig');
+const filteredArray = Object.keys(defaultConfig).filter(
+  value => !Object.keys(jsonFile).includes(value),
+);
+
+//add missing config with default value
+if (filteredArray && filteredArray?.length) {
+  //console.error('config.json missing ', filteredArray);
+  filteredArray.forEach(i => {
+    config[`${PREFIX}.${i}`] = defaultConfig[i];
+  });
+}
+
 module.exports = config;

package/template/customization-api/action-library.ts

@@ -1,22 +1,10 @@
 //hooks used for create/join meeting
-export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
-export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
-
-//mute local audio state
-export {
-  MUTE_LOCAL_TYPE,
-  default as useMuteToggleLocal,
-} from '../src/utils/useMuteToggleLocal';
+export {default as useCreateRoom} from '../src/utils/useCreateRoom';
+export {default as useJoinRoom} from '../src/utils/useJoinRoom';
 
 //remove remote user from the call
 export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
-
-//mute remote user audio/video
-export {
-  default as useRemoteMute,
-  MUTE_REMOTE_TYPE,
-} from '../src/utils/useRemoteMute';
+//switch camera
+export {default as useSwitchCamera} from '../src/utils/useSwitchCamera';
 
 export {controlMessageEnum} from '../src/components/ChatContext';
-//audio/video toggle state
-export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';

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

@@ -2,7 +2,7 @@
  * Core contexts
  */
 import {createHook} from 'customization-implementation';
-import {RtcContext, RenderContext} from '../agora-rn-uikit';
+import {RtcContext, ContentContext} from '../agora-rn-uikit';
 
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
@@ -14,7 +14,7 @@ export const useRtc = createHook(RtcContext);
 /**
  * The Render app state governs the information necessary to render each user content view displayed in the videocall screen.
  */
-export const useRender = createHook(RenderContext);
+export const useContent = createHook(ContentContext);
 
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 
@@ -26,8 +26,8 @@ export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
  * UI contexts
  */
 // commented for v1 release
-//export {usePreCall} from '../src/components/precall/usePreCall';
-//export type {PreCallContextInterface} from '../src/components/precall/usePreCall';
+export {usePreCall} from '../src/components/precall/usePreCall';
+export type {PreCallContextInterface} from '../src/components/precall/usePreCall';
 export {useLayout} from '../src/utils/useLayout';
 export type {LayoutContextInterface} from '../src/utils/useLayout';
 // commented for v1 release
@@ -40,14 +40,21 @@ export type {LayoutContextInterface} from '../src/utils/useLayout';
 // export type {ScreenshareContextInterface} from '../src/subComponents/screenshare/useScreenshare';
 export {useRecording} from '../src/subComponents/recording/useRecording';
 export type {RecordingContextInterface} from '../src/subComponents/recording/useRecording';
-export {useMeetingInfo} from '../src/components/meeting-info/useMeetingInfo';
-export type {MeetingInfoContextInterface} from '../src/components/meeting-info/useMeetingInfo';
-export {useChatUIControl} from '../src/components/chat-ui/useChatUIControl';
-export type {ChatUIControlInterface} from '../src/components/chat-ui/useChatUIControl';
+export {useRoomInfo} from '../src/components/room-info/useRoomInfo';
+export type {RoomInfoContextInterface} from '../src/components/room-info/useRoomInfo';
 export {useMessages} from '../src/app-state/useMessages';
 export type {messageInterface} from '../src/app-state/useMessages';
 export {SidePanelType} from '../src/subComponents/SidePanelEnum';
 export {useSidePanel} from '../src/utils/useSidePanel';
 
+export {useNoiseSupression} from '../src/app-state/useNoiseSupression';
+export {useVideoQuality} from '../src/app-state/useVideoQuality';
+
 //hook used to get/set username
 export {default as useUserName} from '../src/utils/useUserName';
+
+export {
+  useChatUIControls,
+  ChatType,
+} from '../src/components/chat-ui/useChatUIControls';
+export type {ChatUIControlsInterface} from '../src/components/chat-ui/useChatUIControls';

package/template/customization-api/customEvents.ts

@@ -1,9 +1,14 @@
 // 1. Import Events
 import Events from '../src/rtm-events-api/Events';
-import {EventSource} from '../src/rtm-events-api';
+import {
+  EventSource,
+  PersistanceLevel,
+  EventCallback,
+} from '../src/rtm-events-api';
 
 // 2. Initialize with source "fpe"
 const customEvents = new Events(EventSource.fpe);
 
 // 3. export
-export {customEvents};
+export {customEvents, PersistanceLevel};
+export type {EventCallback};

package/template/customization-api/customize.ts

@@ -46,7 +46,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) {

package/template/customization-api/index.ts

@@ -24,3 +24,7 @@ export * from './customEvents';
 export * from './sub-components';
 export * from './typeDefinition';
 export * from './utils';
+export * from './types';
+
+//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 {Icons} from '../agora-rn-uikit';
+//export {Icons} from '../agora-rn-uikit';
 
 // commented for v1 release
 //create screen
@@ -16,30 +13,28 @@ export {Icons} from '../agora-rn-uikit';
 
 // 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,
+  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 {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 +46,18 @@ 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,
+  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 {
+  ToolbarCustomItem,
+  ToolbarPresetProps,
+} from '../src/atoms/ToolbarPreset';

package/template/customization-api/temp.ts

@@ -0,0 +1,52 @@
+//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 TertiaryButton from '../src/atoms/TertiaryButton';
+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,
+  TertiaryButton,
+  useEndCall,
+};

package/template/customization-api/typeDefinition.ts

@@ -13,21 +13,14 @@ import React from 'react';
 export type {ChatBubbleProps} from '../src/components/ChatContext';
 import {ChatBubbleProps} from '../src/components/ChatContext';
 import {
-  RenderInterface,
-  RenderStateInterface,
+  ContentInterface,
+  ContentStateInterface,
   UidType,
 } from '../agora-rn-uikit';
 import {I18nInterface} from '../src/language/i18nTypes';
 import {IconsInterface} from '../src/atoms/CustomIcon';
-export type {RenderInterface, RenderStateInterface, UidType};
-export type {
-  ChatTextInputProps,
-  ChatSendButtonProps,
-} from '../src/subComponents/ChatInput';
-import {
-  ChatTextInputProps,
-  ChatSendButtonProps,
-} from '../src/subComponents/ChatInput';
+import {ToolbarCustomItem} from './sub-components';
+import {TextDataInterface} from '../src/language/default-labels';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -50,49 +43,37 @@ export interface ChatCmpInterface {
   //commented for v1 release
   //extends BeforeAndAfterInterface
   chatBubble?: React.ComponentType<ChatBubbleProps>;
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}
-
-export interface renderComponentInterface {
-  user: RenderInterface;
-  isMax?: boolean;
-}
-
-export interface renderComponentObjectInterface {
-  [key: string]: React.ComponentType<renderComponentInterface>;
+  chatInput?: React.ComponentType;
 }
 
-export type layoutComponent = React.ComponentType<{
-  renderData: RenderStateInterface['activeUids'];
+export type LayoutComponent = React.ComponentType<{
+  renderData: ContentStateInterface['activeUids'];
 }>;
 
-export interface layoutObjectBase {
+export interface LayoutItem {
   name: string;
   label: string;
-  component: layoutComponent;
-}
-
-export interface layoutObjectWithIcon extends layoutObjectBase {
+  translationKey?: keyof TextDataInterface;
   icon: string;
-  iconName?: never;
-}
-export interface layoutObjectWithIconName extends layoutObjectBase {
-  icon?: never;
-  iconName: keyof IconsInterface;
+  component: LayoutComponent;
 }
-export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
 
+export type ToolbarType = React.ComponentType | Array<ToolbarCustomItem>;
 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;
+  customLayout?: (layouts: LayoutItem[]) => LayoutItem[];
+  wrapper?: React.ComponentType;
+  invitePopup?: {
+    title: string;
+    renderComponent?: React.ComponentType;
+  };
 }
 
 export type ComponentsInterface = {
@@ -101,7 +82,8 @@ export type ComponentsInterface = {
    */
   appRoot?: React.ComponentType;
   // commented for v1 release
-  //precall?: PreCallInterface | React.ComponentType;
+  // precall?: PreCallInterface | React.ComponentType;
+  precall?: React.ComponentType;
   //create?: React.ComponentType;
   //share?: React.ComponentType;
   //join?: React.ComponentType;
@@ -119,6 +101,10 @@ export interface CustomRoutesInterface {
 }
 
 export type CustomHookType = () => () => Promise<void>;
+export type EndCallHookType = () => (
+  isHost: boolean,
+  history: History,
+) => Promise<void>;
 
 export interface CustomizationApiInterface {
   /**
@@ -129,7 +115,7 @@ export interface CustomizationApiInterface {
    * custom routes used to add new page/routes
    */
   // commented for v1 release
-  //customRoutes?: CustomRoutesInterface[];
+  customRoutes?: CustomRoutesInterface[];
   /**
    * Internationlization
    */
@@ -138,8 +124,10 @@ export interface CustomizationApiInterface {
    * 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,26 @@
+//audio/video toggle state
+export {
+  ToggleState,
+  ClientRole,
+} from '../agora-rn-uikit/src/Contexts/PropsContext';
+export type {
+  ContentInterface,
+  ContentStateInterface,
+  UidType,
+} from '../agora-rn-uikit';
+export {
+  I18nDeviceStatus,
+  I18nMuteType,
+} 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';

package/template/customization-api/utils.ts

@@ -21,6 +21,9 @@ 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';
 
@@ -28,3 +31,4 @@ export {useHistory, useParams} from '../src/components/Router';
 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';