agora-appbuilder-core 3.0.8 → 3.0.10

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

@@ -16,6 +16,10 @@ interface LocalUserContextInterface {
 
 const LocalUserContext: React.FC<LocalUserContextInterface> = (props) => {
   const {renderList} = useContext(RenderContext);
+  if (!props?.localUid) {
+    console.error('Error: local user id is empty');
+    return null;
+  }
   let localUser: RenderInterface = renderList[props?.localUid];
   if (!localUser) {
     console.error("Error: we couldn't find the local user data");

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

@@ -32,6 +32,16 @@ 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;
 
@@ -41,6 +51,9 @@ export interface DefaultRenderInterface {
   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;
@@ -122,11 +135,16 @@ export interface CallbacksInterface {
   UserMuteRemoteVideo(uid: UidType, muted: RenderInterface['video']): void;
   LocalMuteAudio(muted: ToggleState): void;
   LocalMuteVideo(muted: ToggleState): void;
+  LocalPermissionState(
+    permissionState: RenderInterface['permissionStatus'],
+  ): void;
   RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
   RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
+  ActiveSpeakerDetected: RtcEngineEvents['ActiveSpeaker'];
   JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
   UpdateRenderList(uid: UidType, user: Partial<RenderInterface>): void;
   AddCustomContent(uid: UidType, data: any): void;
+  UserPin(Uid: UidType): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;

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

@@ -12,6 +12,8 @@ export interface RenderObjects {
 export interface RenderStateInterface {
   renderList: RenderObjects;
   activeUids: Array<UidType>;
+  activeSpeaker?: UidType;
+  pinnedUid?: UidType;
   lastJoinedUid?: UidType;
 }
 

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>