agora-appbuilder-core 4.0.0-api.7 → 4.0.0-api.9

package/template/src/subComponents/recording/useRecording.tsx

@@ -16,26 +16,43 @@ import React, {
   useEffect,
   useRef,
   useState,
+  useCallback,
 } from 'react';
-import {gql, useMutation} from '@apollo/client';
-import {useParams} from '../../components/Router';
-import {PropsContext} from '../../../agora-rn-uikit';
 import Toast from '../../../react-native-toast-message';
 import {createHook} from 'customization-implementation';
 import {useString} from '../../utils/useString';
 import ChatContext from '../../components/ChatContext';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
-import useRecordingLayoutQuery from './useRecordingLayoutQuery';
-import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useContent} from 'customization-api';
 import {trimText} from '../../utils/common';
 import {useRoomInfo} from 'customization-api';
+import StorageContext from '../../components/StorageContext';
+import {useSidePanel} from '../../utils/useSidePanel';
+import {useCaption} from '../caption/useCaption';
+import {SidePanelType} from '../SidePanelEnum';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../../components/chat-ui/useChatUIControls';
+import {useIsRecordingBot} from './useIsRecordingBot';
 import {
   videoRoomRecordingToastHeading,
   videoRoomRecordingToastSubHeading,
   videoRoomUserFallbackText,
+  videoRoomRecordingStartErrorToastHeading,
+  videoRoomRecordingStopErrorToastHeading,
+  videoRoomRecordingErrorToastSubHeading,
 } from '../../language/default-labels/videoCallScreenLabels';
+import {getOriginURL} from '../../auth/config';
+
+const getFrontendUrl = (url: string) => {
+  // check if it doesn't contains the https protocol
+  if (url.indexOf('https://') !== 0) {
+    url = `https://${url}`;
+  }
+  return url;
+};
 
 export interface RecordingContextInterface {
   startRecording: () => void;
@@ -51,26 +68,6 @@ const RecordingContext = createContext<RecordingContextInterface>({
   inProgress: false,
 });
 
-const START_RECORDING = gql`
-  mutation startRecordingSession(
-    $passphrase: String!
-    $secret: String
-    $config: recordingConfig!
-  ) {
-    startRecordingSession(
-      passphrase: $passphrase
-      secret: $secret
-      config: $config
-    )
-  }
-`;
-
-const STOP_RECORDING = gql`
-  mutation stopRecordingSession($passphrase: String!) {
-    stopRecordingSession(passphrase: $passphrase)
-  }
-`;
-
 /**
  * Component to start / stop Agora cloud recording.
  * Sends a control message to all users in the channel over RTM to indicate that
@@ -100,17 +97,13 @@ interface RecordingProviderProps {
  */
 
 const RecordingProvider = (props: RecordingProviderProps) => {
-  const {rtcProps} = useContext(PropsContext);
   const {setRecordingActive, isRecordingActive, callActive} = props?.value;
   const {
-    data: {isHost},
+    data: {isHost, roomId},
   } = useRoomInfo();
   const [inProgress, setInProgress] = useState(false);
   const [uidWhoStarted, setUidWhoStarted] = useState(0);
   const {defaultContent, activeUids} = useContent();
-  const {phrase} = useParams<{phrase: string}>();
-  const [startRecordingQuery] = useMutation(START_RECORDING);
-  const [stopRecordingQuery] = useMutation(STOP_RECORDING);
   const prevRecordingState = usePrevious<{isRecordingActive: boolean}>({
     isRecordingActive,
   });
@@ -118,36 +111,41 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     videoRoomRecordingToastHeading,
   );
   const subheading = useString(videoRoomRecordingToastSubHeading);
+
+  const headingStartError = useString(
+    videoRoomRecordingStartErrorToastHeading,
+  )();
+  const headingStopError = useString(videoRoomRecordingStopErrorToastHeading)();
+  const subheadingError = useString(videoRoomRecordingErrorToastSubHeading)();
+
   const userlabel = useString(videoRoomUserFallbackText)();
 
-  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
-  const {screenShareData} = useScreenContext();
+  const {store} = React.useContext(StorageContext);
 
-  React.useEffect(() => {
-    events.on(EventNames.RECORDING_ATTRIBUTE, data => {
-      const payload = JSON.parse(data.payload);
-      const action = payload.action;
-      const value = payload.value;
-      switch (action) {
-        case EventActions.RECORDING_STARTED:
-          setUidWhoStarted(parseInt(value));
-          setRecordingActive(true);
-          break;
-        case EventActions.RECORDING_STOPPED:
-          setRecordingActive(false);
-          break;
-        case EventActions.RECORDING_STOP_REQUEST:
-          stopRecording();
-          break;
-        default:
-          break;
+  const {setChatType} = useChatUIControls();
+  const {setSidePanel} = useSidePanel();
+  const {setIsCaptionON} = useCaption();
+  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
+
+  const setRecordingBotUI = () => {
+    if (isRecordingBot) {
+      if (recordingBotUIConfig?.chat && $config.CHAT) {
+        setSidePanel(SidePanelType.Chat);
+        setChatType(ChatType.Group);
       }
-    });
-    return () => {
-      events.off(EventNames.RECORDING_ATTRIBUTE);
-    };
-  }, []);
+      if (recordingBotUIConfig.stt && $config.ENABLE_STT) {
+        setIsCaptionON(true);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (callActive) {
+      setRecordingBotUI();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [callActive]);
 
   useEffect(() => {
     /**
@@ -180,25 +178,54 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     }
   }, [isRecordingActive, callActive, isHost]);
 
+  const showErrorToast = (text1: string, text2?: string) => {
+    Toast.show({
+      leadingIconName: 'alert',
+      type: 'error',
+      text1: text1,
+      text2: text2 ? text2 : '',
+      visibilityTime: 3000,
+      primaryBtn: null,
+      secondaryBtn: null,
+      leadingIcon: null,
+    });
+  };
+
   const startRecording = () => {
+    const passphrase = roomId.host || '';
+    let recordinghostURL = getOriginURL();
+    console.log('web-recording - start recording API called');
+
+    if (inProgress) {
+      console.error('web-recording - start recording API already in progress');
+      return;
+    }
+    if (recordinghostURL.includes('localhost')) {
+      console.error(
+        'web-recording - Recording url cannot be localhost. It should be a valid deployed URL',
+      );
+      return;
+    }
+    recordinghostURL = getFrontendUrl(recordinghostURL);
+    console.log('web-recording - recordinghostURL: ', recordinghostURL);
+
     setInProgress(true);
-    // If recording is not going on, start the recording by executing the graphql query
-    startRecordingQuery({
-      variables: {
-        passphrase: phrase,
-        secret:
-          rtcProps.encryption && rtcProps.encryption.key
-            ? rtcProps.encryption.key
-            : '',
-        config: {
-          resolution: 'SD360p',
-          trigger: 'AUTO',
-        },
+    fetch(`${$config.BACKEND_ENDPOINT}/v1/recording/start`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: store.token ? `Bearer ${store.token}` : '',
       },
+      body: JSON.stringify({
+        passphrase: roomId.host,
+        url: `${recordinghostURL}/${passphrase}`,
+        webpage_ready_timeout: 10,
+        encryption: $config.ENCRYPTION_ENABLED,
+      }),
     })
-      .then(res => {
+      .then((res: any) => {
         setInProgress(false);
-        if (res.data.startRecordingSession === 'success') {
+        if (res.status === 200) {
           /**
            * 1. Once the backend sucessfuly starts recording, send message
            * in the channel indicating that cloud recording is now active.
@@ -214,22 +241,10 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           // 2. set the local recording state to true to update the UI
           setUidWhoStarted(localUid);
           setRecordingActive(true);
-          // 3. set the presenter mode if screen share is active
-          // 3.a Get the most recent screenshare uid
-          const sorted = Object.entries(screenShareData)
-            .filter(el => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
-            .sort((a, b) => b[1].ts - a[1].ts);
-
-          const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
-          if (activeScreenshareUid) {
-            console.log(
-              'screenshare: Executing presenter query for screenuid',
-              activeScreenshareUid,
-            );
-            executePresenterQuery(parseInt(activeScreenshareUid));
-          } else {
-            executeNormalQuery();
-          }
+        } else if (res.status === 500) {
+          showErrorToast(headingStartError, subheadingError);
+        } else {
+          showErrorToast(headingStartError);
         }
       })
       .catch(err => {
@@ -238,60 +253,86 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       });
   };
 
-  const stopRecording = () => {
+  const stopRecording = useCallback(() => {
     /**
-     * if condition added for below issue
-     *
-     * user 1 and user 2 in the call
-     * user 1 start the recording
-     * user 2 stops the recording
-     * user 2 join the call getting stop recording notification which is not needed
-     *
-     * solution
-     * case 1 - if recording is not started by the host then we will send level1 message to host who started the recording
-     * case 2 - if person who started the recording no longer available in the call then will stop the recording
+     * Any host in the channel can stop recording.
      */
-    if (
-      localUid === uidWhoStarted ||
-      activeUids.indexOf(uidWhoStarted) === -1
-    ) {
-      setInProgress(true);
-      // If recording is already going on, stop the recording by executing the graphql query.
-      stopRecordingQuery({variables: {passphrase: phrase}})
-        .then(res => {
-          setInProgress(false);
-          if (res.data.stopRecordingSession === 'success') {
-            /**
-             * 1. Once the backend sucessfuly starts recording, send message
-             * in the channel indicating that cloud recording is now inactive.
-             */
-            events.send(
-              EventNames.RECORDING_ATTRIBUTE,
-              JSON.stringify({
-                action: EventActions.RECORDING_STOPPED,
-                value: '',
-              }),
-              PersistanceLevel.Session,
-            );
-            // 2. set the local recording state to false to update the UI
-            setRecordingActive(false);
-          }
-        })
-        .catch(err => {
-          setInProgress(false);
-          console.log(err);
-        });
-    } else {
-      events.send(
-        EventNames.RECORDING_ATTRIBUTE,
-        JSON.stringify({
-          action: EventActions.RECORDING_STOP_REQUEST,
-          value: '',
-        }),
-        PersistanceLevel.None,
+    console.log('web-recording - stop recording API called');
+    if (inProgress) {
+      console.error(
+        'web-recording - stop recording already in progress. Aborting..',
       );
+      return;
     }
-  };
+    setInProgress(true);
+    // If recording is already going on, stop the recording by executing the below query.
+    fetch(`${$config.BACKEND_ENDPOINT}/v1/recording/stop`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: store.token ? `Bearer ${store.token}` : '',
+      },
+      body: JSON.stringify({
+        passphrase: roomId.host,
+      }),
+    })
+      .then(res => {
+        setInProgress(false);
+        if (res.status === 200) {
+          /**
+           * 1. Once the backend sucessfuly stops recording, send message
+           * in the channel indicating that cloud recording is now inactive.
+           */
+          events.send(
+            EventNames.RECORDING_ATTRIBUTE,
+            JSON.stringify({
+              action: EventActions.RECORDING_STOPPED,
+              value: '',
+            }),
+            PersistanceLevel.Session,
+          );
+          // 2. set the local recording state to false to update the UI
+          setRecordingActive(false);
+        } else if (res.status === 500) {
+          showErrorToast(headingStopError, subheadingError);
+        } else {
+          showErrorToast(headingStopError);
+        }
+      })
+      .catch(err => {
+        setInProgress(false);
+        console.log(err);
+      });
+  }, [
+    headingStopError,
+    inProgress,
+    roomId.host,
+    setRecordingActive,
+    store.token,
+    subheadingError,
+  ]);
+
+  React.useEffect(() => {
+    events.on(EventNames.RECORDING_ATTRIBUTE, data => {
+      const payload = JSON.parse(data.payload);
+      const action = payload.action;
+      const value = payload.value;
+      switch (action) {
+        case EventActions.RECORDING_STARTED:
+          setUidWhoStarted(parseInt(value));
+          setRecordingActive(true);
+          break;
+        case EventActions.RECORDING_STOPPED:
+          setRecordingActive(false);
+          break;
+        default:
+          break;
+      }
+    });
+    return () => {
+      events.off(EventNames.RECORDING_ATTRIBUTE);
+    };
+  }, [roomId.host, setRecordingActive]);
 
   return (
     <RecordingContext.Provider

package/template/src/subComponents/screenshare/ScreenshareButton.tsx

@@ -16,7 +16,7 @@ import Styles from '../../components/styles';
 import {useString} from '../../utils/useString';
 import {useScreenshare} from './useScreenshare';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
 import {useLocalUserInfo, useRoomInfo} from 'customization-api';
 import useIsHandRaised from '../../utils/useIsHandRaised';
 import {isAndroid, isIOS} from '../../utils/common';
@@ -83,7 +83,7 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
   };
   iconButtonProps.isOnActionSheet = isOnActionSheet;
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -91,7 +91,7 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     $config.RAISE_HAND &&
     !isHost

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -18,12 +18,10 @@ import {
   useChangeDefaultLayout,
   useSetPinnedLayout,
 } from '../../pages/video-call/DefaultLayouts';
-import {useRecording} from '../recording/useRecording';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import {IAgoraRTC} from 'agora-rtc-sdk-ng';
-import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {timeNow} from '../../rtm/utils';
 import {
   controlMessageEnum,
@@ -50,8 +48,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const {defaultContent, activeUids, pinnedUid, secondaryPinnedUid} =
     useContent();
   const isPinned = useRef(0);
-  const {isRecordingActive} = useRecording();
-  const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
   const {setScreenShareData, screenShareData} = useScreenContext();
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
@@ -232,7 +228,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const ScreenshareStoppedCallback = () => {
     setScreenshareActive(false);
     console.log('STOPPED SHARING');
-    executeNormalQuery();
     events.send(
       EventNames.SCREENSHARE_ATTRIBUTE,
       JSON.stringify({
@@ -268,22 +263,11 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   useEffect(() => {
     // @ts-ignore
     rtc.RtcEngineUnsafe.addListener(
-      'ScreenshareStopped',
+      'onScreenshareStopped',
       ScreenshareStoppedCallback,
     );
   }, []);
 
-  const executeRecordingQuery = (isScreenActive: boolean) => {
-    if (isScreenActive) {
-      console.log('screenshare: Executing presenter query');
-      // If screen share is not going on, start the screen share by executing the graphql query
-      executePresenterQuery(screenShareUid);
-    } else {
-      // If recording is already going on, stop the recording by executing the graphql query.
-      executeNormalQuery();
-    }
-  };
-
   const stopUserScreenShare = () => {
     if (!isScreenshareActive) {
       return;
@@ -298,10 +282,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   };
 
   const userScreenshare = async (isActive: boolean) => {
-    if (isRecordingActive) {
-      executeRecordingQuery(isActive);
-    }
-    console.log('screenshare query executed');
     try {
       // @ts-ignore
       await rtc.RtcEngineUnsafe.startScreenshare(
@@ -341,7 +321,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       }
     } catch (e) {
       console.error("can't start the screen share", e);
-      executeNormalQuery();
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',

package/template/src/utils/index.tsx

@@ -1,3 +1,5 @@
+import {isWebInternal} from './common';
+
 const Buffer = require('buffer/').Buffer;
 type Entry<T> = {
   [K in keyof T]: [K, T[K]];
@@ -90,10 +92,19 @@ export const base64ToUint8Array = (base64Str: string) => {
 
   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);
+  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;
   }
-
-  return result;
 };

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/useIsLocalUserSpeaking.ts

@@ -5,6 +5,7 @@ import {useAsyncEffect} from './useAsyncEffect';
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 const useIsLocalUserSpeaking = () => {
   const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
@@ -15,6 +16,7 @@ const useIsLocalUserSpeaking = () => {
   const speechRef = useRef(null);
   const audioRef = useRef(audio);
   const audioTrackRef = useRef(null);
+  const {isRecordingBot} = useIsRecordingBot();
 
   useEffect(() => {
     audioRef.current = audio;
@@ -40,6 +42,9 @@ const useIsLocalUserSpeaking = () => {
 
   useEffect(() => {
     LocalEventEmitter.on(LocalEventsEnum.MIC_CHANGED, () => {
+      if (isRecordingBot) {
+        return;
+      }
       listenForSpeaker();
     });
   }, []);
@@ -75,7 +80,7 @@ const useIsLocalUserSpeaking = () => {
   };
 
   useAsyncEffect(async () => {
-    if ($config.ACTIVE_SPEAKER) {
+    if ($config.ACTIVE_SPEAKER && !isRecordingBot) {
       await listenForSpeaker();
       return () => {
         try {

package/template/{bridge/rtc/webNg/LocalView.tsx → src/utils/useLocalAudio.ts}

@@ -9,12 +9,30 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import SurfaceView, {RtcSurfaceViewProps, StyleProps} from './SurfaceView';
 
-interface LocalViewInterface extends RtcSurfaceViewProps, StyleProps {}
+import {DispatchContext, RtcContext} from '../../agora-rn-uikit';
+import {useContext} from 'react';
 
-export default function LocalView(props: LocalViewInterface) {
-  //   console.log('LocalView props: ', props);
-  return <SurfaceView uid={0} {...props} />;
+function useLocalAudio() {
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+
+  const disableAudioButton = () => {
+    RtcEngineUnsafe.muteLocalAudioStream(true);
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, true],
+    });
+  };
+
+  const enableAudioButton = () => {
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, false],
+    });
+  };
+
+  return {enableAudioButton, disableAudioButton};
 }
+
+export default useLocalAudio;