agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -16,26 +16,54 @@ 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, {EventPersistLevel} from '../../rtm-events-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
-import useRecordingLayoutQuery from './useRecordingLayoutQuery';
-import {useScreenContext} from '../../components/contexts/ScreenShareContext';
-import {useRender} from 'customization-api';
+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;
+};
+
+interface RecordingsData {
+  recordings: [];
+  pagination: {};
+}
 export interface RecordingContextInterface {
   startRecording: () => void;
   stopRecording: () => void;
   isRecordingActive: boolean;
   inProgress: boolean;
+  fetchRecordings?: (page: number) => Promise<RecordingsData>;
 }
 
 const RecordingContext = createContext<RecordingContextInterface>({
@@ -45,26 +73,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
@@ -83,6 +91,7 @@ interface RecordingProviderProps {
   value: {
     setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
     isRecordingActive: boolean;
+    callActive: boolean;
   };
 }
 
@@ -93,49 +102,55 @@ interface RecordingProviderProps {
  */
 
 const RecordingProvider = (props: RecordingProviderProps) => {
-  const {rtcProps} = useContext(PropsContext);
-  const {setRecordingActive, isRecordingActive} = props?.value;
+  const {setRecordingActive, isRecordingActive, callActive} = props?.value;
+  const {
+    data: {isHost, roomId},
+  } = useRoomInfo();
   const [inProgress, setInProgress] = useState(false);
   const [uidWhoStarted, setUidWhoStarted] = useState(0);
-  const {renderList, activeUids} = useRender();
-  const {phrase} = useParams<{phrase: string}>();
-  const [startRecordingQuery] = useMutation(START_RECORDING);
-  const [stopRecordingQuery] = useMutation(STOP_RECORDING);
+  const {defaultContent, activeUids} = useContent();
   const prevRecordingState = usePrevious<{isRecordingActive: boolean}>({
     isRecordingActive,
   });
-  //commented for v1 release
-  //const recordingStartedText = useString<boolean>('recordingNotificationLabel');
-  const recordingStartedText = (active: boolean) =>
-    active ? 'Recording Started' : 'Recording Stopped';
-  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
+  const recordingStartedText = useString<boolean>(
+    videoRoomRecordingToastHeading,
+  );
+  const subheading = useString(videoRoomRecordingToastSubHeading);
+
+  const headingStartError = useString(
+    videoRoomRecordingStartErrorToastHeading,
+  )();
+  const headingStopError = useString(videoRoomRecordingStopErrorToastHeading)();
+  const subheadingError = useString(videoRoomRecordingErrorToastSubHeading)();
+
+  const userlabel = useString(videoRoomUserFallbackText)();
+
   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);
       }
-    });
-    () => {
-      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(() => {
     /**
@@ -146,41 +161,76 @@ const RecordingProvider = (props: RecordingProviderProps) => {
      */
     if (prevRecordingState) {
       if (prevRecordingState?.isRecordingActive === isRecordingActive) return;
+
+      if ($config.ENABLE_WAITING_ROOM && !isHost && !callActive) {
+        return;
+      }
+
       Toast.show({
+        leadingIconName: 'recording',
         type: 'info',
         text1: recordingStartedText(isRecordingActive),
         text2: isRecordingActive
-          ? `This meeting is being recorded by ${
-              trimText(renderList[uidWhoStarted]?.name) || 'user'
-            }`
+          ? subheading(
+              trimText(defaultContent[uidWhoStarted]?.name) || userlabel,
+            )
           : '',
         visibilityTime: 3000,
         primaryBtn: null,
         secondaryBtn: null,
+        leadingIcon: null,
       });
     }
-  }, [isRecordingActive]);
+  }, [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) => {
-        console.log(res.data);
+      .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.
@@ -191,90 +241,140 @@ const RecordingProvider = (props: RecordingProviderProps) => {
               action: EventActions.RECORDING_STARTED,
               value: `${localUid}`,
             }),
-            EventPersistLevel.LEVEL3,
+            PersistanceLevel.Session,
           );
           // 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) => {
+      .catch(err => {
         setInProgress(false);
         console.log(err);
       });
   };
 
-  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) => {
-          console.log(res.data);
-          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: '',
-              }),
-              EventPersistLevel.LEVEL3,
-            );
-            // 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: '',
-        }),
-        EventPersistLevel.LEVEL1,
+    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]);
+
+  const fetchRecordings = useCallback(
+    (page: number) => {
+      return fetch(`${$config.BACKEND_ENDPOINT}/v1/recordings`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
+        },
+        // '2b65f378-b048-4d28-9d4c-bd71edab61b7'
+        body: JSON.stringify({
+          passphrase: roomId?.host,
+          limit: 10,
+          page,
+        }),
+      }).then(async response => {
+        const data = await response.json();
+        if (response.ok) {
+          if (data) {
+            return data;
+          } else {
+            return Promise.reject(
+              new Error(
+                `No recordings found for meeting Id: "${roomId?.host}"`,
+              ),
+            );
+          }
+        } else {
+          const error = {
+            message: data?.error?.message,
+          };
+          return Promise.reject(error);
+        }
+      });
+    },
+    [roomId?.host, store.token],
+  );
 
   return (
     <RecordingContext.Provider
@@ -283,6 +383,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         startRecording,
         stopRecording,
         isRecordingActive,
+        fetchRecordings,
       }}>
       {props.children}
     </RecordingContext.Provider>

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

@@ -47,7 +47,6 @@ function useRecordingLayoutQuery() {
   const executeNormalQuery = () => {
     setNormalQuery({variables: {passphrase: phrase}})
       .then((res) => {
-        console.log(res.data);
         if (res.data.stopRecordingSession === 'success') {
           // Once the backend sucessfuly stops recording,
           // send a control message to everbody in the channel indicating that cloud recording is now inactive.

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

@@ -16,11 +16,17 @@ 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 {useLocalUserInfo, useMeetingInfo} from 'customization-api';
+import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
+import {useLocalUserInfo, useRoomInfo} from 'customization-api';
 import useIsHandRaised from '../../utils/useIsHandRaised';
 import {isAndroid, isIOS} from '../../utils/common';
 import {useVideoCall} from '../../components/useVideoCall';
+import {useToolbarMenu} from '../../utils/useMenu';
+import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
+import {
+  livestreamingShareTooltipText,
+  toolbarItemShareText,
+} from '../../language/default-labels/videoCallScreenLabels';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -34,20 +40,20 @@ export interface ScreenshareButtonProps {
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {showLabel = $config.ICON_TEXT || false, isOnActionSheet = false} =
     props;
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
     useScreenshare();
   const {setShowStartScreenSharePopup} = useVideoCall();
-  //commented for v1 release
-  //const screenShareButton = useString('screenShareButton')();
-
+  const screenShareButtonLabel = useString<boolean>(toolbarItemShareText);
+  const lstooltip = useString<boolean>(livestreamingShareTooltipText);
   const onPress = () => {
     if (isScreenshareActive) {
       stopUserScreenShare();
@@ -62,7 +68,6 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
     }
   };
 
-  const screenShareButton = isScreenshareActive ? 'Stop Share' : 'Share';
   let iconButtonProps: IconButtonProps = {
     iconProps: {
       name: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
@@ -72,13 +77,13 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
     },
     onPress,
     btnTextProps: {
-      text: showLabel ? screenShareButton : '',
+      text: showLabel ? screenShareButtonLabel(isScreenshareActive) : '',
       textColor: $config.FONT_COLOR,
     },
   };
   iconButtonProps.isOnActionSheet = isOnActionSheet;
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -86,7 +91,7 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     $config.RAISE_HAND &&
     !isHost
@@ -95,14 +100,14 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
       ...iconButtonProps.iconProps,
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
-    iconButtonProps.toolTipMessage = isHandRaised(local.uid)
-      ? 'Waiting for host to appove the request'
-      : 'Raise Hand in order to present';
+    iconButtonProps.toolTipMessage = lstooltip(isHandRaised(local.uid));
     iconButtonProps.disabled = true;
   }
 
   return props?.render ? (
     props.render(onPress, isScreenshareActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );