agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/utils/useActionSheet.tsx

@@ -0,0 +1,50 @@
+/*
+********************************************
+ 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, {useState} from 'react';
+import {createHook} from 'customization-implementation';
+import {useToolbar} from './useToolbar';
+
+export interface ActionSheetInferface {
+  isOnActionSheet: boolean;
+  isOnFirstRow: boolean;
+  showLabel: boolean;
+}
+
+const ActionSheetContext = React.createContext<ActionSheetInferface>({
+  isOnActionSheet: false,
+  isOnFirstRow: false,
+  showLabel: $config.ICON_TEXT,
+});
+
+interface ActionSheetProviderProps {
+  children: React.ReactNode;
+  isOnFirstRow?: boolean;
+}
+const ActionSheetProvider = (props: ActionSheetProviderProps) => {
+  const {position} = useToolbar();
+  return (
+    <ActionSheetContext.Provider
+      value={{
+        isOnActionSheet: true,
+        isOnFirstRow: props?.isOnFirstRow,
+        showLabel:
+          !props?.isOnFirstRow && $config.ICON_TEXT && position !== undefined,
+      }}>
+      {props.children}
+    </ActionSheetContext.Provider>
+  );
+};
+
+const useActionSheet = createHook(ActionSheetContext);
+
+export {ActionSheetProvider, useActionSheet};

package/template/src/utils/useActiveSpeaker.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 {useEffect, useState} from 'react';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+
+/**
+ * Returns active speaker uid or undefined if nobody speaking
+ * @returns function
+ */
+function useActiveSpeaker() {
+  const [activeSpeaker, setActiveSpeaker] = useState(undefined);
+  useEffect(() => {
+    const listenActiveSpeaker = data => {
+      setActiveSpeaker(data);
+    };
+    LocalEventEmitter.on(LocalEventsEnum.ACTIVE_SPEAKER, listenActiveSpeaker);
+    return () => {
+      LocalEventEmitter.off(
+        LocalEventsEnum.ACTIVE_SPEAKER,
+        listenActiveSpeaker,
+      );
+    };
+  }, []);
+  return activeSpeaker;
+}
+
+export default useActiveSpeaker;

package/template/src/utils/useAppState.ts

@@ -0,0 +1,17 @@
+import {useEffect, useState} from 'react';
+import {AppState} from 'react-native';
+
+const useAppState = () => {
+  const [appStateVisible, setAppStateVisible] = useState(AppState.currentState);
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      setAppStateVisible(nextAppState);
+    });
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+  return appStateVisible;
+};
+
+export default useAppState;

package/template/src/utils/useAsyncEffect.ts

@@ -0,0 +1,138 @@
+import {useRef, useEffect} from 'react';
+
+export type Disposer = () => void;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Fn = (...args: any[]) => any;
+export type Nullable<T> = T | null | undefined;
+export type MaybePromise<T> = T | PromiseLike<T>;
+export type MaybePromiseOrNull<T> = MaybePromise<Nullable<T>>;
+
+export function invoke<T>(fn: () => T): T | void {
+  try {
+    return fn();
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export function joinDisposers(disposers: Disposer[]): Disposer {
+  return () => disposers.forEach(invoke);
+}
+
+export function interval(fn: Fn, interval: number): Disposer {
+  const id = setInterval(fn, interval);
+  return () => clearInterval(id);
+}
+
+export function timeout(fn: Fn, ms: number): Disposer {
+  const id = setTimeout(fn, ms);
+  return () => clearTimeout(id);
+}
+
+export interface AsyncTaskRunner {
+  run: (
+    this: void,
+    task: () => MaybePromise<void | (() => MaybePromise<void>)>,
+  ) => void;
+  dispose: (this: void) => void;
+}
+
+/**
+ * Chain async tasks. During the task running/stopping, if multiple tasks are triggered, only the last one will be executed.
+ */
+export function createAsyncTaskRunner(): AsyncTaskRunner {
+  let isRunning: boolean | undefined;
+  let nextTask: undefined | (() => MaybePromise<void>);
+  let disposer: undefined | void | (() => MaybePromise<void>);
+
+  function runNextTask() {
+    if (nextTask) {
+      const _nextTask = nextTask;
+      nextTask = void 0;
+      _nextTask();
+    }
+  }
+
+  async function disposeEffect() {
+    if (disposer) {
+      const _disposer = disposer;
+      disposer = void 0;
+      try {
+        await _disposer();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  async function runTask(
+    effect: () => MaybePromise<void | (() => MaybePromise<void>)>,
+  ) {
+    isRunning = true;
+
+    await disposeEffect();
+
+    try {
+      disposer = await effect();
+    } catch (e) {
+      console.error(e);
+    }
+
+    isRunning = false;
+
+    runNextTask();
+  }
+
+  async function stopTask() {
+    isRunning = true;
+
+    await disposeEffect();
+
+    isRunning = false;
+
+    runNextTask();
+  }
+
+  function run(
+    task: () => MaybePromise<void | (() => MaybePromise<void>)>,
+  ): void {
+    if (isRunning) {
+      nextTask = () => runTask(task);
+    } else {
+      runTask(task);
+    }
+  }
+
+  function dispose(): void {
+    if (isRunning) {
+      nextTask = stopTask;
+    } else {
+      stopTask();
+    }
+  }
+
+  return {
+    run,
+    dispose,
+  };
+}
+
+/**
+ * Accepts a function that contains imperative, possibly asynchronous effect-ful code.
+ * During the side-effect running/removing, if multiple effects are triggered, only the last one will be executed.
+ */
+export function useAsyncEffect(
+  effect: () => MaybePromise<void | (() => MaybePromise<void>)>,
+  deps?: ReadonlyArray<unknown>,
+): void {
+  const runnerRef = useRef<AsyncTaskRunner | undefined>();
+  useEffect(() => {
+    if (!runnerRef.current) {
+      runnerRef.current = createAsyncTaskRunner();
+    }
+    const {run, dispose} = runnerRef.current;
+    run(effect);
+    return dispose;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}

package/template/src/utils/useCreateRoom.ts

@@ -0,0 +1,152 @@
+import {gql, useMutation} from '@apollo/client';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import SDKEvents from '../utils/SdkEvents';
+import isSDK from './isSDK';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import getUniqueID from './getUniqueID';
+
+const CREATE_CHANNEL = gql`
+  mutation CreateChannel($title: String!, $enablePSTN: Boolean) {
+    createChannel(title: $title, enablePSTN: $enablePSTN) {
+      passphrase {
+        host
+        view
+      }
+      channel
+      title
+      pstn {
+        number
+        dtmf
+      }
+    }
+  }
+`;
+/**
+ * Returns an asynchronous function to create a meeting with the given options.
+ */
+export type createRoomFun = (
+  roomTitle: string,
+  enablePSTN?: boolean,
+) => Promise<void>;
+export default function useCreateRoom(): createRoomFun {
+  const [createChannel, {error}] = useMutation(CREATE_CHANNEL);
+  const {setRoomInfo} = useSetRoomInfo();
+  return async (
+    roomTitle: string,
+    enablePSTN?: boolean,
+    //isSeparateHostLink will be for internal usage since backend integration is not there
+    isSeparateHostLink?: boolean,
+  ) => {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    logger.log(
+      LogSource.NetworkRest,
+      'createChannel',
+      'API createChannel. Trying to create room',
+      {
+        roomTitle,
+        enablePSTN,
+        isSeparateHostLink,
+        startReqTs,
+        requestId,
+      },
+    );
+    const res = await createChannel({
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
+      variables: {
+        title: roomTitle,
+        enablePSTN: enablePSTN,
+      },
+    });
+    const endReqTs = Date.now();
+    const latency = endReqTs - startReqTs;
+    // in React-SDK mode, we use a more recent package of @apollo/client
+    // which is compatible with react18, long term we should be looking to
+    // upgrade core dependency as well. The following condition accounts
+    // for differences in the way the two version function.
+    if (error && !isSDK) {
+      logger.error(
+        LogSource.NetworkRest,
+        'createChannel',
+        'API createChannel failed. There was an error',
+        error,
+        {
+          networkError: {
+            name: error?.networkError?.name,
+            //@ts-ignore
+            code: error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: error?.networkError?.result?.error?.message,
+          },
+          startReqTs,
+          endReqTs,
+          latency: latency,
+          requestId,
+        },
+      );
+      throw error;
+    }
+
+    if (res && res?.data && res?.data?.createChannel) {
+      logger.log(
+        LogSource.NetworkRest,
+        'createChannel',
+        'API createChannel. Channel created successfully',
+        {
+          responseData: res.data.createChannel,
+          startReqTs,
+          endReqTs,
+          latency: latency,
+          requestId,
+        },
+      );
+      let roomInfo: Partial<RoomInfoContextInterface['data']> = {
+        roomId: {
+          attendee: '',
+        },
+      };
+      if (res?.data?.createChannel?.passphrase?.view) {
+        roomInfo.roomId.attendee = res.data.createChannel.passphrase.view;
+      }
+      if (res?.data?.createChannel?.passphrase?.host) {
+        roomInfo.roomId.host = res.data.createChannel.passphrase.host;
+      }
+      if (enablePSTN === true && res?.data?.createChannel?.pstn) {
+        roomInfo.pstn = {
+          number: res.data.createChannel.pstn.number,
+          pin: res.data.createChannel.pstn.dtmf,
+        };
+      }
+      logger.log(LogSource.Internals, 'CREATE_MEETING', 'Room created', {
+        isHost: true,
+        isSeparateHostLink: isSeparateHostLink ? true : false,
+        meetingTitle: roomTitle,
+        roomId: roomInfo?.roomId,
+        pstn: roomInfo?.pstn,
+      });
+      setRoomInfo({
+        data: {
+          isHost: true,
+          isSeparateHostLink: isSeparateHostLink ? true : false,
+          meetingTitle: roomTitle,
+          roomId: roomInfo?.roomId,
+          pstn: roomInfo?.pstn,
+        },
+      });
+      SDKEvents.emit(
+        'create',
+        roomInfo.roomId.host,
+        roomInfo.roomId.attendee,
+        roomInfo?.pstn,
+      );
+    } else {
+      throw new Error(`An error occurred in parsing the channel data.`);
+    }
+  };
+}

package/template/src/utils/useEndCall.ts

@@ -0,0 +1,74 @@
+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';
+import {useChatConfigure} from '../components/chat/chatConfigure';
+
+const useEndCall = () => {
+  const history = useHistory();
+  const {defaultContent} = useContent();
+  const {isSTTActive} = useCaption();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const {authLogin} = useAuth();
+  const {deleteChatUser} = useChatConfigure();
+
+  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 {
+      beforeEndCall &&
+        (await beforeEndCall(isHost, history as unknown as History));
+    } catch (error) {
+      console.log('debugging error on beforeEndCall', error);
+    }
+
+    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();
+    // removing user from chat server
+    if ($config.CHAT) {
+      deleteChatUser();
+    }
+    RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
+    if (!ENABLE_AUTH) {
+      // await authLogout();
+      await authLogin();
+    }
+
+    try {
+      afterEndCall &&
+        (await afterEndCall(isHost, history as unknown as History));
+    } catch (error) {
+      console.log('debugging error on afterEndCall', error);
+    }
+  };
+};
+
+export default useEndCall;

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

@@ -0,0 +1,4 @@
+const useFindActiveSpeaker = () => {
+  return null;
+};
+export default useFindActiveSpeaker;