agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/src/utils/isMobileOrTablet.native.ts

@@ -0,0 +1,5 @@
+const isMobileOrTablet = () => {
+  return true;
+}
+
+export default isMobileOrTablet;

package/template/src/utils/{mobileWebTest.tsx → isMobileOrTablet.ts}

@@ -1,7 +1,10 @@
-const mobileAndTabletCheck = () => {
+declare global{
+    interface Window {opera?: any}
+}
+const isMobileOrTablet = () => {
     let check = false;
     (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator?.userAgent||navigator?.vendor||window?.opera);
     return check;
 }
   
-export default mobileAndTabletCheck;
+export default isMobileOrTablet;

package/template/src/utils/isPSTNUser.ts

@@ -0,0 +1,30 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import useUserList from './useUserList';
+/**
+ * This hook will return the function to check whether the current user is a PSTN user or not
+ * @returns function
+ */
+function useIsPSTN() {
+  const {renderList} = useUserList();
+  /**
+   *
+   * @param uid number
+   * @returns boolean
+   */
+  const isPSTN = (uid: UidType) =>
+    !renderList[uid] && String(uid)[0] === '1' ? true : false;
+  return isPSTN;
+}
+
+export default useIsPSTN;

package/template/src/utils/isSDK.sdk.ts

@@ -0,0 +1,5 @@
+const isSDK = () => {
+  return true;
+}
+
+export default isSDK;

package/template/src/utils/isSDK.ts

@@ -0,0 +1,5 @@
+const isSDK = () => {
+  return false;
+}
+
+export default isSDK;

package/template/src/utils/isScreenShareUser.ts

@@ -0,0 +1,31 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {useScreenContext} from '../components/contexts/ScreenShareContext';
+
+/**
+ * This hook will return the function to check whether the screen is shared or not
+ * @returns function
+ */
+function useIsScreenShare() {
+  const {screenShareData} = useScreenContext();
+  /**
+   *
+   * @param uid number | string
+   * @returns boolean
+   */
+  const isScreenShare = (uid: UidType): boolean =>
+    screenShareData[uid]?.isActive ? true : false;
+  return isScreenShare;
+}
+
+export default useIsScreenShare;

package/template/src/utils/isVideoEnabled.ts

@@ -0,0 +1,29 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
+import useUserList from './useUserList';
+
+function useIsVideoEnabled() {
+  const {renderList} = useUserList();
+
+  /**
+   *
+   * @param uid UidType
+   * @returns boolean
+   */
+  const videoEnabled = (uid: UidType): boolean =>
+    renderList[uid]?.video === ToggleState.enabled;
+
+  return videoEnabled;
+}
+export default useIsVideoEnabled;

package/template/src/utils/useButtonTemplate.tsx

@@ -0,0 +1,43 @@
+/*
+********************************************
+ 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 React from 'react';
+import {createHook} from 'fpe-implementation';
+
+export enum ButtonTemplateName {
+  topBar,
+  bottomBar,
+}
+
+export interface ButtonTemplateInferface {
+  buttonTemplateName?: ButtonTemplateName;
+}
+
+const ButtonTemplateContext = React.createContext<ButtonTemplateInferface>({
+  buttonTemplateName: undefined,
+});
+
+interface ButtonTemplateProviderProps {
+  value: ButtonTemplateInferface;
+  children: React.ReactNode;
+}
+const ButtonTemplateProvider = (props: ButtonTemplateProviderProps) => {
+  return (
+    <ButtonTemplateContext.Provider value={{...props.value}}>
+      {props.children}
+    </ButtonTemplateContext.Provider>
+  );
+};
+
+const useButtonTemplate = createHook(ButtonTemplateContext);
+
+export {ButtonTemplateProvider, useButtonTemplate};

package/template/src/utils/useCreateMeeting.ts

@@ -0,0 +1,74 @@
+import {gql, useMutation} from '@apollo/client';
+import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
+import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+
+const CREATE_CHANNEL = gql`
+  mutation CreateChannel(
+    $title: String!
+    $backendURL: String!
+    $enablePSTN: Boolean
+  ) {
+    createChannel(
+      title: $title
+      backendURL: $backendURL
+      enablePSTN: $enablePSTN
+    ) {
+      passphrase {
+        host
+        view
+      }
+      channel
+      title
+      pstn {
+        number
+        dtmf
+      }
+    }
+  }
+`;
+export default function useCreateMeeting() {
+  const [createChannel, {error}] = useMutation(CREATE_CHANNEL);
+  const {setMeetingInfo} = useSetMeetingInfo();
+  return async (
+    roomTitle: string,
+    enablePSTN?: boolean,
+    isSeparateHostLink?: boolean,
+  ) => {
+    const res = await createChannel({
+      variables: {
+        title: roomTitle,
+        backendURL: $config.BACKEND_ENDPOINT,
+        enablePSTN: enablePSTN,
+      },
+    });
+    if (error) {
+      throw error;
+    }
+    if (res && res?.data && res?.data?.createChannel) {
+      let meetingInfoPassPhrase: MeetingInfoContextInterface['meetingPassphrase'] =
+        {
+          attendee: '',
+        };
+      if (res?.data?.createChannel?.passphrase?.view) {
+        meetingInfoPassPhrase.attendee = res.data.createChannel.passphrase.view;
+      }
+      if (res?.data?.createChannel?.passphrase?.host) {
+        meetingInfoPassPhrase.host = res.data.createChannel.passphrase.host;
+      }
+      if (enablePSTN === true && res?.data?.createChannel?.pstn) {
+        meetingInfoPassPhrase.pstn = {
+          number: res.data.createChannel.pstn.number,
+          pin: res.data.createChannel.pstn.dtmf,
+        };
+      }
+      setMeetingInfo({
+        isHost: true,
+        isSeparateHostLink: isSeparateHostLink ? true : false,
+        meetingTitle: roomTitle,
+        meetingPassphrase: meetingInfoPassPhrase,
+      });
+    } else {
+      throw new Error(`An error occurred in parsing the channel data.`);
+    }
+  };
+}

package/template/src/utils/useGetLiveStreamingRequests.ts

@@ -0,0 +1,24 @@
+/*
+********************************************
+ 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 {useContext} from 'react';
+import LiveStreamContext from '../components/livestream';
+/**
+ * This hook will fetch the user list
+ * @returns userList
+ */
+
+function useGetLiveStreamingRequests() {
+  const {currLiveStreamRequest} = useContext(LiveStreamContext);
+  return currLiveStreamRequest;
+}
+
+export default useGetLiveStreamingRequests;

package/template/src/utils/useGetMeetingPhrase.ts

@@ -0,0 +1,68 @@
+import {useContext} from 'react';
+import {gql} from '@apollo/client';
+import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
+import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {GraphQLContext} from '../components/GraphQLProvider';
+
+const SHARE = gql`
+  query share($passphrase: String!) {
+    share(passphrase: $passphrase) {
+      passphrase {
+        host
+        view
+      }
+      channel
+      title
+      pstn {
+        number
+        dtmf
+      }
+    }
+  }
+`;
+
+export default function useGetMeetingPhrase() {
+  const {setMeetingInfo} = useSetMeetingInfo();
+  const {client} = useContext(GraphQLContext);
+  return async (phrase: string) => {
+    const response = await client.query({
+      query: SHARE,
+      variables: {
+        passphrase: phrase,
+      },
+    });
+    if (response.error) {
+      throw response.error;
+    } else {
+      try {
+        if (response && response.data) {
+          let data = response.data;
+          let meetingPassphrase: MeetingInfoContextInterface['meetingPassphrase'] =
+            {
+              attendee: '',
+            };
+          if (data?.share?.passphrase?.view) {
+            meetingPassphrase.attendee = data.share.passphrase.view;
+          }
+          if (data?.share?.passphrase?.host) {
+            meetingPassphrase.host = data.share.passphrase.host;
+          }
+          if (data?.share?.pstn) {
+            meetingPassphrase.pstn = {
+              number: data.share.pstn.number,
+              pin: data.share.pstn.dtmf,
+            };
+          }
+          setMeetingInfo((prevState) => {
+            return {
+              ...prevState,
+              meetingPassphrase,
+            };
+          });
+        }
+      } catch (error) {
+        throw new Error('An error occurred in parsing the channel data.');
+      }
+    }
+  };
+}

package/template/src/utils/useGetName.ts

@@ -0,0 +1,20 @@
+/*
+********************************************
+ 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 {useContext} from 'react';
+import ChatContext from '../components/ChatContext';
+
+function useGetName() {
+  const {displayName} = useContext(ChatContext);
+  return displayName;
+}
+
+export default useGetName;

package/template/src/{subComponents/screenshare/ScreenshareContext.tsx → utils/useGroupMessages.ts}

@@ -9,13 +9,16 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createContext} from 'react';
 
-interface ScreenshareContext {
-  screenshareActive: boolean;
-  startUserScreenshare: () => void;
-  stopUserScreenShare: () => void;
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+
+/**
+ * This hook will fetch the group messages
+ * @returns userList
+ */
+function useGroupMessages() {
+  const {messageStore} = useChatMessages();
+  return messageStore;
 }
 
-const ScreenshareContext = createContext(null as unknown as ScreenshareContext);
-export default ScreenshareContext;
+export default useGroupMessages;

package/template/src/utils/useJoinMeeting.ts

@@ -0,0 +1,120 @@
+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 {GraphQLContext} from '../components/GraphQLProvider';
+
+const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
+  query JoinChannel($passphrase: String!) {
+    joinChannel(passphrase: $passphrase) {
+      channel
+      title
+      isHost
+      secret
+      mainUser {
+        rtc
+        rtm
+        uid
+      }
+      screenShare {
+        rtc
+        rtm
+        uid
+      }
+    }
+    getUser {
+      name
+      email
+    }
+  }
+`;
+
+const JOIN_CHANNEL_PHRASE = gql`
+  query JoinChannel($passphrase: String!) {
+    joinChannel(passphrase: $passphrase) {
+      channel
+      title
+      isHost
+      secret
+      mainUser {
+        rtc
+        rtm
+        uid
+      }
+      screenShare {
+        rtc
+        rtm
+        uid
+      }
+    }
+  }
+`;
+
+export default function useJoinMeeting() {
+  const {store} = useContext(StorageContext);
+  const {setMeetingInfo} = useSetMeetingInfo();
+  const {client} = useContext(GraphQLContext);
+  return async (phrase: string) => {
+    const response = await client.query({
+      query:
+        store.token === null
+          ? JOIN_CHANNEL_PHRASE
+          : JOIN_CHANNEL_PHRASE_AND_GET_USER,
+      variables: {
+        passphrase: phrase,
+      },
+    });
+    if (response.error) {
+      throw response.error;
+    } else {
+      try {
+        if (response && response.data) {
+          let data = response.data;
+          let meetingInfo: Partial<MeetingInfoContextInterface> = {
+            isJoinDataFetched: true,
+          };
+          if (data?.joinChannel?.channel) {
+            meetingInfo.channel = data.joinChannel.channel;
+          }
+          if (data?.joinChannel?.mainUser?.uid) {
+            meetingInfo.uid = data.joinChannel.mainUser.uid;
+          }
+          if (data?.joinChannel?.mainUser?.rtc) {
+            meetingInfo.token = data.joinChannel.mainUser.rtc;
+          }
+          if (data?.joinChannel?.mainUser?.rtm) {
+            meetingInfo.rtm = data.joinChannel.mainUser.rtm;
+          }
+          if (data?.joinChannel?.secret) {
+            meetingInfo.secret = data.joinChannel.secret;
+          }
+          if (data?.joinChannel?.screenShare?.uid) {
+            meetingInfo.screenShareUid = data.joinChannel.screenShare.uid;
+          }
+          if (data?.joinChannel?.screenShare?.rtc) {
+            meetingInfo.screenShareToken = data.joinChannel.screenShare.rtc;
+          }
+          if (data?.joinChannel?.isHost) {
+            meetingInfo.isHost = data.joinChannel.isHost;
+          }
+          if (data?.joinChannel?.title) {
+            meetingInfo.meetingTitle = data.joinChannel.title;
+          }
+          //getUser is not available from backend
+          // if (data?.getUser?.name) {
+          //   meetingInfo.username = data.getUser.name;
+          // }
+          setMeetingInfo((prevState) => {
+            return {
+              ...prevState,
+              ...meetingInfo,
+            };
+          });
+        }
+      } catch (error) {
+        throw new Error('An error occurred in parsing the channel data.');
+      }
+    }
+  };
+}

package/template/src/utils/useLayout.tsx

@@ -0,0 +1,40 @@
+/*
+********************************************
+ 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 React, {SetStateAction} from 'react';
+import {createHook} from 'fpe-implementation';
+
+export interface LayoutContextInterface {
+  activeLayoutName: string;
+  setActiveLayoutName: React.Dispatch<SetStateAction<string>>;
+}
+
+const LayoutContext = React.createContext<LayoutContextInterface>({
+  activeLayoutName: '',
+  setActiveLayoutName: () => {},
+});
+
+interface LayoutProviderProps {
+  value: LayoutContextInterface;
+  children: React.ReactNode;
+}
+const LayoutProvider = (props: LayoutProviderProps) => {
+  return (
+    <LayoutContext.Provider value={{...props.value}}>
+      {props.children}
+    </LayoutContext.Provider>
+  );
+};
+
+const useLayout = createHook(LayoutContext);
+
+export {LayoutProvider, useLayout};

package/template/src/utils/useLiveStreamingUids.ts

@@ -0,0 +1,26 @@
+/*
+********************************************
+ 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 {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
+/**
+ * This hook will fetch the user list
+ * @returns userList
+ */
+
+function useLiveStreamingUids() {
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  return {
+    hostUids: hostUids,
+    audienceUids: audienceUids,
+  };
+}
+
+export default useLiveStreamingUids;

package/template/src/utils/useMutePSTN.ts

@@ -0,0 +1,43 @@
+import {gql, useMutation} from '@apollo/client';
+import {UidType} from '../../agora-rn-uikit';
+import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import useIsPSTN from './isPSTNUser';
+const MUTE_PSTN = gql`
+  mutation mutePSTN($uid: Int!, $passphrase: String!, $mute: Boolean!) {
+    mutePSTN(uid: $uid, passphrase: $passphrase, mute: $mute) {
+      uid
+      mute
+    }
+  }
+`;
+
+const useMutePSTN = () => {
+  const [mutePSTN, {data, loading, error}] = useMutation(MUTE_PSTN);
+  const {isHost, meetingPassphrase} = useMeetingInfo();
+  const isPSTN = useIsPSTN();
+  return async (uid: UidType) => {
+    if (isHost) {
+      if (isPSTN(uid)) {
+        await mutePSTN({
+          variables: {
+            uid: uid,
+            passphrase: meetingPassphrase?.host,
+            //todo: hari need to test mute flag for PSTN
+            mute: 1,
+          },
+        });
+      } else {
+        console.error('UID does not belong to the PSTN user.');
+      }
+      if (!loading && error) {
+        throw error;
+      } else {
+        return data;
+      }
+    } else {
+      console.error('A host can only mute audience audio or video.');
+    }
+  };
+};
+
+export default useMutePSTN;