agora-appbuilder-core 2.0.0 → 2.0.1

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

@@ -0,0 +1,138 @@
+import React, {useState, useEffect, useContext, useRef, FC} from 'react';
+import RtcEngine, {
+  VideoEncoderConfiguration,
+  AreaCode,
+} from 'react-native-agora';
+import {Platform} from 'react-native';
+import requestCameraAndAudioPermission from '../Utils/permission';
+import {DispatchType} from '../Contexts/RtcContext';
+import PropsContext, {ToggleState} from '../Contexts/PropsContext';
+import quality from '../Utils/quality';
+
+const Create = ({
+  dispatch,
+  children,
+}: {
+  dispatch: DispatchType;
+  children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
+}) => {
+  const [ready, setReady] = useState(false);
+  const {callbacks, rtcProps} = useContext(PropsContext);
+  let engine = useRef<RtcEngine>({} as RtcEngine);
+
+  useEffect(() => {
+    async function init() {
+      if (Platform.OS === 'android') {
+        //Request required permissions from Android
+        await requestCameraAndAudioPermission();
+      }
+      try {
+        if (Platform.OS === 'android' || Platform.OS === 'ios') {
+          engine.current = await RtcEngine.createWithAreaCode(
+            rtcProps.appId,
+            // eslint-disable-next-line no-bitwise
+            AreaCode.GLOB ^ AreaCode.CN,
+          );
+        } else {
+          engine.current = await RtcEngine.create(rtcProps.appId);
+        }
+        if (rtcProps.profile) {
+          if (Platform.OS === 'web') {
+            // move this to bridge?
+            // @ts-ignore
+            await engine.current.setVideoProfile(rtcProps.profile);
+          } else {
+            const config: VideoEncoderConfiguration = quality[rtcProps.profile];
+            await engine.current.setVideoEncoderConfiguration({
+              ...config,
+              bitrate: 0,
+            });
+          }
+        }
+        try {
+          await engine.current.enableVideo();
+        } catch (e) {
+          dispatch({
+            type: 'LocalMuteAudio',
+            value: [ToggleState.disabled],
+          });
+          dispatch({
+            type: 'LocalMuteVideo',
+            value: [ToggleState.disabled],
+          });
+          console.error('No devices', e);
+        }
+
+        engine.current.addListener(
+          'JoinChannelSuccess',
+          async (channel, uid, elapsed) => {
+            //Invoke the callback
+            console.log('UIkit enabling dual stream', rtcProps.dual);
+            if (rtcProps.dual) {
+              console.log('UIkit enabled dual stream');
+              await engine.current!.enableDualStreamMode(rtcProps.dual);
+              // await engine.current.setRemoteSubscribeFallbackOption(1);
+            }
+            callbacks?.JoinChannelSuccess &&
+              callbacks.JoinChannelSuccess(channel, uid, elapsed);
+          },
+        );
+
+        engine.current.addListener('UserJoined', (...args) => {
+          //Get current peer IDs
+          dispatch({
+            type: 'UserJoined',
+            value: args,
+          });
+        });
+
+        engine.current.addListener('UserOffline', (...args) => {
+          //If user leaves
+          dispatch({
+            type: 'UserOffline',
+            value: args,
+          });
+        });
+
+        engine.current.addListener('RemoteAudioStateChanged', (...args) => {
+          // console.log('RemoteAudioStateChanged', args);
+
+          dispatch({
+            type: 'RemoteAudioStateChanged',
+            value: args,
+          });
+        });
+
+        engine.current.addListener('Error', (e) => {
+          console.log('Error: ', e);
+        });
+
+        engine.current.addListener('RemoteVideoStateChanged', (...args) => {
+          // console.log('RemoteVideoStateChanged', args);
+
+          dispatch({
+            type: 'RemoteVideoStateChanged',
+            value: args,
+          });
+        });
+        setReady(true);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    init();
+    return () => {
+      engine.current!.destroy();
+    };
+  }, []);
+  return (
+    <>
+      {
+        // Render children once RTCEngine has been initialized
+        ready && engine ? children(engine) : <></>
+      }
+    </>
+  );
+};
+
+export default Create;

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

@@ -0,0 +1,100 @@
+import React, {useEffect, useContext, useRef} from 'react';
+import RtcEngine from 'react-native-agora';
+import {UidStateInterface, DispatchType} from '../Contexts/RtcContext';
+import PropsContext, {ToggleState} from '../Contexts/PropsContext';
+import {Platform} from 'react-native';
+
+const Join: React.FC<{
+  precall: boolean;
+  engineRef: React.MutableRefObject<RtcEngine>;
+  uidState: UidStateInterface;
+  dispatch: DispatchType;
+}> = ({children, precall, engineRef, uidState, dispatch}) => {
+  let joinState = useRef(false);
+  const {rtcProps} = useContext(PropsContext);
+
+  useEffect(() => {
+    const engine = engineRef.current;
+    async function leave() {
+      try {
+        console.log('Leaving channel');
+        engine.leaveChannel();
+        joinState.current = false;
+      } catch (err) {
+        console.error('Cannot leave the channel:', err);
+      }
+    }
+    const videoState = uidState.max[0].video;
+    async function join() {
+      if (
+        rtcProps.encryption &&
+        rtcProps.encryption.key &&
+        rtcProps.encryption.mode
+      ) {
+        console.log('using channel encryption', rtcProps.encryption);
+        await engine.enableEncryption(true, {
+          encryptionKey: rtcProps.encryption.key,
+          encryptionMode: rtcProps.encryption.mode,
+        });
+      }
+      if (videoState === ToggleState.enabled && Platform.OS === 'ios') {
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [ToggleState.disabling],
+        });
+        await engine.muteLocalVideoStream(true);
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [ToggleState.disabled],
+        });
+      }
+      await engine.joinChannel(
+        rtcProps.token || null,
+        rtcProps.channel,
+        null,
+        rtcProps.uid || 0,
+      );
+      if (videoState === ToggleState.enabled && Platform.OS === 'ios') {
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [ToggleState.enabling],
+        });
+        await engine.muteLocalVideoStream(false);
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [ToggleState.enabled],
+        });
+      }
+    }
+    async function init() {
+      if (!precall) {
+        if (!joinState.current) {
+          await join();
+          joinState.current = true;
+        } else {
+          await leave();
+          await join();
+        }
+        console.log('Attempted join: ', rtcProps.channel);
+      } else {
+        console.log('In precall - waiting to join');
+      }
+    }
+    init();
+    return () => {
+      if (!precall) {
+        leave();
+      }
+    };
+  }, [
+    rtcProps.channel,
+    rtcProps.uid,
+    rtcProps.token,
+    precall,
+    rtcProps.encryption,
+  ]);
+
+  return <>{children}</>;
+};
+
+export default Join;

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

@@ -0,0 +1,197 @@
+import React, {useState, useReducer, useContext, useCallback} from 'react';
+import {
+  RtcProvider,
+  UidStateInterface,
+  DispatchType,
+  ActionType,
+} from './Contexts/RtcContext';
+import PropsContext, {
+  ToggleState,
+  UidInterface,
+  RtcPropsInterface,
+  CallbacksInterface,
+  DualStreamMode,
+} from './Contexts/PropsContext';
+import {MinUidProvider} from './Contexts/MinUidContext';
+import {MaxUidProvider} from './Contexts/MaxUidContext';
+import {actionTypeGuard} from './Utils/actionTypeGuard';
+
+import {
+  LocalMuteAudio,
+  LocalMuteVideo,
+  RemoteAudioStateChanged,
+  RemoteVideoStateChanged,
+  UpdateDualStreamMode,
+  UserJoined,
+  UserMuteRemoteAudio,
+  UserMuteRemoteVideo,
+  UserOffline,
+} from './Reducer';
+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);
+  let [dualStreamMode, setDualStreamMode] = useState<DualStreamMode>(
+    rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
+  );
+  const [initialState, setInitialState] = React.useState(
+    JSON.parse(JSON.stringify(initialLocalState)),
+  );
+
+  React.useEffect(() => {
+    setInitialState(JSON.parse(JSON.stringify(initialLocalState)));
+  }, []);
+
+  const reducer = (
+    state: UidStateInterface,
+    action: ActionType<keyof CallbacksInterface>,
+  ) => {
+    let stateUpdate = {},
+      uids = [...state.max, ...state.min].map((u: UidInterface) => u.uid);
+
+    switch (action.type) {
+      case 'UpdateDualStreamMode':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UpdateDualStreamMode(state, action);
+        }
+        break;
+      case 'UserJoined':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserJoined(state, action, dualStreamMode, uids);
+        }
+        break;
+      case 'UserOffline':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserOffline(state, action);
+        }
+        break;
+      case 'SwapVideo':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = swapVideo(state, action.value[0]);
+        }
+        break;
+      case 'UserMuteRemoteAudio':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserMuteRemoteAudio(state, action);
+        }
+        break;
+      case 'UserMuteRemoteVideo':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserMuteRemoteVideo(state, action);
+        }
+        break;
+      case 'LocalMuteAudio':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = LocalMuteAudio(state, action);
+        }
+        break;
+      case 'LocalMuteVideo':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = LocalMuteVideo(state, action);
+        }
+        break;
+      case 'RemoteAudioStateChanged':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = RemoteAudioStateChanged(state, action);
+        }
+        break;
+      case 'RemoteVideoStateChanged':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = RemoteVideoStateChanged(state, action);
+        }
+        break;
+    }
+
+    // TODO: remove Handle event listeners
+
+    if (callbacks && callbacks[action.type]) {
+      // @ts-ignore
+      callbacks[action.type].apply(null, action.value);
+      console.log('callback executed');
+    } else {
+      // console.log('callback not found', action.type);
+    }
+
+    // console.log(state, action, stateUpdate);
+
+    return {
+      ...state,
+      ...stateUpdate,
+    };
+  };
+
+  const swapVideo = useCallback(
+    (state: UidStateInterface, ele: UidInterface) => {
+      let newState: UidStateInterface = {
+        min: [],
+        max: [],
+      };
+      // Remove the minimized element which is being swapped out
+      newState.min = state.min.filter((e) => e !== ele);
+
+      let maxEle = state.max[0]; // Element which is currently maximized
+      let minEle = ele;
+
+      if (dualStreamMode === DualStreamMode.DYNAMIC) {
+        maxEle.streamType = 'low'; // set stream quality to low
+        minEle.streamType = 'high'; // set stream quality to high
+
+        // No need to modify the streamType if the mode is not dynamic
+      }
+
+      if (maxEle.uid === 'local') {
+        newState.min.unshift(maxEle);
+      } else {
+        newState.min.push(maxEle);
+      }
+      newState.max = [minEle];
+
+      return newState;
+    },
+    [dualStreamMode],
+  );
+  const [uidState, dispatch]: [UidStateInterface, DispatchType] = useReducer(
+    reducer,
+    initialState,
+  );
+
+  return (
+    <Create dispatch={dispatch}>
+      {(engineRef) => (
+        <Join
+          precall={!rtcProps.callActive}
+          engineRef={engineRef}
+          uidState={uidState}
+          dispatch={dispatch}>
+          <RtcProvider
+            value={{
+              RtcEngine: engineRef.current,
+              dispatch,
+              setDualStreamMode,
+            }}>
+            <MaxUidProvider value={uidState.max}>
+              <MinUidProvider value={uidState.min}>
+                {props.children}
+              </MinUidProvider>
+            </MaxUidProvider>
+          </RtcProvider>
+        </Join>
+      )}
+    </Create>
+  );
+};
+
+export default RtcConfigure;

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

@@ -36,7 +36,7 @@ export default StyleSheet.create({
   },
   minContainer: {
     position: 'absolute',
-    top: 0,
+    top: 15,
     left: 0,
     padding: 0,
     margin: 0,
@@ -44,7 +44,7 @@ export default StyleSheet.create({
   },
   Controls: {
     position: 'absolute',
-    bottom: 70,
+    top: dimensions.height - 120,
     left: 0,
     width: dimensions.width,
     height: 70,
@@ -92,7 +92,7 @@ export default StyleSheet.create({
   remoteBtnContainer: {
     width: '100%',
     display: 'flex',
-    marginVertical: '25%',
+    marginTop: 50,
     flexDirection: 'row',
     justifyContent: 'center',
     alignSelf: 'center',

package/template/agora-rn-uikit/src/Utils/actionTypeGuard.tsx

@@ -0,0 +1,9 @@
+import {CallbacksInterface} from '../Contexts/PropsContext';
+import {ActionType} from '../Contexts/RtcContext';
+
+export function actionTypeGuard<T extends keyof CallbacksInterface>(
+  _act: ActionType<keyof CallbacksInterface>,
+  _type: T,
+): _act is ActionType<T> {
+  return true;
+}

package/template/agora-rn-uikit/src/{MaxVideoView.native.tsx → Views/MaxVideoView.native.tsx}

@@ -1,9 +1,8 @@
 import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
-import styles from './Style';
-import PropsContext from './PropsContext';
-import {UidInterface} from './RtcContext';
-import {View, Text, Image} from 'react-native';
+import styles from '../Style';
+import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+import {View} from 'react-native';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;

package/template/agora-rn-uikit/src/{MaxVideoView.tsx → Views/MaxVideoView.tsx}

@@ -1,9 +1,8 @@
 import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
-import styles from './Style';
-import PropsContext from './PropsContext';
-import {UidInterface} from './RtcContext';
-import {View, Text, Image} from 'react-native';
+import styles from '../Style';
+import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+import {View} from 'react-native';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;

package/template/agora-rn-uikit/src/Views/MinVideoView.tsx

@@ -0,0 +1,86 @@
+import React, {useState, useContext} from 'react';
+import {View, TouchableOpacity, Image} from 'react-native';
+import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
+import styles from '../Style';
+import icons from '../Controls/Icons';
+import RemoteControls from '../Controls/RemoteControls';
+import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+
+const LocalView = RtcLocalView.SurfaceView;
+const RemoteView = RtcRemoteView.SurfaceView;
+
+interface MinViewInterface {
+  user: UidInterface;
+  color?: string;
+  showOverlay?: boolean;
+}
+
+const MinVideoView: React.FC<MinViewInterface> = (props) => {
+  const [overlay, setOverlay] = useState(false);
+  const {styleProps} = useContext(PropsContext);
+  const {minViewStyles, theme, remoteBtnStyles} = styleProps || {};
+  const {minCloseBtnStyles} = remoteBtnStyles || {};
+  const {showOverlay} = props || {};
+
+  return (
+    <View style={{margin: 5}}>
+      {showOverlay ? (
+        <TouchableOpacity onPress={() => setOverlay(true)}>
+          {props.user.uid === 'local' ? (
+            props.user.video ? (
+              <LocalView
+                style={{...styles.minView, ...(minViewStyles as object)}}
+                renderMode={VideoRenderMode.Hidden}
+                zOrderMediaOverlay={true}
+              />
+            ) : (
+              <View style={{flex: 1, backgroundColor: '#f0f', ...styles.minView, ...(minViewStyles as object)}} />
+            )
+          ) : (
+            <RemoteView
+              style={{...styles.minView, ...(minViewStyles as object)}}
+              uid={props.user.uid as number}
+              renderMode={VideoRenderMode.Hidden}
+              zOrderMediaOverlay={true}
+            />
+          )}
+        </TouchableOpacity>
+      ) : props.user.uid === 'local' ? (
+        <LocalView
+          style={{...styles.minView, ...(minViewStyles as object)}}
+          renderMode={VideoRenderMode.Hidden}
+          zOrderMediaOverlay={true}
+        />
+      ) : (
+        <RemoteView
+          style={{...styles.minView, ...(minViewStyles as object)}}
+          uid={props.user.uid as number}
+          renderMode={VideoRenderMode.Hidden}
+          zOrderMediaOverlay={true}
+        />
+      )}
+
+      {overlay && showOverlay ? (
+        <View style={styles.minOverlay}>
+          <TouchableOpacity
+            style={{...styles.minCloseBtn, ...(minCloseBtnStyles as object)}}
+            onPress={() => setOverlay(!overlay)}>
+            <Image
+              style={{
+                width: 25,
+                height: 25,
+                tintColor: theme || props.color || '#fff',
+              }}
+              source={{uri: icons.close}}
+            />
+          </TouchableOpacity>
+          <RemoteControls showRemoteSwap={true} user={props.user} />
+        </View>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+};
+
+export default MinVideoView;

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

@@ -0,0 +1,67 @@
+export {default as default} from './AgoraUIKit';
+export {default as RtcConfigure} from './RtcConfigure';
+
+export {default as MaxVideoView} from './Views/MaxVideoView';
+export {default as MinVideoView} from './Views/MinVideoView';
+
+export {
+  default as LocalUserContext,
+  LocalConsumer,
+  LocalProvider,
+  LocalContext,
+} from './Contexts/LocalUserContext';
+export {
+  default as MaxUidContext,
+  MaxUidConsumer,
+  MaxUidProvider,
+} from './Contexts/MaxUidContext';
+export {
+  default as MinUidContext,
+  MinUidConsumer,
+  MinUidProvider,
+} from './Contexts/MinUidContext';
+
+export {
+  default as PropsContext,
+  PropsConsumer,
+  PropsProvider,
+} from './Contexts/PropsContext';
+
+export {DualStreamMode} from './Contexts/PropsContext';
+
+export type {
+  UidInterface,
+  ToggleState,
+  RtcPropsInterface,
+  CallbacksInterface,
+  CustomCallbacksInterface,
+  PropsInterface,
+} from './Contexts/PropsContext';
+
+export {
+  default as RtcContext,
+  RtcConsumer,
+  RtcProvider,
+} from './Contexts/RtcContext';
+export type {
+  RtcContextInterface,
+  DispatchType,
+  UidStateInterface,
+  ActionInterface,
+  ActionType,
+} from './Contexts/RtcContext';
+
+export {default as BtnTemplate} from './Controls/BtnTemplate';
+export {default as Endcall} from './Controls/Local/EndCall';
+export {default as FullScreen} from './Controls/Local/FullScreen';
+export {default as LocalAudioMute} from './Controls/Local/LocalAudioMute';
+export {default as LocalVideoMute} from './Controls/Local/LocalVideoMute';
+export {default as SwitchCamera} from './Controls/Local/SwitchCamera';
+export {default as Controls} from './Controls/LocalControls';
+
+export {default as RemoteAudioMute} from './Controls/Remote/RemoteAudioMute';
+export {default as RemoteSwap} from './Controls/Remote/RemoteSwap';
+export {default as RemoteVideoMute} from './Controls/Remote/RemoteVideoMute';
+export {default as RemoteControls} from './Controls/RemoteControls';
+
+export {default as ImageIcon} from './Controls/ImageIcon';