agora-appbuilder-core 4.1.7 → 4.1.8-beta.2

package/template/src/subComponents/LogoutButton.tsx

@@ -13,14 +13,8 @@ import React, {useContext} from 'react';
 import {TouchableOpacity, Text, StyleSheet} from 'react-native';
 import StorageContext, {initStoreValue} from '../components/StorageContext';
 import {useHistory} from '../components/Router';
-import {gql, useMutation} from '@apollo/client';
 import {useString} from '../utils/useString';
 
-const LOGOUT = gql`
-  mutation logoutSession($token: String!) {
-    logoutSession(token: $token)
-  }
-`;
 /**
  * Sends a logout request to the backend and logs out the user from the frontend.
  */
@@ -28,7 +22,6 @@ const LogoutButton = () => {
   const {store, setStore} = useContext(StorageContext);
   const {token} = store;
   const history = useHistory();
-  const [logoutQuery] = useMutation(LOGOUT);
   //commented for v1 release
   // const oauthLoginLabel = useString('oauthLoginLabel')();
   // const logoutButton = useString('logoutButton')();
@@ -41,16 +34,13 @@ const LogoutButton = () => {
        * User stored some data in localstorage we don't want to remove their on logout.
        * so setting prevstate with store default value
        */
-      setStore((prevState) => {
+      setStore(prevState => {
         return {
           ...prevState,
           ...initStoreValue,
         };
       });
     }
-    logoutQuery({variables: {token}}).catch((e) => {
-      console.log(e);
-    });
   };
 
   const login = () => {

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

@@ -1,26 +1,15 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {useParams} from '../../components/Router';
 
-import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../../agora-rn-uikit';
 import {logger, LogSource} from '../../logger/AppBuilderLogger';
 import getUniqueID from '../../utils/getUniqueID';
+import StorageContext from '../../components/StorageContext';
 
-const SET_PRESENTER = gql`
-  mutation setPresenter($uid: Int!, $passphrase: String!) {
-    setPresenter(uid: $uid, passphrase: $passphrase)
-  }
-`;
-
-const SET_NORMAL = gql`
-  mutation setNormal($passphrase: String!) {
-    setNormal(passphrase: $passphrase)
-  }
-`;
+const RECORDING_LAYOUT_URL = `${$config.BACKEND_ENDPOINT}/v1/recording/layout/update`;
 
 function useRecordingLayoutQuery() {
-  const [setPresenterQuery] = useMutation(SET_PRESENTER);
-  const [setNormalQuery] = useMutation(SET_NORMAL);
+  const {store} = useContext(StorageContext);
   const {phrase} = useParams<any>();
   /**
    * @param screenShareUid
@@ -30,104 +19,120 @@ function useRecordingLayoutQuery() {
    * and we want that as the main view
    * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
    */
-  const executePresenterQuery = (screenShareUid: UidType) => {
+  const executePresenterQuery = async (screenShareUid: UidType) => {
     const requestId = getUniqueID();
     const startReqTs = Date.now();
-    setPresenterQuery({
-      variables: {
-        uid: screenShareUid,
+
+    try {
+      const payload = JSON.stringify({
+        uid: screenShareUid?.toString(),
         passphrase: phrase,
-      },
-      context: {
+        preset: 'presenter',
+      });
+      const res = await fetch(`${RECORDING_LAYOUT_URL}`, {
+        method: 'POST',
         headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
           'X-Session-Id': logger.getSessionId(),
         },
-      },
-    })
-      .then(res => {
-        if (res?.data?.setPresenter === 'success') {
-          const endReqTs = Date.now();
-          logger.log(
-            LogSource.Internals,
-            'RECORDING',
-            'setPresenterQuery success',
-            {
-              responseData: res,
-              startReqTs,
-              endReqTs,
-              latency: endReqTs - startReqTs,
-              requestId,
-            },
-          );
-        }
-      })
-      .catch(error => {
+        body: payload,
+      });
+      const response = await res.json();
+
+      if (response?.error) {
+        throw response?.error;
+      } else {
         const endReqTs = Date.now();
-        logger.error(
+        logger.log(
           LogSource.Internals,
           'RECORDING',
-          'setPresenterQuery failure',
-          JSON.stringify(error || {}),
+          'setPresenterQuery success',
           {
+            responseData: res,
             startReqTs,
             endReqTs,
             latency: endReqTs - startReqTs,
             requestId,
           },
         );
-      });
+      }
+    } catch (error) {
+      const endReqTs = Date.now();
+      logger.error(
+        LogSource.Internals,
+        'RECORDING',
+        'setPresenterQuery failure',
+        JSON.stringify(error || {}),
+        {
+          startReqTs,
+          endReqTs,
+          latency: endReqTs - startReqTs,
+          requestId,
+        },
+      );
+    }
   };
 
-  const executeNormalQuery = () => {
+  const executeNormalQuery = async () => {
     const requestId = getUniqueID();
     const startReqTs = Date.now();
-    setNormalQuery({
-      variables: {passphrase: phrase},
-      context: {
+
+    const payload = JSON.stringify({
+      passphrase: phrase,
+      preset: 'normal',
+    });
+    try {
+      const res = await fetch(`${RECORDING_LAYOUT_URL}`, {
+        method: 'POST',
         headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
           'X-Session-Id': logger.getSessionId(),
         },
-      },
-    })
-      .then(res => {
-        if (res?.data?.stopRecordingSession === 'success') {
-          const endReqTs = Date.now();
-          logger.log(
-            LogSource.Internals,
-            'RECORDING',
-            'executeNormalQuery success',
-            {
-              responseData: res,
-              startReqTs,
-              endReqTs,
-              latency: endReqTs - startReqTs,
-              requestId,
-            },
-          );
-          // Once the backend sucessfuly stops recording,
-          // send a control message to everbody in the channel indicating that cloud recording is now inactive.
-          // sendControlMessage(controlMessageEnum.cloudRecordingUnactive);
-          // set the local recording state to false to update the UI
-          // setScreenshareActive(false);
-        }
-      })
-      .catch(error => {
+        body: payload,
+      });
+      const response = await res.json();
+
+      if (response?.error) {
+        throw response?.error;
+      } else {
         const endReqTs = Date.now();
-        logger.error(
+        logger.log(
           LogSource.Internals,
           'RECORDING',
-          'executeNormalQuery failure',
-          JSON.stringify(error || {}),
+          'executeNormalQuery success',
           {
+            responseData: res,
             startReqTs,
             endReqTs,
             latency: endReqTs - startReqTs,
             requestId,
           },
         );
-      });
+        // Once the backend sucessfuly stops recording,
+        // send a control message to everbody in the channel indicating that cloud recording is now inactive.
+        // sendControlMessage(controlMessageEnum.cloudRecordingUnactive);
+        // set the local recording state to false to update the UI
+        // setScreenshareActive(false);
+      }
+    } catch (error) {
+      const endReqTs = Date.now();
+      logger.error(
+        LogSource.Internals,
+        'RECORDING',
+        'executeNormalQuery failure',
+        JSON.stringify(error || {}),
+        {
+          startReqTs,
+          endReqTs,
+          latency: endReqTs - startReqTs,
+          requestId,
+        },
+      );
+    }
   };
 
   return {

package/template/src/utils/common.tsx

@@ -254,7 +254,7 @@ const debounceFn = (fn: Function, ms = 300) => {
 };
 
 const capitalizeFirstLetter = (word: string): string => {
-  return word.charAt(0).toUpperCase() + word.slice(1);
+  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
 };
 
 const CustomToolbarSort = (a, b) =>
@@ -382,6 +382,82 @@ function MergeMoreButtonFields(sourceArray, updateObject) {
   return result;
 }
 
+function getFormattedDateTime(ipDate: string) {
+  try {
+    let rdate = new Date(ipDate);
+    let ryear = rdate.getFullYear();
+    if (ryear === 1) {
+      throw Error(`Invalid end date, ${ipDate}`);
+    }
+    let rmonth = rdate.getMonth() + 1;
+    let rdt = rdate.getDate();
+    let hour = rdate.getHours();
+    let minute = rdate.getMinutes();
+    let ampm = hour >= 12 ? 'pm' : 'am';
+    hour = hour % 12;
+    hour = hour ? hour : 12; // the hour '0' should be '12'
+    minute = minute < 10 ? minute : minute;
+
+    const formattedHHMM = `${String(hour)}:${String(minute).padStart(
+      2,
+      '0',
+    )} ${ampm}`;
+
+    let today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+
+    let compDate = new Date(ryear, rmonth - 1, rdt); // month - 1 because January == 0
+    let diff = today.getTime() - compDate.getTime(); // get the difference between today(at 00:00:00) and the date
+
+    if (compDate.getTime() == today.getTime()) {
+      return ['Today', `${formattedHHMM}`];
+    } else if (diff <= 24 * 60 * 60 * 1000) {
+      return ['Yesterday', `${formattedHHMM}`];
+    } else {
+      let fulldate = rdate.toDateString();
+      fulldate = fulldate.substring(fulldate.indexOf(' ') + 1);
+      return [fulldate, `${formattedHHMM}`];
+    }
+  } catch (error) {
+    console.error('error while converting recorded time: ', error);
+    return ipDate;
+  }
+}
+
+const getFileName = (url: string) => {
+  return url.split('#')[0].split('?')[0].split('/').pop();
+};
+
+const downloadS3Link = (url: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    if (typeof url !== 'string' || !url.trim()) {
+      return reject(new Error('Invalid URL provided for download'));
+    }
+
+    try {
+      const fileName = getFileName(url);
+      const a = document.createElement('a');
+
+      a.href = url;
+      a.download = fileName;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+
+      // Append to body to make `click()` work in all browsers
+      document.body.appendChild(a);
+      a.click();
+      // Clean up
+      document.body.removeChild(a);
+      resolve();
+    } catch (err) {
+      reject(err instanceof Error ? err : new Error('Download failed'));
+    }
+  });
+};
+
 export {
   updateToolbarDefaultConfig,
   useIsDesktop,
@@ -415,4 +491,6 @@ export {
   CustomToolbarMerge,
   MergeMoreButtonFields,
   AuthErrorCodes,
+  downloadS3Link,
+  getFormattedDateTime,
 };

package/template/src/utils/useCreateRoom.ts

@@ -1,31 +1,13 @@
-import {gql, useMutation} from '@apollo/client';
 import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import SDKEvents from '../utils/SdkEvents';
-import isSDK from './isSDK';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import getUniqueID from './getUniqueID';
+import {useContext} from 'react';
+import StorageContext from '../components/StorageContext';
+
+const CREATE_ROOM_URL = `${$config.BACKEND_ENDPOINT}/v1/channel`;
 
-const CREATE_CHANNEL = gql`
-  mutation CreateChannel($title: String!, $enablePSTN: Boolean) {
-    createChannel(title: $title, enablePSTN: $enablePSTN) {
-      passphrase {
-        host
-        view
-      }
-      channel
-      title
-      pstn {
-        number
-        dtmf
-        error {
-          code
-          message
-        }
-      }
-    }
-  }
-`;
 /**
  * Returns an asynchronous function to create a meeting with the given options.
  */
@@ -34,8 +16,8 @@ export type createRoomFun = (
   enablePSTN?: boolean,
 ) => Promise<void>;
 export default function useCreateRoom(): createRoomFun {
-  const [createChannel, {error}] = useMutation(CREATE_CHANNEL);
   const {setRoomInfo} = useSetRoomInfo();
+  const {store} = useContext(StorageContext);
   return async (
     roomTitle: string,
     enablePSTN?: boolean,
@@ -56,25 +38,99 @@ export default function useCreateRoom(): createRoomFun {
         requestId,
       },
     );
-    const res = await createChannel({
-      context: {
+    try {
+      const payload = JSON.stringify({
+        title: roomTitle,
+        enablePSTN: enablePSTN,
+      });
+      const response = await fetch(`${CREATE_ROOM_URL}`, {
+        method: 'POST',
         headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
           'X-Session-Id': logger.getSessionId(),
         },
-      },
-      variables: {
-        title: roomTitle,
-        enablePSTN: enablePSTN,
-      },
-    });
-    const endReqTs = Date.now();
-    const latency = endReqTs - startReqTs;
-    // 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) {
+        body: payload,
+      });
+      const res = await response.json();
+      if (res?.error) {
+        throw res.error;
+      } else if (res?.channel) {
+        const endReqTs = Date.now();
+        const latency = endReqTs - startReqTs;
+        logger.log(
+          LogSource.NetworkRest,
+          'createChannel',
+          'API createChannel. Channel created successfully',
+          {
+            responseData: res,
+            startReqTs,
+            endReqTs,
+            latency: latency,
+            requestId,
+          },
+        );
+        let roomInfo: Partial<RoomInfoContextInterface['data']> = {
+          roomId: {
+            attendee: '',
+          },
+        };
+        if (res?.viewer_pass_phrase) {
+          roomInfo.roomId.attendee = res.viewer_pass_phrase;
+        }
+        if (res?.host_pass_phrase) {
+          roomInfo.roomId.host = res.host_pass_phrase;
+        }
+        if (enablePSTN === true && res?.pstn) {
+          if (res.pstn?.error?.code || res.pstn?.error?.message) {
+            roomInfo.pstn = {
+              number: '',
+              pin: '',
+              error: {
+                code: res.pstn?.error?.code,
+                message: res.pstn?.error?.message,
+              },
+            };
+          } else {
+            roomInfo.pstn = {
+              number: res.pstn?.number,
+              pin: res.pstn?.dtmf,
+              error: null,
+            };
+          }
+        }
+        logger.log(LogSource.Internals, 'CREATE_MEETING', 'Room created', {
+          isHost: true,
+          isSeparateHostLink: isSeparateHostLink ? true : false,
+          meetingTitle: roomTitle,
+          roomId: roomInfo?.roomId,
+          pstn: roomInfo?.pstn,
+        });
+        setRoomInfo(prev => {
+          return {
+            ...prev,
+            data: {
+              isHost: true,
+              isSeparateHostLink: isSeparateHostLink ? true : false,
+              meetingTitle: roomTitle,
+              roomId: roomInfo?.roomId,
+              pstn: roomInfo?.pstn,
+            },
+          };
+        });
+        SDKEvents.emit(
+          'create',
+          roomInfo.roomId.host,
+          roomInfo.roomId.attendee,
+          roomInfo?.pstn,
+        );
+      } else {
+        throw new Error(`An error occurred in parsing the channel data.`);
+      }
+    } catch (error) {
+      const endReqTs = Date.now();
+      const latency = endReqTs - startReqTs;
       logger.error(
         LogSource.NetworkRest,
         'createChannel',
@@ -89,79 +145,5 @@ export default function useCreateRoom(): createRoomFun {
       );
       throw error;
     }
-
-    if (res && res?.data && res?.data?.createChannel) {
-      logger.log(
-        LogSource.NetworkRest,
-        'createChannel',
-        'API createChannel. Channel created successfully',
-        {
-          responseData: res.data.createChannel,
-          startReqTs,
-          endReqTs,
-          latency: latency,
-          requestId,
-        },
-      );
-      let roomInfo: Partial<RoomInfoContextInterface['data']> = {
-        roomId: {
-          attendee: '',
-        },
-      };
-      if (res?.data?.createChannel?.passphrase?.view) {
-        roomInfo.roomId.attendee = res.data.createChannel.passphrase.view;
-      }
-      if (res?.data?.createChannel?.passphrase?.host) {
-        roomInfo.roomId.host = res.data.createChannel.passphrase.host;
-      }
-      if (enablePSTN === true && res?.data?.createChannel?.pstn) {
-        if (
-          res.data.createChannel.pstn?.error?.code ||
-          res.data.createChannel.pstn?.error?.message
-        ) {
-          roomInfo.pstn = {
-            number: '',
-            pin: '',
-            error: {
-              code: res.data.createChannel.pstn?.error?.code,
-              message: res.data.createChannel.pstn?.error?.message,
-            },
-          };
-        } else {
-          roomInfo.pstn = {
-            number: res.data.createChannel.pstn?.number,
-            pin: res.data.createChannel.pstn?.dtmf,
-            error: null,
-          };
-        }
-      }
-      logger.log(LogSource.Internals, 'CREATE_MEETING', 'Room created', {
-        isHost: true,
-        isSeparateHostLink: isSeparateHostLink ? true : false,
-        meetingTitle: roomTitle,
-        roomId: roomInfo?.roomId,
-        pstn: roomInfo?.pstn,
-      });
-      setRoomInfo(prev => {
-        return {
-          ...prev,
-          data: {
-            isHost: true,
-            isSeparateHostLink: isSeparateHostLink ? true : false,
-            meetingTitle: roomTitle,
-            roomId: roomInfo?.roomId,
-            pstn: roomInfo?.pstn,
-          },
-        };
-      });
-      SDKEvents.emit(
-        'create',
-        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

@@ -1,6 +1,11 @@
 import {useContext} from 'react';
 import {useCustomization} from 'customization-implementation';
-import {useCaption, useContent, useRoomInfo} from 'customization-api';
+import {
+  useCaption,
+  useContent,
+  useRoomInfo,
+  useSTTAPI,
+} from 'customization-api';
 import {PropsContext, DispatchContext} from '../../agora-rn-uikit';
 import {useHistory} from '../components/Router';
 import {stopForegroundService} from '../subComponents/LocalEndCall';
@@ -18,6 +23,7 @@ const useEndCall = () => {
   } = useRoomInfo();
   const {authLogin} = useAuth();
   const {deleteChatUser} = useChatConfigure();
+  const {stop: stopSTTAPI} = useSTTAPI();
 
   const {rtcProps} = useContext(PropsContext);
   const {dispatch} = useContext(DispatchContext);
@@ -49,9 +55,16 @@ const useEndCall = () => {
     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',
+      item =>
+        item[1].type === 'rtc' && item[1].isHost === 'true' && !item[1].offline,
     );
-    usersInCall.length === 1 && isSTTActive && stop();
+    if (usersInCall.length === 1 && isSTTActive) {
+      console.log('Stopping stt api as only one host is in the call');
+      stopSTTAPI().catch(error => {
+        console.log('Error stopping stt', error);
+      });
+    }
+
     // removing user from chat server
     if ($config.CHAT) {
       deleteChatUser();