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

package/template/bridge/rtc/webNg/{SurfaceView.tsx → RtcSurfaceView.tsx}

@@ -13,57 +13,50 @@
 import {ILocalVideoTrack, IRemoteVideoTrack} from 'agora-rtc-sdk-ng';
 import React, {useEffect} from 'react';
 import {StyleProp, StyleSheet, ViewProps, ViewStyle} from 'react-native';
-import {VideoMirrorMode, VideoRenderMode} from 'react-native-agora';
+import {RenderModeType} from './Types';
+import {LogSource, logger} from '../../../src/logger/AppBuilderLogger';
 
 export interface RtcSurfaceViewProps extends ViewProps {
-  zOrderMediaOverlay?: boolean;
-  zOrderOnTop?: boolean;
-  renderMode?: any;
-  channelId?: string;
-  mirrorMode?: any;
-}
-export interface RtcUidProps {
-  uid: number;
+  canvas: {
+    renderMode?: RenderModeType;
+    uid?: number;
+  };
 }
+
 export interface StyleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-interface SurfaceViewInterface
-  extends RtcSurfaceViewProps,
-    RtcUidProps,
-    StyleProps {}
-
-const SurfaceView = (props: SurfaceViewInterface) => {
-  //   console.log('Surface View props', props);
+interface SurfaceViewInterface extends RtcSurfaceViewProps, StyleProps {}
 
+const RtcSurfaceView = (props: SurfaceViewInterface) => {
+  const {uid, renderMode} = props.canvas;
   const stream: ILocalVideoTrack | IRemoteVideoTrack =
-    props.uid === 0
+    uid === 0
       ? window.engine.localStream.video
-      : props.uid === 1
+      : uid === 1
       ? window.engine.screenStream.video
-      : window.engine.remoteStreams.get(props.uid)?.video;
-  // console.log(props, window.engine, stream);
+      : window.engine.remoteStreams.get(uid)?.video;
   useEffect(
     function () {
       if (stream?.play) {
-        if (props.renderMode === 2) {
-          stream.play(String(props.uid), {fit: 'contain'});
+        if (renderMode === RenderModeType.RenderModeFit) {
+          stream.play(String(uid), {fit: 'contain'});
         } else {
-          stream.play(String(props.uid));
+          stream.play(String(uid));
         }
       }
       return () => {
-        console.log(`unmounting stream ${props.uid}`, stream);
+        console.log(`unmounting stream ${uid}`, stream);
         stream && stream.stop();
       };
     },
-    [props.uid, props.renderMode, stream],
+    [uid, renderMode, stream],
   );
 
   return stream ? (
     <div
-      id={String(props.uid)}
+      id={String(uid)}
       className={'video-container'}
       style={{...style.full, ...(props.style as Object), overflow: 'hidden'}}
     />
@@ -78,4 +71,4 @@ const style = StyleSheet.create({
   },
 });
 
-export default SurfaceView;
+export default RtcSurfaceView;

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,17 +18,18 @@ 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';
+import {LogSource, logger} from '../../../src/logger/AppBuilderLogger';
 // export {RtmAttribute}
 //
-interface RtmAttributePlaceholder {
-};
+interface RtmAttributePlaceholder {}
 export {RtmAttributePlaceholder as RtmAttribute};
 
 type callbackType = (args?: any) => void;
 
 export default class RtmEngine {
   public appId: string;
-  public client: any;
+  public client: RtmClient;
   public channelMap = new Map<string, any>([]);
   public remoteInvititations = new Map<string, any>([]);
   public localInvititations = new Map<string, any>([]);
@@ -36,7 +37,7 @@ export default class RtmEngine {
     ['channelMessageReceived', () => null],
     ['channelMemberJoined', () => null],
     ['channelMemberLeft', () => null],
-    ['ChannelAttributesUpdated', () => null],
+    ['channelAttributesUpdated', () => null],
   ]);
   public clientEventsMap = new Map<string, any>([
     ['connectionStateChanged', () => null],
@@ -59,7 +60,7 @@ export default class RtmEngine {
   ]);
   constructor() {
     this.appId = '';
-    console.log('Using RTM Bridge');
+    logger.debug(LogSource.AgoraSDK, 'Log', 'Using RTM Bridge');
   }
 
   on(event: any, listener: any) {
@@ -67,7 +68,7 @@ export default class RtmEngine {
       event === 'channelMessageReceived' ||
       event === 'channelMemberJoined' ||
       event === 'channelMemberLeft' ||
-      event === 'ChannelAttributesUpdated'
+      event === 'channelAttributesUpdated'
     ) {
       this.channelEventsMap.set(event, listener);
     } else if (
@@ -99,6 +100,38 @@ export default class RtmEngine {
     this.appId = APP_ID;
     this.client = AgoraRTM.createInstance(this.appId);
 
+    if ($config.GEO_FENCING) {
+      try {
+        //include area is comma seperated value
+        let includeArea = $config.GEO_FENCING_INCLUDE_AREA
+          ? $config.GEO_FENCING_INCLUDE_AREA
+          : AREAS.GLOBAL;
+
+        //exclude area is single value
+        let excludeArea = $config.GEO_FENCING_EXCLUDE_AREA
+          ? $config.GEO_FENCING_EXCLUDE_AREA
+          : '';
+
+        includeArea = includeArea?.split(',');
+
+        //pass excludedArea if only its provided
+        if (excludeArea) {
+          AgoraRTM.setArea({
+            areaCodes: includeArea,
+            excludedArea: excludeArea,
+          });
+        }
+        //otherwise we can pass area directly
+        else {
+          AgoraRTM.setArea({areaCodes: includeArea});
+        }
+      } catch (setAeraError) {
+        console.log('error on RTM setArea', setAeraError);
+      }
+    }
+
+    window.rtmClient = this.client;
+
     this.client.on('ConnectionStateChanged', (state, reason) => {
       this.clientEventsMap.get('connectionStateChanged')({state, reason});
     });
@@ -174,7 +207,7 @@ export default class RtmEngine {
   }
 
   async logout(): Promise<any> {
-    return this.client.logout();
+    return await this.client.logout();
   }
 
   async joinChannel(channelId: string): Promise<any> {
@@ -202,16 +235,27 @@ export default class RtmEngine {
       .get(channelId)
       .on('AttributesUpdated', (attributes: RtmChannelAttribute) => {
         /**
-         * a) The following piece of code is commented for future reference.
-         * b) To be used in future implementations of channel attributes
-         * c) Kindly note the below event listener 'ChannelAttributesUpdated' expects type
+         * a) Kindly note the below event listener 'channelAttributesUpdated' expects type
          *    RtmChannelAttribute[] (array of objects [{key: 'valueOfKey', value: 'valueOfValue}])
          *    whereas the above listener 'AttributesUpdated' receives attributes in object form
          *    {[valueOfKey]: valueOfValue} of type RtmChannelAttribute
-         * d) Hence in this bridge the data should be modified to keep in sync with both the
+         * b) Hence in this bridge the data should be modified to keep in sync with both the
          *    listeners for web and listener for native
          */
-        // this.channelEventsMap.get('ChannelAttributesUpdated')(attributes); //RN expect evt: any
+        /**
+         * 1. Loop through object
+         * 2. Create a object {key: "", value: ""} and push into array
+         * 3. Return the Array
+         */
+        const channelAttributes = Object.keys(attributes).reduce((acc, key) => {
+          const {value, lastUpdateTs, lastUpdateUserId} = attributes[key];
+          acc.push({key, value, lastUpdateTs, lastUpdateUserId});
+          return acc;
+        }, []);
+
+        this.channelEventsMap.get('channelAttributesUpdated')(
+          channelAttributes,
+        );
       });
 
     return this.channelMap.get(channelId).join();
@@ -266,8 +310,8 @@ export default class RtmEngine {
 
   async queryPeersOnlineStatus(uid: Array<String>) {
     let peerArray: Array<any> = [];
-    await this.client.queryPeersOnlineStatus(uid).then((list) => {
-      Object.entries(list).forEach((value) => {
+    await this.client.queryPeersOnlineStatus(uid).then(list => {
+      Object.entries(list).forEach(value => {
         peerArray.push({
           online: value[1],
           uid: value[0],
@@ -294,6 +338,19 @@ export default class RtmEngine {
     return response;
   }
 
+  async getChannelAttributes(channelId: string) {
+    let response = {};
+    await this.client
+      .getChannelAttributes(channelId)
+      .then((attributes: string) => {
+        response = {attributes};
+      })
+      .catch((e: any) => {
+        Promise.reject(e);
+      });
+    return response;
+  }
+
   async removeAllLocalUserAttributes() {
     return this.client.clearLocalUserAttributes();
   }
@@ -304,7 +361,7 @@ export default class RtmEngine {
 
   async replaceLocalUserAttributes(attributes: string[]) {
     let formattedAttributes: any = {};
-    attributes.map((attribute) => {
+    attributes.map(attribute => {
       let key = Object.values(attribute)[0];
       let value = Object.values(attribute)[1];
       formattedAttributes[key] = value;
@@ -314,7 +371,7 @@ export default class RtmEngine {
 
   async setLocalUserAttributes(attributes: string[]) {
     let formattedAttributes: any = {};
-    attributes.map((attribute) => {
+    attributes.map(attribute => {
       let key = Object.values(attribute)[0];
       let value = Object.values(attribute)[1];
       formattedAttributes[key] = value;
@@ -325,7 +382,7 @@ export default class RtmEngine {
 
   async addOrUpdateLocalUserAttributes(attributes: RtmAttribute[]) {
     let formattedAttributes: any = {};
-    attributes.map((attribute) => {
+    attributes.map(attribute => {
       let key = Object.values(attribute)[0];
       let value = Object.values(attribute)[1];
       formattedAttributes[key] = value;
@@ -333,28 +390,22 @@ export default class RtmEngine {
     return this.client.addOrUpdateLocalUserAttributes({...formattedAttributes});
   }
 
-  addOrUpdateChannelAttributes(
+  async addOrUpdateChannelAttributes(
     channelId: string,
     attributes: RtmChannelAttribute[],
     option: ChannelAttributeOptions,
   ): Promise<void> {
-    /**
-     * The following piece of code is commented and not deleted
-     * to be used in future implementations of channel attributes
-     */
-
-    // let formattedAttributes: any = {};
-    // attributes.map((attribute) => {
-    //   let key = Object.values(attribute)[0];
-    //   let value = Object.values(attribute)[1];
-    //   formattedAttributes[key] = value;
-    // });
-    // return this.client.addOrUpdateChannelAttributes(
-    //   channelId,
-    //   {...formattedAttributes},
-    //   option,
-    // );
-    return Promise.resolve(); // remove this line when functionality is added to the above function
+    let formattedAttributes: any = {};
+    attributes.map(attribute => {
+      let key = Object.values(attribute)[0];
+      let value = Object.values(attribute)[1];
+      formattedAttributes[key] = value;
+    });
+    return this.client.addOrUpdateChannelAttributes(
+      channelId,
+      {...formattedAttributes},
+      option,
+    );
   }
 
   async sendLocalInvitation(invitationProps: 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,24 @@ 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';
+export {useVirtualBackground} from '../src/app-state/useVirtualBackground';
+export {useBeautyEffects} from '../src/app-state/useBeautyEffects';
+export {useLiveStreamDataContext} from '../src/components/contexts/LiveStreamDataContext';

package/template/customization-api/atoms.ts

@@ -0,0 +1,8 @@
+export {default as UserAvatar} from '../src/atoms/UserAvatar';
+export {default as ImageIcon} from '../src/atoms/ImageIcon';
+export {default as Checkbox} from '../src/atoms/Checkbox';
+export {default as Spacer} from '../src/atoms/Spacer';
+export {default as LinkButton} from '../src/atoms/LinkButton';
+export {default as PrimaryButton} from '../src/atoms/PrimaryButton';
+export {default as TertiaryButton} from '../src/atoms/TertiaryButton';
+export {default as ActionMenu} from '../src/atoms/ActionMenu';

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};