agora-appbuilder-core 2.0.1 → 2.0.3-rc2

package/template/agora-rn-uikit/.git/logs/HEAD

@@ -1,2 +1,2 @@
-0000000000000000000000000000000000000000 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 nitte93 <nitte.tiwari1993@gmail.com> 1643712825 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
-7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 3fad3e8996dbe300efbf023d89d38aae24bbb26f nitte93 <nitte.tiwari1993@gmail.com> 1643712825 +0530	checkout: moving from master to ab-dev-auto
+0000000000000000000000000000000000000000 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 nitte93 <nitte.tiwari1993@gmail.com> 1648625876 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
+7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 bdb1c4d92e97621ce53b0f1120956832f7617af9 nitte93 <nitte.tiwari1993@gmail.com> 1648625876 +0530	checkout: moving from master to ab-dev-auto

package/template/agora-rn-uikit/.git/logs/refs/heads/ab-dev-auto

@@ -1 +1 @@
-0000000000000000000000000000000000000000 3fad3e8996dbe300efbf023d89d38aae24bbb26f nitte93 <nitte.tiwari1993@gmail.com> 1643712825 +0530	branch: Created from refs/remotes/origin/ab-dev-auto
+0000000000000000000000000000000000000000 bdb1c4d92e97621ce53b0f1120956832f7617af9 nitte93 <nitte.tiwari1993@gmail.com> 1648625876 +0530	branch: Created from refs/remotes/origin/ab-dev-auto

package/template/agora-rn-uikit/.git/logs/refs/heads/master

@@ -1 +1 @@
-0000000000000000000000000000000000000000 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 nitte93 <nitte.tiwari1993@gmail.com> 1643712825 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
+0000000000000000000000000000000000000000 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 nitte93 <nitte.tiwari1993@gmail.com> 1648625876 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit

package/template/agora-rn-uikit/.git/logs/refs/remotes/origin/HEAD

@@ -1 +1 @@
-0000000000000000000000000000000000000000 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 nitte93 <nitte.tiwari1993@gmail.com> 1643712825 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit
+0000000000000000000000000000000000000000 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 nitte93 <nitte.tiwari1993@gmail.com> 1648625876 +0530	clone: from https://github.com/AgoraIO-Community/ReactNative-UIKit

package/template/agora-rn-uikit/.git/packed-refs

@@ -1,12 +1,14 @@
 # pack-refs with: peeled fully-peeled sorted 
-3fad3e8996dbe300efbf023d89d38aae24bbb26f refs/remotes/origin/ab-dev-auto
+bdb1c4d92e97621ce53b0f1120956832f7617af9 refs/remotes/origin/ab-dev-auto
 fd59daf4876e4eb142856957f9450ef5175f4e0f refs/remotes/origin/app-builder
 c60cde905c722aeaf8f25aeed2910a7b4d532cfa refs/remotes/origin/app-builder-dev
 83064dc5031b9a88a170c6b91ee725ad072eadb1 refs/remotes/origin/bugfix/camera-green-light-on-precall
 5d4f38ae0a89b20275e2497a4e8f43b0ca2830e4 refs/remotes/origin/dev
 4ec093e51924049e37d247d867a5482a9376a8cf refs/remotes/origin/docs
 002960cf34f06ffd3e905e6de9865460f02bd910 refs/remotes/origin/feat/icon-tint
-233d494c4dfc2a18ce598f3a12f419ec894e91f5 refs/remotes/origin/feature/ui-kit/raise-hand
+c7d21d289c4e930f57cbe3a2eefbbfc0d9741c6f refs/remotes/origin/feature/fpe-internationlization
+bfdb92d89cf66d270bed81748c39330846532d07 refs/remotes/origin/feature/life_cycle_events
+7c60e844f617d9c0faf6aa968fdf16b16d0e59ce refs/remotes/origin/feature/ui-kit/raise-hand
 7f9cd41e1bf3ea1b110e2706c7e4c5a921230647 refs/remotes/origin/master
 01ad019ae514b6502b64a30b357a20af49b8c8a5 refs/remotes/origin/refactor
 ac8929fda04db3663a7c1eb9c71ca6a97728f0eb refs/remotes/origin/v2-legacy

package/template/agora-rn-uikit/.git/refs/heads/ab-dev-auto

@@ -1 +1 @@
-3fad3e8996dbe300efbf023d89d38aae24bbb26f
+bdb1c4d92e97621ce53b0f1120956832f7617af9

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

@@ -4,6 +4,24 @@ import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcE
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
 
+/* 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,
+}
+
+/* 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,
+}
+
 // 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 {
@@ -29,6 +47,7 @@ interface remoteBtnStylesInterface {
   muteRemoteVideo?: StyleProp<ViewStyle>;
   remoteSwap?: StyleProp<ViewStyle>;
   minCloseBtnStyles?: StyleProp<ViewStyle>;
+  liveStreamHostControlBtns?: StyleProp<ViewStyle>;
 }
 
 interface localBtnStylesInterface {
@@ -64,6 +83,7 @@ export interface RtcPropsInterface {
   dual?: boolean | null;
   profile?: VideoProfile;
   initialDualStreamMode?: DualStreamMode;
+  role?: ClientRole /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
   callActive?: boolean;
   encryption?: {
     key: string;
@@ -97,6 +117,7 @@ export interface PropsInterface {
   rtcProps: RtcPropsInterface;
   styleProps?: Partial<StylePropInterface>;
   callbacks?: Partial<CallbacksInterface>;
+  mode?: ChannelProfile;
 }
 
 const initialValue: PropsInterface = {

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

@@ -7,21 +7,31 @@ import {
   ViewStyle,
   Text,
   View,
+  Platform,
 } from 'react-native';
 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';
+import useImageDelay from '../hooks/useImageDelay';
+import {Either} from './types';
 
-interface BtnTemplateInterface {
-  name: keyof IconsInterface;
+interface BtnTemplateBasicInterface {
   color?: string;
   onPress?: TouchableOpacityProps['onPress'];
   style?: StyleProp<ViewStyle>;
   btnText?: string;
   disabled?: boolean;
 }
+interface BtnTemplateInterfaceWithName extends BtnTemplateBasicInterface {
+  name?: keyof IconsInterface;
+}
+interface BtnTemplateInterfaceWithIcon extends BtnTemplateBasicInterface {
+  icon?: any;
+}
+type BtnTemplateInterface = Either<
+  BtnTemplateInterfaceWithIcon,
+  BtnTemplateInterfaceWithName
+>;
 
 const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
   const {disabled = false} = props;
@@ -30,10 +40,8 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
 
   const imageRef = React.useRef(null);
 
-  if (isSafariBrowser()) {
-    // This fixes the tint issue in safari browser
-    useImageDelay(imageRef, 10, '');
-  }
+  // This fixes the tint issue in safari browser
+  useImageDelay(imageRef, 10, '', props?.color || '');
 
   return (
     <TouchableOpacity
@@ -46,23 +54,23 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
           props.style as object,
         ]}>
         <Image
-          ref={imageRef}
+          ref={Platform.OS === 'web' ? imageRef : undefined}
           style={{
             width: '100%',
             height: '100%',
-            opacity: disabled ?  0.4 : 1,
-            tintColor: disabled ? 'grey' : ( props.color || theme || '#fff')
+            opacity: disabled ? 0.4 : 1,
+            tintColor: disabled ? 'grey' : props.color || theme || '#fff',
           }}
           resizeMode={'contain'}
-          source={{uri: icons[props.name]}}
+          source={{uri: props.name ? icons[props.name] : props.icon}}
         />
       </View>
       <Text
         style={{
           textAlign: 'center',
           marginTop: 5,
-          color: disabled ? 'grey' : (props.color || theme || '#fff'),
-          opacity: disabled ? 0.4 : 1
+          color: disabled ? 'grey' : props.color || theme || '#fff',
+          opacity: disabled ? 0.4 : 1,
         }}>
         {props.btnText}
       </Text>

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

@@ -10,42 +10,46 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {Image, StyleProp, ViewStyle} from 'react-native';
+import {Image, Platform, StyleProp, ViewStyle} from 'react-native';
 import icons, {IconsInterface} from './Icons';
 import PropsContext from './../Contexts/PropsContext';
-import useImageDelay from './../../../src/hooks/useImageDelay';
-import isSafariBrowser from '../../../src/utils/isSafariBrowser';
+import useImageDelay from '../hooks/useImageDelay';
+import {Either} from './types';
 
-interface ImageIconInterface {
-  name: keyof IconsInterface;
+interface BaseInterface {
   color?: string;
   style?: StyleProp<ViewStyle>;
 }
 
+interface BaseInterfaceWithName extends BaseInterface {
+  name?: keyof IconsInterface;
+}
+interface BaseInterfaceWithIcon extends BaseInterface {
+  icon?: any;
+}
+
+type ImageIconInterface = Either<BaseInterfaceWithName, BaseInterfaceWithIcon>;
+
 const ImageIcon: React.FC<ImageIconInterface> = (props) => {
   const {styleProps} = useContext(PropsContext);
   const {theme} = styleProps || {};
   const imageRef = React.useRef(null);
 
-  if (isSafariBrowser()) {
-    // This hook renders the image after a delay to fix
-    // tint issue in safari browser
-    useImageDelay(imageRef, 10, props.name);
-  }
+  useImageDelay(imageRef, 10, props?.name || '', props?.color);
 
   return (
     <Image
-      ref={imageRef}
+      ref={Platform.OS === 'web' ? imageRef : undefined}
       style={[
         {
           width: '100%',
           height: '100%',
-          tintColor: props.color || theme || '#fff'              
+          tintColor: props.color || theme || '#fff',
         },
         props.style as object,
       ]}
       resizeMode={'contain'}
-      source={{uri: icons[props.name]}}
+      source={{uri: props.name ? icons[props.name] : props.icon}}
     />
   );
 };

package/template/agora-rn-uikit/src/Controls/types.ts

@@ -0,0 +1,4 @@
+export type Only<T, U> = {[P in keyof T]: T[P]} &
+  Omit<{[P in keyof U]?: never}, keyof T>;
+
+export type Either<T, U> = Only<T, U> | Only<U, T>;

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -6,7 +6,11 @@ import RtcEngine, {
 import {Platform} from 'react-native';
 import requestCameraAndAudioPermission from '../Utils/permission';
 import {DispatchType} from '../Contexts/RtcContext';
-import PropsContext, {ToggleState} from '../Contexts/PropsContext';
+import PropsContext, {
+  ToggleState,
+  ClientRole,
+  ChannelProfile,
+} from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
 
 const Create = ({
@@ -17,8 +21,10 @@ const Create = ({
   children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
 }) => {
   const [ready, setReady] = useState(false);
-  const {callbacks, rtcProps} = useContext(PropsContext);
+  const {callbacks, rtcProps, mode} = useContext(PropsContext);
   let engine = useRef<RtcEngine>({} as RtcEngine);
+  const isVideoEnabledRef = useRef<boolean>(false);
+  const firstUpdate = useRef(true);
 
   useEffect(() => {
     async function init() {
@@ -36,6 +42,19 @@ const Create = ({
         } else {
           engine.current = await RtcEngine.create(rtcProps.appId);
         }
+        /* Live Streaming */
+        if (mode == ChannelProfile.LiveBroadcasting) {
+          await engine.current.setChannelProfile(
+            ChannelProfile.LiveBroadcasting,
+          );
+          await engine.current.setClientRole(
+            rtcProps.role === ClientRole.Audience
+              ? ClientRole.Audience
+              : ClientRole.Broadcaster,
+          );
+        } else {
+          await engine.current.setChannelProfile(ChannelProfile.Communication);
+        }
         if (rtcProps.profile) {
           if (Platform.OS === 'web') {
             // move this to bridge?
@@ -49,18 +68,36 @@ const Create = ({
             });
           }
         }
-        try {
-          await engine.current.enableVideo();
-        } catch (e) {
-          dispatch({
-            type: 'LocalMuteAudio',
-            value: [ToggleState.disabled],
-          });
-          dispatch({
-            type: 'LocalMuteVideo',
-            value: [ToggleState.disabled],
-          });
-          console.error('No devices', e);
+
+        /**
+         * API enableVideo :
+         * On Web -> Asks permissions and then creates microphone and camera tracks
+         * On Native -> Used to start the call in video module
+         * The following condition allows enableVideo API to run in all the conditions
+         * except when mode is livestreaming && user is attendee && running on web,
+         * thereby not asking permissions and not creating tracks for attendees
+         */
+        if (
+          !(
+            mode === ChannelProfile.LiveBroadcasting &&
+            rtcProps.role == ClientRole.Audience &&
+            Platform.OS === 'web'
+          )
+        ) {
+          try {
+            await engine.current.enableVideo();
+            isVideoEnabledRef.current = true;
+          } catch (e) {
+            dispatch({
+              type: 'LocalMuteAudio',
+              value: [ToggleState.disabled],
+            });
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [ToggleState.disabled],
+            });
+            console.error('No devices', e);
+          }
         }
 
         engine.current.addListener(
@@ -95,8 +132,6 @@ const Create = ({
         });
 
         engine.current.addListener('RemoteAudioStateChanged', (...args) => {
-          // console.log('RemoteAudioStateChanged', args);
-
           dispatch({
             type: 'RemoteAudioStateChanged',
             value: args,
@@ -108,8 +143,6 @@ const Create = ({
         });
 
         engine.current.addListener('RemoteVideoStateChanged', (...args) => {
-          // console.log('RemoteVideoStateChanged', args);
-
           dispatch({
             type: 'RemoteVideoStateChanged',
             value: args,
@@ -124,7 +157,72 @@ const Create = ({
     return () => {
       engine.current!.destroy();
     };
-  }, []);
+  }, [rtcProps.appId]);
+
+  useEffect(() => {
+    const toggleRole = async () => {
+      if (mode == ChannelProfile.LiveBroadcasting) {
+        if (rtcProps.role == ClientRole.Broadcaster) {
+          await engine.current?.setClientRole(ClientRole.Broadcaster);
+          // isVideoEnabledRef checks if the permission is already taken once
+          if (!isVideoEnabledRef.current) {
+            try {
+              // This creates local audio and video track
+              await engine.current?.enableVideo();
+              isVideoEnabledRef.current = true;
+            } catch (error) {
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [ToggleState.disabled],
+              });
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [ToggleState.disabled],
+              });
+            }
+          }
+          if (isVideoEnabledRef.current) {
+            // This unpublishes the current track
+            await engine.current?.muteLocalAudioStream(true);
+            await engine.current?.muteLocalVideoStream(true);
+            // This updates the uid interface
+            dispatch({
+              type: 'LocalMuteAudio',
+              value: [ToggleState.disabled],
+            });
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [ToggleState.disabled],
+            });
+          }
+        }
+        if (rtcProps.role == ClientRole.Audience) {
+          /**
+           * To switch the user role back to "audience", call unpublish first
+           * Otherwise the setClientRole method call fails and throws an exception.
+           */
+          await engine.current?.muteLocalAudioStream(true);
+          await engine.current?.muteLocalVideoStream(true);
+          dispatch({
+            type: 'LocalMuteAudio',
+            value: [ToggleState.disabled],
+          });
+          dispatch({
+            type: 'LocalMuteVideo',
+            value: [ToggleState.disabled],
+          });
+          await engine.current?.setClientRole(ClientRole.Audience);
+        }
+      }
+    };
+    // The firstUpdateCurrent ref skips the render of this block for the first time
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+    toggleRole();
+  }, [rtcProps.role]);
+
   return (
     <>
       {

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

@@ -11,6 +11,8 @@ import PropsContext, {
   RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
+  ClientRole,
+  ChannelProfile,
 } from './Contexts/PropsContext';
 import {MinUidProvider} from './Contexts/MinUidContext';
 import {MaxUidProvider} from './Contexts/MaxUidContext';
@@ -30,23 +32,32 @@ import {
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
 
-const initialLocalState: UidStateInterface = {
-  min: [],
-  max: [
-    {
-      uid: 'local',
-      audio: ToggleState.enabled,
-      video: ToggleState.enabled,
-      streamType: 'high',
-    },
-  ],
-};
-
 const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
-  const {callbacks, rtcProps} = useContext(PropsContext);
+  const {callbacks, rtcProps, mode} = useContext(PropsContext);
   let [dualStreamMode, setDualStreamMode] = useState<DualStreamMode>(
     rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
   );
+
+  const initialLocalState: UidStateInterface = {
+    min: [],
+    max: [
+      {
+        uid: 'local',
+        audio:
+          mode == ChannelProfile.LiveBroadcasting &&
+          rtcProps?.role == ClientRole.Audience
+            ? ToggleState.disabled
+            : ToggleState.enabled,
+        video:
+          mode == ChannelProfile.LiveBroadcasting &&
+          rtcProps?.role == ClientRole.Audience
+            ? ToggleState.disabled
+            : ToggleState.enabled,
+        streamType: 'high',
+      },
+    ],
+  };
+
   const [initialState, setInitialState] = React.useState(
     JSON.parse(JSON.stringify(initialLocalState)),
   );

package/template/{src/utils/isSafariBrowser.tsx → agora-rn-uikit/src/Utils/isSafariBrowser.ts}

@@ -1,4 +1,7 @@
+import {Platform} from 'react-native';
+
 const isSafariBrowser = () => {
+  if (Platform.OS !== 'web') return false;
   if (!('userAgent' in navigator)) {
     console.warn('unable to detect browser');
     return false;

package/template/{src → agora-rn-uikit/src}/hooks/useImageDelay.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
+import isSafariBrowser from '../Utils/isSafariBrowser';
 
 function useImageDelay(
   elementRef: any,
   delay: number | null,
   imageName: string,
+  tintColor?: string,
 ) {
-  // Remember the latest callback if it changes.
   React.useEffect(() => {
+    if (!isSafariBrowser()) return;
     // The following block allows to repaint the icon
     let imageElement: any;
     if (elementRef && elementRef.current) {
@@ -21,8 +23,9 @@ function useImageDelay(
         imageElement.style.display = 'initial';
       }
     }, delay);
+
     return () => clearTimeout(timer);
-  }, [imageName]);
+  }, [imageName, tintColor]);
 }
 
 export default useImageDelay;

package/template/agora-rn-uikit/src/index.ts

@@ -38,6 +38,8 @@ export type {
   PropsInterface,
 } from './Contexts/PropsContext';
 
+export {ClientRole, ChannelProfile} from './Contexts/PropsContext';
+
 export {
   default as RtcContext,
   RtcConsumer,