agora-appbuilder-core 4.0.0-api.6 → 4.0.0-api.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-api.6",
+  "version": "4.0.0-api.8",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/temp.ts

@@ -23,7 +23,8 @@ import {useToggleWhiteboard} from '../src/components/Controls';
 import {ShowInputURL} from '../src/components/Share';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../src/utils/useRemoteMute';
 import getCustomRoute from '../src/utils/getCustomRoute';
-import endCallEveryOne from '../src/utils/endCallEveryOne';
+import TertiaryButton from '../src/atoms/TertiaryButton';
+import useEndCall from '../src/utils/useEndCall';
 export {
   VideoRenderer,
   DispatchContext,
@@ -46,5 +47,6 @@ export {
   useRemoteMute,
   MUTE_REMOTE_TYPE,
   getCustomRoute,
-  endCallEveryOne,
+  TertiaryButton,
+  useEndCall,
 };

package/template/customization-api/typeDefinition.ts

@@ -103,8 +103,7 @@ export interface CustomRoutesInterface {
 export type CustomHookType = () => () => Promise<void>;
 export type EndCallHookType = () => (
   isHost: boolean,
-  history?: any,
-  isTriggeredByHost?: boolean,
+  history: History,
 ) => Promise<void>;
 
 export interface CustomizationApiInterface {

package/template/customization-api/utils.ts

@@ -31,5 +31,4 @@ export {useHistory, useParams} from '../src/components/Router';
 export {isWeb, isIOS, isAndroid, isDesktop} from '../src/utils/common';
 export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
 export {useLocalUid} from '../agora-rn-uikit';
-
-export {default as useDisableButton} from '../src/utils/useDisableButton';
+export {default as useLocalAudio} from '../src/utils/useLocalAudio';

package/template/src/components/ChatContext.ts

@@ -66,8 +66,6 @@ export enum controlMessageEnum {
   requestAudio = '7',
   //newUserJoined = '8',
   kickScreenshare = '9',
-  disableButton = '10',
-  endCallForEveryone = '11',
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/EventsConfigure.tsx

@@ -52,6 +52,7 @@ import {
   waitingRoomApprovalRequiredToastSubHeading,
 } from '../language/default-labels/videoCallScreenLabels';
 import {useString} from '../utils/useString';
+import useEndCall from '../utils/useEndCall';
 
 interface Props {
   children: React.ReactNode;
@@ -157,6 +158,7 @@ const EventsConfigure: React.FC<Props> = props => {
     hostRemovedUserToastHeading,
   )();
 
+  const executeEndCall = useEndCall();
   const removedUserToastRef = useRef(hostRemovedUserToastHeadingTT);
 
   useEffect(() => {
@@ -333,11 +335,6 @@ const EventsConfigure: React.FC<Props> = props => {
       } catch (error) {
         console.log('error on stop the screeshare', error);
       }
-
-      if (!ENABLE_AUTH) {
-        // await authLogout();
-        await authLogin();
-      }
       Toast.show({
         leadingIconName: 'info',
         type: 'info',
@@ -347,22 +344,10 @@ const EventsConfigure: React.FC<Props> = props => {
         secondaryBtn: null,
       });
       setTimeout(() => {
-        dispatch({
-          type: 'EndCall',
-          value: [isHostRef.current, true],
-        });
+        executeEndCall();
       }, 5000);
     });
 
-    events.on(controlMessageEnum.endCallForEveryone, async () => {
-      setTimeout(() => {
-        dispatch({
-          type: 'EndCall',
-          value: [isHostRef.current, true],
-        });
-      }, 1000);
-    });
-
     events.on(controlMessageEnum.requestAudio, () => {
       Toast.show({
         leadingIconName: 'mic-on',

package/template/src/pages/VideoCall.tsx

@@ -323,25 +323,13 @@ const VideoCall: React.FC = () => {
     //     SdkJoinState.promise?.res();
     //   }
     // },
-    EndCall: (isHost, isTriggeredByHost) => {
-      if (afterEndCall) {
-        clearState('join');
-        setTimeout(() => {
-          // TODO: These callbacks are being called twice
-          SDKEvents.emit('leave');
-          try {
-            afterEndCall(isHost, history, isTriggeredByHost);
-          } catch (error) {
-            console.error('ERROR on useAfterEndCall hook', error);
-          }
-        }, 0);
-      } else {
-        setTimeout(() => {
-          // TODO: These callbacks are being called twice
-          SDKEvents.emit('leave');
-          history.push('/');
-        }, 0);
-      }
+    EndCall: () => {
+      clearState('join');
+      setTimeout(() => {
+        // TODO: These callbacks are being called twice
+        SDKEvents.emit('leave');
+        history.push('/');
+      }, 0);
     },
     UserJoined: (uid: UidType) => {
       console.log('UIKIT Callback: UserJoined', uid);

package/template/src/subComponents/LocalAudioMute.tsx

@@ -39,9 +39,6 @@ import {
   toolbarItemMicrophoneText,
   toolbarItemMicrophoneTooltipText,
 } from '../language/default-labels/videoCallScreenLabels';
-import events from '../rtm-events-api';
-import {controlMessageEnum} from '../components/ChatContext';
-import {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * A component to mute / unmute the local audio
@@ -59,45 +56,18 @@ export interface LocalAudioMuteProps {
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
-  const {dispatch} = useContext(DispatchContext);
-  const {RtcEngineUnsafe} = useContext(RtcContext);
-
-  useEffect(() => {
-    events.on(controlMessageEnum.disableButton, async ({payload}) => {
-      try {
-        const data = JSON.parse(payload);
-        if (data && data?.button === MUTE_REMOTE_TYPE.audio) {
-          if (data?.action === true) {
-            RtcEngineUnsafe.muteLocalAudioStream(true);
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [0, true],
-            });
-          } else {
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [0, false],
-            });
-          }
-        }
-      } catch (error) {
-        console.log('debugging error on disableButton');
-      }
-    });
-  }, []);
-
   const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
   } = useRoomInfo();
+
   const {position} = useToolbar();
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
   const {isOnActionSheet, isOnFirstRow, showLabel} = useActionSheet();
   const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
-
   const micButtonLabel = useString<I18nDeviceStatus>(toolbarItemMicrophoneText);
   const micButtonTooltip = useString<I18nDeviceStatus>(
     toolbarItemMicrophoneTooltipText,
@@ -220,7 +190,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
       $config.EVENT_MODE &&
       $config.RAISE_HAND &&
       !isHost) ||
-    local.localAudioForceDisabled
+    local.audioBtnDisabled
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
@@ -228,7 +198,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage =
-      showToolTip && !local.localAudioForceDisabled
+      showToolTip && !local.audioBtnDisabled
         ? lstooltip(isHandRaised(local.uid))
         : '';
     iconButtonProps.disabled = true;

package/template/src/subComponents/LocalEndCall.tsx

@@ -5,19 +5,13 @@ import {Prompt} from '../components/Router';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import {Platform} from 'react-native';
-import useSTTAPI from './caption/useSTTAPI';
-import {useCaption} from './caption/useCaption';
 import {useScreenshare} from './screenshare/useScreenshare';
-import {DispatchContext, PropsContext} from '../../agora-rn-uikit';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
-import RTMEngine from '../rtm/RTMEngine';
-import {useAuth} from '../../src/auth/AuthProvider';
-import {ENABLE_AUTH} from '../../src/auth/config';
-import {useString} from '../../src/utils/useString';
-import {toolbarItemLeaveText} from '../../src/language/default-labels/videoCallScreenLabels';
-import {useCustomization} from 'customization-implementation';
+import {useString} from '../utils/useString';
+import {toolbarItemLeaveText} from '../language/default-labels/videoCallScreenLabels';
+import useEndCall from '../utils/useEndCall';
 
 export interface LocalEndcallProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -25,7 +19,7 @@ export interface LocalEndcallProps {
 }
 
 /* For android only, bg audio */
-const stopForegroundService = () => {
+export const stopForegroundService = () => {
   if (Platform.OS === 'android') {
     ReactNativeForegroundService.stop();
     console.log('stopping foreground service');
@@ -34,56 +28,15 @@ const stopForegroundService = () => {
 
 const LocalEndcall = (props: LocalEndcallProps) => {
   const {isScreenshareActive, stopUserScreenShare} = useScreenshare();
-  const {
-    data: {isHost},
-  } = useRoomInfo();
   const {isToolbarMenuItem} = useToolbarMenu();
-  const {dispatch} = useContext(DispatchContext);
   const {isOnActionSheet, showLabel} = useActionSheet();
   const endCallLabel = useString(toolbarItemLeaveText)();
-  const {defaultContent} = useContent();
   const [endcallVisible, setEndcallVisible] = useState(false);
-  const {stop} = useSTTAPI();
-  const {isSTTActive} = useCaption();
   const onPress = () => {
     setEndcallVisible(true);
   };
   const [endCallState, setEndCallState] = useState(false);
-  const {rtcProps} = useContext(PropsContext);
-  const {authLogout, authLogin} = useAuth();
-
-  const beforeEndCall = useCustomization(
-    data =>
-      data?.lifecycle?.useBeforeEndCall && data?.lifecycle?.useBeforeEndCall(),
-  );
-
-  const executeEndCall = async () => {
-    if (beforeEndCall) {
-      try {
-        beforeEndCall(isHost);
-      } catch (error) {
-        console.error('ERROR on useBeforeEndCall hook', error);
-      }
-    }
-    setTimeout(() => {
-      dispatch({
-        type: 'EndCall',
-        value: [isHost, false],
-      });
-    });
-    // stopping foreground servie on end call
-    stopForegroundService();
-    // stopping STT on call end,if only last user is remaining in call
-    const usersInCall = Object.entries(defaultContent).filter(
-      item => item[1].type === 'rtc',
-    );
-    usersInCall.length === 1 && isSTTActive && stop();
-    RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
-    if (!ENABLE_AUTH) {
-      // await authLogout();
-      await authLogin();
-    }
-  };
+  const executeEndCall = useEndCall();
 
   useEffect(() => {
     if (!isScreenshareActive && endCallState) {

package/template/src/subComponents/LocalVideoMute.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
   ToggleState,
   PermissionState,
@@ -42,9 +42,6 @@ import {
   toolbarItemCameraText,
   toolbarItemCameraTooltipText,
 } from '../language/default-labels/videoCallScreenLabels';
-import events from '../rtm-events-api';
-import {controlMessageEnum} from '../components/ChatContext';
-import {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * A component to mute / unmute the local video
@@ -62,36 +59,6 @@ export interface LocalVideoMuteProps {
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
-  const {dispatch} = useContext(DispatchContext);
-  const {RtcEngineUnsafe} = useContext(RtcContext);
-
-  useEffect(() => {
-    events.on(controlMessageEnum.disableButton, async ({payload}) => {
-      try {
-        const data = JSON.parse(payload);
-        if (data && data?.button === MUTE_REMOTE_TYPE.video) {
-          if (data?.action === true) {
-            isWebInternal()
-              ? await RtcEngineUnsafe.muteLocalVideoStream(true)
-              : //@ts-ignore
-                await RtcEngineUnsafe.enableLocalVideo(false);
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [0, true],
-            });
-          } else {
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [0, false],
-            });
-          }
-        }
-      } catch (error) {
-        console.log('debugging error on disableButton');
-      }
-    });
-  }, []);
-
   const {rtcProps} = useContext(PropsContext);
   const {isScreenshareActive} = useScreenshare();
   const {setShowStopScreenSharePopup} = useVideoCall();
@@ -99,6 +66,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   const {
     data: {isHost},
   } = useRoomInfo();
+
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
@@ -235,7 +203,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
       $config.EVENT_MODE &&
       $config.RAISE_HAND &&
       !isHost) ||
-    local.localVideoForceDisabled
+    local.videoBtnDisabled
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
@@ -243,7 +211,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage =
-      showToolTip && !local.localVideoForceDisabled
+      showToolTip && !local.videoBtnDisabled
         ? lstooltip(isHandRaised(local.uid))
         : '';
     iconButtonProps.disabled = true;

package/template/src/utils/useEndCall.ts

@@ -0,0 +1,65 @@
+import {useContext} from 'react';
+import {useCustomization} from 'customization-implementation';
+import {useCaption, useContent, useRoomInfo} from 'customization-api';
+import {PropsContext, DispatchContext} from '../../agora-rn-uikit';
+import {useHistory} from '../components/Router';
+import {stopForegroundService} from '../subComponents/LocalEndCall';
+import RTMEngine from '../rtm/RTMEngine';
+import {ENABLE_AUTH} from '../auth/config';
+import {useAuth} from '../auth/AuthProvider';
+
+const useEndCall = () => {
+  const history = useHistory();
+  const {defaultContent} = useContent();
+  const {isSTTActive} = useCaption();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const {authLogin} = useAuth();
+
+  const {rtcProps} = useContext(PropsContext);
+  const {dispatch} = useContext(DispatchContext);
+
+  const beforeEndCall = useCustomization(
+    data =>
+      data?.lifecycle?.useBeforeEndCall && data?.lifecycle?.useBeforeEndCall(),
+  );
+  const afterEndCall = useCustomization(
+    data =>
+      data?.lifecycle?.useAfterEndCall && data?.lifecycle?.useAfterEndCall(),
+  );
+
+  return async () => {
+    try {
+      await beforeEndCall(isHost, history as unknown as History);
+    } catch (error) {
+      console.log('debugging error on beforeEndCall');
+    }
+
+    setTimeout(() => {
+      dispatch({
+        type: 'EndCall',
+        value: [],
+      });
+    });
+    // stopping foreground servie on end call
+    stopForegroundService();
+    // stopping STT on call end,if only last user is remaining in call
+    const usersInCall = Object.entries(defaultContent).filter(
+      item => item[1].type === 'rtc',
+    );
+    usersInCall.length === 1 && isSTTActive && stop();
+    RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
+    if (!ENABLE_AUTH) {
+      // await authLogout();
+      await authLogin();
+    }
+    try {
+      await afterEndCall(isHost, history as unknown as History);
+    } catch (error) {
+      console.log('debugging error on afterEndCall');
+    }
+  };
+};
+
+export default useEndCall;

package/template/src/utils/useLocalAudio.ts

@@ -0,0 +1,38 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import {DispatchContext, RtcContext} from '../../agora-rn-uikit';
+import {useContext} from 'react';
+
+function useLocalAudio() {
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+
+  const disableAudioButton = () => {
+    RtcEngineUnsafe.muteLocalAudioStream(true);
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, true],
+    });
+  };
+
+  const enableAudioButton = () => {
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, false],
+    });
+  };
+
+  return {enableAudioButton, disableAudioButton};
+}
+
+export default useLocalAudio;

package/template/src/utils/endCallEveryOne.ts

@@ -1,7 +0,0 @@
-import {controlMessageEnum} from '../components/ChatContext';
-import events from '../rtm-events-api';
-
-const endCallEveryOne = () => {
-  events.send(controlMessageEnum.endCallForEveryone);
-};
-export default endCallEveryOne;

package/template/src/utils/useDisableButton.tsx

@@ -1,37 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-import {useRoomInfo} from '../components/room-info/useRoomInfo';
-import {controlMessageEnum} from '../components/ChatContext';
-import events, {PersistanceLevel} from '../rtm-events-api';
-import {MUTE_REMOTE_TYPE} from './useRemoteMute';
-
-function useDisableButton() {
-  const {
-    data: {isHost},
-  } = useRoomInfo();
-
-  return async (type: MUTE_REMOTE_TYPE, action: boolean = true) => {
-    if (isHost) {
-      events.send(
-        controlMessageEnum.disableButton,
-        JSON.stringify({button: type, action}),
-        PersistanceLevel.None,
-      );
-    } else {
-      console.error(
-        'A host can only enable/disable participants video/audio button.',
-      );
-    }
-  };
-}
-
-export default useDisableButton;