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

package/template/agora-rn-uikit/package.json

@@ -22,24 +22,24 @@
     "url": "https://github.com/AgoraIO-Community/ReactNative-UIKit/issues"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-native": "^0.61.5",
-    "react-native-agora": "^3.0.1-rc.4"
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-agora": "4.2.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/runtime": "^7.6.2",
+    "@babel/core": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@react-native-community/eslint-config": "^1.0.0",
     "@types/jest": "^24.0.24",
-    "@types/react-native": "^0.62.0",
-    "@types/react-test-renderer": "16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.5.1",
-    "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.58.0",
-    "react-test-renderer": "16.11.0",
+    "@types/react-native": "0.67.6",
+    "@types/react-test-renderer": "18.0.0",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "react-test-renderer": "18.2.0",
     "prettier": "^2.0.4",
     "typescript": "^3.8.3"
   },

package/template/agora-rn-uikit/src/AgoraUIKit.tsx

@@ -3,7 +3,7 @@ import {ScrollView, View} from 'react-native';
 import RtcConfigure from './RtcConfigure';
 import MaxVideoView from './Views/MaxVideoView';
 import MinVideoView from './Views/MinVideoView';
-import {RenderConsumer} from './Contexts/RenderContext';
+import {ContentConsumer} from './Contexts/ContentContext';
 import {PropsProvider, PropsInterface} from './Contexts/PropsContext';
 
 import styles from './Style';
@@ -16,12 +16,12 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
     <PropsProvider value={props}>
       <View style={{backgroundColor: '#000', flex: 1}}>
         <RtcConfigure>
-          <RenderConsumer>
-            {({renderList, activeUids}) => {
+          <ContentConsumer>
+            {({defaultContent, activeUids}) => {
               const [maxUid, ...minUids] = activeUids;
               return (
                 <>
-                  <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+                  <MaxVideoView user={defaultContent[maxUid]} key={maxUid} />
                   <ScrollView
                     showsHorizontalScrollIndicator={false}
                     horizontal={true}
@@ -29,7 +29,7 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
                     {minUids.map((minUid) => (
                       <MinVideoView
                         showOverlay
-                        user={renderList[minUid]}
+                        user={defaultContent[minUid]}
                         key={minUid}
                       />
                     ))}
@@ -37,7 +37,7 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
                 </>
               );
             }}
-          </RenderConsumer>
+          </ContentConsumer>
           <LocalControls />
         </RtcConfigure>
       </View>

package/template/agora-rn-uikit/src/Contexts/ContentContext.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {ContentStateInterface} from './RtcContext';
+
+const ContentContext = React.createContext<ContentStateInterface>(
+  {} as ContentStateInterface,
+);
+
+export const ContentProvider = ContentContext.Provider;
+export const ContentConsumer = ContentContext.Consumer;
+export default ContentContext;

package/template/agora-rn-uikit/src/Contexts/DispatchContext.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {CallbacksInterface} from './PropsContext';
+
+export type DispatchType = <
+  T extends keyof CallbacksInterface,
+  V extends Parameters<CallbacksInterface[T]>,
+>(action: {
+  type: T;
+  value: V;
+}) => void;
+
+export interface DispatchContextInterface {
+  dispatch: DispatchType;
+}
+
+const DispatchContext = React.createContext<DispatchContextInterface>(
+  {} as DispatchContextInterface,
+);
+
+export const DispatchProvider = DispatchContext.Provider;
+export const DispatchConsumer = DispatchContext.Consumer;
+export default DispatchContext;

package/template/agora-rn-uikit/src/Contexts/LocalUserContext.tsx

@@ -1,10 +1,10 @@
 import React, {useContext, createContext} from 'react';
-import RenderContext from './RenderContext';
-import {RenderInterface} from './PropsContext';
+import ContentContext from './ContentContext';
+import {ContentInterface} from './PropsContext';
 import {UidType} from './RtcContext';
 
-export const LocalContext = createContext<RenderInterface>(
-  {} as RenderInterface,
+export const LocalContext = createContext<ContentInterface>(
+  {} as ContentInterface,
 );
 export const LocalProvider = LocalContext.Provider;
 export const LocalConsumer = LocalContext.Consumer;
@@ -15,8 +15,12 @@ interface LocalUserContextInterface {
 }
 
 const LocalUserContext: React.FC<LocalUserContextInterface> = (props) => {
-  const {renderList} = useContext(RenderContext);
-  let localUser: RenderInterface = renderList[props?.localUid];
+  const {defaultContent} = useContext(ContentContext);
+  if (!props?.localUid) {
+    console.error('Error: local user id is empty');
+    return null;
+  }
+  let localUser: ContentInterface = defaultContent[props?.localUid];
   if (!localUser) {
     console.error("Error: we couldn't find the local user data");
     return null;

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -1,26 +1,44 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcEvents';
+import {IRtcEngineEventHandler} from 'react-native-agora';
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
 import {UidType} from './RtcContext';
 
 /* User role for live streaming mode */
-export enum ClientRole {
-  /* 1: A host can both send and receive streams. */
-  Broadcaster = 1,
-  /* 2: The default role. An audience can only receive streams. */
-  Audience = 2,
+export enum ClientRoleType {
+  /**
+   * 1: Host. A host can both send and receive streams.
+   */
+  ClientRoleBroadcaster = 1,
+  /**
+   * 2: (Default) Audience. An audience member can only receive streams.
+   */
+  ClientRoleAudience = 2,
 }
 
 /* Mode for RTC (Live or Broadcast) */
-export enum ChannelProfile {
-  /** 0: (Default) The Communication profile.
-   *  Use this profile in one-on-one calls or group calls, where all users can talk freely. */
-  Communication = 0,
-  /**  1: The Live-Broadcast profile.
-   *   Users in a live-broadcast channel have a role as either host or audience. A host can both send and receive streams; an audience can only receive streams. */
-  LiveBroadcasting = 1,
+export enum ChannelProfileType {
+  /**
+   * 0: Communication. Use this profile when there are only two users in the channel.
+   */
+  ChannelProfileCommunication = 0,
+  /**
+   * 1: Live streaming. Live streaming. Use this profile when there are more than two users in the channel.
+   */
+  ChannelProfileLiveBroadcasting = 1,
+  /**
+   * 2: Gaming. This profile is deprecated.
+   */
+  ChannelProfileGame = 2,
+  /**
+   * Cloud gaming. The scenario is optimized for latency. Use this profile if the use case requires frequent interactions between users.
+   */
+  ChannelProfileCloudGaming = 3,
+  /**
+   * @ignore
+   */
+  ChannelProfileCommunication1v1 = 4,
 }
 
 // disabled is intentionally kept as the 1st item in the enum.
@@ -32,23 +50,51 @@ export enum ToggleState {
   enabling, // disabled -> enabling -> enabled
 }
 
+export enum PermissionState {
+  NOT_REQUESTED,
+  REQUESTED,
+  GRANTED_FOR_CAM_AND_MIC,
+  GRANTED_FOR_CAM_ONLY,
+  GRANTED_FOR_MIC_ONLY,
+  REJECTED,
+  CANCELLED,
+}
+
 export const toggleHelper = (state: ToggleState) =>
   state === ToggleState.enabled ? ToggleState.disabled : ToggleState.enabled;
 
-export interface DefaultRenderInterface {
+export interface DefaultContentInterface {
+  //uikit and core
   uid: UidType;
   audio: ToggleState;
   video: ToggleState;
   streamType: 'high' | 'low';
-  type: 'rtc';
+  type: 'rtc' | 'screenshare';
+  permissionStatus?: PermissionState;
+  audioForceDisabled?: boolean;
+  videoForceDisabled?: boolean;
+  //applicable only to the screenshare
+  parentUid?: UidType;
+  //uikit and core
+
+  //core only
+  name: string;
+  screenUid: number;
+  offline: boolean;
+  lastMessageTimeStamp: number;
+  isInWaitingRoom?: boolean;
+  //core only
 }
-export interface CustomRenderInterface<T> {
-  type: T extends DefaultRenderInterface['type'] ? never : T;
+export interface CustomContentInterface<T> {
+  type: T extends DefaultContentInterface['type'] ? never : T;
 }
-interface ExtenedRenderInterface extends CustomRenderInterface<string> {
+export interface ExtenedContentInterface
+  extends CustomContentInterface<string> {
   [key: string]: any;
 }
-export type RenderInterface = DefaultRenderInterface | ExtenedRenderInterface;
+export type ContentInterface =
+  | DefaultContentInterface
+  | ExtenedContentInterface;
 
 interface remoteBtnStylesInterface {
   muteRemoteAudio?: StyleProp<ViewStyle>;
@@ -90,15 +136,14 @@ export interface RtcPropsInterface {
   token?: string | null;
   dual?: boolean | null;
   profile?: VideoProfile;
+  screenShareProfile?: string;
   initialDualStreamMode?: DualStreamMode;
-  role?: ClientRole /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
+  role?: ClientRoleType /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
   callActive?: boolean;
   encryption?: {
     key: string;
-    mode:
-      | EncryptionMode.AES128XTS
-      | EncryptionMode.AES256XTS
-      | EncryptionMode.AES128ECB;
+    mode: EncryptionMode.Aes128Gcm2 | EncryptionMode.Aes256Gcm2;
+    salt: number[];
   };
   // commented for v1 release
   // lifecycle?: {
@@ -107,6 +152,14 @@ export interface RtcPropsInterface {
   // };
   geoFencing?: boolean;
   audioRoom?: boolean;
+  activeSpeaker?: boolean;
+  preventJoin?: boolean;
+
+  //core only
+  screenShareUid?: number;
+  screenShareToken?: string;
+  recordingBot?: false;
+  //core only
 }
 
 export interface CallbacksInterface {
@@ -114,19 +167,26 @@ export interface CallbacksInterface {
   FullScreen(): void; //?
   SwitchCamera(): void; //Not in reducer
   UpdateDualStreamMode(mode: DualStreamMode): void;
-  UserJoined: RtcEngineEvents['UserJoined'];
-  UserOffline: RtcEngineEvents['UserOffline'];
+  UserJoined: IRtcEngineEventHandler['onUserJoined'];
+  UserOffline: IRtcEngineEventHandler['onUserOffline'];
   SwapVideo(uid: UidType): void;
   DequeVideo(uid: UidType): void;
-  UserMuteRemoteAudio(uid: UidType, muted: RenderInterface['audio']): void;
-  UserMuteRemoteVideo(uid: UidType, muted: RenderInterface['video']): void;
-  LocalMuteAudio(muted: ToggleState): void;
-  LocalMuteVideo(muted: ToggleState): void;
-  RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
-  RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
-  JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
-  UpdateRenderList(uid: UidType, user: Partial<RenderInterface>): void;
+  UserMuteRemoteAudio(uid: UidType, muted: ContentInterface['audio']): void;
+  UserMuteRemoteVideo(uid: UidType, muted: ContentInterface['video']): void;
+  LocalMuteAudio(muted: ToggleState, forceDisabled?: boolean): void;
+  LocalMuteVideo(muted: ToggleState, forceDisabled?: boolean): void;
+  LocalPermissionState(
+    permissionState: ContentInterface['permissionStatus'],
+  ): void;
+  RemoteAudioStateChanged: IRtcEngineEventHandler['onRemoteAudioStateChanged'];
+  RemoteVideoStateChanged: IRtcEngineEventHandler['onRemoteVideoStateChanged'];
+  JoinChannelSuccess: IRtcEngineEventHandler['onJoinChannelSuccess'];
+  UpdateRenderList(uid: UidType, user: Partial<ContentInterface>): void;
   AddCustomContent(uid: UidType, data: any): void;
+  RemoveCustomContent(uid: UidType): void;
+  UserPin(Uid: UidType): void;
+  UserSecondaryPin(Uid: UidType): void;
+  ActiveSpeaker(Uid: UidType): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;
@@ -135,19 +195,20 @@ export interface PropsInterface {
   rtcProps: RtcPropsInterface;
   styleProps?: Partial<StylePropInterface>;
   callbacks?: Partial<CallbacksInterface>;
-  mode?: ChannelProfile;
+  mode?: ChannelProfileType;
 }
 
-const initialValue: PropsInterface = {
+const initialValue: Partial<PropsInterface> = {
   rtcProps: {
     appId: '',
     channel: '',
     geoFencing: true,
     audioRoom: false,
+    preventJoin: true,
   },
 };
 
-const PropsContext = React.createContext<PropsInterface>(initialValue);
+const PropsContext = React.createContext<Partial<PropsInterface>>(initialValue);
 
 export const PropsProvider = PropsContext.Provider;
 export const PropsConsumer = PropsContext.Consumer;

package/template/agora-rn-uikit/src/Contexts/RtcContext.tsx

@@ -1,17 +1,37 @@
 import React from 'react';
 import {CallbacksInterface} from './PropsContext';
-import RtcEngine from 'react-native-agora';
-import type {DualStreamMode, RenderInterface} from './PropsContext';
+import {IRtcEngine} from 'react-native-agora';
+import type {DualStreamMode, ContentInterface} from './PropsContext';
 
 export type UidType = number;
 
-export interface RenderObjects {
-  [key: number]: RenderInterface;
+export interface ContentObjects {
+  [key: number]: ContentInterface;
 }
 
-export interface RenderStateInterface {
-  renderList: RenderObjects;
+type JSXElement = () => JSX.Element;
+export interface CustomContentInferface {
+  uid: UidType;
+  component: boolean | React.ComponentType | JSXElement;
+  props: any;
+  onStage?: boolean; //true by default
+}
+
+export interface CustomContentObjects {
+  [key: number]: CustomContentInferface;
+}
+export interface ContentStateInterface {
+  customContent?: CustomContentObjects;
+  setCustomContent: (
+    uid: CustomContentInferface['uid'],
+    component: CustomContentInferface['component'],
+    props?: CustomContentInferface['props'],
+    onStage?: CustomContentInferface['onStage'],
+  ) => void;
+  defaultContent: ContentObjects;
   activeUids: Array<UidType>;
+  pinnedUid?: UidType;
+  secondaryPinnedUid?: UidType;
   lastJoinedUid?: UidType;
 }
 
@@ -20,19 +40,10 @@ export interface ActionInterface<T extends keyof CallbacksInterface> {
   value: Parameters<CallbacksInterface[T]>;
 }
 
-export type DispatchType = <
-  T extends keyof CallbacksInterface,
-  V extends Parameters<CallbacksInterface[T]>,
->(action: {
-  type: T;
-  value: V;
-}) => void;
-
 export type ActionType<T extends keyof CallbacksInterface> = ActionInterface<T>;
 
 export interface RtcContextInterface {
-  RtcEngine: RtcEngine;
-  dispatch: DispatchType;
+  RtcEngineUnsafe: IRtcEngine;
   setDualStreamMode: React.Dispatch<React.SetStateAction<DualStreamMode>>;
 }
 

package/template/agora-rn-uikit/src/Controls/BtnTemplate.tsx

@@ -5,9 +5,11 @@ import {
   StyleProp,
   TouchableOpacityProps,
   ViewStyle,
+  TextStyle,
   Text,
   View,
   Platform,
+  ImageStyle,
 } from 'react-native';
 import PropsContext from '../Contexts/PropsContext';
 import styles from '../Style';
@@ -16,13 +18,15 @@ import useImageDelay from '../hooks/useImageDelay';
 import {Either} from './types';
 
 interface BtnTemplateBasicInterface {
-  color?: string;
   onPress?: TouchableOpacityProps['onPress'];
   style?: StyleProp<ViewStyle>;
+  styleText?: TextStyle;
+  styleIcon?: ImageStyle;
   btnText?: string;
   disabled?: boolean;
 }
 interface BtnTemplateInterfaceWithName extends BtnTemplateBasicInterface {
+  //@ts-ignore
   name?: keyof IconsInterface;
 }
 interface BtnTemplateInterfaceWithIcon extends BtnTemplateBasicInterface {
@@ -41,40 +45,41 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
   const imageRef = React.useRef(null);
 
   // This fixes the tint issue in safari browser
-  useImageDelay(imageRef, 10, '', props?.color || '');
+  // useImageDelay(imageRef, 10, '', props?.color || '');
 
   return (
     <TouchableOpacity
-      style={{width: '100%', height: '100%'}}
+      style={props.style}
       disabled={disabled}
       onPress={props.onPress}>
-      <View
+      <Image
+        ref={Platform.OS === 'web' ? imageRef : undefined}
         style={[
-          {...styles.controlBtn, ...(BtnTemplateStyles as object)},
-          props.style as object,
-        ]}>
-        <Image
-          ref={Platform.OS === 'web' ? imageRef : undefined}
-          style={{
+          {
             width: '100%',
             height: '100%',
-            opacity: disabled ? 0.4 : 1,
-            tintColor: disabled ? 'grey' : props.color || theme || '#fff',
-          }}
-          resizeMode={'contain'}
-          source={{
-            uri:
-              props.name && icons[props.name] ? icons[props.name] : props.icon,
-          }}
-        />
-      </View>
+            //opacity: disabled ? 0.4 : 1,
+            //In new design all icons comes with filled color. so don't apply the tintColor
+            //tintColor: disabled ? 'grey' : props.color || theme || '#fff',
+          },
+          props?.styleIcon,
+        ]}
+        resizeMode={'contain'}
+        source={{
+          uri:
+            props?.name && icons[props.name] ? icons[props.name] : props.icon,
+        }}
+      />
       <Text
-        style={{
-          textAlign: 'center',
-          marginTop: 5,
-          color: disabled ? 'grey' : props.color || theme || '#fff',
-          opacity: disabled ? 0.4 : 1,
-        }}>
+        style={[
+          {
+            textAlign: 'center',
+            marginTop: 5,
+            //color: disabled ? 'grey' : props.color || theme || '#fff',
+            //opacity: disabled ? 0.4 : 1,
+          },
+          props?.styleText,
+        ]}>
         {props.btnText}
       </Text>
     </TouchableOpacity>