agora-appbuilder-core 4.0.20-beta.3 → 4.0.20-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.20-beta.3",
+  "version": "4.0.20-beta.5",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/auth/AuthProvider.tsx

@@ -493,11 +493,6 @@ const AuthProvider = (props: AuthProviderProps) => {
             );
             throw new Error('Token not received');
           } else {
-            isWeb() &&
-              sessionStorage.setItem(
-                'user_id',
-                JSON.parse(atob(response.token?.split('.')[1]))?.user_id,
-              );
             enableTokenAuth(response.token)
               .then(() => {
                 //set auth enabled on useEffect

package/template/src/auth/config.ts

@@ -24,12 +24,6 @@ export const getPlatformId = (): string => {
   return platformID;
 };
 
-export const getUserId = (): string => {
-  if (!isWeb()) return null;
-  const userId = sessionStorage.getItem('user_id');
-  return userId;
-};
-
 export const getRequestHeaders = () => {
   return {
     'X-Project-ID': $config.PROJECT_ID,
@@ -53,9 +47,7 @@ export const getOriginURL = () => {
 };
 
 export const GET_UNAUTH_FLOW_API_ENDPOINT = () => {
-  const userId = getUserId();
-  const userIdParam = userId ? `&user_id=${userId}` : '';
   return `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
     $config.PROJECT_ID
-  }&platform_id=${getPlatformId()}${userIdParam}`;
+  }&platform_id=${getPlatformId()}`;
 };

package/template/src/components/Controls.tsx

@@ -895,6 +895,7 @@ export const MoreButtonToolbarItem = () => {
       $config.ENABLE_CAPTION &&
       (isHost || (!isHost && isSTTActive))) ||
     $config.ENABLE_NOISE_CANCELLATION ||
+    (isHost && $config.CLOUD_RECORDING && isWeb()) ||
     ($config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM) ||
     (isHost && $config.ENABLE_WHITEBOARD && isWebInternal()) ? (
     <ToolbarItem testID="more-btn">

package/template/src/components/Navbar.tsx

@@ -430,7 +430,9 @@ export const ParticipantCountToolbarItem = () => {
   );
 };
 export const RecordingStatusToolbarItem = () => {
-  const recordingLabel = useString(videoRoomRecordingText)();
+  const recordingLabel = useString(videoRoomRecordingText)(
+    $config.RECORDING_MODE,
+  );
   const {isRecordingActive} = useRecording();
   return isRecordingActive ? (
     <ToolbarItem>

package/template/src/components/chat/chatConfigure.tsx

@@ -358,7 +358,6 @@ const ChatConfigure = ({children}) => {
         },
       );
       const res = await response.json();
-      sessionStorage.removeItem('user_id');
       logger.debug(
         LogSource.Internals,
         'CHAT',

package/template/src/components/participants/Participant.tsx

@@ -135,8 +135,8 @@ const Participant = (props: ParticipantInterface) => {
                 ref={moreIconRef}
                 collapsable={false}
                 style={{
-                  width: 24,
-                  height: 24,
+                  width: 28,
+                  height: 28,
                   alignSelf: 'center',
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -188,14 +188,14 @@ const Participant = (props: ParticipantInterface) => {
                 {!$config.AUDIO_ROOM &&
                   (isLocal
                     ? !isAudienceUser && (
-                        <View>
+                        <View style={styles.mlIcon}>
                           <LocalVideoMute
                             plainIconHoverEffect={true}
                             iconProps={(isVideoEnabled, isPermissionDenied) => {
                               return {
                                 iconSize: 20,
                                 iconType: 'plain',
-                                iconContainerStyle: {padding: 8},
+                                iconContainerStyle: styles.iconContainerStyle,
                                 showWarningIcon: false,
                                 tintColor: isVideoEnabled
                                   ? $config.PRIMARY_ACTION_BRAND_COLOR
@@ -208,7 +208,7 @@ const Participant = (props: ParticipantInterface) => {
                         </View>
                       )
                     : !isAudienceUser && (
-                        <View>
+                        <View style={styles.mlIcon}>
                           <RemoteVideoMute
                             uid={user.uid}
                             video={user.video}
@@ -219,14 +219,14 @@ const Participant = (props: ParticipantInterface) => {
                       ))}
                 {isLocal
                   ? !isAudienceUser && (
-                      <View>
+                      <View style={styles.mlIcon}>
                         <LocalAudioMute
                           plainIconHoverEffect={true}
                           iconProps={(isAudioEnabled, isPermissionDenied) => {
                             return {
                               iconSize: 20,
                               iconType: 'plain',
-                              iconContainerStyle: {padding: 8},
+                              iconContainerStyle: styles.iconContainerStyle,
                               showWarningIcon: false,
                               tintColor: isAudioEnabled
                                 ? $config.PRIMARY_ACTION_BRAND_COLOR
@@ -239,7 +239,7 @@ const Participant = (props: ParticipantInterface) => {
                       </View>
                     )
                   : !isAudienceUser && (
-                      <View>
+                      <View style={styles.mlIcon}>
                         <RemoteAudioMute
                           uid={user.uid}
                           audio={user.audio}
@@ -289,6 +289,13 @@ const styles = StyleSheet.create({
     height: 36,
     borderRadius: 18,
   },
+  iconContainerStyle: {
+    width: 30,
+    height: 30,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   textStyle: {
     fontSize: ThemeConfig.FontSize.tiny,
     lineHeight: 12,
@@ -327,4 +334,7 @@ const styles = StyleSheet.create({
   controlsContainer: {
     backgroundColor: 'red',
   },
+  mlIcon: {
+    marginLeft: 8,
+  },
 });

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -128,9 +128,9 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
               screenShareUid: screenShare.uid,
               whiteboard,
               chat: {
-                user_token: chat.userToken,
-                group_id: chat.groupId,
-                is_group_owner: chat.isGroupOwner,
+                user_token: chat?.userToken,
+                group_id: chat?.groupId,
+                is_group_owner: chat?.isGroupOwner,
               },
             },
           };

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -134,9 +134,9 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
               screenShareUid: screenShare.uid,
               whiteboard,
               chat: {
-                user_token: chat.userToken,
-                group_id: chat.groupId,
-                is_group_owner: chat.isGroupOwner,
+                user_token: chat?.userToken,
+                group_id: chat?.groupId,
+                is_group_owner: chat?.isGroupOwner,
               },
             },
           };

package/template/src/components/recordings/recording-table.tsx

@@ -64,7 +64,7 @@ function RTableBody({status, recordings}) {
           if (
             recordingStatus === 'STOPPING' ||
             recordingStatus === 'STARTED' ||
-            recordingStatus === 'INPROGRESS'
+            (recordingStatus === 'INPROGRESS' && !item?.download_url)
           ) {
             return (
               <View key={item.id} style={style.pt12}>

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -1254,7 +1254,9 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [waitingRoomApprovalRejectionToastSubHeading]:
     'Permission to enter the meeting was denied by the host',
 
-  [videoRoomRecordingText]: 'Recording',
+  [videoRoomRecordingText]: mode =>
+    mode === 'MIX' ? 'Cloud recording' : 'Web recording',
+
   [videoRoomGoToActiveSpeakerText]: 'Go To Active Speaker',
   [videoRoomScreenshareText]: username => `${username}'s screenshare`,
   [videoRoomStartingCallText]: 'Starting Call. Just a second.',

package/template/src/rtm-events/constants.ts

@@ -1,18 +1,9 @@
 /** ***** EVENTS ACTIONS BEGINS***** */
-//  1. RECORDING
-const RECORDING_STARTED = 'RECORDING_STARTED';
-const RECORDING_STOPPED = 'RECORDING_STOPPED';
-const RECORDING_STARTED_BY = 'RECORDING_STARTED_BY';
-const REQUEST_TO_STOP_RECORDING = 'REQUEST_TO_STOP_RECORDING';
-// 2. SCREENSHARE
+// 1. SCREENSHARE
 const SCREENSHARE_STARTED = 'SCREENSHARE_STARTED';
 const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
 
 const EventActions = {
-  RECORDING_STARTED_BY,
-  RECORDING_STARTED,
-  RECORDING_STOPPED,
-  REQUEST_TO_STOP_RECORDING,
   SCREENSHARE_STARTED,
   SCREENSHARE_STOPPED,
 };
@@ -21,7 +12,8 @@ const EventActions = {
 
 /** ***** EVENT NAMES BEGINS ***** */
 // 1. RECORDING
-const RECORDING_ATTRIBUTE = 'recording';
+const RECORDING_STATE_ATTRIBUTE = 'recording_state';
+const RECORDING_STARTED_BY_ATTRIBUTE = 'recording_started_by';
 // 2. SCREENSHARE
 const SCREENSHARE_ATTRIBUTE = 'screenshare';
 // 2. LIVE STREAMING
@@ -48,7 +40,8 @@ const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED';
 const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P';
 
 const EventNames = {
-  RECORDING_ATTRIBUTE,
+  RECORDING_STATE_ATTRIBUTE,
+  RECORDING_STARTED_BY_ATTRIBUTE,
   RAISED_ATTRIBUTE,
   ROLE_ATTRIBUTE,
   PUBLIC_CHAT_MESSAGE,

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

@@ -23,7 +23,7 @@ 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 {EventNames} from '../../rtm-events';
 import {useContent} from 'customization-api';
 import {trimText} from '../../utils/common';
 import {useRoomInfo} from 'customization-api';
@@ -109,6 +109,17 @@ interface RecordingProviderProps {
  * Sends a control message to all users in the channel over RTM to indicate that
  * Cloud recording has started/stopped.
  */
+enum RECORDING_REQUEST_STATE {
+  PENDING = 'PENDING',
+  STARTED_MIX = 'STARTED_MIX',
+  STARTED_WEB = 'STARTED_WEB',
+  STOPPED = 'STOPPED',
+  FAILED = 'FAILED',
+}
+const RecordingActions = {
+  RECORDING_REQUEST_STATE: RECORDING_REQUEST_STATE,
+  REQUEST_TO_STOP_RECORDING: 'REQUEST_TO_STOP_RECORDING',
+};
 
 const recordingMode = $config.RECORDING_MODE || 'MIX';
 
@@ -193,10 +204,18 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         leadingIcon: null,
       });
     }
-  }, [isRecordingActive, callActive, isHost]);
+  }, [isRecordingActive, callActive, isHost, uidWhoStarted]);
 
   const startRecording = () => {
     log('start recording API called');
+    if (inProgress) {
+      logger.error(
+        LogSource.Internals,
+        'RECORDING',
+        'start recording already in progress. Aborting..',
+      );
+      return;
+    }
     logger.log(
       LogSource.NetworkRest,
       'recording_start',
@@ -208,12 +227,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       let recordinghostURL = getOriginURL();
       // let recordinghostURL =
       //   'https://app-builder-core-git-hotfix-recording-bot-ends-r-253634-agoraio.vercel.app';
-      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',
@@ -224,6 +237,14 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       url = `${recordinghostURL}/${passphrase}`;
     }
     setInProgress(true);
+    events.send(
+      EventNames.RECORDING_STATE_ATTRIBUTE,
+      JSON.stringify({
+        action: RecordingActions.RECORDING_REQUEST_STATE.PENDING,
+        value: `${localUid}`,
+      }),
+      PersistanceLevel.Session,
+    );
     logger.debug(
       LogSource.NetworkRest,
       'recording_start',
@@ -256,24 +277,28 @@ const RecordingProvider = (props: RecordingProviderProps) => {
             'start recording successfully',
             res,
           );
-          /**
-           * 1. Once the backend sucessfuly starts recording, send message
-           * in the channel indicating that cloud/web recording is now active.
-           */
+          // 1. set the local recording state to true to update the UI
           events.send(
-            EventNames.RECORDING_ATTRIBUTE,
+            EventNames.RECORDING_STARTED_BY_ATTRIBUTE,
             JSON.stringify({
-              action: EventActions.RECORDING_STARTED_BY,
+              action: '',
               value: `${localUid}`,
             }),
             PersistanceLevel.Session,
           );
-          // 2. set the local recording state to true to update the UI
           setUidWhoStarted(localUid);
-          // 3. Check if recording mode is cloud
+          // 2. Check if recording mode is cloud
           if (recordingMode === 'MIX') {
             setInProgress(false);
             setRecordingActive(true);
+            events.send(
+              EventNames.RECORDING_STATE_ATTRIBUTE,
+              JSON.stringify({
+                action: RecordingActions.RECORDING_REQUEST_STATE.STARTED_MIX,
+                value: `${localUid}`,
+              }),
+              PersistanceLevel.Session,
+            );
             // 3.a  Set the presenter mode if screen share is active
             // 3.b Get the most recent screenshare uid
             const sorted = Object.entries(screenShareData)
@@ -292,21 +317,30 @@ const RecordingProvider = (props: RecordingProviderProps) => {
             }
           }
         } else if (res.status === 500) {
-          setInProgress(false);
           showErrorToast(headingStartError, subheadingError);
+          throw Error(`Internal server error ${res.status}`);
         } else {
-          setInProgress(false);
           showErrorToast(headingStartError);
+          throw Error(`Internal server error ${res.status}`);
         }
       })
       .catch(err => {
+        setRecordingActive(false);
+        setInProgress(false);
+        events.send(
+          EventNames.RECORDING_STATE_ATTRIBUTE,
+          JSON.stringify({
+            action: RecordingActions.RECORDING_REQUEST_STATE.FAILED,
+            value: `${localUid}`,
+          }),
+          PersistanceLevel.Session,
+        );
         logger.error(
           LogSource.NetworkRest,
           'recording_start',
           'Error while start recording',
           err,
         );
-        setInProgress(false);
       });
   };
 
@@ -315,15 +349,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
      * Any host in the channel can stop recording.
      */
     logger.debug(LogSource.Internals, 'RECORDING', 'stop recording API called');
-    if (inProgress) {
-      logger.error(
-        LogSource.Internals,
-        'RECORDING',
-        'stop recording already in progress. Aborting..',
-      );
-      return;
-    }
-    setInProgress(true);
     fetchRetry(`${$config.BACKEND_ENDPOINT}/v1/recording/stop`, {
       method: 'POST',
       headers: {
@@ -336,7 +361,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       }),
     })
       .then(res => {
-        // Bot when stops the recording, it does not reach here
         setInProgress(false);
         if (res.status === 200 || res.status === 202) {
           logger.debug(
@@ -351,10 +375,10 @@ const RecordingProvider = (props: RecordingProviderProps) => {
            */
           log('Recording-bot: recording stopped successfully');
           events.send(
-            EventNames.RECORDING_ATTRIBUTE,
+            EventNames.RECORDING_STATE_ATTRIBUTE,
             JSON.stringify({
-              action: EventActions.RECORDING_STOPPED,
-              value: 'success',
+              action: RecordingActions.RECORDING_REQUEST_STATE.STOPPED,
+              value: `${localUid}`,
             }),
             PersistanceLevel.Session,
           );
@@ -386,42 +410,50 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         setInProgress(false);
         log('stop recording', err);
         events.send(
-          EventNames.RECORDING_ATTRIBUTE,
+          EventNames.RECORDING_STATE_ATTRIBUTE,
           JSON.stringify({
-            action: EventActions.RECORDING_STOPPED,
-            value: 'error',
+            action: RecordingActions.RECORDING_REQUEST_STATE.FAILED,
+            value: `${localUid}`,
           }),
           PersistanceLevel.Session,
         );
       });
   }, [
     headingStopError,
-    inProgress,
     roomId.host,
     setRecordingActive,
     store.token,
     subheadingError,
+    localUid,
   ]);
 
   const stopRecording = useCallback(() => {
+    setInProgress(true);
+    events.send(
+      EventNames.RECORDING_STATE_ATTRIBUTE,
+      JSON.stringify({
+        action: RecordingActions.RECORDING_REQUEST_STATE.PENDING,
+        value: `${localUid}`,
+      }),
+      PersistanceLevel.Session,
+    );
     if (recordingMode === 'WEB') {
       log('Stopping recording by sending event to bot');
       // send stop request to bot
-      setInProgress(true);
       events.send(
-        EventNames.RECORDING_ATTRIBUTE,
+        EventNames.RECORDING_STATE_ATTRIBUTE,
         JSON.stringify({
-          action: EventActions.REQUEST_TO_STOP_RECORDING,
-          value: '',
+          action: RecordingActions.REQUEST_TO_STOP_RECORDING,
+          value: `${localUid}`,
         }),
-        PersistanceLevel.Session,
+        PersistanceLevel.None,
         100000, // bot uid
       );
     } else {
       log('Stopping recording by calling stop');
       _stopRecording();
     }
-  }, [_stopRecording]);
+  }, [_stopRecording, localUid]);
 
   const fetchRecordings = useCallback(
     (page: number) => {
@@ -483,35 +515,46 @@ const RecordingProvider = (props: RecordingProviderProps) => {
 
   // Events
   useEffect(() => {
-    events.on(EventNames.RECORDING_ATTRIBUTE, data => {
-      log('recording attribute received', data);
+    events.on(EventNames.RECORDING_STATE_ATTRIBUTE, data => {
+      log('recording_state attribute received', data);
       const payload = JSON.parse(data.payload);
       const action = payload.action;
-      const value = payload.value;
       switch (action) {
-        case EventActions.RECORDING_STARTED_BY:
-          setUidWhoStarted(parseInt(value));
-          if (recordingMode === 'MIX') {
-            setRecordingActive(true);
-          }
+        case RecordingActions.RECORDING_REQUEST_STATE.PENDING:
+          setInProgress(true);
           break;
-        case EventActions.RECORDING_STARTED:
+        case RecordingActions.RECORDING_REQUEST_STATE.STARTED_MIX:
           setInProgress(false);
           setRecordingActive(true);
           break;
-        case EventActions.RECORDING_STOPPED:
+        case RecordingActions.RECORDING_REQUEST_STATE.STARTED_WEB:
+          setInProgress(false);
+          setRecordingActive(true);
+          break;
+        case RecordingActions.RECORDING_REQUEST_STATE.STOPPED:
           setInProgress(false);
           setRecordingActive(false);
           break;
-        case EventActions.REQUEST_TO_STOP_RECORDING:
+        /**
+         * The below case is not persisted, hence we need not worry about whether the
+         * new user gets the correct state or not
+         */
+        case RecordingActions.REQUEST_TO_STOP_RECORDING:
           _stopRecording();
           break;
         default:
           break;
       }
     });
+    events.on(EventNames.RECORDING_STARTED_BY_ATTRIBUTE, data => {
+      log('recording_started_by attribute received', data);
+      const payload = JSON.parse(data.payload);
+      const value = payload.value;
+      setUidWhoStarted(parseInt(value));
+    });
     return () => {
-      events.off(EventNames.RECORDING_ATTRIBUTE);
+      events.off(EventNames.RECORDING_STATE_ATTRIBUTE);
+      events.off(EventNames.RECORDING_STARTED_BY_ATTRIBUTE);
     };
   }, [
     roomId.host,
@@ -600,10 +643,12 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         'RECORDING',
         'Recording-bot: sending event recording-started event to users in the call',
       );
+      setInProgress(false);
+      setRecordingActive(true);
       events.send(
-        EventNames.RECORDING_ATTRIBUTE,
+        EventNames.RECORDING_STATE_ATTRIBUTE,
         JSON.stringify({
-          action: EventActions.RECORDING_STARTED,
+          action: RecordingActions.RECORDING_REQUEST_STATE.STARTED_WEB,
           value: `${localUid}`,
         }),
         PersistanceLevel.Session,

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

@@ -277,11 +277,20 @@ export const ScreenshareConfigure = (props: {
 
   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
+      // If recording is going on, set the presenter query
+      logger.log(
+        LogSource.Internals,
+        'SCREENSHARE',
+        'Recording is going on set presenter query',
+      );
       executePresenterQuery(screenShareUid);
     } else {
-      // If recording is already going on, stop the recording by executing the graphql query.
+      logger.log(
+        LogSource.Internals,
+        'SCREENSHARE',
+        'Recording is NOT going on set normal query',
+      );
+      // If no recording is going on, set the normal query
       executeNormalQuery();
     }
   };
@@ -313,7 +322,6 @@ export const ScreenshareConfigure = (props: {
     try {
       if (props.isRecordingActive) {
         executeRecordingQuery(isActive);
-        console.log('screenshare recording layout query executed');
       }
       // @ts-ignore
       await rtc.RtcEngineUnsafe.startScreenshare(