agora-appbuilder-core 4.0.0 → 4.0.1

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,19 +1,12 @@
 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';
 
 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
@@ -30,56 +23,64 @@ 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({
       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) {
-      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;

package/template/src/utils/useFindActiveSpeaker.ts

@@ -0,0 +1,335 @@
+import {
+  useLocalUid,
+  useLocalUserInfo,
+  useContent,
+  useRtc,
+  UidType,
+} from 'customization-api';
+import {useContext, useEffect, useRef} from 'react';
+import events, {PersistanceLevel} from '../rtm-events-api';
+import useIsLocalUserSpeaking from './useIsLocalUserSpeaking';
+import {filterObject} from '../utils/index';
+import ChatContext from '../components/ChatContext';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+
+enum volumeEnum {
+  IS_SPEAKING = 'IS_SPEAKING',
+  SPEAKING_VOLUME = 'SPEAKING_VOLUME',
+  NON_SPEAKING_VOLUME = 'NON_SPEAKING_VOLUME',
+}
+const useFindActiveSpeaker = () => {
+  const localUid = useLocalUid();
+  const isLocalUserSpeaking = useIsLocalUserSpeaking();
+  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const {RtcEngineUnsafe} = useRtc();
+  const {defaultContent} = useContent();
+  const {uid} = useLocalUserInfo();
+  const defaultContentRef = useRef(defaultContent);
+  const maxSpeakingVolumeRef = useRef(0);
+  const minNonSpeakingVolumeRef = useRef(100);
+  const usersVolume = useRef({});
+  const activeSpeakerUid = useRef(undefined);
+
+  const emitActiveSpeaker = (uid: UidType) => {
+    if (uid !== activeSpeakerUid.current) {
+      activeSpeakerUid.current = uid;
+      LocalEventEmitter.emit(LocalEventsEnum.ACTIVE_SPEAKER, uid);
+    }
+  };
+
+  useEffect(() => {
+    defaultContentRef.current = defaultContent;
+  }, [defaultContent]);
+
+  const normalize = (value, min, max) => {
+    return (value - min) / (max - min);
+  };
+
+  const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
+    console.log('[ActiveSpeaker]' + arg1, ...args);
+  };
+
+  useEffect(() => {
+    if ($config.ACTIVE_SPEAKER) {
+      isLocalUserSpeaking
+        ? log(' %cLocal user started speaking', 'color:green')
+        : log(' %cLocal user stopped speaking', 'color:red');
+
+      //sending local user speaking and non speaking volume to remote users
+      let volume = 0;
+      //@ts-ignore
+      const volumes = RtcEngineUnsafe?.getUsersVolumeLevel();
+
+      const localUserData = volumes.find(i => i.uid == uid);
+      if (localUserData && localUserData.level) {
+        volume = Math.round(localUserData.level * 100) / 100;
+      }
+      if (volume) {
+        if (isLocalUserSpeaking && volume > maxSpeakingVolumeRef.current) {
+          //for remote users
+          maxSpeakingVolumeRef.current = volume;
+          hasUserJoinedRTM &&
+            events.send(
+              volumeEnum.SPEAKING_VOLUME,
+              volume.toString(),
+              PersistanceLevel.Sender,
+            );
+          //for local user
+          speakingVolumeEventCallBack({
+            payload: volume.toString(),
+            sender: uid,
+          });
+        } else if (
+          !isLocalUserSpeaking &&
+          volume < minNonSpeakingVolumeRef.current
+        ) {
+          //for remote users
+          minNonSpeakingVolumeRef.current = volume;
+          hasUserJoinedRTM &&
+            events.send(
+              volumeEnum.NON_SPEAKING_VOLUME,
+              volume.toString(),
+              PersistanceLevel.Sender,
+            );
+          //for local user
+          nonSpeakingVolumeEventCallback({
+            payload: volume.toString(),
+            sender: uid,
+          });
+        }
+      }
+
+      //inform local user is speaking
+      if (isLocalUserSpeaking) {
+        //inform remote users
+        hasUserJoinedRTM &&
+          events.send(volumeEnum.IS_SPEAKING, 'true', PersistanceLevel.Sender);
+        //for local usage
+        isSpeakingEventCallback({payload: 'true', sender: uid});
+      } else {
+        //inform remote users
+        hasUserJoinedRTM &&
+          events.send(volumeEnum.IS_SPEAKING, 'false', PersistanceLevel.Sender);
+        //for local usage
+        isSpeakingEventCallback({payload: 'false', sender: uid});
+      }
+    }
+  }, [isLocalUserSpeaking, hasUserJoinedRTM]);
+
+  //findout who is active speaker using usersVolume(speaking and non speaking volume) and current user volume
+  const findActiveSpeaker = () => {
+    //filter the user id who are all speaking
+    const speakingUids = Object.keys(
+      //@ts-ignore
+      filterObject(usersVolume.current, ([k, v]) => {
+        //@ts-ignore
+        return v?.isSpeaking && defaultContentRef.current[k]?.audio;
+      }),
+    );
+    if (!speakingUids || speakingUids?.length == 0) {
+      log(' %cFinal No Active speaker', 'color:red');
+      emitActiveSpeaker(0);
+    } else {
+      if (speakingUids?.length === 1) {
+        log(
+          ' %cFinal Active Speaker - Only one user is speaking',
+          'color:green',
+          defaultContentRef.current[speakingUids[0]]?.name,
+        );
+        emitActiveSpeaker(parseInt(speakingUids[0]));
+      } else {
+        //for logging
+        let speakerNames = '';
+
+        //get current volume levels for users
+        //@ts-ignore
+        const currentUsersVolume = RtcEngineUnsafe?.getUsersVolumeLevel();
+
+        const normalizedValues = {};
+        speakingUids?.forEach(speakerUid => {
+          //for logging
+          speakerNames =
+            speakerNames + ' ' + defaultContentRef.current[speakerUid]?.name;
+
+          const uuid = parseInt(speakerUid);
+          const data = currentUsersVolume?.find(i => i.uid === uuid);
+          const returnVal = normalize(
+            data?.level || usersVolume.current[uuid]?.speakingVolume, //current level
+            usersVolume.current[uuid]?.nonSpeakingVolume || 0,
+            usersVolume.current[uuid]?.speakingVolume || 100,
+          );
+          normalizedValues[uuid] = returnVal;
+        });
+
+        log(
+          ' %cFinal Multiple users are speaking',
+          'color:green',
+          speakerNames,
+        );
+
+        const sorted = Object.keys(normalizedValues).sort((a, b) => {
+          return normalizedValues[b] - normalizedValues[a];
+        });
+
+        log(
+          ' %cFinal Active Speaker',
+          'color:green',
+          defaultContentRef.current[sorted[0]]?.name,
+        );
+
+        emitActiveSpeaker(parseInt(sorted[0]));
+
+        //for logging purpose
+        let obj = {};
+        sorted.map(i => {
+          let id = parseInt(i);
+          const curtdata = currentUsersVolume.find(i => i.uid === id);
+          const cl =
+            curtdata && curtdata?.level
+              ? Math.round(curtdata?.level * 100) / 100
+              : 0;
+          obj[id] = {
+            name: defaultContentRef.current[id]?.name,
+            normalizedVolume: normalizedValues[id],
+            currentVolume: cl || usersVolume.current[id]?.speakingVolume,
+            minNonSpeakingVolume: usersVolume.current[id]?.nonSpeakingVolume,
+            speakingVolume: usersVolume.current[id]?.speakingVolume,
+            isSpeaking: usersVolume.current[id]?.isSpeaking,
+          };
+        });
+        log(' %cFinal Active speaker data', 'color:green', JSON.stringify(obj));
+        //for logging purpose
+      }
+    }
+
+    /*
+    //get current volume levels for users
+    //@ts-ignore
+    const currentUsersVolume = RtcEngineUnsafe?.getUsersVolumeLevel();
+
+    const normalizedValues = {};
+
+    currentUsersVolume.forEach((i) => {
+      //validation
+      if (
+        defaultContentRef.current[i.uid]?.audio &&
+        usersVolume.current[i.uid]?.isSpeaking
+      ) {
+        const returnVal = normalize(
+          i.level, //current level
+          usersVolume.current[i.uid]?.nonSpeakingVolume || 0,
+          usersVolume.current[i.uid]?.speakingVolume || 100,
+        );
+        normalizedValues[i.uid] = returnVal;
+      }
+    });
+
+    const sorted = Object.keys(normalizedValues).sort((a, b) => {
+      return normalizedValues[b] - normalizedValues[a];
+    });
+
+    if (!sorted || !sorted?.length) {
+      console.log('debugging no active speaker');
+      setActiveSpeaker(0);
+    } else if (
+      sorted &&
+      sorted.length &&
+      parseInt(sorted[0]) !== activeSpeaker
+    ) {
+      setActiveSpeaker(parseInt(sorted[0]));
+
+      //for logging purpose
+      let obj = {};
+      sorted.map((i) => {
+        let id = parseInt(i);
+        const curtdata = currentUsersVolume.find((i) => i.uid === id);
+        const cl =
+          curtdata && curtdata?.level
+            ? Math.round(curtdata?.level * 100) / 100
+            : 'no vol';
+        obj[id] = {
+          name: defaultContentRef.current[id]?.name,
+          normalizedVolume: normalizedValues[id],
+          currentVolume: cl,
+          minNonSpeakingVolume: usersVolume.current[id]?.nonSpeakingVolume,
+          speakingVolume: usersVolume.current[id]?.speakingVolume,
+          isSpeaking: usersVolume.current[id]?.isSpeaking,
+        };
+      });
+      console.log('debugging active speaker data', JSON.stringify(obj));
+      //for logging purpose
+    }*/
+  };
+
+  const isSpeakingEventCallback = ({payload, sender}) => {
+    if (sender == localUid) {
+      // log(' local user speaking stauts', sender, '=', payload);
+    } else {
+      log(' remote user speaking status ', sender, '=', payload);
+    }
+
+    usersVolume.current = {
+      ...usersVolume.current,
+      [sender]: {
+        ...usersVolume.current[sender],
+        isSpeaking: payload === 'true' ? true : false,
+      },
+    };
+    findActiveSpeaker();
+  };
+
+  const speakingVolumeEventCallBack = ({payload, sender}) => {
+    if (sender == localUid) {
+      log(' local user speaking volume ', sender, '=', payload);
+    } else {
+      log(' remote user speaking volume ', sender, '=', payload);
+    }
+
+    usersVolume.current = {
+      ...usersVolume.current,
+      [sender]: {
+        ...usersVolume.current[sender],
+        speakingVolume: parseFloat(payload),
+      },
+    };
+  };
+
+  const nonSpeakingVolumeEventCallback = ({payload, sender}) => {
+    if (sender == localUid) {
+      log(' local user non speaking volume ', sender, '=', payload);
+    } else {
+      log(' remote user non speaking volume ', sender, '=', payload);
+    }
+
+    usersVolume.current = {
+      ...usersVolume.current,
+      [sender]: {
+        ...usersVolume.current[sender],
+        nonSpeakingVolume: parseFloat(payload),
+      },
+    };
+  };
+  useEffect(() => {
+    if ($config.ACTIVE_SPEAKER) {
+      events.on(volumeEnum.SPEAKING_VOLUME, speakingVolumeEventCallBack);
+      events.on(volumeEnum.NON_SPEAKING_VOLUME, nonSpeakingVolumeEventCallback);
+      events.on(volumeEnum.IS_SPEAKING, isSpeakingEventCallback);
+    }
+
+    return () => {
+      if ($config.ACTIVE_SPEAKER) {
+        events.off(volumeEnum.SPEAKING_VOLUME, speakingVolumeEventCallBack);
+        events.off(
+          volumeEnum.NON_SPEAKING_VOLUME,
+          nonSpeakingVolumeEventCallback,
+        );
+        events.off(volumeEnum.IS_SPEAKING, isSpeakingEventCallback);
+      }
+    };
+  }, []);
+
+  return null;
+};
+export default useFindActiveSpeaker;

package/template/src/utils/useGetMeetingPhrase.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react';
 import {gql} 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 {GraphQLContext} from '../components/GraphQLProvider';
 
 const SHARE = gql`
@@ -22,7 +22,7 @@ const SHARE = gql`
 `;
 
 export default function useGetMeetingPhrase() {
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   const {client} = useContext(GraphQLContext);
   return async (phrase: string) => {
     const response = await client.query({
@@ -37,28 +37,28 @@ export default function useGetMeetingPhrase() {
       try {
         if (response && response.data) {
           let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+          let roomInfo: Partial<RoomInfoContextInterface['data']> = {
             roomId: {attendee: ''},
           };
           if (data?.share?.passphrase?.view) {
-            meetingInfo.roomId.attendee = data.share.passphrase.view;
+            roomInfo.roomId.attendee = data.share.passphrase.view;
           }
           if (data?.share?.passphrase?.host) {
-            meetingInfo.roomId.host = data.share.passphrase.host;
+            roomInfo.roomId.host = data.share.passphrase.host;
           }
           if (data?.share?.pstn) {
-            meetingInfo.pstn = {
+            roomInfo.pstn = {
               number: data.share.pstn.number,
               pin: data.share.pstn.dtmf,
             };
           }
-          setMeetingInfo((prevState) => {
+          setRoomInfo((prevState) => {
             return {
               ...prevState,
               data: {
                 ...prevState.data,
-                roomId: meetingInfo.roomId,
-                pstn: meetingInfo?.pstn,
+                roomId: roomInfo.roomId,
+                pstn: roomInfo?.pstn,
               },
             };
           });