@100mslive/roomkit-react 0.3.3-alpha.2 → 0.3.3-alpha.4

package/dist/meta.esbuild.json

@@ -1558,7 +1558,7 @@
       "format": "esm"
     },
     "src/Accordion/Accordion.tsx": {
-      "bytes": 2819,
+      "bytes": 2744,
       "imports": [
         {
           "path": "react",
@@ -4201,8 +4201,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/hooks/useMetadata.tsx": {
-      "bytes": 1631,
+    "src/Prebuilt/components/hooks/useMetadata.jsx": {
+      "bytes": 1700,
       "imports": [
         {
           "path": "react",
@@ -4228,7 +4228,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx": {
-      "bytes": 8164,
+      "bytes": 8195,
       "imports": [
         {
           "path": "react",
@@ -4321,7 +4321,7 @@
           "original": "../../hooks/useDropdownList"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../../hooks/useMetadata"
         },
@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 328413,
+      "bytes": 328584,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5201,7 +5201,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 12899,
+      "bytes": 13053,
       "imports": [
         {
           "path": "react",
@@ -5309,7 +5309,7 @@
           "original": "../../hooks/useDropdownList"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../../hooks/useMetadata"
         },
@@ -5393,7 +5393,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RaiseHand.tsx": {
-      "bytes": 986,
+      "bytes": 798,
       "imports": [
         {
           "path": "react",
@@ -5421,12 +5421,7 @@
           "original": "../IconButton"
         },
         {
-          "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
-          "kind": "import-statement",
-          "original": "../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
-        },
-        {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "./hooks/useMetadata"
         },
@@ -6047,7 +6042,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-      "bytes": 5728,
+      "bytes": 5714,
       "imports": [
         {
           "path": "react",
@@ -6159,7 +6154,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-      "bytes": 12459,
+      "bytes": 12431,
       "imports": [
         {
           "path": "react",
@@ -6342,7 +6337,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/Footer.tsx": {
-      "bytes": 3777,
+      "bytes": 3967,
       "imports": [
         {
           "path": "react",
@@ -6364,6 +6359,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/index.ts",
           "kind": "import-statement",
@@ -7963,7 +7963,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatBody.tsx": {
-      "bytes": 15176,
+      "bytes": 14835,
       "imports": [
         {
           "path": "react",
@@ -8243,7 +8243,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatFooter.tsx": {
-      "bytes": 10287,
+      "bytes": 10438,
       "imports": [
         {
           "path": "react",
@@ -9794,7 +9794,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx": {
-      "bytes": 2927,
+      "bytes": 2958,
       "imports": [
         {
           "path": "react",
@@ -9827,7 +9827,7 @@
           "original": "../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "../hooks/useMetadata"
         },
@@ -11868,7 +11868,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/PreviousRoleInMetadata.tsx": {
-      "bytes": 738,
+      "bytes": 769,
       "imports": [
         {
           "path": "react",
@@ -11881,7 +11881,7 @@
           "external": true
         },
         {
-          "path": "src/Prebuilt/components/hooks/useMetadata.tsx",
+          "path": "src/Prebuilt/components/hooks/useMetadata.jsx",
           "kind": "import-statement",
           "original": "./hooks/useMetadata"
         },
@@ -11894,7 +11894,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8106,
+      "bytes": 8259,
       "imports": [
         {
           "path": "react",
@@ -13709,7 +13709,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-KUFQ5ONV.js",
+          "path": "dist/chunk-5WTUTVRO.js",
           "kind": "import-statement"
         }
       ],
@@ -13782,16 +13782,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-GI5NXBYN.js.map": {
+    "dist/HLSView-VUANLYLS.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 90585
     },
-    "dist/HLSView-GI5NXBYN.js": {
+    "dist/HLSView-VUANLYLS.js": {
       "imports": [
         {
-          "path": "dist/chunk-KUFQ5ONV.js",
+          "path": "dist/chunk-5WTUTVRO.js",
           "kind": "import-statement"
         },
         {
@@ -14009,13 +14009,13 @@
       },
       "bytes": 55694
     },
-    "dist/chunk-KUFQ5ONV.js.map": {
+    "dist/chunk-5WTUTVRO.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3186802
+      "bytes": 3185356
     },
-    "dist/chunk-KUFQ5ONV.js": {
+    "dist/chunk-5WTUTVRO.js": {
       "imports": [
         {
           "path": "react",
@@ -14452,6 +14452,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -16398,7 +16403,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-GI5NXBYN.js",
+          "path": "dist/HLSView-VUANLYLS.js",
           "kind": "dynamic-import"
         },
         {
@@ -16873,10 +16878,10 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18236
+          "bytesInOutput": 17262
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224298
+          "bytesInOutput": 224291
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
           "bytesInOutput": 42482
@@ -16885,7 +16890,7 @@
           "bytesInOutput": 26591
         },
         "../../node_modules/sdp/sdp.js": {
-          "bytesInOutput": 22275
+          "bytesInOutput": 22288
         },
         "../../node_modules/sdp-transform/lib/grammar.js": {
           "bytesInOutput": 16120
@@ -17056,7 +17061,7 @@
           "bytesInOutput": 755
         },
         "src/AudioLevel/AudioLevel.tsx": {
-          "bytesInOutput": 2196
+          "bytesInOutput": 2195
         },
         "src/AudioLevel/audio-level.png": {
           "bytesInOutput": 880
@@ -17092,7 +17097,7 @@
           "bytesInOutput": 149
         },
         "src/Accordion/Accordion.tsx": {
-          "bytesInOutput": 2526
+          "bytesInOutput": 2476
         },
         "src/Fieldset/Fieldset.tsx": {
           "bytesInOutput": 233
@@ -17158,7 +17163,7 @@
           "bytesInOutput": 1486
         },
         "src/Prebuilt/common/utils.js": {
-          "bytesInOutput": 3208
+          "bytesInOutput": 3211
         },
         "src/Prebuilt/components/AppData/useSidepane.js": {
           "bytesInOutput": 2499
@@ -17173,10 +17178,10 @@
           "bytesInOutput": 4698
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7205
+          "bytesInOutput": 7373
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 3145
+          "bytesInOutput": 3350
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
           "bytesInOutput": 10284
@@ -17301,20 +17306,20 @@
         "src/Prebuilt/components/MoreSettings/constants.ts": {
           "bytesInOutput": 437
         },
-        "src/Prebuilt/components/hooks/useMetadata.tsx": {
-          "bytesInOutput": 1826
+        "src/Prebuilt/components/hooks/useMetadata.jsx": {
+          "bytesInOutput": 1948
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 10902
+          "bytesInOutput": 11042
         },
         "src/Prebuilt/components/Header/StreamActions.tsx": {
           "bytesInOutput": 10031
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 50125
+          "bytesInOutput": 48783
         },
         "../../node_modules/reselect/es/index.js": {
-          "bytesInOutput": 2537
+          "bytesInOutput": 2539
         },
         "../../node_modules/webrtc-adapter/src/js/adapter_core.js": {
           "bytesInOutput": 118
@@ -17329,7 +17334,7 @@
           "bytesInOutput": 22678
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6094
+          "bytesInOutput": 6090
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1256
@@ -17338,7 +17343,7 @@
           "bytesInOutput": 9143
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getusermedia.js": {
-          "bytesInOutput": 2122
+          "bytesInOutput": 2125
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getdisplaymedia.js": {
           "bytesInOutput": 842
@@ -17374,7 +17379,7 @@
           "bytesInOutput": 658
         },
         "src/Prebuilt/components/RaiseHand.tsx": {
-          "bytesInOutput": 905
+          "bytesInOutput": 796
         },
         "src/Prebuilt/components/ScreenShareToggle.jsx": {
           "bytesInOutput": 1619
@@ -17413,7 +17418,7 @@
           "bytesInOutput": 1404
         },
         "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-          "bytesInOutput": 11723
+          "bytesInOutput": 11695
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
           "bytesInOutput": 3749
@@ -17425,7 +17430,7 @@
           "bytesInOutput": 1290
         },
         "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-          "bytesInOutput": 5214
+          "bytesInOutput": 5163
         },
         "src/Prebuilt/components/Footer/RoleOptions.tsx": {
           "bytesInOutput": 7326
@@ -17449,7 +17454,7 @@
           "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9638
+          "bytesInOutput": 9637
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 6274
@@ -17458,7 +17463,7 @@
           "bytesInOutput": 735
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-          "bytesInOutput": 7995
+          "bytesInOutput": 7999
         },
         "src/Prebuilt/components/Streaming/Common.jsx": {
           "bytesInOutput": 2247
@@ -17545,7 +17550,7 @@
           "bytesInOutput": 4926
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14726
+          "bytesInOutput": 14396
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9785
@@ -17557,7 +17562,7 @@
           "bytesInOutput": 1210
         },
         "src/Prebuilt/components/hooks/usePinnedMessages.ts": {
-          "bytesInOutput": 2758
+          "bytesInOutput": 2757
         },
         "src/Prebuilt/components/Chat/EmptyChat.tsx": {
           "bytesInOutput": 1952
@@ -17569,7 +17574,7 @@
           "bytesInOutput": 710
         },
         "src/Prebuilt/components/Chat/ChatFooter.tsx": {
-          "bytesInOutput": 9627
+          "bytesInOutput": 9793
         },
         "src/Prebuilt/components/Chat/ChatSelectorContainer.tsx": {
           "bytesInOutput": 5318
@@ -17593,7 +17598,7 @@
           "bytesInOutput": 1021
         },
         "src/Prebuilt/components/Chat/StickIndicator.tsx": {
-          "bytesInOutput": 543
+          "bytesInOutput": 542
         },
         "src/Prebuilt/components/Footer/PaginatedParticipants.tsx": {
           "bytesInOutput": 4205
@@ -17662,13 +17667,13 @@
           "bytesInOutput": 451
         },
         "src/Prebuilt/components/Pagination.tsx": {
-          "bytesInOutput": 1699
+          "bytesInOutput": 1698
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
           "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 3839
+          "bytesInOutput": 3834
         },
         "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
           "bytesInOutput": 2183
@@ -17695,7 +17700,7 @@
           "bytesInOutput": 1226
         },
         "src/Prebuilt/common/PeersSorter.ts": {
-          "bytesInOutput": 3099
+          "bytesInOutput": 3098
         },
         "src/Prebuilt/layouts/EmbedView.jsx": {
           "bytesInOutput": 2785
@@ -17755,7 +17760,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7974
+          "bytesInOutput": 7971
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -17770,7 +17775,7 @@
           "bytesInOutput": 1983
         },
         "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-          "bytesInOutput": 7229
+          "bytesInOutput": 7228
         },
         "src/Prebuilt/components/Notifications/InitErrorModal.tsx": {
           "bytesInOutput": 1596
@@ -17833,7 +17838,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1306994
+      "bytes": 1304924
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.3-alpha.2",
+  "version": "0.3.3-alpha.4",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,12 +82,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.3-alpha.2",
+    "@100mslive/hls-player": "0.3.3-alpha.4",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.13.3-alpha.2",
-    "@100mslive/react-icons": "0.10.3-alpha.2",
-    "@100mslive/react-sdk": "0.10.3-alpha.2",
-    "@100mslive/types-prebuilt": "0.12.8",
+    "@100mslive/hms-virtual-background": "1.13.3-alpha.4",
+    "@100mslive/react-icons": "0.10.3-alpha.4",
+    "@100mslive/react-sdk": "0.10.3-alpha.4",
+    "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "ada10fb3dc34984fd59f37f08629e8bd2a0f6c4c"
+  "gitHead": "f402d418c294acc6ce73bc81ab286d26431a6f53"
 }

package/src/Accordion/Accordion.tsx

@@ -64,15 +64,15 @@ export const AccordionRoot = StyledAccordion;
 export const AccordionItem = StyledItem;
 
 export const AccordionHeader: React.FC<
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
 > = React.forwardRef<
   HTMLButtonElement,
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
->(({ children, iconStyles, css, chevronID, ...props }, forwardedRef) => (
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
+>(({ children, iconStyles, css, ...props }, forwardedRef) => (
   <StyledHeader css={css}>
     <StyledTrigger {...props} ref={forwardedRef}>
       {children}
-      <StyledChevron data-testid={chevronID} aria-hidden css={iconStyles} />
+      <StyledChevron aria-hidden css={iconStyles} />
     </StyledTrigger>
   </StyledHeader>
 ));

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -410,7 +410,6 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
     }, [blacklistedMessageIDs, messages]);
 
     const vanillaStore = useHMSVanillaStore();
-    const rerenderOnFirstMount = useRef(false);
 
     useEffect(() => {
       const unsubscribe = vanillaStore.subscribe(() => {
@@ -427,15 +426,6 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
 
-    useEffect(() => {
-      // @ts-ignore
-      if (filteredMessages.length > 0 && listRef?.current && !rerenderOnFirstMount.current) {
-        rerenderOnFirstMount.current = true;
-        // @ts-ignore
-        listRef.current.resetAfterIndex(0);
-      }
-    }, [listRef, filteredMessages]);
-
     return filteredMessages.length === 0 ? (
       <EmptyChat />
     ) : (

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
@@ -89,6 +89,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
@@ -273,7 +275,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 }}
                 gap="2"
               >
-                <RaiseHand css={{ bg: '$surface_default' }} />
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
             </>

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -53,6 +54,8 @@ export const ConferenceScreen = () => {
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
@@ -199,7 +202,7 @@ export const ConferenceScreen = () => {
             justify="end"
             gap="2"
           >
-            <RaiseHand />
+            {noAVPermissions ? <RaiseHand /> : null}
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
             <Box
               css={{

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -40,6 +41,8 @@ export const Footer = ({
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const { showPolls } = useShowPolls();
@@ -87,7 +90,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            <RaiseHand />
+            {noAVPermissions ? <RaiseHand /> : null}
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>

package/src/Prebuilt/components/Footer/ParticipantList.tsx

@@ -324,15 +324,12 @@ const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: strin
     peerId,
     role,
   });
-  if (!shouldShowStageRoleChange) {
-    return null;
-  }
   return (
     <>
       <Button variant="standard" css={quickActionStyle} onClick={lowerPeerHand}>
         <CrossIcon height={18} width={18} />
       </Button>
-      {!isInStage && (
+      {shouldShowStageRoleChange && !isInStage && (
         <Button variant="primary" onClick={handleStageAction} css={quickActionStyle}>
           <AddIcon height={18} width={18} />
         </Button>