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

package/template/src/utils/useGetMeetingPhrase.ts

@@ -1,8 +1,10 @@
 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';
+import getUniqueID from './getUniqueID';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 const SHARE = gql`
   query share($passphrase: String!) {
@@ -22,43 +24,92 @@ const SHARE = gql`
 `;
 
 export default function useGetMeetingPhrase() {
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   const {client} = useContext(GraphQLContext);
   return async (phrase: string) => {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    logger.log(
+      LogSource.Internals,
+      'GET_MEETING_PHRASE',
+      'Query Trying request to meeting phrase details',
+      {
+        requestId,
+        startReqTs,
+      },
+    );
     const response = await client.query({
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
       query: SHARE,
       variables: {
         passphrase: phrase,
       },
     });
+    const endReqTs = Date.now();
     if (response.error) {
+      logger.error(
+        LogSource.Internals,
+        'GET_MEETING_PHRASE',
+        'Query GET_MEETING_PHRASE failed',
+        response.error,
+        {
+          networkError: {
+            name: response?.error?.networkError?.name,
+            //@ts-ignore
+            code: response?.error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: response?.error?.networkError?.result?.error?.message,
+          },
+          requestId,
+          startReqTs,
+          endReqTs,
+          latency: endReqTs - startReqTs,
+        },
+      );
       throw response.error;
     } else {
+      logger.log(
+        LogSource.Internals,
+        'GET_MEETING_PHRASE',
+        'Query GET_MEETING_PHRASE success',
+        {
+          responseData: response,
+          requestId,
+          startReqTs,
+          endReqTs,
+          latency: endReqTs - startReqTs,
+        },
+      );
       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,
               },
             };
           });

package/template/src/utils/useIsAudioEnabled.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 
@@ -18,14 +18,14 @@ import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
  * @returns function
  */
 function useIsAudioEnabled() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   /**
    *
    * @param uid UidType
    * @returns boolean
    */
   const isAudioEnabled = (uid: UidType): boolean =>
-    renderList[uid]?.audio === ToggleState.enabled;
+    defaultContent[uid]?.audio === ToggleState.enabled;
 
   return isAudioEnabled;
 }

package/template/src/utils/useIsHandRaised.ts

@@ -0,0 +1,13 @@
+import {useContext} from 'react';
+import {UidType} from '../../agora-rn-uikit';
+import LiveStreamContext from '../components/livestream/LiveStreamContext';
+import {RaiseHandValue} from '../components/livestream/Types';
+
+const useIsHandRaised = () => {
+  const {raiseHandList} = useContext(LiveStreamContext);
+  const isHandRaised = (uid: UidType) => {
+    return raiseHandList[uid]?.raised === RaiseHandValue.TRUE;
+  };
+  return isHandRaised;
+};
+export default useIsHandRaised;

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

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

package/template/src/utils/useIsLocalUserSpeaking.ts

@@ -0,0 +1,119 @@
+import {useLocalUserInfo} from 'customization-api';
+import hark from 'hark';
+import {useEffect, useRef, useState} from 'react';
+import {useAsyncEffect} from './useAsyncEffect';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
+
+const useIsLocalUserSpeaking = () => {
+  const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
+    console.log('[ActiveSpeaker]' + arg1, ...args);
+  };
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const {audio} = useLocalUserInfo();
+  const speechRef = useRef(null);
+  const audioRef = useRef(audio);
+  const audioTrackRef = useRef(null);
+  const {isRecordingBot} = useIsRecordingBot();
+
+  useEffect(() => {
+    audioRef.current = audio;
+    /**
+     * if user mute the mic while speaking then stoppedSpeakingCallBack won't be executed because of if (audioRef.current) condition
+     * so if audio is muted then set speaking as false
+     */
+    if (!audio) {
+      setIsSpeaking(false);
+    }
+  }, [audio]);
+
+  const speakingCallBack = () => {
+    if (audioRef.current) {
+      setIsSpeaking(true);
+    }
+  };
+  const stoppedSpeakingCallBack = () => {
+    if (audioRef.current) {
+      setIsSpeaking(false);
+    }
+  };
+
+  useEffect(() => {
+    LocalEventEmitter.on(LocalEventsEnum.MIC_CHANGED, () => {
+      if (isRecordingBot) {
+        return;
+      }
+      listenForSpeaker();
+    });
+  }, []);
+
+  const listenForSpeaker = async () => {
+    try {
+      if (speechRef.current) {
+        speechRef.current?.stop && speechRef.current?.stop();
+      }
+      if (audioTrackRef?.current) {
+        audioTrackRef.current?.length &&
+          audioTrackRef.current[0]?.stop &&
+          audioTrackRef.current[0]?.stop();
+      }
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        'Error on stopping the hark',
+        error,
+      );
+    }
+    try {
+      //detect local user speaking or not
+      const audioStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
+      audioTrackRef.current = audioStream.getAudioTracks();
+      speechRef.current = null;
+      speechRef.current = hark(audioStream, {
+        interval: 100,
+      });
+      speechRef.current.on('speaking', speakingCallBack);
+      speechRef.current.on('stopped_speaking', stoppedSpeakingCallBack);
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        'Error on starting the hark',
+        error,
+      );
+    }
+  };
+
+  useAsyncEffect(async () => {
+    if ($config.ACTIVE_SPEAKER && !isRecordingBot) {
+      await listenForSpeaker();
+      return () => {
+        try {
+          speechRef.current &&
+            speechRef.current.stop &&
+            speechRef.current.stop();
+          audioTrackRef.current &&
+            audioTrackRef.current?.length &&
+            audioTrackRef.current[0]?.stop &&
+            audioTrackRef.current[0]?.stop();
+        } catch (error) {
+          logger.error(
+            LogSource.Internals,
+            'ACTIVE_SPEAKER',
+            'couldnt stop the track',
+            error,
+          );
+        }
+      };
+    }
+  }, []);
+
+  return isSpeaking;
+};
+export default useIsLocalUserSpeaking;

package/template/src/utils/useIsPSTN.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 
 /**
@@ -17,14 +17,14 @@ import {UidType} from '../../agora-rn-uikit';
  * @returns function
  */
 function useIsPSTN() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   /**
    *
    * @param uid number
    * @returns boolean
    */
   const isPSTN = (uid: UidType) =>
-    !renderList[uid] && String(uid)[0] === '1' ? true : false;
+    !defaultContent[uid] && String(uid)[0] === '1' ? true : false;
   return isPSTN;
 }
 

package/template/src/utils/useIsVideoEnabled.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType, ToggleState} from '../../agora-rn-uikit';
 
 /**
@@ -17,7 +17,7 @@ import {UidType, ToggleState} from '../../agora-rn-uikit';
  * @returns function
  */
 function useIsVideoEnabled() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
 
   /**
    *
@@ -25,7 +25,7 @@ function useIsVideoEnabled() {
    * @returns boolean
    */
   const isVideoEnabled = (uid: UidType): boolean =>
-    renderList[uid]?.video === ToggleState.enabled;
+    defaultContent[uid]?.video === ToggleState.enabled;
 
   return isVideoEnabled;
 }

package/template/src/utils/useJoinRoom.ts

@@ -0,0 +1,304 @@
+import {useContext} from 'react';
+import {gql} from '@apollo/client';
+import StorageContext from '../components/StorageContext';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import {GraphQLContext} from '../components/GraphQLProvider';
+import useGetName from './useGetName';
+import useWaitingRoomAPI from '../subComponents/waiting-rooms/useWaitingRoomAPI';
+import {base64ToUint8Array} from '../utils';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import getUniqueID from './getUniqueID';
+
+const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
+  query JoinChannel($passphrase: String!) {
+    joinChannel(passphrase: $passphrase) {
+      channel
+      title
+      isHost
+      secret
+      chat {
+        groupId
+        userToken
+        isGroupOwner
+      }
+      secretSalt
+      mainUser {
+        rtc
+        rtm
+        uid
+      }
+      whiteboard {
+        room_uuid
+        room_token
+      }
+      screenShare {
+        rtc
+        rtm
+        uid
+      }
+    }
+    getUser {
+      name
+      email
+    }
+  }
+`;
+
+const JOIN_CHANNEL_PHRASE = gql`
+  query JoinChannel($passphrase: String!) {
+    joinChannel(passphrase: $passphrase) {
+      channel
+      title
+      isHost
+      secret
+      chat {
+        groupId
+        userToken
+        isGroupOwner
+      }
+      secretSalt
+      mainUser {
+        rtc
+        rtm
+        uid
+      }
+      whiteboard {
+        room_uuid
+        room_token
+      }
+      screenShare {
+        rtc
+        rtm
+        uid
+      }
+    }
+  }
+`;
+/**
+ * Returns an asynchronous function to join a meeting with the given phrase.
+ */
+
+export interface joinRoomPreference {
+  disableShareTile: boolean;
+  disableVideoProcessors: boolean;
+}
+
+export default function useJoinRoom() {
+  const {store} = useContext(StorageContext);
+  const {setRoomInfo} = useSetRoomInfo();
+
+  const {client} = useContext(GraphQLContext);
+  const username = useGetName();
+  const {request: requestToJoin} = useWaitingRoomAPI();
+  const isWaitingRoomEnabled = $config.ENABLE_WAITING_ROOM;
+
+  return async (phrase: string, preference?: joinRoomPreference) => {
+    setRoomInfo(prevState => {
+      return {
+        ...prevState,
+        isJoinDataFetched: false,
+      };
+    });
+    try {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
+      let response = null;
+      if (isWaitingRoomEnabled) {
+        logger.log(
+          LogSource.NetworkRest,
+          'channel_join_request',
+          'API channel_join_request. Trying request to join channel as waiting room is enabled',
+        );
+        response = await requestToJoin({
+          meetingPhrase: phrase,
+          send_event: false,
+        });
+      } else {
+        logger.log(
+          LogSource.NetworkRest,
+          'joinChannel',
+          'API joinChannel. Trying to join channel. Waiting room is disabled',
+          {
+            startReqTs,
+            requestId,
+          },
+        );
+        response = await client.query({
+          context: {
+            headers: {
+              'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
+            },
+          },
+          query:
+            store.token === null
+              ? JOIN_CHANNEL_PHRASE
+              : JOIN_CHANNEL_PHRASE_AND_GET_USER,
+          variables: {
+            passphrase: phrase,
+            //userName: username,
+          },
+        });
+      }
+      const endReqTs = Date.now();
+      const latency = endReqTs - startReqTs;
+      if (response?.error) {
+        logger.error(
+          LogSource.NetworkRest,
+          `${isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'}`,
+          `API ${
+            isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'
+          } failed.`,
+          response?.error,
+          {
+            networkError: {
+              name: response?.error?.networkError?.name,
+              //@ts-ignore
+              code: response?.error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: response?.error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency,
+            requestId,
+          },
+        );
+        throw response.error;
+      } else {
+        if ((response && response.data) || isWaitingRoomEnabled) {
+          let data = isWaitingRoomEnabled ? response : response.data;
+          logger.log(
+            LogSource.NetworkRest,
+            `${isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'}`,
+            `API to ${
+              isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'
+            } successful.`,
+            {
+              responseData: data,
+              phrase: phrase,
+              startReqTs,
+              endReqTs,
+              latency,
+              requestId,
+            },
+          );
+          let roomInfo: Partial<RoomInfoContextInterface['data']> = {};
+
+          if (data?.joinChannel?.channel || data?.channel) {
+            roomInfo.channel = isWaitingRoomEnabled
+              ? data.channel
+              : data.joinChannel.channel;
+          }
+          if (data?.joinChannel?.mainUser?.uid || data?.mainUser?.uid) {
+            roomInfo.uid = isWaitingRoomEnabled
+              ? data.mainUser.uid
+              : data.joinChannel.mainUser.uid;
+          }
+          if (data?.joinChannel?.mainUser?.rtc || data?.mainUser?.rtc) {
+            roomInfo.token = isWaitingRoomEnabled
+              ? data.mainUser.rtc
+              : data.joinChannel.mainUser.rtc;
+          }
+          if (data?.joinChannel?.mainUser?.rtm || data?.mainUser?.rtm) {
+            roomInfo.rtmToken = isWaitingRoomEnabled
+              ? data.mainUser.rtm
+              : data.joinChannel.mainUser.rtm;
+          }
+          if (data?.joinChannel?.secret || data?.secret) {
+            roomInfo.encryptionSecret = isWaitingRoomEnabled
+              ? data.secret
+              : data.joinChannel.secret;
+          }
+          if (data?.joinChannel?.secretSalt || data?.secretSalt) {
+            roomInfo.encryptionSecretSalt = base64ToUint8Array(
+              isWaitingRoomEnabled
+                ? data.secretSalt
+                : data.joinChannel.secretSalt,
+            );
+          }
+          if (data?.joinChannel?.screenShare?.uid || data?.screenShare?.uid) {
+            roomInfo.screenShareUid = isWaitingRoomEnabled
+              ? data.screenShare.uid
+              : data.joinChannel.screenShare.uid;
+          }
+          if (data?.joinChannel?.screenShare?.rtc || data?.screenShare?.rtc) {
+            roomInfo.screenShareToken = isWaitingRoomEnabled
+              ? data.screenShare.rtc
+              : data.joinChannel.screenShare.rtc;
+          }
+
+          if (data?.joinChannel?.mainUser?.rtm || data?.mainUser?.rtm) {
+            roomInfo.rtmToken = isWaitingRoomEnabled
+              ? data.mainUser.rtm
+              : data.joinChannel.mainUser.rtm;
+          }
+          if (data?.joinChannel?.chat || data?.chat) {
+            const chat: RoomInfoContextInterface['data']['chat'] = {
+              user_token: isWaitingRoomEnabled
+                ? data.chat.userToken
+                : data?.joinChannel?.chat?.userToken,
+              group_id: isWaitingRoomEnabled
+                ? data.chat.groupId
+                : data?.joinChannel?.chat?.groupId,
+              is_group_owner: isWaitingRoomEnabled
+                ? data.chat.isGroupOwner
+                : data?.joinChannel?.chat?.isGroupOwner,
+            };
+
+            roomInfo.chat = chat;
+          }
+
+          roomInfo.isHost = isWaitingRoomEnabled
+            ? data.isHost
+            : data.joinChannel.isHost;
+
+          if (data?.joinChannel?.title || data?.title) {
+            roomInfo.meetingTitle = isWaitingRoomEnabled
+              ? data.title
+              : data.joinChannel.title;
+          }
+          if (data?.joinChannel?.whiteboard || data?.whiteboard) {
+            const whiteboard: RoomInfoContextInterface['data']['whiteboard'] = {
+              room_token: isWaitingRoomEnabled
+                ? data.whiteboard.room_token
+                : data?.joinChannel?.whiteboard?.room_token,
+              room_uuid: isWaitingRoomEnabled
+                ? data.whiteboard.room_uuid
+                : data?.joinChannel?.whiteboard?.room_uuid,
+            };
+            if (whiteboard?.room_token && whiteboard?.room_uuid) {
+              roomInfo.whiteboard = whiteboard;
+            }
+          }
+          //getUser is not available from backend
+          // if (data?.getUser?.name) {
+          //   roomInfo.username = data.getUser.name;
+          // }
+          const validPreference =
+            preference && Object.keys(preference).length > 0;
+          setRoomInfo(prevState => {
+            let compiledMeetingInfo = {
+              ...prevState.data,
+              ...roomInfo,
+            };
+            return {
+              ...prevState,
+              isJoinDataFetched: true,
+              data: compiledMeetingInfo,
+              roomPreference: validPreference
+                ? {...preference}
+                : prevState.roomPreference,
+            };
+          });
+          return roomInfo;
+        } else {
+          throw new Error('An error occurred in parsing the channel data.');
+        }
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+}

package/template/src/utils/useLayout.tsx

@@ -10,8 +10,10 @@
 *********************************************
 */
 
-import React, {SetStateAction} from 'react';
+import React, {SetStateAction, useState} from 'react';
 import {createHook} from 'customization-implementation';
+import useLayoutsData from '../pages/video-call/useLayoutsData';
+import {isArray} from './common';
 
 export interface LayoutContextInterface {
   currentLayout: string;
@@ -24,12 +26,16 @@ const LayoutContext = React.createContext<LayoutContextInterface>({
 });
 
 interface LayoutProviderProps {
-  value: LayoutContextInterface;
   children: React.ReactNode;
 }
 const LayoutProvider = (props: LayoutProviderProps) => {
+  const layouts = useLayoutsData();
+  const defaultLayoutName = isArray(layouts) ? layouts[0].name : '';
+  const [currentLayout, setLayout] = useState(defaultLayoutName);
+
+  const value = {currentLayout, setLayout};
   return (
-    <LayoutContext.Provider value={{...props.value}}>
+    <LayoutContext.Provider value={value}>
       {props.children}
     </LayoutContext.Provider>
   );