agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/utils/SdkEvents.ts

@@ -9,24 +9,47 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-/**
- * @format
- */
-type callBackType = (...args: any[]) => void;
-import {userEventsMapInterface} from '../SDKAppWrapper';
+
 import {createNanoEvents} from 'nanoevents';
+import {UidType} from 'agora-rn-uikit';
+import {IRemoteTrack} from 'agora-rtc-sdk-ng';
 
-interface eventsMapInterface extends userEventsMapInterface {
-  addFpe?: callBackType;
-  addFpeInit?: () => void;
-  joinInit?: () => void;
-  joinMeetingWithPhrase?: (
-    phrase: string,
-    resolve: () => void,
-    reject: (e: Error) => void,
+export interface userEventsMapInterface {
+  leave: () => void;
+  create: (
+    hostPhrase: string,
+    attendeePhrase?: string,
+    pstnNumer?: {
+      number: string;
+      pin: string;
+    },
+  ) => void;
+  'ready-to-join': (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  join: (
+    meetingTitle: string,
+    devices: MediaDeviceInfo[],
+    isHost: boolean,
+  ) => void;
+  'rtc-user-published': (uid: UidType, trackType: 'audio' | 'video') => void;
+  'rtc-user-unpublished': (uid: UidType, trackType: 'audio' | 'video') => void;
+  'rtc-user-joined': (uid: UidType) => void;
+  'rtc-user-left': (uid: UidType) => void;
+  '_rtm-joined': (uid: UidType) => void;
+  'devices-selected-microphone-changed': (
+    deviceId: MediaDeviceInfo['deviceId'],
+  ) => void;
+  'devices-selected-camera-changed': (
+    deviceId: MediaDeviceInfo['deviceId'],
+  ) => void;
+  'devices-selected-speaker-changed': (
+    deviceId: MediaDeviceInfo['deviceId'],
   ) => void;
+  'token-not-found': () => void;
+  'will-token-expire': () => void;
+  'did-token-expire': () => void;
+  'token-refreshed': () => void;
 }
 
-const SDKEvents = createNanoEvents<eventsMapInterface>();
+const SDKEvents = createNanoEvents<userEventsMapInterface>();
 
 export default SDKEvents;

package/template/src/utils/SdkMethodEvents.ts

@@ -0,0 +1,101 @@
+import {createNanoEvents, Emitter} from 'nanoevents';
+import {
+  CustomizationApiInterface,
+  RoomInfoContextInterface,
+} from 'customization-api';
+import {deviceId} from '../components/DeviceConfigure';
+
+export interface SdkMethodEvents {
+  customize: (customization: CustomizationApiInterface) => void;
+  join(
+    roomid: string | Partial<RoomInfoContextInterface['data']>,
+    skipPrecall?: boolean,
+    username?: string,
+  ): RoomInfoContextInterface['data'];
+  microphoneDevice: (deviceId: deviceId) => void;
+  speakerDevice: (deviceId: deviceId) => void;
+  cameraDevice: (deviceId: deviceId) => void;
+  muteAudio: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  muteVideo: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  login: (token: string) => void;
+  logout: () => void;
+}
+
+type EventParameterHelper<T extends keyof SdkMethodEvents> = Parameters<
+  SdkMethodEvents[T]
+>;
+
+type EventReturnTypeHelper<T extends keyof SdkMethodEvents> = ReturnType<
+  SdkMethodEvents[T]
+>;
+
+type EventKeyNameHelper = keyof SdkMethodEvents;
+
+type injectAsync<T extends (...p: any) => any> = (
+  res: (result?: ReturnType<T> | PromiseLike<ReturnType<T>>) => void,
+  rej: (reason?: any) => void,
+  ...params: Parameters<T>
+) => void;
+
+export type _InternalSDKMethodEventsMap = {
+  [K in EventKeyNameHelper]: injectAsync<SdkMethodEvents[K]>;
+};
+
+type emitCacheType = {
+  [K in EventKeyNameHelper]?: Parameters<_InternalSDKMethodEventsMap[K]>;
+};
+
+type emitCacheEnabledType = {
+  [K in EventKeyNameHelper]?: boolean;
+};
+
+class SDKMethodEvents {
+  constructor() {
+    this.emitter = createNanoEvents();
+  }
+
+  emitter: Emitter;
+
+  emitCache: emitCacheType = {};
+  emitCacheDisabled: emitCacheEnabledType = {};
+
+  async emit<T extends EventKeyNameHelper>(
+    event: T,
+    ...params: EventParameterHelper<T>
+  ) {
+    if (this.emitCache[event]) {
+      throw new Error(`Event: ${event} already in callstack`);
+    }
+
+    const result = await new Promise<EventReturnTypeHelper<T>>((res, rej) => {
+      this.emitCache[event] = [res, rej, ...params] as any;
+      this.emitter.emit(event, res, rej, ...params);
+    })
+      .then(res => {
+        delete this.emitCache[event];
+        return res;
+      })
+      .catch(e => {
+        delete this.emitCache[event];
+        throw e;
+      });
+
+    return result;
+  }
+
+  on<T extends EventKeyNameHelper>(
+    event: T,
+    callback: _InternalSDKMethodEventsMap[T],
+  ) {
+    const unsub = this.emitter.on(event, callback);
+    if (this.emitCache[event] && !this.emitCacheDisabled[event]) {
+      this.emitter.emit(event, ...this.emitCache[event]);
+    }
+    this.emitCacheDisabled[event] = true;
+    return unsub;
+  }
+}
+
+const SDKMethodEventsManager = new SDKMethodEvents();
+
+export default SDKMethodEventsManager;

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/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;