agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/utils/useJoinRoom.ts

@@ -0,0 +1,199 @@
+import {useContext} from 'react';
+import {gql} from '@apollo/client';
+import StorageContext from '../components/StorageContext';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import {GraphQLContext} from '../components/GraphQLProvider';
+import useGetName from './useGetName';
+import useWaitingRoomAPI from '../subComponents/waiting-rooms/useWaitingRoomAPI';
+import {base64ToUint8Array} from '../utils';
+
+const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
+  query JoinChannel($passphrase: String!) {
+    joinChannel(passphrase: $passphrase) {
+      channel
+      title
+      isHost
+      secret
+      secretSalt
+      mainUser {
+        rtc
+        rtm
+        uid
+      }
+      whiteboard {
+        room_uuid
+        room_token
+      }
+      screenShare {
+        rtc
+        rtm
+        uid
+      }
+    }
+    getUser {
+      name
+      email
+    }
+  }
+`;
+
+const JOIN_CHANNEL_PHRASE = gql`
+  query JoinChannel($passphrase: String!) {
+    joinChannel(passphrase: $passphrase) {
+      channel
+      title
+      isHost
+      secret
+      secretSalt
+      mainUser {
+        rtc
+        rtm
+        uid
+      }
+      whiteboard {
+        room_uuid
+        room_token
+      }
+      screenShare {
+        rtc
+        rtm
+        uid
+      }
+    }
+  }
+`;
+/**
+ * Returns an asynchronous function to join a meeting with the given phrase.
+ */
+export default function useJoinRoom() {
+  const {store} = useContext(StorageContext);
+  const {setRoomInfo} = useSetRoomInfo();
+
+  const {client} = useContext(GraphQLContext);
+  const username = useGetName();
+  const {request: requestToJoin} = useWaitingRoomAPI();
+  const isWaitingRoomEnabled = $config.ENABLE_WAITING_ROOM;
+
+  return async (phrase: string) => {
+    setRoomInfo(prevState => {
+      return {
+        ...prevState,
+        isJoinDataFetched: false,
+      };
+    });
+    try {
+      let response = null;
+      if (isWaitingRoomEnabled) {
+        response = await requestToJoin({
+          meetingPhrase: phrase,
+          send_event: false,
+        });
+      } else {
+        response = await client.query({
+          query:
+            store.token === null
+              ? JOIN_CHANNEL_PHRASE
+              : JOIN_CHANNEL_PHRASE_AND_GET_USER,
+          variables: {
+            passphrase: phrase,
+            //userName: username,
+          },
+        });
+      }
+      if (response?.error) {
+        throw response.error;
+      } else {
+        if ((response && response.data) || isWaitingRoomEnabled) {
+          let data = isWaitingRoomEnabled ? response : response.data;
+          let roomInfo: Partial<RoomInfoContextInterface['data']> = {};
+
+          if (data?.joinChannel?.channel || data?.channel) {
+            roomInfo.channel = isWaitingRoomEnabled
+              ? data.channel
+              : data.joinChannel.channel;
+          }
+          if (data?.joinChannel?.mainUser?.uid || data?.mainUser?.uid) {
+            roomInfo.uid = isWaitingRoomEnabled
+              ? data.mainUser.uid
+              : data.joinChannel.mainUser.uid;
+          }
+          if (data?.joinChannel?.mainUser?.rtc || data?.mainUser?.rtc) {
+            roomInfo.token = isWaitingRoomEnabled
+              ? data.mainUser.rtc
+              : data.joinChannel.mainUser.rtc;
+          }
+          if (data?.joinChannel?.mainUser?.rtm || data?.mainUser?.rtm) {
+            roomInfo.rtmToken = isWaitingRoomEnabled
+              ? data.mainUser.rtm
+              : data.joinChannel.mainUser.rtm;
+          }
+          if (data?.joinChannel?.secret || data?.secret) {
+            roomInfo.encryptionSecret = isWaitingRoomEnabled
+              ? data.secret
+              : data.joinChannel.secret;
+          }
+          if (data?.joinChannel?.secretSalt || data?.secretSalt) {
+            roomInfo.encryptionSecretSalt = base64ToUint8Array(
+              isWaitingRoomEnabled
+                ? data.secretSalt
+                : data.joinChannel.secretSalt,
+            );
+          }
+          if (data?.joinChannel?.screenShare?.uid || data?.screenShare?.uid) {
+            roomInfo.screenShareUid = isWaitingRoomEnabled
+              ? data.screenShare.uid
+              : data.joinChannel.screenShare.uid;
+          }
+          if (data?.joinChannel?.screenShare?.rtc || data?.screenShare?.rtc) {
+            roomInfo.screenShareToken = isWaitingRoomEnabled
+              ? data.screenShare.rtc
+              : data.joinChannel.screenShare.rtc;
+          }
+          roomInfo.isHost = isWaitingRoomEnabled
+            ? data.isHost
+            : data.joinChannel.isHost;
+
+          if (data?.joinChannel?.title || data?.title) {
+            roomInfo.meetingTitle = isWaitingRoomEnabled
+              ? data.title
+              : data.joinChannel.title;
+          }
+          if (data?.joinChannel?.whiteboard || data?.whiteboard) {
+            const whiteboard: RoomInfoContextInterface['data']['whiteboard'] = {
+              room_token: isWaitingRoomEnabled
+                ? data.whiteboard.room_token
+                : data?.joinChannel?.whiteboard?.room_token,
+              room_uuid: isWaitingRoomEnabled
+                ? data.whiteboard.room_uuid
+                : data?.joinChannel?.whiteboard?.room_uuid,
+            };
+            if (whiteboard?.room_token && whiteboard?.room_uuid) {
+              roomInfo.whiteboard = whiteboard;
+            }
+          }
+          //getUser is not available from backend
+          // if (data?.getUser?.name) {
+          //   roomInfo.username = data.getUser.name;
+          // }
+          setRoomInfo(prevState => {
+            let compiledMeetingInfo = {
+              ...prevState.data,
+              ...roomInfo,
+            };
+            return {
+              ...prevState,
+              isJoinDataFetched: true,
+              data: compiledMeetingInfo,
+            };
+          });
+          return roomInfo;
+        } else {
+          throw new Error('An error occurred in parsing the channel data.');
+        }
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+}

package/template/src/utils/{useIsActiveSpeaker.ts → useLocalAudio.ts}

@@ -9,19 +9,30 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
-import {UidType} from '../../agora-rn-uikit';
 
-/**
- * Returns a function that checks whether the given uid is a active speaker and returns true/false
- * @returns function
- */
-function useIsActiveSpeaker() {
-  const {activeSpeaker, renderList} = useRender();
-  const isActiveSpeaker = (uid: UidType) => {
-    return renderList[uid].audio && activeSpeaker === uid;
+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],
+    });
   };
-  return isActiveSpeaker;
+
+  const enableAudioButton = () => {
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, false],
+    });
+  };
+
+  return {enableAudioButton, disableAudioButton};
 }
 
-export default useIsActiveSpeaker;
+export default useLocalAudio;

package/template/src/{components/Settings.native.tsx → utils/useMenu.tsx}

@@ -9,13 +9,23 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+
 import React from 'react';
+import {createHook} from 'customization-implementation';
 
-const Settings: React.FC = () => {
-  return <></>;
-};
-export const SettingsWithViewWrapper = () => {
-  return <></>;
+const ToolbarMenuContext = React.createContext({isToolbarMenuItem: false});
+
+export interface ToolbarMenuProviderProps {
+  children: React.ReactNode;
+}
+const ToolbarMenuProvider = (props: ToolbarMenuProviderProps) => {
+  return (
+    <ToolbarMenuContext.Provider value={{isToolbarMenuItem: true}}>
+      {props.children}
+    </ToolbarMenuContext.Provider>
+  );
 };
 
-export default Settings;
+const useToolbarMenu = createHook(ToolbarMenuContext);
+
+export {ToolbarMenuProvider, useToolbarMenu};

package/template/src/utils/useModal.tsx

@@ -0,0 +1,8 @@
+import {useState} from 'react';
+
+export function useModal(initialMode = false) {
+  const [modalOpen, setModalOpen] = useState(initialMode);
+  const toggle = () => setModalOpen(!modalOpen);
+
+  return {modalOpen, setModalOpen, toggle};
+}

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

@@ -11,7 +11,12 @@
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
 import {useContext} from 'react';
-import {PropsContext, ClientRole, ToggleState} from '../../agora-rn-uikit';
+import {
+  PropsContext,
+  ClientRoleType,
+  ToggleState,
+  DispatchContext,
+} from '../../agora-rn-uikit';
 import {isAndroid, isIOS, isWebInternal} from './common';
 import {SdkMuteQueueContext} from '../components/SdkMuteToggleListener';
 
@@ -23,11 +28,12 @@ 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 isLiveStream = $config.EVENT_MODE;
   const {rtcProps} = useContext(PropsContext);
-  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+  const isBroadCasting = rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
 
   const {videoMuteQueue, audioMuteQueue} = useContext(SdkMuteQueueContext);
 
@@ -71,9 +77,14 @@ function useMuteToggleLocal() {
             });
 
             try {
-              await RtcEngine.muteLocalAudioStream(
-                localAudioState === ToggleState.enabled,
-              );
+              isWebInternal()
+                ? await RtcEngineUnsafe.muteLocalAudioStream(
+                    localAudioState === ToggleState.enabled,
+                  ) //@ts-ignore
+                : await RtcEngineUnsafe.enableLocalAudio(
+                    localAudioState === ToggleState.enabled ? false : true,
+                  );
+
               // Enable UI
               dispatch({
                 type: 'LocalMuteAudio',
@@ -122,10 +133,11 @@ function useMuteToggleLocal() {
             try {
               //enableLocalVideo not available on web
               isWebInternal()
-                ? await RtcEngine.muteLocalVideoStream(
+                ? await RtcEngineUnsafe.muteLocalVideoStream(
                     localVideoState === ToggleState.enabled ? true : false,
                   )
-                : await RtcEngine.enableLocalVideo(
+                : //@ts-ignore
+                  await RtcEngineUnsafe.enableLocalVideo(
                     localVideoState === ToggleState.enabled ? false : true,
                   );
               /**
@@ -135,7 +147,7 @@ function useMuteToggleLocal() {
                * enable publishing for livestreaming presenter(who raised hand and approved by host)
                */
               if ((isAndroid() || isIOS()) && isLiveStream && isBroadCasting) {
-                await RtcEngine.muteLocalVideoStream(
+                await RtcEngineUnsafe.muteLocalVideoStream(
                   localVideoState === ToggleState.enabled ? true : false,
                 );
               }

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

@@ -1,7 +1,7 @@
 import {controlMessageEnum} from '../components/ChatContext';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 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 screenshare for a remote user with the given uid.
@@ -9,13 +9,13 @@ import events, {EventPersistLevel} from '../rtm-events-api';
 const useRemoteEndScreenshare = () => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   return (uid: UidType) => {
     if (isHost && uid) {
       events.send(
         controlMessageEnum.kickScreenshare,
         '',
-        EventPersistLevel.LEVEL1,
+        PersistanceLevel.None,
         uid,
       );
     } else {

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

@@ -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 REQUEST_REMOTE_TYPE {
   audio,
@@ -26,7 +26,7 @@ export enum REQUEST_REMOTE_TYPE {
 function useRemoteRequest() {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
 
   return async (type: REQUEST_REMOTE_TYPE, uid?: UidType) => {
@@ -41,7 +41,7 @@ function useRemoteRequest() {
               events.send(
                 controlMessageEnum.requestAudio,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -50,7 +50,7 @@ function useRemoteRequest() {
             events.send(
               controlMessageEnum.requestAudio,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;
@@ -61,7 +61,7 @@ function useRemoteRequest() {
               events.send(
                 controlMessageEnum.requestVideo,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -70,7 +70,7 @@ function useRemoteRequest() {
             events.send(
               controlMessageEnum.requestVideo,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;

package/template/src/utils/useSearchParams.tsx

@@ -0,0 +1,18 @@
+import {useLocation} from '../components/Router';
+import {useMemo} from 'react';
+
+interface ReadOnlyURLSearchParams extends URLSearchParams {
+  append: never;
+  set: never;
+  delete: never;
+  sort: never;
+}
+
+export function useSearchParams() {
+  const {search} = useLocation();
+
+  return useMemo(
+    () => new URLSearchParams(search) as ReadOnlyURLSearchParams,
+    [search],
+  );
+}

package/template/src/utils/useString.ts

@@ -13,11 +13,12 @@ import {useCustomization} from 'customization-implementation';
 import {useLanguage} from '../language/useLanguage';
 import {DEFAULT_I18_DATA} from '../language';
 import {TextDataInterface} from '../language/default-labels/index';
+import {useEffect, useRef} from 'react';
 
 export function usei18nData(
   selectedLanguageCode: string = DEFAULT_I18_DATA.locale,
 ) {
-  const languageData = useCustomization((data) => data?.i18n);
+  const languageData = useCustomization(data => data?.i18n);
   if (
     !selectedLanguageCode ||
     !languageData ||
@@ -27,7 +28,7 @@ export function usei18nData(
     return DEFAULT_I18_DATA.data;
   } else {
     let selectedLanguageData = languageData.find(
-      (item) => item.locale === selectedLanguageCode,
+      item => item.locale === selectedLanguageCode,
     );
     if (selectedLanguageData && selectedLanguageData.data) {
       return {
@@ -43,7 +44,7 @@ export function usei18nData(
 export function useString<T = string>(
   keyName: keyof TextDataInterface,
 ): (input?: T) => string {
-  const lanCode = useLanguage((data) => data.languageCode);
+  const lanCode = useLanguage(data => data.languageCode);
   const textData = usei18nData(lanCode);
   const getString = (input?: T) => {
     let keyValue = textData ? textData[keyName] : undefined;
@@ -59,3 +60,12 @@ export function useString<T = string>(
   };
   return getString;
 }
+
+export const useStringRef = (key: keyof TextDataInterface) => {
+  const fn = useString(key);
+  const refFn = useRef(fn);
+  useEffect(() => {
+    refFn.current = fn;
+  }, [fn]);
+  return refFn;
+};

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;