agora-appbuilder-core 4.0.20-beta.4 → 4.0.20-beta.6

package/package.json

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

package/template/customization-api/typeDefinition.ts

@@ -108,6 +108,10 @@ export type EndCallHookType = () => (
   history: History,
 ) => Promise<void>;
 
+export interface AppConfig {
+  defaultRootFallback?: React.ComponentType;
+}
+
 export interface CustomizationApiInterface {
   /**
    * components used to replace whole screen or subcomponents
@@ -118,6 +122,10 @@ export interface CustomizationApiInterface {
    */
   // commented for v1 release
   customRoutes?: CustomRoutesInterface[];
+  /**
+   * app config
+   */
+  config?: AppConfig;
   /**
    * Internationlization
    */

package/template/src/AppRoutes.tsx

@@ -22,9 +22,17 @@ import {CUSTOM_ROUTES_PREFIX, CustomRoutesInterface} from 'customization-api';
 import PrivateRoute from './components/PrivateRoute';
 import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
 import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
+import {LogSource, logger} from './logger/AppBuilderLogger';
+import {isValidReactComponent} from './utils/common';
 
 function VideoCallWrapper(props) {
   const {isRecordingBotRoute} = useIsRecordingBot();
+  logger.debug(
+    LogSource.Internals,
+    'RECORDING',
+    'Check if this is a recording bot route',
+    isRecordingBotRoute,
+  );
   return isRecordingBotRoute ? (
     <RecordingBotRoute history={props.history}>
       <VideoCall />
@@ -38,6 +46,8 @@ function VideoCallWrapper(props) {
 
 function AppRoutes() {
   const CustomRoutes = useCustomization(data => data?.customRoutes);
+  const AppConfig = useCustomization(data => data?.config);
+  const {defaultRootFallback: DefaultRootFallback} = AppConfig || {};
   const RenderCustomRoutes = () => {
     try {
       return (
@@ -68,7 +78,14 @@ function AppRoutes() {
   return (
     <Switch>
       <Route exact path={'/'}>
-        <Redirect to={'/create'} />
+        {DefaultRootFallback &&
+        (typeof DefaultRootFallback === 'object' ||
+          typeof DefaultRootFallback === 'function') &&
+        isValidReactComponent(DefaultRootFallback) ? (
+          <DefaultRootFallback />
+        ) : (
+          <Redirect to={'/create'} />
+        )}
       </Route>
       <Route exact path={'/authorize/:token?'}>
         <IDPAuth />

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/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.native.tsx

@@ -65,7 +65,7 @@ const ChatConfigure = ({children}) => {
   const chatClient = ChatClient.getInstance();
   const chatManager = chatClient.chatManager;
 
-  const localUid = data?.uid?.toString();
+  const localUid = data?.channel + '_' + data?.uid?.toString();
   const agoraToken = data?.chat?.user_token;
   const {store} = React.useContext(StorageContext);
   const {
@@ -119,6 +119,7 @@ const ChatConfigure = ({children}) => {
             messages[0].chatType === ChatMessageChatType.PeerChat;
           const {msgId, from, body, localTime} = messages[0];
           const chatType = body.type;
+          const fromUser = from.split('_')[1];
           const {file_ext, file_name, file_url, from_platform} = messages[0]
             .attributes as ChatMessageAttributes;
 
@@ -129,8 +130,8 @@ const ChatConfigure = ({children}) => {
               //@ts-ignore
               const chatContent = body.content;
               if (isGroupChat) {
-                showMessageNotification(chatContent, from, false);
-                addMessageToStore(Number(from), {
+                showMessageNotification(chatContent, fromUser, false);
+                addMessageToStore(Number(fromUser), {
                   msg: chatContent.replace(/^(\n)+|(\n)+$/g, ''),
                   createdTimestamp: localTime,
                   msgId: msgId,
@@ -139,9 +140,9 @@ const ChatConfigure = ({children}) => {
                 });
               }
               if (isPeerChat) {
-                showMessageNotification(chatContent, from, true);
+                showMessageNotification(chatContent, fromUser, true);
                 addMessageToPrivateStore(
-                  Number(from),
+                  Number(fromUser),
                   {
                     msg: chatContent.replace(/^(\n)+|(\n)+$/g, ''),
                     createdTimestamp: localTime,
@@ -165,11 +166,11 @@ const ChatConfigure = ({children}) => {
               if (isGroupChat) {
                 showMessageNotification(
                   file_name,
-                  from,
+                  fromUser,
                   false,
                   ChatMessageType.IMAGE,
                 );
-                addMessageToStore(Number(from), {
+                addMessageToStore(Number(fromUser), {
                   msg: '',
                   createdTimestamp: localTime,
                   msgId: msgId,
@@ -183,12 +184,12 @@ const ChatConfigure = ({children}) => {
               if (isPeerChat) {
                 showMessageNotification(
                   'You got private image msg',
-                  from,
+                  fromUser,
                   true,
                   ChatMessageType.IMAGE,
                 );
                 addMessageToPrivateStore(
-                  Number(from),
+                  Number(fromUser),
                   {
                     msg: '',
                     createdTimestamp: localTime,
@@ -210,11 +211,11 @@ const ChatConfigure = ({children}) => {
               if (isGroupChat) {
                 showMessageNotification(
                   file_name,
-                  from,
+                  fromUser,
                   false,
                   ChatMessageType.FILE,
                 );
-                addMessageToStore(Number(from), {
+                addMessageToStore(Number(fromUser), {
                   msg: '',
                   createdTimestamp: localTime,
                   msgId: msgId,
@@ -228,12 +229,12 @@ const ChatConfigure = ({children}) => {
               if (isPeerChat) {
                 showMessageNotification(
                   file_name,
-                  from,
+                  fromUser,
                   true,
                   ChatMessageType.FILE,
                 );
                 addMessageToPrivateStore(
-                  Number(from),
+                  Number(fromUser),
                   {
                     msg: '',
                     createdTimestamp: localTime,
@@ -380,9 +381,13 @@ const ChatConfigure = ({children}) => {
 
           // this is local user messages
           if (option.chatType === SDKChatType.SINGLE_CHAT) {
-            addMessageToPrivateStore(Number(option.to), messageData, true);
+            addMessageToPrivateStore(
+              Number(option.to.split('_')[1]),
+              messageData,
+              true,
+            );
           } else {
-            addMessageToStore(Number(option.from), messageData);
+            addMessageToStore(Number(option.from.split('_')[1]), messageData);
           }
         }
       })

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

@@ -84,7 +84,7 @@ const ChatConfigure = ({children}) => {
         });
         // Logs into Agora Chat.
         const result = await newConn.open({
-          user: data.uid.toString(),
+          user: data?.channel + '_' + data?.uid?.toString(),
           agoraToken: data.chat.user_token,
         });
         logger.debug(
@@ -105,15 +105,18 @@ const ChatConfigure = ({children}) => {
               message.ext?.from_platform === 'native'
                 ? message.url
                 : message.ext.file_url;
+
+            const fromUser = message?.from.split('_')[1];
+
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               showMessageNotification(
                 message.ext.file_name,
-                message.from,
+                fromUser,
                 false,
                 message.type,
               );
 
-              addMessageToStore(Number(message.from), {
+              addMessageToStore(Number(fromUser), {
                 msg: '',
                 createdTimestamp: message.time,
                 msgId: message.id,
@@ -127,12 +130,12 @@ const ChatConfigure = ({children}) => {
             if (message.chatType === SDKChatType.SINGLE_CHAT) {
               showMessageNotification(
                 message.ext.file_name,
-                message.from,
+                fromUser,
                 true,
                 message.type,
               );
               addMessageToPrivateStore(
-                Number(message.from),
+                Number(fromUser),
                 {
                   msg: '',
                   createdTimestamp: message.time,
@@ -153,14 +156,16 @@ const ChatConfigure = ({children}) => {
                 ? message.url
                 : message.ext.file_url;
 
+            const fromUser = message?.from.split('_')[1];
+
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               showMessageNotification(
                 message.ext.file_name,
-                message.from,
+                fromUser,
                 false,
                 message.type,
               );
-              addMessageToStore(Number(message.from), {
+              addMessageToStore(Number(fromUser), {
                 msg: '',
                 createdTimestamp: message.time,
                 msgId: message.id,
@@ -175,13 +180,13 @@ const ChatConfigure = ({children}) => {
               // show to notifcation- privat msg received
               showMessageNotification(
                 message.ext.file_name,
-                message.from,
+                fromUser,
                 true,
                 message.type,
               );
               // this is remote user messages
               addMessageToPrivateStore(
-                Number(message.from),
+                Number(fromUser),
                 {
                   msg: '',
                   createdTimestamp: message.time,
@@ -205,15 +210,17 @@ const ChatConfigure = ({children}) => {
               defaultContentRef.current[message.from]?.name,
             );
 
+            const fromUser = message?.from.split('_')[1];
+
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               // show to notifcation- group msg received
               showMessageNotification(
                 message.msg,
-                message.from,
+                fromUser,
                 false,
                 message.type,
               );
-              addMessageToStore(Number(message.from), {
+              addMessageToStore(Number(fromUser), {
                 msg: message.msg.replace(/^(\n)+|(\n)+$/g, ''),
                 createdTimestamp: message.time,
                 msgId: message.id,
@@ -226,13 +233,13 @@ const ChatConfigure = ({children}) => {
               // show to notifcation- privat msg received
               showMessageNotification(
                 message.msg,
-                message.from,
+                fromUser,
                 true,
                 message.type,
               );
               // this is remote user messages
               addMessageToPrivateStore(
-                Number(message.from),
+                Number(fromUser),
                 {
                   msg: message.msg.replace(/^(\n)+|(\n)+$/g, ''),
                   createdTimestamp: message.time,
@@ -302,11 +309,13 @@ const ChatConfigure = ({children}) => {
       connRef.current
         .send(msg)
         .then(res => {
-          console.log(
-            '%cChatSDK: Send  msg success: %s',
-            'color: blue',
-            JSON.stringify(res, null, 2),
+          logger.debug(
+            LogSource.Internals,
+            'CHAT',
+            'Succesfully sent chat message',
+            option,
           );
+
           // update local messagre store
           const messageData = {
             msg: option.msg.replace(/^(\n)+|(\n)+$/g, ''),
@@ -322,9 +331,13 @@ const ChatConfigure = ({children}) => {
           //todo chattype as per natue type
           // this is local user messages
           if (option.chatType === SDKChatType.SINGLE_CHAT) {
-            addMessageToPrivateStore(Number(option.to), messageData, true);
+            addMessageToPrivateStore(
+              Number(option?.to.split('_')[1]),
+              messageData,
+              true,
+            );
           } else {
-            addMessageToStore(Number(option.from), messageData);
+            addMessageToStore(Number(option?.from.split('_')[1]), messageData);
           }
         })
         .catch(error => {
@@ -358,7 +371,6 @@ const ChatConfigure = ({children}) => {
         },
       );
       const res = await response.json();
-      sessionStorage.removeItem('user_id');
       logger.debug(
         LogSource.Internals,
         'CHAT',

package/template/src/components/recording-bot/RecordingBotRoute.tsx

@@ -14,6 +14,7 @@ import type {RouteProps} from 'react-router';
 import StorageContext from '../StorageContext';
 import Loading from '../../subComponents/Loading';
 import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 interface RecordingBotRouteProps extends RouteProps {
   children: React.ReactNode;
@@ -25,6 +26,11 @@ const RecordingBotRoute: React.FC<RecordingBotRouteProps> = props => {
   const [ready, setReady] = useState(false);
   const {recordingBotToken} = useIsRecordingBot();
   useEffect(() => {
+    logger.debug(
+      LogSource.Internals,
+      'RECORDING',
+      'Inside the bot route wrapper',
+    );
     setStore &&
       setStore(prevState => ({
         ...prevState,

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/logger/transports/agora-transport.native.ts

@@ -16,9 +16,9 @@ export const initTransportLayerForAgora = () => {
 
 const getConfig = () => {
   const loggerConfig = new DatadogProviderConfiguration(
-    'pubdb41371dc4efb3e57a918a4f2096578c',
+    'pub5b520008af91c772f322121cb2adc81c',
     'none',
-    'fc33ae27-6fd6-4c7b-94c6-c2c11b9f565e',
+    'fc33ae27-6fd6-4c7b-94c6-c2c11b9f565e', // application ID
     true, // track User interactions (e.g.: Tap on buttons. You can use 'accessibilityLabel' element property to give tap action the name, otherwise element type will be reported)
     true, // track XHR Resources
     true, // track Errors
@@ -32,7 +32,7 @@ const getConfig = () => {
   // Optional: sample RUM sessions (here, 100% of session will be sent to Datadog. Default = 100%)
   loggerConfig.sampleRate = 100;
   // Optional: The service name for your application
-  loggerConfig.serviceName = 'app-builder-core-frontend-native';
+  loggerConfig.serviceName = 'app-builder-core-frontend-nativev2';
 
   if (__DEV__) {
     // Optional: Send data more frequently

package/template/src/logger/transports/agora-transport.ts

@@ -1,7 +1,7 @@
 import {StatusType, datadogLogs} from '@datadog/browser-logs';
 import {version as cli_version} from '../../../../package.json';
 
-const DATADOG_CLIENT_TOKEN = 'pubeccdaed5357d217e2c75e85aaef432fe';
+const DATADOG_CLIENT_TOKEN = 'pubad10d7feb87f0b039c267e69b46ee84e';
 const DATADOG_SITE = 'datadoghq.com';
 
 export const initTransportLayerForAgora = () => {
@@ -10,7 +10,7 @@ export const initTransportLayerForAgora = () => {
     site: DATADOG_SITE,
     forwardErrorsToLogs: false,
     sessionSampleRate: 100,
-    service: 'app-builder-core-frontend',
+    service: 'app-builder-core-frontendv2',
     version: cli_version,
     env: 'none',
   });

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/ChatInput.native.tsx

@@ -150,8 +150,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
         ? SDKChatType.SINGLE_CHAT
         : SDKChatType.GROUP_CHAT,
       type: ChatMessageType.TXT,
-      from: data.uid.toString(),
-      to: privateChatUser ? privateChatUser.toString() : groupID,
+      from: data.channel + '_' + data.uid.toString(),
+      to: privateChatUser
+        ? data.channel + '_' + privateChatUser.toString()
+        : groupID,
       msg: message,
     };
     sendChatSDKMessage(option);

package/template/src/subComponents/ChatInput.tsx

@@ -145,13 +145,17 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       return;
     }
 
+    debugger;
+    console.log(data);
     const option = {
       chatType: privateChatUser
         ? SDKChatType.SINGLE_CHAT
         : SDKChatType.GROUP_CHAT,
       type: ChatMessageType.TXT,
-      from: data.uid.toString(),
-      to: privateChatUser ? privateChatUser.toString() : groupID,
+      from: data.channel + '_' + data.uid.toString(),
+      to: privateChatUser
+        ? data.channel + '_' + privateChatUser.toString()
+        : groupID,
       msg: message,
     };
     sendChatSDKMessage(option);

package/template/src/subComponents/chat/ChatActionMenu.tsx

@@ -62,7 +62,7 @@ export const ChatActionMenu = (props: CaptionsActionMenuProps) => {
   const {defaultContent} = useContent();
 
   const {
-    data: {isHost, chat},
+    data: {isHost, chat, channel},
   } = useRoomInfo();
 
   const groupID = chat.group_id;
@@ -167,7 +167,13 @@ export const ChatActionMenu = (props: CaptionsActionMenuProps) => {
           confirmLabel={confirmLabel}
           confirmLabelStyle={{color: $config.SEMANTIC_ERROR}}
           onConfirmClick={() => {
-            deleteAttachment(msgId, recallFromUser.toString(), chatType);
+            deleteAttachment(
+              msgId,
+              privateChatUser
+                ? channel + '_' + recallFromUser
+                : recallFromUser.toString(),
+              chatType,
+            );
             if (chatType === SDKChatType.SINGLE_CHAT) {
               removeMessageFromPrivateStore(msgId, isLocal);
             }

package/template/src/subComponents/chat/ChatAttachment.native.tsx

@@ -128,11 +128,13 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
         const option = {
           type: isImageUploaded ? ChatMessageType.IMAGE : ChatMessageType.FILE,
           url: filePath,
-          to: privateChatUser ? privateChatUser.toString() : groupID,
+          to: privateChatUser
+            ? data.channel + '_' + privateChatUser.toString()
+            : groupID,
           chatType: privateChatUser
             ? SDKChatType.SINGLE_CHAT
             : SDKChatType.GROUP_CHAT,
-          from: data.uid.toString(),
+          from: data.channel + '_' + data.uid.toString(),
           fileName: result[0].name,
           ext: {
             file_length: result[0].size,
@@ -171,9 +173,13 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
 
           // this is local user messages
           if (message.chatType === ChatMessageChatType.PeerChat) {
-            addMessageToPrivateStore(Number(message.to), messageData, true);
+            addMessageToPrivateStore(
+              Number(message.to.split('_')[1]),
+              messageData,
+              true,
+            );
           } else {
-            addMessageToStore(Number(message.from), messageData);
+            addMessageToStore(Number(message.from.split('_')[1]), messageData);
           }
 
           setUploadStatus(UploadStatus.SUCCESS);

package/template/src/subComponents/chat/ChatSendButton.tsx

@@ -80,8 +80,10 @@ const ChatSendButton = (props: ChatSendButtonProps) => {
         : SDKChatType.GROUP_CHAT,
       type: msgType as ChatMessageType,
       msg: msgType === ChatMessageType.TXT ? message : '', // currenlt not supporting combinarion msg (file+txt)
-      from: data.uid.toString(),
-      to: selectedUserId ? selectedUserId.toString() : groupID,
+      from: data.channel + '_' + data.uid.toString(),
+      to: selectedUserId
+        ? data.channel + '_' + selectedUserId.toString()
+        : groupID,
       ext: {
         file_length,
         file_ext,

package/template/src/subComponents/chat/ImagePopup.tsx

@@ -61,7 +61,7 @@ const ImagePopup = (props: ImagePopupProps) => {
     React.useState(false);
   const {privateChatUser} = useChatUIControls();
   const {
-    data: {isHost, chat},
+    data: {isHost, chat, channel},
   } = useRoomInfo();
   const {downloadAttachment, deleteAttachment} = useChatConfigure();
   const {removeMessageFromPrivateStore, removeMessageFromStore} =
@@ -284,7 +284,13 @@ const ImagePopup = (props: ImagePopupProps) => {
           confirmLabel={confirmLabel}
           confirmLabelStyle={{color: $config.SEMANTIC_ERROR}}
           onConfirmClick={() => {
-            deleteAttachment(msgId, recallFromUser.toString(), chatType);
+            deleteAttachment(
+              msgId,
+              privateChatUser
+                ? channel + '_' + recallFromUser
+                : recallFromUser.toString(),
+              chatType,
+            );
             if (chatType === SDKChatType.SINGLE_CHAT) {
               removeMessageFromPrivateStore(msgId, isLocal);
             }

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,