agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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

@@ -30,11 +30,8 @@ const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
 
 const useHasBrandLogo = () => () => !!$config.LOGO;
 
-const shouldAuthenticate: boolean =
-  $config.ENABLE_APPLE_OAUTH ||
-  $config.ENABLE_GOOGLE_OAUTH ||
-  $config.ENABLE_MICROSOFT_OAUTH ||
-  $config.ENABLE_SLACK_OAUTH;
+const shouldAuthenticate: boolean = false;
+// $config.ENABLE_TOKEN_AUTH || $config.ENABLE_IDP_AUTH;
 
 //for our internal usage don't check Platform - electron and web will same kind ui checks. thats why we have isWeb for external usage
 const isWebInternal = () => ReactNativePlatform.OS === 'web';
@@ -175,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;
   };
@@ -205,6 +204,109 @@ const useResponsive = () => {
     }
   };
 };
+
+const processDeepLinkURI = (url: string): string => {
+  return url
+    .replace(`${$config.PRODUCT_ID.toLowerCase()}://my-host`, '')
+    .replace($config.FRONTEND_ENDPOINT, '');
+};
+
+const getParamFromURL = (url, param) => {
+  const include = url.includes(param);
+
+  if (!include) return null;
+
+  const params = url.split(/([&,?,=])/);
+  const index = params.indexOf(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,
   useIsSmall,
@@ -223,4 +325,14 @@ export {
   trimText,
   calculatePosition,
   useResponsive,
+  processDeepLinkURI,
+  getParamFromURL,
+  throttleFn,
+  debounceFn,
+  capitalizeFirstLetter,
+  CustomToolbarSort,
+  randomString,
+  randomIntFromInterval,
+  getOS,
+  hexToRgb,
 };

package/template/src/utils/endCallEveryOne.ts

@@ -0,0 +1,7 @@
+import {controlMessageEnum} from '../components/ChatContext';
+import events from '../rtm-events-api';
+
+const endCallEveryOne = () => {
+  events.send(controlMessageEnum.endCallForEveryone);
+};
+export default endCallEveryOne;

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,4 @@
+const Buffer = require('buffer/').Buffer;
 type Entry<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T];
@@ -74,3 +75,25 @@ 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');
+
+  const result = new Uint8Array(new ArrayBuffer(decodedData.length));
+  for (let i = 0; i < decodedData.length; i += 1) {
+    result[i] = 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

@@ -9,21 +9,19 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useContent} from 'customization-api';
 import {useEffect, useState} from 'react';
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
 
 /**
- * Returns a function that checks whether the given uid is a active speaker and returns true/false
+ * Returns active speaker uid or undefined if nobody speaking
  * @returns function
  */
 function useActiveSpeaker() {
   const [activeSpeaker, setActiveSpeaker] = useState(undefined);
-  const {defaultContent} = useContent();
   useEffect(() => {
-    const listenActiveSpeaker = (data) => {
+    const listenActiveSpeaker = data => {
       setActiveSpeaker(data);
     };
     LocalEventEmitter.on(LocalEventsEnum.ACTIVE_SPEAKER, listenActiveSpeaker);
@@ -34,9 +32,7 @@ function useActiveSpeaker() {
       );
     };
   }, []);
-  return activeSpeaker && defaultContent[activeSpeaker].audio
-    ? activeSpeaker
-    : undefined;
+  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

@@ -2,18 +2,11 @@ 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';
 
 const CREATE_CHANNEL = gql`
-  mutation CreateChannel(
-    $title: String!
-    $backendURL: String!
-    $enablePSTN: Boolean
-  ) {
-    createChannel(
-      title: $title
-      backendURL: $backendURL
-      enablePSTN: $enablePSTN
-    ) {
+  mutation CreateChannel($title: String!, $enablePSTN: Boolean) {
+    createChannel(title: $title, enablePSTN: $enablePSTN) {
       passphrase {
         host
         view
@@ -46,11 +39,14 @@ export default function useCreateRoom(): createRoomFun {
     const res = await createChannel({
       variables: {
         title: roomTitle,
-        backendURL: $config.BACKEND_ENDPOINT,
         enablePSTN: enablePSTN,
       },
     });
-    if (error) {
+    // 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) {
       throw error;
     }
     if (res && res?.data && res?.data?.createChannel) {

package/template/src/utils/useDisableButton.tsx

@@ -0,0 +1,37 @@
+/*
+********************************************
+ 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 events, {PersistanceLevel} from '../rtm-events-api';
+import {MUTE_REMOTE_TYPE} from './useRemoteMute';
+
+function useDisableButton() {
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  return async (type: MUTE_REMOTE_TYPE, action: boolean = true) => {
+    if (isHost) {
+      events.send(
+        controlMessageEnum.disableButton,
+        JSON.stringify({button: type, action}),
+        PersistanceLevel.None,
+      );
+    } else {
+      console.error(
+        'A host can only enable/disable participants video/audio button.',
+      );
+    }
+  };
+}
+
+export default useDisableButton;

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

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