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

package/template/src/utils/axiomLogger.ts

@@ -0,0 +1,117 @@
+import createRetryFetch from 'fetch-retry';
+import isSDK from './isSDK';
+import {isAndroid, isWeb, isIOS} from './common';
+
+/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#examples */
+export function getCircularReplacer() {
+  const ancestors = [];
+  return function (key, value) {
+    if (typeof value !== 'object' || value === null) {
+      return value;
+    }
+    // `this` is the object that value is contained in,
+    // i.e., its direct parent.
+    while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
+      ancestors.pop();
+    }
+    if (ancestors.includes(value)) {
+      return '[Circular]';
+    }
+    ancestors.push(value);
+    return value;
+  };
+}
+
+const fetchRetry = createRetryFetch(fetch, {
+  retries: 23,
+  retryDelay: function (attempt) {
+    return Math.pow(2, attempt) * 1000; // 1000, 2000, 4000
+  },
+  retryOn: function (attempt, error, response) {
+    // retry on any network error, or 4xx or 5xx status codes
+    if (error !== null || response.status > 400) {
+      return true;
+    }
+  },
+});
+
+const sendLogs = (p: any[]) => {
+  fetchRetry(
+    'https://axiom-queue.appbuilder.workers.dev?dataset=app-builder-core',
+    // "&strategy=queue", // to send logs to a specific dataset [default: queue]
+    {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(p, getCircularReplacer()),
+    },
+  );
+};
+
+export const createAxiomLogger = () => {
+  const queue: any[] = [];
+  let batchId = 0;
+  let timeout: number | null = null;
+
+  const sendInterval = 45000; // 45s
+
+  const flush = () => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    if (queue.length === 0) return;
+    sendLogs(queue);
+    queue.length = 0;
+    batchId = batchId + 1;
+  };
+
+  const log = (logContent: {[key: string]: any}) => {
+    logContent.batchId = batchId;
+    queue.push(logContent);
+    if (queue.length >= 1000) {
+      flush();
+    } else {
+      if (timeout === null) {
+        // @ts-ignore
+        timeout = setTimeout(() => {
+          flush();
+        }, sendInterval);
+      }
+    }
+  };
+
+  return [log, flush] as const;
+};
+
+export const setupLogger = () => {
+  const [log, flush] = createAxiomLogger();
+
+  const _console_log = console.log;
+
+  console.log = (...args: any[]) => {
+    log({
+      data: args,
+      _time: Date.now(),
+      projectId: $config.APP_ID,
+      service: 'app-builder-core',
+      env: isSDK()
+        ? 'SDK'
+        : isWeb()
+        ? 'Web'
+        : isAndroid()
+        ? 'Android'
+        : isIOS()
+        ? 'Ios'
+        : 'Electron',
+    });
+
+    isWeb() &&
+      window.addEventListener('beforeunload', () => {
+        flush();
+      });
+
+    _console_log(...args);
+  };
+};

package/template/src/utils/common.tsx

@@ -172,13 +172,15 @@ const BREAKPOINTS = {
 
 const useIsDesktop = () => {
   const {width, height} = useWindowDimensions();
-  return (from: 'default' | 'toolbar' | 'popup' = 'default') => {
+  return (from: 'default' | 'toolbar' | 'popup' | 'large' = 'default') => {
     if (from === 'default') {
       return width > height ? true : false;
     } else if (from === 'toolbar') {
       return width > BREAKPOINTS.xl;
     } else if (from === 'popup') {
       return width > BREAKPOINTS.md;
+    } else if (from === 'large') {
+      return width > BREAKPOINTS.lg;
     }
     return width >= BREAKPOINTS.xl;
   };
@@ -219,6 +221,91 @@ const getParamFromURL = (url, param) => {
   const value = params[index + 2];
   return value;
 };
+const throttleFn = (fn: Function, wait: number = 300) => {
+  let inThrottle: boolean,
+    lastFn: ReturnType<typeof setTimeout>,
+    lastTime: number;
+  return function (this: any) {
+    const context = this,
+      args = arguments;
+    if (!inThrottle) {
+      fn.apply(context, args);
+      lastTime = Date.now();
+      inThrottle = true;
+    } else {
+      clearTimeout(lastFn);
+      lastFn = setTimeout(() => {
+        if (Date.now() - lastTime >= wait) {
+          fn.apply(context, args);
+          lastTime = Date.now();
+        }
+      }, Math.max(wait - (Date.now() - lastTime), 0));
+    }
+  };
+};
+
+const debounceFn = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+const capitalizeFirstLetter = (word: string): string => {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
+const CustomToolbarSort = (a, b) =>
+  (a.hasOwnProperty('order') ? a.order : 999999) -
+  (b.hasOwnProperty('order') ? b.order : 999999);
+
+const randomString = (
+  length = 5,
+  chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+) => {
+  var result = '';
+  for (var i = length; i > 0; --i)
+    result += chars[Math.floor(Math.random() * chars.length)];
+  return result;
+};
+
+function randomIntFromInterval(min, max) {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+function getOS() {
+  let userAgent = window.navigator.userAgent.toLowerCase(),
+    macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i,
+    windowsPlatforms = /(win32|win64|windows|wince)/i,
+    iosPlatforms = /(iphone|ipad|ipod)/i,
+    os = null;
+
+  if (macosPlatforms.test(userAgent)) {
+    os = 'macos';
+  } else if (iosPlatforms.test(userAgent)) {
+    os = 'ios';
+  } else if (windowsPlatforms.test(userAgent)) {
+    os = 'windows';
+  } else if (/android/.test(userAgent)) {
+    os = 'android';
+  } else if (!os && /linux/.test(userAgent)) {
+    os = 'linux';
+  }
+
+  return os;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+      ]
+    : [0, 0, 0];
+}
 
 export {
   useIsDesktop,
@@ -240,4 +327,12 @@ export {
   useResponsive,
   processDeepLinkURI,
   getParamFromURL,
+  throttleFn,
+  debounceFn,
+  capitalizeFirstLetter,
+  CustomToolbarSort,
+  randomString,
+  randomIntFromInterval,
+  getOS,
+  hexToRgb,
 };

package/template/src/utils/constants.ts

@@ -0,0 +1,4 @@
+const RECORDING_BOT_UID = '100000';
+const RECORDING_BOT_SCREENSHARE_UID = '100001';
+
+export {RECORDING_BOT_UID, RECORDING_BOT_SCREENSHARE_UID};

package/template/src/utils/getCustomRoute.ts

@@ -0,0 +1,7 @@
+import {CUSTOM_ROUTES_PREFIX} from 'customization-api';
+
+const getCustomRoute = customRouteName => {
+  return CUSTOM_ROUTES_PREFIX + customRouteName;
+};
+
+export default getCustomRoute;

package/template/src/utils/index.tsx

@@ -1,3 +1,6 @@
+import {isWebInternal} from './common';
+
+const Buffer = require('buffer/').Buffer;
 type Entry<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T];
@@ -74,3 +77,34 @@ export function formatAMPM(date) {
   var strTime = hours + ':' + minutes + ' ' + ampm;
   return strTime;
 }
+export function isURL(str) {
+  if (!str) {
+    return false;
+  }
+  var urlRegex =
+    '^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$';
+  var url = new RegExp(urlRegex, 'i');
+  return str.length < 2083 && url.test(str);
+}
+
+export const base64ToUint8Array = (base64Str: string) => {
+  let decodedData;
+
+  decodedData = Buffer.from(base64Str, 'base64').toString('binary');
+
+  if (isWebInternal()) {
+    const result: Uint8Array = new Uint8Array(
+      new ArrayBuffer(decodedData.length),
+    );
+    for (let i = 0; i < decodedData.length; i += 1) {
+      result[i] = decodedData.charCodeAt(i);
+    }
+    return result;
+  } else {
+    const result: number[] = [];
+    for (let i = 0; i < decodedData.length; i++) {
+      result.push(decodedData.charCodeAt(i));
+    }
+    return result;
+  }
+};

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/{useCreateMeeting.ts → useCreateRoom.ts}

@@ -1,6 +1,6 @@
 import {gql, useMutation} 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 SDKEvents from '../utils/SdkEvents';
 import isSDK from './isSDK';
 
@@ -23,12 +23,17 @@ const CREATE_CHANNEL = gql`
 /**
  * Returns an asynchronous function to create a meeting with the given options.
  */
-export default function useCreateMeeting() {
+export type createRoomFun = (
+  roomTitle: string,
+  enablePSTN?: boolean,
+) => Promise<void>;
+export default function useCreateRoom(): createRoomFun {
   const [createChannel, {error}] = useMutation(CREATE_CHANNEL);
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   return async (
     roomTitle: string,
     enablePSTN?: boolean,
+    //isSeparateHostLink will be for internal usage since backend integration is not there
     isSeparateHostLink?: boolean,
   ) => {
     const res = await createChannel({
@@ -45,37 +50,37 @@ export default function useCreateMeeting() {
       throw error;
     }
     if (res && res?.data && res?.data?.createChannel) {
-      let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+      let roomInfo: Partial<RoomInfoContextInterface['data']> = {
         roomId: {
           attendee: '',
         },
       };
       if (res?.data?.createChannel?.passphrase?.view) {
-        meetingInfo.roomId.attendee = res.data.createChannel.passphrase.view;
+        roomInfo.roomId.attendee = res.data.createChannel.passphrase.view;
       }
       if (res?.data?.createChannel?.passphrase?.host) {
-        meetingInfo.roomId.host = res.data.createChannel.passphrase.host;
+        roomInfo.roomId.host = res.data.createChannel.passphrase.host;
       }
       if (enablePSTN === true && res?.data?.createChannel?.pstn) {
-        meetingInfo.pstn = {
+        roomInfo.pstn = {
           number: res.data.createChannel.pstn.number,
           pin: res.data.createChannel.pstn.dtmf,
         };
       }
-      setMeetingInfo({
+      setRoomInfo({
         data: {
           isHost: true,
           isSeparateHostLink: isSeparateHostLink ? true : false,
           meetingTitle: roomTitle,
-          roomId: meetingInfo?.roomId,
-          pstn: meetingInfo?.pstn,
+          roomId: roomInfo?.roomId,
+          pstn: roomInfo?.pstn,
         },
       });
       SDKEvents.emit(
         'create',
-        meetingInfo.roomId.host,
-        meetingInfo.roomId.attendee,
-        meetingInfo?.pstn,
+        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,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/useFindActiveSpeaker.native.ts

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