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

package/template/src/subComponents/waiting-rooms/useWaitingRoomAPI.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+import StorageContext from '../../components/StorageContext';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
+import useGetName from '../../utils/useGetName';
+import {useLocalUid} from '../../../agora-rn-uikit';
+import {useParams} from '../../components/Router';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+import getUniqueID from '../../utils/getUniqueID';
+
+interface IuseWaitingRoomAPI {
+  request: (params: {
+    meetingPhrase?: string;
+    send_event: boolean;
+  }) => Promise<void>;
+  approval: (params: {
+    host_uid: number;
+    attendee_uid: number;
+    attendee_screenshare_uid?: number;
+    approved: boolean;
+  }) => Promise<void>;
+}
+
+const WAITING_ROOM_URL = `${$config.BACKEND_ENDPOINT}/v1/channel/join`;
+
+const useWaitingRoomAPI = (): IuseWaitingRoomAPI => {
+  const {store} = React.useContext(StorageContext);
+  const {phrase} = useParams<{phrase: string}>();
+  const {
+    data: {roomId, isHost},
+  } = useRoomInfo();
+
+  const apiCall = async (
+    method: 'request' | 'approval',
+    payload: string,
+    requestId: string,
+  ) => {
+    const response = await fetch(`${WAITING_ROOM_URL}/${method}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: store.token ? `Bearer ${store.token}` : '',
+        'X-Request-Id': requestId,
+        'X-Session-Id': logger.getSessionId(),
+      },
+      body: payload,
+    });
+    const res = await response.json();
+
+    return res;
+  };
+
+  const request = async ({meetingPhrase, send_event}) => {
+    const payload = JSON.stringify({
+      passphrase: meetingPhrase || phrase,
+      send_event: send_event,
+    });
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    logger.log(
+      LogSource.NetworkRest,
+      'channel_join_request',
+      'API channel_join_request trying to send request to join channel',
+      {payload, startReqTs, requestId},
+    );
+    const res = await apiCall('request', payload, requestId);
+    const endReqTs = Date.now();
+    logger.log(
+      LogSource.NetworkRest,
+      'channel_join_request',
+      'API channel_join_request executed successfully',
+      {
+        responseData: res,
+        requestId,
+        startReqTs,
+        endReqTs,
+        latency: endReqTs - startReqTs,
+      },
+    );
+    return res;
+  };
+
+  const approval = async ({
+    host_uid,
+    attendee_uid,
+    approved,
+    attendee_screenshare_uid,
+  }) => {
+    const payload = JSON.stringify({
+      passphrase: phrase,
+      host_uid: host_uid, //host id of approver,
+      attendee_uid: attendee_uid, //uid of whose request was approved,
+      attendee_screenshare_uid: attendee_screenshare_uid, // screenshare uid of attendee
+      approved: approved, //approval status,
+    });
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    logger.log(
+      LogSource.NetworkRest,
+      'channel_join_approval',
+      `API channel_join_approval. Trying to approve join channel request as waiting room is enabled. Is request approved ?  ${approved}`,
+      {payload, requestId, startReqTs},
+    );
+    const res = await apiCall('approval', payload, requestId);
+    const endReqTs = Date.now();
+    logger.log(
+      LogSource.NetworkRest,
+      'channel_join_request',
+      'API channel_join_approval executed successfully',
+      {
+        responseData: res,
+        requestId,
+        startReqTs,
+        endReqTs,
+        latency: endReqTs - startReqTs,
+      },
+    );
+    return res;
+  };
+
+  return {request, approval};
+};
+
+export default useWaitingRoomAPI;

package/template/src/theme/index.ts

@@ -0,0 +1,59 @@
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+const EmphasisOpacity = {
+  high: 1,
+  medium: 0.85,
+  low: 0.4,
+  disabled: 0.4,
+};
+const EmphasisPlus = {
+  high: '',
+  medium: hexadecimalTransparency['85%'],
+  low: hexadecimalTransparency['40%'],
+  disabled: hexadecimalTransparency['40%'],
+};
+export interface FontSizes {
+  extraLarge: number;
+  large: number;
+  medium: number;
+  normal: number;
+  small: number;
+  tiny: number;
+}
+const FontSize: {
+  extraLarge: 32;
+  xLarge: 24;
+  large: 20;
+  medium: 18;
+  normal: 16;
+  small: 14;
+  tiny: 12;
+} = {
+  extraLarge: 32,
+  xLarge: 24,
+  large: 20,
+  medium: 18,
+  normal: 16,
+  small: 14,
+  tiny: 12,
+};
+
+const FontFamily = {
+  sansPro: 'Source Sans Pro',
+};
+
+const BorderRadius: {small: 4; medium: 8; large: 12; extraLarge: 20} = {
+  small: 4,
+  medium: 8,
+  large: 12,
+  extraLarge: 20,
+};
+
+const ThemeConfig = {
+  EmphasisOpacity,
+  EmphasisPlus,
+  FontSize,
+  FontFamily,
+  BorderRadius,
+};
+export default ThemeConfig;

package/template/src/utils/PlatformWrapper.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useState} from 'react';
+import {isWebInternal} from './common';
+
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+export default PlatformWrapper;

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,105 @@
+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,
+    preference?: {
+      disableShareTile: boolean;
+      disableVideoProcessors: boolean;
+    },
+  ): 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,122 @@
+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[]) => {
+  if (p && p?.length) {
+    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()),
+      },
+    );
+  } else {
+    console.log('queue is empty, no logs available to send');
+  }
+};
+
+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.PROJECT_ID,
+      appId: $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);
+  };
+};