agora-appbuilder-core 1.0.8 → 2.0.1

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

@@ -5,6 +5,7 @@
     "name": "Vineeth Srinivasn",
     "email": "vineeth@agora.io"
   },
+  "main": "./src/index.ts",
   "description": "Agora react native UI KIT. Rapidly integrate video calling into your React Native application with built in UI Elements.",
   "scripts": {
     "android": "react-native run-android",

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import {ScrollView, View} from 'react-native';
-import RtcConfigure from './RTCConfigure';
-import MaxVideoView from './MaxVideoView';
-import MinVideoView from './MinVideoView';
-import {MinUidConsumer} from './MinUidContext';
-import {MaxUidConsumer} from './MaxUidContext';
-import {PropsProvider, PropsInterface} from './PropsContext';
+import RtcConfigure from './RtcConfigure';
+import MaxVideoView from './Views/MaxVideoView';
+import MinVideoView from './Views/MinVideoView';
+import {MinUidConsumer} from './Contexts/MinUidContext';
+import {MaxUidConsumer} from './Contexts/MaxUidContext';
+import {PropsProvider, PropsInterface} from './Contexts/PropsContext';
 
 import styles from './Style';
 import LocalControls from './Controls/LocalControls';
@@ -15,7 +15,7 @@ import LocalControls from './Controls/LocalControls';
 const AgoraUIKit: React.FC<PropsInterface> = (props) => {
   return (
     <PropsProvider value={props}>
-      <View>
+      <View style={{backgroundColor: '#000', flex: 1}}>
         <RtcConfigure>
           <MaxUidConsumer>
             {(maxUsers) => (
@@ -30,7 +30,7 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
             <MinUidConsumer>
               {(minUsers) =>
                 minUsers.map((user) => (
-                  <MinVideoView user={user} key={user.uid} />
+                  <MinVideoView showOverlay user={user} key={user.uid} />
                 ))
               }
             </MinUidConsumer>

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

@@ -1,7 +1,7 @@
 import React, {useContext, createContext} from 'react';
 import MaxUidContext from './MaxUidContext';
 import MinUidContext from './MinUidContext';
-import {UidInterface} from './RtcContext';
+import {UidInterface} from './PropsContext';
 
 export const LocalContext = createContext<UidInterface>({} as UidInterface);
 export const LocalProvider = LocalContext.Provider;

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

@@ -1,13 +1,27 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {RtcEngineEvents} from 'react-native-agora/lib/RtcEvents';
+import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcEvents';
 import {EncryptionMode} from 'react-native-agora';
-import {VideoProfile} from './quality';
-interface UidInterface {
+import {VideoProfile} from '../Utils/quality';
+
+// disabled is intentionally kept as the 1st item in the enum.
+// This way, it evaluates to a falsy value in a if statement
+export enum ToggleState {
+  disabled,
+  enabled,
+  disabling, // enabled -> disabling -> disabled
+  enabling, // disabled -> enabling -> enabled
+}
+
+export const toggleHelper = (state: ToggleState) =>
+  state === ToggleState.enabled ? ToggleState.disabled : ToggleState.enabled;
+
+export interface UidInterface {
   // TODO: refactor local to 0 and remove string.
   uid: number | string;
-  audio: boolean;
-  video: boolean;
+  audio: ToggleState;
+  video: ToggleState;
+  streamType: 'high' | 'low';
 }
 
 interface remoteBtnStylesInterface {
@@ -49,7 +63,8 @@ export interface RtcPropsInterface {
   token?: string | null;
   dual?: boolean | null;
   profile?: VideoProfile;
-  initialDualStreamMode: DualStreamMode;
+  initialDualStreamMode?: DualStreamMode;
+  callActive?: boolean;
   encryption?: {
     key: string;
     mode:
@@ -59,21 +74,24 @@ export interface RtcPropsInterface {
   };
 }
 
-export interface CustomCallbacksInterface {
-  EndCall(): void;
-  FullScreen(): void;
-  SwitchCamera(): void;
+export interface CallbacksInterface {
+  EndCall(): void; //?
+  FullScreen(): void; //?
+  SwitchCamera(): void; //Not in reducer
+  UpdateDualStreamMode(mode: DualStreamMode): void;
+  UserJoined: RtcEngineEvents['UserJoined'];
+  UserOffline: RtcEngineEvents['UserOffline'];
   SwapVideo(user: UidInterface): void;
   UserMuteRemoteAudio(user: UidInterface, muted: UidInterface['audio']): void;
   UserMuteRemoteVideo(user: UidInterface, muted: UidInterface['video']): void;
-  LocalMuteAudio(muted: boolean): void;
-  LocalMuteVideo(muted: boolean): void;
-  UpdateDualStreamMode(mode: DualStreamMode): void;
+  LocalMuteAudio(muted: ToggleState): void;
+  LocalMuteVideo(muted: ToggleState): void;
+  RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
+  RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
+  JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
 }
 
-export interface CallbacksInterface
-  extends RtcEngineEvents,
-    CustomCallbacksInterface {}
+export type CustomCallbacksInterface = CallbacksInterface;
 
 export interface PropsInterface {
   rtcProps: RtcPropsInterface;

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

@@ -1,40 +1,31 @@
 import React, {Dispatch} from 'react';
 import {CallbacksInterface} from './PropsContext';
 import RtcEngine from 'react-native-agora';
-import type {DualStreamMode} from './PropsContext';
-export interface UidInterface {
-  // TODO: refactor local to 0 and remove string.
-  uid: number | string;
-  audio: boolean;
-  video: boolean;
-  streamType: 'high' | 'low';
-}
+import type {DualStreamMode, UidInterface} from './PropsContext';
 
 export interface UidStateInterface {
   min: Array<UidInterface>;
   max: Array<UidInterface>;
 }
 
-export interface ActionInterface<
-  T extends keyof CallbacksInterface,
-  K extends CallbacksInterface
-> {
+export interface ActionInterface<T extends keyof CallbacksInterface> {
   type: T;
-  value: Parameters<K[T]>;
+  value: Parameters<CallbacksInterface[T]>;
 }
 
-export type DispatchType<T extends keyof CallbacksInterface> = Dispatch<
-  ActionInterface<T, CallbacksInterface>
->;
+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,
-  CallbacksInterface
->;
+export type ActionType<T extends keyof CallbacksInterface> = ActionInterface<T>;
 
 export interface RtcContextInterface {
   RtcEngine: RtcEngine;
-  dispatch: DispatchType<keyof CallbacksInterface>;
+  dispatch: DispatchType;
   setDualStreamMode: React.Dispatch<React.SetStateAction<DualStreamMode>>;
 }
 

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

@@ -8,9 +8,11 @@ import {
   Text,
   View,
 } from 'react-native';
-import PropsContext from './../PropsContext';
+import PropsContext from '../Contexts/PropsContext';
 import styles from '../Style';
 import icons, {IconsInterface} from './Icons';
+import useImageDelay from '../../../src/hooks/useImageDelay';
+import isSafariBrowser from '../../../src/utils/isSafariBrowser';
 
 interface BtnTemplateInterface {
   name: keyof IconsInterface;
@@ -18,28 +20,38 @@ interface BtnTemplateInterface {
   onPress?: TouchableOpacityProps['onPress'];
   style?: StyleProp<ViewStyle>;
   btnText?: string;
+  disabled?: boolean;
 }
 
 const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
+  const {disabled = false} = props;
   const {styleProps} = useContext(PropsContext);
   const {BtnTemplateStyles, theme} = styleProps || {};
 
+  const imageRef = React.useRef(null);
+
+  if (isSafariBrowser()) {
+    // This fixes the tint issue in safari browser
+    useImageDelay(imageRef, 10, '');
+  }
+
   return (
-    <TouchableOpacity onPress={props.onPress}>
+    <TouchableOpacity
+      style={{width: '100%', height: '100%'}}
+      disabled={disabled}
+      onPress={props.onPress}>
       <View
-        style={{
-          ...styles.controlBtn,
-          ...(BtnTemplateStyles as object),
-          ...(props.style as object),
-        }}>
+        style={[
+          {...styles.controlBtn, ...(BtnTemplateStyles as object)},
+          props.style as object,
+        ]}>
         <Image
+          ref={imageRef}
           style={{
             width: '100%',
             height: '100%',
-            tintColor:
-              props.name !== 'callEnd'
-                ? theme || props.color || '#fff'
-                : '#FD0845',
+            opacity: disabled ?  0.4 : 1,
+            tintColor: disabled ? 'grey' : ( props.color || theme || '#fff')
           }}
           resizeMode={'contain'}
           source={{uri: icons[props.name]}}
@@ -49,10 +61,8 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
         style={{
           textAlign: 'center',
           marginTop: 5,
-          color:
-            props.name !== 'callEnd'
-              ? theme || props.color || '#fff'
-              : '#FD0845',
+          color: disabled ? 'grey' : (props.color || theme || '#fff'),
+          opacity: disabled ? 0.4 : 1
         }}>
         {props.btnText}
       </Text>