From 66e166bd06b1d78faed125b6e627681508e6fe49 Mon Sep 17 00:00:00 2001
From: amar-1995 <amar@100ms.live>
Date: Wed, 23 Aug 2023 16:39:36 +0530
Subject: [PATCH] fix: design parity of recording

---
 .../components/Header/StreamActions.jsx       |  4 +++-
 .../SplitComponents/MwebOptions.jsx           | 22 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx
index ca6faeb784..a06e8b715b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx
@@ -250,7 +250,9 @@ export const StopRecordingInSheet = ({ onStopRecording, onClose }) => {
           <Flex direction="row" justify="between" css={{ w: '100%', c: '$alert_error_default' }}>
             <Flex justify="start" align="center" gap="3">
               <AlertTriangleIcon />
-              <Text variant="h5">Stop Recording</Text>
+              <Text variant="h5" css={{ c: '$alert_error_default' }}>
+                Stop Recording
+              </Text>
             </Flex>
             <Sheet.Close css={{ color: 'white' }} onClick={onClose}>
               <CrossIcon />
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
index d7406183bc..0a36e72aee 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -19,7 +19,7 @@ import {
   RecordIcon,
   SettingsIcon,
 } from '@100mslive/react-icons';
-import { Box, Tooltip } from '../../../../';
+import { Box, Loading, Tooltip } from '../../../../';
 import { Sheet } from '../../../../Sheet';
 import IconButton from '../../../IconButton';
 import { EmojiCard } from '../../Footer/EmojiCard';
@@ -65,6 +65,7 @@ export const MwebOptions = () => {
   const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
   const [showEmojiCard, setShowEmojiCard] = useState(false);
   const [showRecordingOn, setShowRecordingOn] = useState(false);
+  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peerCount = useHMSStore(selectPeerCount);
 
@@ -197,15 +198,21 @@ export const MwebOptions = () => {
               <ActionTile.Root
                 disabled={isHLSRunning}
                 onClick={async () => {
+                  if (isRecordingLoading) {
+                    return;
+                  }
                   if (isBrowserRecordingOn || isStreamingOn) {
+                    setOpenOptionsSheet(false);
                     setShowRecordingOn(true);
                   } else {
                     // start recording
-                    setOpenOptionsSheet(false);
+                    setIsRecordingLoading(true);
                     try {
                       await hmsActions.startRTMPOrRecording({
                         record: true,
                       });
+                      setOpenOptionsSheet(false);
+                      setIsRecordingLoading(false);
                     } catch (error) {
                       if (error.message.includes('stream already running')) {
                         ToastManager.addToast({
@@ -218,6 +225,7 @@ export const MwebOptions = () => {
                           variant: 'error',
                         });
                       }
+                      setIsRecordingLoading(false);
                     }
                   }
                   if (isHLSRunning) {
@@ -225,8 +233,14 @@ export const MwebOptions = () => {
                   }
                 }}
               >
-                <RecordIcon />
-                <ActionTile.Title>{isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}</ActionTile.Title>
+                {isRecordingLoading ? <Loading /> : <RecordIcon />}
+                <ActionTile.Title>
+                  {isBrowserRecordingOn
+                    ? 'Recording On'
+                    : isRecordingLoading
+                    ? 'Starting Recording'
+                    : 'Start Recording'}
+                </ActionTile.Title>
               </ActionTile.Root>
             ) : null}
           </Box>