agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/src/utils/{useButtonTemplate.tsx → useFocus.tsx}

@@ -10,34 +10,37 @@
 *********************************************
 */
 
-import React from 'react';
+import React, {SetStateAction} from 'react';
 import {createHook} from 'customization-implementation';
 
-export enum ButtonTemplateName {
-  topBar,
-  bottomBar,
+export interface currentFocus {
+  editName: boolean;
 }
-
-export interface ButtonTemplateInferface {
-  buttonTemplateName?: ButtonTemplateName;
+export interface FocusContextInterface {
+  currentFocus: currentFocus;
+  setFocus: React.Dispatch<SetStateAction<currentFocus>>;
 }
 
-const ButtonTemplateContext = React.createContext<ButtonTemplateInferface>({
-  buttonTemplateName: undefined,
+const FocusContext = React.createContext<FocusContextInterface>({
+  currentFocus: {editName: false},
+  setFocus: () => {},
 });
 
-interface ButtonTemplateProviderProps {
-  value: ButtonTemplateInferface;
+interface FocusProviderProps {
+  value: FocusContextInterface;
   children: React.ReactNode;
 }
-const ButtonTemplateProvider = (props: ButtonTemplateProviderProps) => {
+const FocusProvider = (props: FocusProviderProps) => {
   return (
-    <ButtonTemplateContext.Provider value={{...props.value}}>
+    <FocusContext.Provider value={{...props.value}}>
       {props.children}
-    </ButtonTemplateContext.Provider>
+    </FocusContext.Provider>
   );
 };
 
-const useButtonTemplate = createHook(ButtonTemplateContext);
+/**
+ * The Focus app state governs the chatinput and editname.
+ */
+const useFocus = createHook(FocusContext);
 
-export {ButtonTemplateProvider, useButtonTemplate};
+export {FocusProvider, useFocus};

package/template/src/utils/useGetMeetingPhrase.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react';
 import {gql} from '@apollo/client';
-import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import {GraphQLContext} from '../components/GraphQLProvider';
 
 const SHARE = gql`
@@ -22,7 +22,7 @@ const SHARE = gql`
 `;
 
 export default function useGetMeetingPhrase() {
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   const {client} = useContext(GraphQLContext);
   return async (phrase: string) => {
     const response = await client.query({
@@ -37,28 +37,28 @@ export default function useGetMeetingPhrase() {
       try {
         if (response && response.data) {
           let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+          let roomInfo: Partial<RoomInfoContextInterface['data']> = {
             roomId: {attendee: ''},
           };
           if (data?.share?.passphrase?.view) {
-            meetingInfo.roomId.attendee = data.share.passphrase.view;
+            roomInfo.roomId.attendee = data.share.passphrase.view;
           }
           if (data?.share?.passphrase?.host) {
-            meetingInfo.roomId.host = data.share.passphrase.host;
+            roomInfo.roomId.host = data.share.passphrase.host;
           }
           if (data?.share?.pstn) {
-            meetingInfo.pstn = {
+            roomInfo.pstn = {
               number: data.share.pstn.number,
               pin: data.share.pstn.dtmf,
             };
           }
-          setMeetingInfo((prevState) => {
+          setRoomInfo((prevState) => {
             return {
               ...prevState,
               data: {
                 ...prevState.data,
-                roomId: meetingInfo.roomId,
-                pstn: meetingInfo?.pstn,
+                roomId: roomInfo.roomId,
+                pstn: roomInfo?.pstn,
               },
             };
           });

package/template/src/utils/useIsAudioEnabled.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 
@@ -18,14 +18,14 @@ import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
  * @returns function
  */
 function useIsAudioEnabled() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   /**
    *
    * @param uid UidType
    * @returns boolean
    */
   const isAudioEnabled = (uid: UidType): boolean =>
-    renderList[uid]?.audio === ToggleState.enabled;
+    defaultContent[uid]?.audio === ToggleState.enabled;
 
   return isAudioEnabled;
 }

package/template/src/utils/useIsHandRaised.ts

@@ -0,0 +1,13 @@
+import {useContext} from 'react';
+import {UidType} from '../../agora-rn-uikit';
+import LiveStreamContext from '../components/livestream/LiveStreamContext';
+import {RaiseHandValue} from '../components/livestream/Types';
+
+const useIsHandRaised = () => {
+  const {raiseHandList} = useContext(LiveStreamContext);
+  const isHandRaised = (uid: UidType) => {
+    return raiseHandList[uid]?.raised === RaiseHandValue.TRUE;
+  };
+  return isHandRaised;
+};
+export default useIsHandRaised;

package/template/src/utils/useIsPSTN.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 
 /**
@@ -17,14 +17,14 @@ import {UidType} from '../../agora-rn-uikit';
  * @returns function
  */
 function useIsPSTN() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   /**
    *
    * @param uid number
    * @returns boolean
    */
   const isPSTN = (uid: UidType) =>
-    !renderList[uid] && String(uid)[0] === '1' ? true : false;
+    !defaultContent[uid] && String(uid)[0] === '1' ? true : false;
   return isPSTN;
 }
 

package/template/src/utils/useIsVideoEnabled.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType, ToggleState} from '../../agora-rn-uikit';
 
 /**
@@ -17,7 +17,7 @@ import {UidType, ToggleState} from '../../agora-rn-uikit';
  * @returns function
  */
 function useIsVideoEnabled() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
 
   /**
    *
@@ -25,7 +25,7 @@ function useIsVideoEnabled() {
    * @returns boolean
    */
   const isVideoEnabled = (uid: UidType): boolean =>
-    renderList[uid]?.video === ToggleState.enabled;
+    defaultContent[uid]?.video === ToggleState.enabled;
 
   return isVideoEnabled;
 }

package/template/src/utils/{useJoinMeeting.ts → useJoinRoom.ts}

@@ -1,8 +1,8 @@
 import {useContext} from 'react';
 import {gql} from '@apollo/client';
 import StorageContext from '../components/StorageContext';
-import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import {GraphQLContext} from '../components/GraphQLProvider';
 
 const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
@@ -53,12 +53,12 @@ const JOIN_CHANNEL_PHRASE = gql`
 /**
  * Returns an asynchronous function to join a meeting with the given phrase.
  */
-export default function useJoinMeeting() {
+export default function useJoinRoom() {
   const {store} = useContext(StorageContext);
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   const {client} = useContext(GraphQLContext);
   return async (phrase: string) => {
-    setMeetingInfo((prevState) => {
+    setRoomInfo((prevState) => {
       return {
         ...prevState,
         isJoinDataFetched: false,
@@ -79,48 +79,54 @@ export default function useJoinMeeting() {
       } else {
         if (response && response.data) {
           let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {};
+          let roomInfo: Partial<RoomInfoContextInterface['data']> = {};
           if (data?.joinChannel?.channel) {
-            meetingInfo.channel = data.joinChannel.channel;
+            roomInfo.channel = data.joinChannel.channel;
           }
           if (data?.joinChannel?.mainUser?.uid) {
-            meetingInfo.uid = data.joinChannel.mainUser.uid;
+            roomInfo.uid = data.joinChannel.mainUser.uid;
           }
           if (data?.joinChannel?.mainUser?.rtc) {
-            meetingInfo.token = data.joinChannel.mainUser.rtc;
+            roomInfo.token = data.joinChannel.mainUser.rtc;
           }
           if (data?.joinChannel?.mainUser?.rtm) {
-            meetingInfo.rtmToken = data.joinChannel.mainUser.rtm;
+            roomInfo.rtmToken = data.joinChannel.mainUser.rtm;
           }
           if (data?.joinChannel?.secret) {
-            meetingInfo.encryptionSecret = data.joinChannel.secret;
+            roomInfo.encryptionSecret = data.joinChannel.secret;
           }
           if (data?.joinChannel?.screenShare?.uid) {
-            meetingInfo.screenShareUid = data.joinChannel.screenShare.uid;
+            roomInfo.screenShareUid = data.joinChannel.screenShare.uid;
           }
           if (data?.joinChannel?.screenShare?.rtc) {
-            meetingInfo.screenShareToken = data.joinChannel.screenShare.rtc;
+            roomInfo.screenShareToken = data.joinChannel.screenShare.rtc;
           }
           if (data?.joinChannel?.isHost) {
-            meetingInfo.isHost = data.joinChannel.isHost;
+            roomInfo.isHost = data.joinChannel.isHost;
           }
           if (data?.joinChannel?.title) {
-            meetingInfo.meetingTitle = data.joinChannel.title;
+            roomInfo.meetingTitle = data.joinChannel.title;
           }
           //getUser is not available from backend
           // if (data?.getUser?.name) {
-          //   meetingInfo.username = data.getUser.name;
+          //   roomInfo.username = data.getUser.name;
           // }
-          setMeetingInfo((prevState) => {
+          console.log('!!!!!Meetinginfo', {
+            roomInfo,
+            response: response.data,
+          });
+          setRoomInfo((prevState) => {
+            let compiledMeetingInfo = {
+              ...prevState.data,
+              ...roomInfo,
+            };
             return {
               ...prevState,
               isJoinDataFetched: true,
-              data: {
-                ...prevState.data,
-                ...meetingInfo,
-              },
+              data: compiledMeetingInfo,
             };
           });
+          return roomInfo;
         } else {
           throw new Error('An error occurred in parsing the channel data.');
         }

package/template/src/utils/useMutePSTN.ts

@@ -1,6 +1,6 @@
 import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../agora-rn-uikit';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import useIsPSTN from './useIsPSTN';
 const MUTE_PSTN = gql`
   mutation mutePSTN($uid: Int!, $passphrase: String!, $mute: Boolean!) {
@@ -15,7 +15,7 @@ const useMutePSTN = () => {
   const [mutePSTN, {data, loading, error}] = useMutation(MUTE_PSTN);
   const {
     data: {isHost, roomId},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
   return async (uid: UidType) => {
     if (isHost) {

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,7 +10,12 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
+import {useContext, useEffect, useRef, useState} from 'react';
+
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
+import {isMobileUA, isWebInternal} from './common';
+import {AppState} from 'react-native';
+import {DispatchContext} from '../../agora-rn-uikit';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -20,9 +25,52 @@ export enum MUTE_LOCAL_TYPE {
  * Returns an asynchronous function to toggle muted state of the given track type for the local user.
  */
 function useMuteToggleLocal() {
-  const {RtcEngine, dispatch} = useRtc();
+  const {RtcEngineUnsafe} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
   const local = useLocalUserInfo();
 
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const isCamON = useRef(local.video);
+
+  useEffect(() => {
+    if ($config.AUDIO_ROOM || !isMobileUA()) return;
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+    });
+
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
+    if (appStateVisible === 'background') {
+      isCamON.current = local.video;
+      if (isCamON.current) {
+        isWebInternal()
+          ? RtcEngineUnsafe.muteLocalVideoStream(true)
+          : RtcEngineUnsafe.enableLocalVideo(false);
+
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [0],
+        });
+      }
+    }
+    if (appStateVisible === 'active' && isCamON.current) {
+      isWebInternal()
+        ? RtcEngineUnsafe.muteLocalVideoStream(false)
+        : RtcEngineUnsafe.enableLocalVideo(true);
+      dispatch({
+        type: 'LocalMuteVideo',
+        value: [1],
+      });
+    }
+  }, [appStateVisible]);
+
   return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
@@ -43,7 +91,7 @@ function useMuteToggleLocal() {
           });
 
           try {
-            await RtcEngine.muteLocalAudioStream(
+            await RtcEngineUnsafe.muteLocalAudioStream(
               localAudioState === ToggleState.enabled,
             );
             // Enable UI
@@ -82,9 +130,14 @@ function useMuteToggleLocal() {
           });
 
           try {
-            await RtcEngine.muteLocalVideoStream(
-              localVideoState === ToggleState.enabled ? true : false,
-            );
+            //enableLocalVideo not available on web
+            isWebInternal()
+              ? await RtcEngineUnsafe.muteLocalVideoStream(
+                  localVideoState === ToggleState.enabled ? true : false,
+                )
+              : await RtcEngineUnsafe.enableLocalVideo(
+                  localVideoState === ToggleState.enabled ? false : true,
+                );
 
             // Enable UI
             dispatch({

package/template/src/utils/useRemoteEndCall.ts

@@ -1,8 +1,8 @@
 import {controlMessageEnum} from '../components/ChatContext';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import useIsPSTN from './useIsPSTN';
 import {UidType} from '../../agora-rn-uikit';
-import events, {EventPersistLevel} from '../rtm-events-api';
+import events, {PersistanceLevel} from '../rtm-events-api';
 
 /**
  * Returns a function to end the call for a remote user with the given uid.
@@ -10,7 +10,7 @@ import events, {EventPersistLevel} from '../rtm-events-api';
 const useRemoteEndCall = () => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
 
   return (uid: UidType) => {
@@ -19,7 +19,7 @@ const useRemoteEndCall = () => {
         events.send(
           controlMessageEnum.kickUser,
           '',
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           uid,
         );
       }

package/template/src/utils/useRemoteEndScreenshare.ts

@@ -0,0 +1,26 @@
+import {controlMessageEnum} from '../components/ChatContext';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
+import {UidType} from '../../agora-rn-uikit';
+import events, {PersistanceLevel} from '../rtm-events-api';
+
+/**
+ * Returns a function to end the screenshare for a remote user with the given uid.
+ */
+const useRemoteEndScreenshare = () => {
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  return (uid: UidType) => {
+    if (isHost && uid) {
+      events.send(
+        controlMessageEnum.kickScreenshare,
+        '',
+        PersistanceLevel.None,
+        uid,
+      );
+    } else {
+      console.error('A host can only remove the screenshare from the call.');
+    }
+  };
+};
+export default useRemoteEndScreenshare;

package/template/src/utils/useRemoteMute.ts

@@ -9,12 +9,12 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import {controlMessageEnum} from '../components/ChatContext';
 import useIsPSTN from './useIsPSTN';
 import useMutePSTN from './useMutePSTN';
 import {UidType} from '../../agora-rn-uikit';
-import events, {EventPersistLevel} from '../rtm-events-api';
+import events, {PersistanceLevel} from '../rtm-events-api';
 
 export enum MUTE_REMOTE_TYPE {
   audio,
@@ -26,7 +26,7 @@ export enum MUTE_REMOTE_TYPE {
 function useRemoteMute() {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
   const mutePSTN = useMutePSTN();
 
@@ -46,7 +46,7 @@ function useRemoteMute() {
               events.send(
                 controlMessageEnum.muteAudio,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -55,7 +55,7 @@ function useRemoteMute() {
             events.send(
               controlMessageEnum.muteAudio,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;
@@ -66,7 +66,7 @@ function useRemoteMute() {
               events.send(
                 controlMessageEnum.muteVideo,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -75,7 +75,7 @@ function useRemoteMute() {
             events.send(
               controlMessageEnum.muteVideo,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;

package/template/src/utils/useRemoteRequest.ts

@@ -0,0 +1,84 @@
+/*
+********************************************
+ 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 useIsPSTN from './useIsPSTN';
+import useMutePSTN from './useMutePSTN';
+import {UidType} from '../../agora-rn-uikit';
+import events, {PersistanceLevel} from '../rtm-events-api';
+
+export enum REQUEST_REMOTE_TYPE {
+  audio,
+  video,
+}
+/**
+ * Returns an asynchronous function to request audio/video for a remote user with the given uid or if no uid provided, request everyone else in the meeting.
+ */
+function useRemoteRequest() {
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const isPSTN = useIsPSTN();
+
+  return async (type: REQUEST_REMOTE_TYPE, uid?: UidType) => {
+    if (isHost) {
+      switch (type) {
+        case REQUEST_REMOTE_TYPE.audio:
+          // To individual
+          if (uid) {
+            if (isPSTN(uid)) {
+              //can't ask pstn user to unmute
+            } else {
+              events.send(
+                controlMessageEnum.requestAudio,
+                '',
+                PersistanceLevel.None,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
+              controlMessageEnum.requestAudio,
+              '',
+              PersistanceLevel.None,
+            );
+          }
+          break;
+        case REQUEST_REMOTE_TYPE.video:
+          if (uid) {
+            // To individual
+            if (!isPSTN(uid)) {
+              events.send(
+                controlMessageEnum.requestVideo,
+                '',
+                PersistanceLevel.None,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
+              controlMessageEnum.requestVideo,
+              '',
+              PersistanceLevel.None,
+            );
+          }
+          break;
+      }
+    } else {
+      console.error('A host can only request audience audio or video.');
+    }
+  };
+}
+
+export default useRemoteRequest;

package/template/src/utils/useSwitchCamera.native.tsx

@@ -0,0 +1,25 @@
+/*
+********************************************
+ 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 {useRtc} from 'customization-api';
+
+function useSwitchCamera() {
+  const {RtcEngineUnsafe} = useRtc();
+  return () => {
+    try {
+      RtcEngineUnsafe.switchCamera();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+}
+
+export default useSwitchCamera;

package/template/src/utils/useSwitchCamera.tsx

@@ -0,0 +1,19 @@
+/*
+********************************************
+ 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.
+*********************************************
+*/
+
+function useSwitchCamera() {
+  return () => {
+    console.warn('SwitchCamera only supported on native platforms');
+  };
+}
+
+export default useSwitchCamera;