agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/android/build.gradle

@@ -4,15 +4,15 @@ buildscript {
     ext {
         buildToolsVersion = "29.0.2"
         minSdkVersion = 21
-        compileSdkVersion = 29
-        targetSdkVersion = 29
+        compileSdkVersion = 33
+        targetSdkVersion = 33
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.3")
+        classpath("com.android.tools.build:gradle:4.1.2")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

package/template/babel.config.js

@@ -29,5 +29,6 @@ module.exports = {
         },
       },
     ],
+    'react-native-reanimated/plugin'
   ],
 };

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

@@ -23,6 +23,8 @@ import AgoraRTC, {
   EncryptionMode,
   ILocalTrack,
   ClientRoleOptions,
+  CameraVideoTrackInitConfig,
+  MicrophoneAudioTrackInitConfig,
 } from 'agora-rtc-sdk-ng';
 import type {
   RtcEngineEvents,
@@ -46,9 +48,12 @@ type callbackType = (uid?: UID) => void;
 declare global {
   interface Window {
     engine: RtcEngine;
+    AgoraRTC: typeof AgoraRTC;
   }
 }
 
+window.AgoraRTC = AgoraRTC;
+
 export enum AREAS {
   /**
    * China.
@@ -166,6 +171,7 @@ if ($config.LOG_ENABLED) {
 }
 
 export default class RtcEngine {
+  private activeSpeakerUid: number;
   public appId: string;
   // public AgoraRTC: any;
   public client: any | IAgoraRTCClient;
@@ -178,6 +184,7 @@ export default class RtcEngine {
     ['RemoteAudioStateChanged', () => null],
     ['RemoteVideoStateChanged', () => null],
     ['NetworkQuality', () => null],
+    ['ActiveSpeaker', () => null],
   ]);
   public localStream: LocalStream = {};
   public screenStream: ScreenStream = {};
@@ -185,15 +192,16 @@ export default class RtcEngine {
   private inScreenshare: Boolean = false;
   private videoProfile: VideoProfile = '480p_9';
   private isPublished = false;
-  private isAudioEnabled = true;
-  private isVideoEnabled = true;
+  private isAudioEnabled = false;
+  private isVideoEnabled = false;
   private isAudioPublished = false;
   private isVideoPublished = false;
   private isJoined = false;
-  private deviceId = '';
+  private videoDeviceId = undefined;
+  private audioDeviceId = undefined;
   private muteLocalVideoMutex = false;
   private muteLocalAudioMutex = false;
-
+  private speakerDeviceId = '';
   // Create channel profile and set it here
 
   // Create channel profile and set it here
@@ -214,9 +222,17 @@ export default class RtcEngine {
   }
 
   async enableAudio(): Promise<void> {
+    const audioConfig: MicrophoneAudioTrackInitConfig = {
+      bypassWebAudio: Platform.OS == 'web' && isMobileOrTablet(),
+      // microphoneId: this.audioDeviceId,
+    };
     try {
-      let localAudio = await AgoraRTC.createMicrophoneAudioTrack({});
+      let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
       this.localStream.audio = localAudio;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = e;
       e.status = {audioError};
@@ -234,15 +250,30 @@ export default class RtcEngine {
      *    The Web SDK directly publishes the local audio stream without processing it through WebAudio.
      */
 
-    const audioConfig =
-      Platform.OS == 'web' && isMobileOrTablet() ? {bypassWebAudio: true} : {};
+    const audioConfig: MicrophoneAudioTrackInitConfig = {
+      bypassWebAudio: Platform.OS == 'web' && isMobileOrTablet(),
+      // microphoneId: this.audioDeviceId,
+    };
+    const videoConfig: CameraVideoTrackInitConfig = {
+      encoderConfig: this.videoProfile,
+      // cameraId: this.videoDeviceId,
+    };
     try {
       let [localAudio, localVideo] =
-        await AgoraRTC.createMicrophoneAndCameraTracks(audioConfig, {
-          encoderConfig: this.videoProfile,
-        });
+        await AgoraRTC.createMicrophoneAndCameraTracks(
+          audioConfig,
+          videoConfig,
+        );
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.videoDeviceId = localVideo
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isVideoEnabled = true;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = false;
       let videoError = false;
@@ -250,14 +281,20 @@ export default class RtcEngine {
         let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
 
         this.localStream.audio = localAudio;
+        this.audioDeviceId = localAudio
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isAudioEnabled = true;
       } catch (error) {
         audioError = error;
       }
       try {
-        let localVideo = await AgoraRTC.createCameraVideoTrack({
-          encoderConfig: this.videoProfile,
-        });
+        let localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
         this.localStream.video = localVideo;
+        this.videoDeviceId = localVideo
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isVideoEnabled = true;
       } catch (error) {
         videoError = error;
       }
@@ -271,6 +308,11 @@ export default class RtcEngine {
     }
   }
 
+  async enableAudioVolumeIndication(interval, smooth, isLocal) {
+    AgoraRTC.setParameter('AUDIO_VOLUME_INDICATION_INTERVAL', interval);
+    this.client.enableAudioVolumeIndicator();
+  }
+
   async publish() {
     if (this.localStream.audio || this.localStream.video) {
       try {
@@ -360,6 +402,12 @@ export default class RtcEngine {
           ...this.remoteStreams.get(user.uid),
           audio: audioTrack,
         });
+        if (this.speakerDeviceId) {
+          // setting sepeaker for all remote stream (newly joining user)
+          this.remoteStreams
+            .get(user.uid)
+            ?.audio?.setPlaybackDevice(this.speakerDeviceId);
+        }
         (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
           user.uid,
           2,
@@ -404,6 +452,36 @@ export default class RtcEngine {
       }
     });
 
+    this.client.on('volume-indicator', (volumes) => {
+      const highestvolumeObj = volumes.reduce(
+        (highestVolume, volume, index) => {
+          if (highestVolume === null) {
+            return volume;
+          } else {
+            if (volume.level > highestVolume.level) {
+              return volume;
+            }
+            return highestVolume;
+          }
+          // console.log(`${index} UID ${volume.uid} Level ${volume.level}`);
+        },
+        null,
+      );
+      const activeSpeakerUid =
+        highestvolumeObj && highestvolumeObj?.level > 0 && highestvolumeObj?.uid
+          ? highestvolumeObj.uid
+          : undefined;
+
+      //To avoid infinite calling dispatch checking if condition.
+      if (this.activeSpeakerUid !== activeSpeakerUid) {
+        const activeSpeakerCallBack = this.eventsMap.get(
+          'ActiveSpeaker',
+        ) as callbackType;
+        activeSpeakerCallBack(activeSpeakerUid);
+        this.activeSpeakerUid = activeSpeakerUid;
+      }
+    });
+
     // this.client.on('stream-fallback', (evt))
     this.client.on('stream-type-changed', function (uid, streamType) {
       console.log('[fallback]: ', uid, streamType);
@@ -468,7 +546,8 @@ export default class RtcEngine {
       event === 'ScreenshareStopped' ||
       event === 'RemoteAudioStateChanged' ||
       event === 'RemoteVideoStateChanged' ||
-      event === 'NetworkQuality'
+      event === 'NetworkQuality' ||
+      event === 'ActiveSpeaker'
     ) {
       this.eventsMap.set(event, listener as callbackType);
     }
@@ -616,7 +695,7 @@ export default class RtcEngine {
   async changeCamera(cameraId, callback, error): Promise<void> {
     try {
       await this.localStream.video?.setDevice(cameraId);
-      this.deviceId = cameraId;
+      this.videoDeviceId = cameraId;
       callback(cameraId);
     } catch (e) {
       error(e);
@@ -628,9 +707,9 @@ export default class RtcEngine {
       const devices = await AgoraRTC.getDevices(true);
       for (let i = 0; i < devices.length; i++) {
         let d = devices[i];
-        if (d.kind === 'videoinput' && d.deviceId !== this.deviceId) {
+        if (d.kind === 'videoinput' && d.deviceId !== this.videoDeviceId) {
           await this.localStream.video?.setDevice(d.deviceId);
-          this.deviceId = d.deviceId;
+          this.videoDeviceId = d.deviceId;
           break;
         }
       }
@@ -642,12 +721,26 @@ export default class RtcEngine {
   async changeMic(micId, callback, error) {
     try {
       await this.localStream.audio?.setDevice(micId);
+      this.audioDeviceId = micId;
       callback(micId);
     } catch (e) {
       error(e);
     }
   }
 
+  async changeSpeaker(speakerId, callback, error) {
+    try {
+      this.speakerDeviceId = speakerId;
+      // setting sepeaker for all remote stream (previously joined users)
+      this.remoteStreams?.forEach((stream, uid, map) => {
+        stream?.audio?.setPlaybackDevice(speakerId);
+      });
+      callback(speakerId);
+    } catch (e) {
+      error(e);
+    }
+  }
+
   async enableDualStreamMode(enable: boolean) {
     return this.client[enable ? 'enableDualStream' : 'disableDualStream']();
     // enable

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

@@ -1,22 +1,18 @@
 //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';
+
+export {
+  useChatUIControls,
+  ChatType,
+} from '../src/components/chat-ui/useChatUIControls';
+export type {ChatUIControlsInterface} from '../src/components/chat-ui/useChatUIControls';

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';
 
@@ -40,10 +40,8 @@ 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';

package/template/customization-api/customEvents.ts

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

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/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
@@ -22,24 +19,22 @@ export {default as icons} from '../src/assets/icons';
 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';
 
 // commented for v1 release
 //Settings screen
@@ -53,10 +48,7 @@ export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScree
 //Sidepanel buttons
 export {SidePanelButtonsArray} from '../src/subComponents/SidePanelButtons';
 export {
-  ImageIcon as UiKitImageIcon,
   MaxVideoView as UiKitMaxVideoView,
-  BtnTemplate as UiKitBtnTemplate,
   ClientRole as UikitClientRole,
   ChannelProfile as UikitChannelProfile,
 } from '../agora-rn-uikit';
-export type {BtnTemplateInterface as UikitBtnTemplateInterface} from '../agora-rn-uikit';

package/template/customization-api/typeDefinition.ts

@@ -13,21 +13,15 @@ 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 '../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 {IconsInterface} from '../src/atoms/CustomIcon';
+export type {ContentInterface, ContentStateInterface, UidType};
+export type {ChatTextInputProps} from '../src/subComponents/ChatInput';
+import {ChatTextInputProps} from '../src/subComponents/ChatInput';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -51,47 +45,30 @@ export interface ChatCmpInterface {
   //extends BeforeAndAfterInterface
   chatBubble?: React.ComponentType<ChatBubbleProps>;
   chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}
-
-export interface renderComponentInterface {
-  user: RenderInterface;
-}
-
-export interface renderComponentObjectInterface {
-  [key: string]: React.ComponentType<renderComponentInterface>;
 }
 
 export type layoutComponent = React.ComponentType<{
-  renderData: RenderStateInterface['activeUids'];
+  renderData: ContentStateInterface['activeUids'];
 }>;
 
-export interface layoutObjectBase {
+export interface layoutItem {
   name: string;
   label: string;
-  component: layoutComponent;
-}
-
-export interface layoutObjectWithIcon extends layoutObjectBase {
-  icon: string;
-  iconName?: never;
-}
-export interface layoutObjectWithIconName extends layoutObjectBase {
-  icon?: never;
+  //todo: hari change iconName into icon and refactor icon lib
   iconName: keyof IconsInterface;
+  component: layoutComponent;
 }
-export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
 
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
-  topBar?: React.ComponentType;
+  topToolBar?: React.ComponentType;
+  bottomToolBar?: React.ComponentType;
+  leftToolBar?: React.ComponentType;
+  rightToolBar?: React.ComponentType;
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
-  bottomBar?: React.ComponentType;
   chat?: ChatCmpInterface;
-  customContent?: renderComponentObjectInterface;
-  customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
-  useUserContext?: () => void;
+  customLayout?: (layouts: layoutItem[]) => layoutItem[];
 }
 
 export type ComponentsInterface = {

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,4 @@
-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>
   );

package/template/electron/index.html

@@ -1,29 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-        <base href="./">
-        <title><%= htmlWebpackPlugin.options.title %></title>
-    </head>
-    <body>
-        <style>
-            .video-container > *{
-                background-color: #000 !important;
-
-            }
-            .video-container video{
-                background-color: #000;
-            }
-            .video-container{
-                background-color: #000;
-            }
-        </style>
-        <div id="react-app" style="
-            height: 100vh;
-            display: flex;
-        ">
-        </div>
-    </body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <base href="./" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <style>
+      .video-container > * {
+        background-color: #000 !important;
+      }
+      .video-container video {
+        background-color: #000;
+      }
+      .video-container {
+        background-color: #000;
+      }
+    </style>
+    <div id="react-app" style="height: 100vh; display: flex"></div>
+  </body>
+</html>

package/template/electron/renderer/index.js

@@ -1,5 +1,6 @@
 import Video from '../../src/App';
 import {AppRegistry} from 'react-native';
+import '../../src/assets/font-styles.css';
 // import React from 'react';
 
 // const Video = () => <div>Hello </div>;