From 1fe10e4ad10a0a0aacbb9916383572d5afce1d55 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Fri, 18 Aug 2023 15:47:13 +0530
Subject: [PATCH 1/4] fix:  add participants to bottom sheet

---
 .../components/MoreSettings/ActionTile.jsx    | 21 ++++++++++++++-
 .../SplitComponents/MwebOptions.jsx           | 26 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
index 962ac2b85a..7b7e7746c7 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+import { getFormattedCount } from '../../common/utils';
 
-export const ActionTile = ({ icon, title, active, onClick, disabled = false, setOpenOptionsSheet }) => {
+export const ActionTile = ({ icon, title, active, onClick, disabled = false, setOpenOptionsSheet, number = 0 }) => {
   return (
     <Flex
       direction="column"
@@ -15,6 +16,7 @@ export const ActionTile = ({ icon, title, active, onClick, disabled = false, set
       }}
       css={{
         p: '$4 $2',
+        position: 'relative',
         bg: active ? '$surface_bright' : '',
         color: disabled ? '$on_surface_low' : '$on_surface_high',
         gap: '$4',
@@ -24,6 +26,23 @@ export const ActionTile = ({ icon, title, active, onClick, disabled = false, set
         },
       }}
     >
+      {number ? (
+        <Text
+          variant="tiny"
+          css={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            fontWeight: '$semiBold',
+            color: '$on_surface_high',
+            p: '$2',
+            bg: '$surface_bright',
+            r: '$round',
+          }}
+        >
+          {getFormattedCount(number)}
+        </Text>
+      ) : null}
       {icon}
       <Text variant="xs" css={{ fontWeight: '$semiBold', color: 'inherit', textAlign: 'center' }}>
         {title}
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 23c531da37..ebcce93535 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -3,6 +3,11 @@ import { useClickAway } from 'react-use';
 import {
   selectIsConnectedToRoom,
   selectIsLocalVideoEnabled,
+<<<<<<< HEAD
+=======
+  selectLocalPeerRoleName,
+  selectPeerCount,
+>>>>>>> babc35cc (fix:  add participants to bottom sheet)
   selectPermissions,
   useHMSActions,
   useHMSStore,
@@ -15,6 +20,7 @@ import {
   EmojiIcon,
   HandIcon,
   PencilIcon,
+  PeopleIcon,
   RecordIcon,
   SettingsIcon,
 } from '@100mslive/react-icons';
@@ -28,10 +34,15 @@ import { ToastManager } from '../../Toast/ToastManager';
 import { ActionTile } from '.././ActionTile';
 import { ChangeNameModal } from '.././ChangeNameModal';
 import { MuteAllModal } from '.././MuteAllModal';
+<<<<<<< HEAD
+=======
+import { useSidepaneToggle } from '../../AppData/useSidepane';
+import { useHLSViewerRole } from '../../AppData/useUISettings';
+>>>>>>> babc35cc (fix:  add participants to bottom sheet)
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useIsFeatureEnabled } from '../../hooks/useFeatures';
 import { useMyMetadata } from '../../hooks/useMetadata';
-import { FEATURE_LIST } from '../../../common/constants';
+import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
@@ -62,6 +73,8 @@ export const MwebOptions = () => {
   const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
   const [showEmojiCard, setShowEmojiCard] = useState(false);
   const [showRecordingOn, setShowRecordingOn] = useState(false);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const peerCount = useHMSStore(selectPeerCount);
 
   const emojiCardRef = useRef(null);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
@@ -125,7 +138,18 @@ export const MwebOptions = () => {
               px: '$9',
             }}
           >
+<<<<<<< HEAD
             {isHandRaiseEnabled ? (
+=======
+            <ActionTile
+              title="Participants"
+              icon={<PeopleIcon />}
+              onClick={toggleParticipants}
+              setOpenOptionsSheet={setOpenOptionsSheet}
+              number={peerCount}
+            />
+            {isHandRaiseEnabled && !isHLSViewer ? (
+>>>>>>> babc35cc (fix:  add participants to bottom sheet)
               <ActionTile
                 title="Raise Hand"
                 icon={<HandIcon />}

From dad78fa7aa8a80d84ef5252061200ac30884fb5a Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Fri, 18 Aug 2023 16:10:20 +0530
Subject: [PATCH 2/4] fix: add participants to options

---
 .../MoreSettings/SplitComponents/MwebOptions.jsx   | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

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 ebcce93535..26cc8fb48d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -3,11 +3,7 @@ import { useClickAway } from 'react-use';
 import {
   selectIsConnectedToRoom,
   selectIsLocalVideoEnabled,
-<<<<<<< HEAD
-=======
-  selectLocalPeerRoleName,
   selectPeerCount,
->>>>>>> babc35cc (fix:  add participants to bottom sheet)
   selectPermissions,
   useHMSActions,
   useHMSStore,
@@ -34,11 +30,7 @@ import { ToastManager } from '../../Toast/ToastManager';
 import { ActionTile } from '.././ActionTile';
 import { ChangeNameModal } from '.././ChangeNameModal';
 import { MuteAllModal } from '.././MuteAllModal';
-<<<<<<< HEAD
-=======
 import { useSidepaneToggle } from '../../AppData/useSidepane';
-import { useHLSViewerRole } from '../../AppData/useUISettings';
->>>>>>> babc35cc (fix:  add participants to bottom sheet)
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useIsFeatureEnabled } from '../../hooks/useFeatures';
 import { useMyMetadata } from '../../hooks/useMetadata';
@@ -138,9 +130,6 @@ export const MwebOptions = () => {
               px: '$9',
             }}
           >
-<<<<<<< HEAD
-            {isHandRaiseEnabled ? (
-=======
             <ActionTile
               title="Participants"
               icon={<PeopleIcon />}
@@ -148,8 +137,7 @@ export const MwebOptions = () => {
               setOpenOptionsSheet={setOpenOptionsSheet}
               number={peerCount}
             />
-            {isHandRaiseEnabled && !isHLSViewer ? (
->>>>>>> babc35cc (fix:  add participants to bottom sheet)
+            {isHandRaiseEnabled ? (
               <ActionTile
                 title="Raise Hand"
                 icon={<HandIcon />}

From 5f12f09298347bb0edc2b07da8632f7587599cc5 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Sat, 19 Aug 2023 12:17:33 +0530
Subject: [PATCH 3/4] refactor: action tile

---
 .../components/MoreSettings/ActionTile.jsx    |  97 ++++++++-------
 .../SplitComponents/MwebOptions.jsx           | 116 +++++++++++-------
 .../VirtualBackground/VirtualBackground.jsx   |  16 +--
 3 files changed, 131 insertions(+), 98 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
index 7b7e7746c7..10a3004515 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
@@ -1,52 +1,55 @@
 import React from 'react';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-import { getFormattedCount } from '../../common/utils';
+import { styled } from '../../../Theme';
 
-export const ActionTile = ({ icon, title, active, onClick, disabled = false, setOpenOptionsSheet, number = 0 }) => {
-  return (
-    <Flex
-      direction="column"
-      align="center"
-      onClick={() => {
-        if (!disabled) {
-          onClick();
-          setOpenOptionsSheet(false);
-        }
-      }}
-      css={{
-        p: '$4 $2',
-        position: 'relative',
-        bg: active ? '$surface_bright' : '',
-        color: disabled ? '$on_surface_low' : '$on_surface_high',
-        gap: '$4',
-        r: '$1',
-        '&:hover': {
-          bg: '$surface_bright',
-        },
-      }}
-    >
-      {number ? (
-        <Text
-          variant="tiny"
-          css={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            fontWeight: '$semiBold',
-            color: '$on_surface_high',
-            p: '$2',
-            bg: '$surface_bright',
-            r: '$round',
-          }}
-        >
-          {getFormattedCount(number)}
-        </Text>
-      ) : null}
-      {icon}
-      <Text variant="xs" css={{ fontWeight: '$semiBold', color: 'inherit', textAlign: 'center' }}>
-        {title}
-      </Text>
-    </Flex>
-  );
+const ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (
+  <Flex
+    {...props}
+    css={{
+      flexDirection: 'column',
+      alignItems: 'center',
+      p: '$4 $2',
+      position: 'relative',
+      bg: active ? '$surface_bright' : '',
+      color: disabled ? '$on_surface_low' : '$on_surface_high',
+      gap: '$4',
+      r: '$1',
+      '&:hover': {
+        bg: '$surface_bright',
+      },
+    }}
+    onClick={() => {
+      if (!disabled) {
+        onClick();
+      }
+    }}
+  >
+    {children}
+  </Flex>
+);
+
+const ActionTileCount = styled(Text, {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  fontWeight: '$semiBold',
+  color: '$on_surface_high',
+  p: '$1 $2',
+  bg: '$surface_bright',
+  r: '$round',
+  fontSize: '$tiny !important',
+});
+
+const ActionTileTitle = styled(Text, {
+  fontWeight: '$semiBold',
+  color: 'inherit',
+  textAlign: 'center',
+  fontSize: '$xs !important',
+});
+
+export const ActionTile = {
+  Root: ActionTileRoot,
+  Title: ActionTileTitle,
+  Count: ActionTileCount,
 };
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 26cc8fb48d..6ba5881270 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -35,6 +35,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 import { useIsFeatureEnabled } from '../../hooks/useFeatures';
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants';
+import { getFormattedCount } from '../../../common/utils';
 
 const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
@@ -130,60 +131,82 @@ export const MwebOptions = () => {
               px: '$9',
             }}
           >
-            <ActionTile
-              title="Participants"
-              icon={<PeopleIcon />}
-              onClick={toggleParticipants}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-              number={peerCount}
-            />
+            <ActionTile.Root
+              onClick={() => {
+                toggleParticipants();
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
+              <PeopleIcon />
+              <ActionTile.Title>Participants</ActionTile.Title>
+            </ActionTile.Root>
+
             {isHandRaiseEnabled ? (
-              <ActionTile
-                title="Raise Hand"
-                icon={<HandIcon />}
-                onClick={toggleHandRaise}
+              <ActionTile.Root
                 active={isHandRaised}
-                setOpenOptionsSheet={setOpenOptionsSheet}
-              />
+                onClick={() => {
+                  toggleHandRaise();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <HandIcon />
+                <ActionTile.Title>Raise Hand</ActionTile.Title>
+              </ActionTile.Root>
             ) : null}
+
             {isBRBEnabled ? (
-              <ActionTile
-                title="Be Right Back"
-                icon={<BrbIcon />}
-                onClick={toggleBRB}
+              <ActionTile.Root
                 active={isBRBOn}
-                setOpenOptionsSheet={setOpenOptionsSheet}
-              />
+                onClick={() => {
+                  toggleBRB();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <BrbIcon />
+                <ActionTile.Title>Be Right Back</ActionTile.Title>
+              </ActionTile.Root>
             ) : null}
-            <ActionTile
-              title="Change Name"
-              icon={<PencilIcon />}
-              onClick={() => updateState(MODALS.CHANGE_NAME, true)}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-            />
+
+            <ActionTile.Root
+              onClick={() => {
+                updateState(MODALS.CHANGE_NAME, true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <PencilIcon />
+              <ActionTile.Title>Change Name</ActionTile.Title>
+            </ActionTile.Root>
+
             {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
               </Suspense>
             ) : null}
-            <ActionTile
-              title="Emoji Reactions"
-              icon={<EmojiIcon />}
-              onClick={() => setShowEmojiCard(true)}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-            />
-            <ActionTile
-              title="Settings"
-              icon={<SettingsIcon />}
-              onClick={() => setOpenSettingsSheet(true)}
-              setOpenOptionsSheet={setOpenOptionsSheet}
-            />
 
-            {isConnected && permissions?.browserRecording && (
-              <ActionTile
-                title={isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}
+            <ActionTile.Root
+              onClick={() => {
+                setShowEmojiCard(true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <EmojiIcon />
+              <ActionTile.Title>Emoji Reactions</ActionTile.Title>
+            </ActionTile.Root>
+
+            <ActionTile.Root
+              onClick={() => {
+                setOpenSettingsSheet(true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <SettingsIcon />
+              <ActionTile.Title>Settings</ActionTile.Title>
+            </ActionTile.Root>
+
+            {isConnected && permissions?.browserRecording ? (
+              <ActionTile.Root
                 disabled={isHLSRunning}
-                icon={<RecordIcon />}
                 onClick={async () => {
                   if (isBrowserRecordingOn || isStreamingOn) {
                     setShowRecordingOn(true);
@@ -208,10 +231,15 @@ export const MwebOptions = () => {
                       }
                     }
                   }
+                  if (isHLSRunning) {
+                    setOpenOptionsSheet(false);
+                  }
                 }}
-                setOpenOptionsSheet={setOpenOptionsSheet}
-              />
-            )}
+              >
+                <RecordIcon />
+                <ActionTile.Title>{isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
           </Box>
         </Sheet.Content>
       </Sheet.Root>
diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
index cc74627d46..0e10a8daba 100644
--- a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
+++ b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
@@ -77,18 +77,20 @@ export const VirtualBackground = ({
   }
   if (asActionTile) {
     return (
-      <ActionTile
-        title="Virtual Background"
-        icon={<VirtualBackgroundIcon />}
+      <ActionTile.Root
+        data-testid="virtual_bg_btn"
+        active={isVBPresent}
+        disabled={isVBLoading}
         onClick={() => {
           setIsVBOn(!isVBOn);
           !isVBPresent ? addPlugin() : removePlugin();
           onVBClick();
+          setOpenOptionsSheet(false);
         }}
-        active={isVBPresent}
-        disabled={isVBLoading}
-        data-testid="virtual_bg_btn"
-      />
+      >
+        <VirtualBackgroundIcon />
+        <ActionTile.Title>Virtual Background</ActionTile.Title>
+      </ActionTile.Root>
     );
   }
 

From e9f4e78e15fa46c7c6f6b0b666a787611e433d22 Mon Sep 17 00:00:00 2001
From: KaustubhKumar05 <kaustubhkumar05@gmail.com>
Date: Sat, 19 Aug 2023 12:20:10 +0530
Subject: [PATCH 4/4] fix: lint

---
 .../components/MoreSettings/SplitComponents/MwebOptions.jsx     | 2 +-
 .../Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

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 6ba5881270..98af8d2cb0 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
@@ -34,8 +34,8 @@ import { useSidepaneToggle } from '../../AppData/useSidepane';
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useIsFeatureEnabled } from '../../hooks/useFeatures';
 import { useMyMetadata } from '../../hooks/useMetadata';
-import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants';
 import { getFormattedCount } from '../../../common/utils';
+import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
index 0e10a8daba..ea147e7ebc 100644
--- a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
+++ b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
@@ -85,7 +85,6 @@ export const VirtualBackground = ({
           setIsVBOn(!isVBOn);
           !isVBPresent ? addPlugin() : removePlugin();
           onVBClick();
-          setOpenOptionsSheet(false);
         }}
       >
         <VirtualBackgroundIcon />