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

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

@@ -32,23 +32,38 @@ 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 {
   uid: UidType;
   audio: ToggleState;
   video: ToggleState;
   streamType: 'high' | 'low';
   type: 'rtc';
+  permissionStatus?: PermissionState;
+  //applicable only to the screenshare
+  parentUid?: UidType;
 }
-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> {
+interface ExtenedContentInterface extends CustomContentInterface<string> {
   [key: string]: any;
 }
-export type RenderInterface = DefaultRenderInterface | ExtenedRenderInterface;
+export type ContentInterface =
+  | DefaultContentInterface
+  | ExtenedContentInterface;
 
 interface remoteBtnStylesInterface {
   muteRemoteAudio?: StyleProp<ViewStyle>;
@@ -107,6 +122,7 @@ export interface RtcPropsInterface {
   // };
   geoFencing?: boolean;
   audioRoom?: boolean;
+  activeSpeaker?: boolean;
 }
 
 export interface CallbacksInterface {
@@ -118,15 +134,19 @@ export interface CallbacksInterface {
   UserOffline: RtcEngineEvents['UserOffline'];
   SwapVideo(uid: UidType): void;
   DequeVideo(uid: UidType): void;
-  UserMuteRemoteAudio(uid: UidType, muted: RenderInterface['audio']): void;
-  UserMuteRemoteVideo(uid: UidType, muted: RenderInterface['video']): void;
+  UserMuteRemoteAudio(uid: UidType, muted: ContentInterface['audio']): void;
+  UserMuteRemoteVideo(uid: UidType, muted: ContentInterface['video']): void;
   LocalMuteAudio(muted: ToggleState): void;
   LocalMuteVideo(muted: ToggleState): void;
+  LocalPermissionState(
+    permissionState: ContentInterface['permissionStatus'],
+  ): void;
   RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
   RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
   JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
-  UpdateRenderList(uid: UidType, user: Partial<RenderInterface>): void;
+  UpdateRenderList(uid: UidType, user: Partial<ContentInterface>): void;
   AddCustomContent(uid: UidType, data: any): void;
+  UserPin(Uid: UidType): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;

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

@@ -1,17 +1,18 @@
 import React from 'react';
 import {CallbacksInterface} from './PropsContext';
 import RtcEngine from 'react-native-agora';
-import type {DualStreamMode, RenderInterface} from './PropsContext';
+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;
+export interface ContentStateInterface {
+  defaultContent: ContentObjects;
   activeUids: Array<UidType>;
+  pinnedUid?: UidType;
   lastJoinedUid?: UidType;
 }
 
@@ -20,19 +21,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: RtcEngine;
   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,9 +18,10 @@ 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;
 }
@@ -41,40 +44,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>