@100mslive/roomkit-react 0.3.3-alpha.1 → 0.3.3-alpha.10

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.3-alpha.1",
+  "version": "0.3.3-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,12 +82,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.3-alpha.1",
-    "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.13.3-alpha.1",
-    "@100mslive/react-icons": "0.10.3-alpha.1",
-    "@100mslive/react-sdk": "0.10.3-alpha.1",
-    "@100mslive/types-prebuilt": "0.12.8",
+    "@100mslive/hls-player": "0.3.3-alpha.10",
+    "@100mslive/hms-noise-cancellation": "0.0.0-alpha.5",
+    "@100mslive/hms-virtual-background": "1.13.3-alpha.10",
+    "@100mslive/react-icons": "0.10.3-alpha.10",
+    "@100mslive/react-sdk": "0.10.3-alpha.10",
+    "@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": "8e27b80c474e3487828a60fce4aa1f444aa14577"
+  "gitHead": "5164a4d05ffa194988cb560db7db95405fa39052"
 }

package/src/IconButton/IconButton.tsx

@@ -25,19 +25,14 @@ export const IconButton = styled('button', {
   '&[disabled]': {
     opacity: 0.5,
     cursor: 'not-allowed',
+    backgroundColor: '$secondary_dim',
+    color: '$on_primary_high',
   },
   '&:focus': {
     outline: 'none',
   },
   variants: {
     active: {
-      false: {
-        backgroundColor: '$secondary_dim',
-        color: '$on_primary_high',
-        '&:not([disabled]):hover': {
-          backgroundColor: '$secondary_default',
-        },
-      },
       true: {
         '&:not([disabled]):hover': {
           backgroundColor: '$on_surface_low',

package/src/Prebuilt/IconButton.tsx

@@ -7,22 +7,18 @@ const IconButton = styled(BaseIconButton, {
   border: '1px solid $border_bright',
   bg: '$background_dim',
   r: '$1',
+  '&[disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    backgroundColor: '$secondary_dim',
+    color: '$on_primary_high',
+  },
   variants: {
     active: {
       true: {
         color: '$on_surface_high',
         backgroundColor: 'transparent',
       },
-      false: {
-        border: '1px solid transparent',
-        color: '$on_primary_high',
-      },
-    },
-    disabled: {
-      true: {
-        backgroundColor: '$surface_brighter',
-        color: '$on_surface_low',
-      },
     },
   },
 });

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

@@ -9,7 +9,7 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = () => {
+export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -21,7 +21,7 @@ export const ChatToggle = () => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
           <ChatIcon />
         </IconButton>
       </Tooltip>

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,12 +324,15 @@ 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>
-      {shouldShowStageRoleChange && !isInStage && (
+      {!isInStage && (
         <Button variant="primary" onClick={handleStageAction} css={quickActionStyle}>
           <AddIcon height={18} width={18} />
         </Button>

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

@@ -149,18 +149,17 @@ export const RoleAccordion = ({
             <ChevronRightIcon />
           </Flex>
         ) : null}
-        {isHandRaisedAccordion && (
+        {isHandRaisedAccordion && canBringToStage && (
           <>
             <HorizontalDivider />
             <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
               <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
                 <CrossIcon /> Lower all hands
               </Button>
-              {canBringToStage && (
-                <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
-                  <AddIcon /> {bring_to_stage_label}
-                </Button>
-              )}
+
+              <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
+                <AddIcon /> {bring_to_stage_label}
+              </Button>
             </Flex>
           </>
         )}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWhiteboard } from '@100mslive/react-sdk';
+import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -9,14 +9,28 @@ import { ToastManager } from '../Toast/ToastManager';
 
 export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
+  const { screenSharingPeerId, amIScreenSharing } = useScreenShare();
+  const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
+  const disabled = remoteScreenShare || (open && !isOwner);
+
   if (!toggle) {
     return null;
   }
 
   return (
-    <Tooltip key="whiteboard" title={`${open ? 'Close' : 'Open'} Whiteboard`}>
+    <Tooltip
+      key="whiteboard"
+      title={
+        remoteScreenShare
+          ? 'Cannot open whiteboard when viewing a shared screen'
+          : `${open ? 'Close' : 'Open'} Whiteboard`
+      }
+    >
       <IconButton
         onClick={async () => {
+          if (disabled) {
+            return;
+          }
           try {
             await toggle();
           } catch (error) {
@@ -24,7 +38,7 @@ export const WhiteboardToggle = () => {
           }
         }}
         active={!open}
-        disabled={open && !isOwner}
+        disabled={disabled}
         data-testid="whiteboard_btn"
       >
         <PencilDrawIcon />

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -9,6 +9,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         size: '100%',
         position: 'relative',
         justifyContent: 'center',
+        transition: 'all 0.3s ease-in-out',
         '@md': {
           height: 'auto',
           '& video': {

package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx

@@ -9,8 +9,8 @@ export const PlayPauseButton = ({
   height = 20,
 }: {
   isPaused: boolean;
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
 }) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const onClick = async (event: MouseEvent) => {

package/src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { BackwardArrowIcon, ForwardArrowIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config } from '../../../Theme';
+import { PlayPauseButton } from './PlayPauseButton';
+import { SeekControl } from './SeekControl';
+import { useIsLandscape } from '../../common/hooks';
+
+// desktop buttons
+export const PlayPauseSeekControls = ({
+  isPaused,
+  onSeekTo,
+}: {
+  isPaused: boolean;
+  onSeekTo: (value: number) => void;
+}) => {
+  return (
+    <>
+      <SeekControl
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(-10);
+        }}
+        title="backward"
+      >
+        <BackwardArrowIcon width={20} height={20} />
+      </SeekControl>
+      <PlayPauseButton isPaused={isPaused} />
+      <SeekControl
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(10);
+        }}
+        title="forward"
+      >
+        <ForwardArrowIcon width={20} height={20} />
+      </SeekControl>
+    </>
+  );
+};
+
+// overlay handlers
+export const PlayPauseSeekOverlayControls = ({
+  isPaused,
+  showControls,
+  hoverControlsVisible,
+}: {
+  isPaused: boolean;
+  showControls: boolean;
+  hoverControlsVisible: {
+    seekBackward: boolean;
+    seekForward: boolean;
+    pausePlay: boolean;
+  };
+}) => {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+
+  if (!isMobile && !isLandscape) {
+    // show desktopOverflow icons
+    return (
+      <>
+        <Flex
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            size: '$24',
+            visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+            opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+          }}
+          direction="column"
+          align="center"
+        >
+          <SeekControl title="backward">
+            <BackwardArrowIcon width={52} height={52} />
+          </SeekControl>
+          <Text variant="body2" css={{ fontWeight: '$regular' }}>
+            10 secs
+          </Text>
+        </Flex>
+        <Box
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            visibility: hoverControlsVisible.pausePlay ? `` : `hidden`,
+            opacity: hoverControlsVisible.pausePlay ? `1` : '0',
+          }}
+        >
+          <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+        </Box>
+        <Flex
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            size: '$24',
+            visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+            opacity: hoverControlsVisible.seekForward ? `1` : '0',
+          }}
+          direction="column"
+          align="center"
+        >
+          <SeekControl title="forward">
+            <ForwardArrowIcon width={52} height={52} />
+          </SeekControl>
+          <Text variant="body2" css={{ fontWeight: '$regular' }}>
+            10 secs
+          </Text>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      css={{
+        position: 'absolute',
+        bg: '#00000066',
+        display: 'inline-flex',
+        gap: '$2',
+        zIndex: 1,
+        size: '100%',
+        visibility: showControls ? `` : `hidden`,
+        opacity: showControls ? `1` : '0',
+      }}
+    >
+      <SeekControl
+        title="backward"
+        css={{
+          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+        }}
+      >
+        <BackwardArrowIcon width={32} height={32} />
+      </SeekControl>
+      <Box
+        css={{
+          bg: 'rgba(0, 0, 0, 0.6)',
+          r: '$round',
+        }}
+      >
+        <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+      </Box>
+      <SeekControl
+        title="forward"
+        css={{
+          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekForward ? `1` : '0',
+        }}
+      >
+        <ForwardArrowIcon width={32} height={32} />
+      </SeekControl>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/HMSVideo/{SeekControls.tsx → SeekControl.tsx}

@@ -1,7 +1,7 @@
 import React, { MouseEventHandler } from 'react';
 import { IconButton, Tooltip } from '../../..';
 
-export const SeekControls = ({
+export const SeekControl = ({
   title,
   onClick,
   children,
@@ -9,7 +9,7 @@ export const SeekControls = ({
 }: {
   title: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  css: any;
+  css?: any;
   children: React.ReactNode;
 }) => {
   return (

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -25,8 +25,12 @@ export const VideoProgress = ({
     if (videoEl.buffered.length > 0) {
       bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
     }
-    setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
-    setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
+    if (!isNaN(videoProgress)) {
+      setVideoProgress(videoProgress);
+    }
+    if (!isNaN(bufferProgress)) {
+      setBufferProgress(bufferProgress);
+    }
   }, [videoEl]);
   const timeupdateHandler = useCallback(() => {
     if (!videoEl || seekProgress) {
@@ -42,7 +46,7 @@ export const VideoProgress = ({
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);
     };
-  }, [timeupdateHandler, videoEl]);
+  }, [setProgress, timeupdateHandler, videoEl]);
 
   const onProgress = (progress: number[]) => {
     const progress1 = Math.floor(getPercentage(progress[0], 100));

package/src/Prebuilt/components/HMSVideo/index.ts

@@ -2,15 +2,13 @@
 import { LeftControls, RightControls, VideoControls } from './Controls';
 // @ts-ignore
 import { HMSVideo } from './HMSVideo';
-import { PlayPauseButton } from './PlayPauseButton';
-import { SeekControls } from './SeekControls';
+import { PlayPauseSeekControls, PlayPauseSeekOverlayControls } from './PlayPauseSeekControls';
 import { VideoProgress } from './VideoProgress';
 import { VideoTime } from './VideoTime';
 import { VolumeControl } from './VolumeControl';
 
 export const HMSVideoPlayer = {
   Root: HMSVideo,
-  PlayPauseButton: PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -19,5 +17,8 @@ export const HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls,
   },
-  Seeker: SeekControls,
+  PlayPauseSeekControls: {
+    Overlay: PlayPauseSeekOverlayControls,
+    Button: PlayPauseSeekControls,
+  },
 };

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -25,24 +25,24 @@ const IconSection = styled(IconButton, {
   p: '$4',
   r: '$1',
   bg: 'transparent',
-  borderTopRightRadius: 0,
+  borderTopRightRadius: '0 !important',
   borderColor: '$border_bright',
-  borderBottomRightRadius: 0,
+  borderBottomRightRadius: '0 !important',
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,
   },
   '@md': {
     mx: 0,
-    borderTopRightRadius: '$1',
-    borderBottomRightRadius: '$1',
+    borderTopRightRadius: '$1 !important',
+    borderBottomRightRadius: '$1 !important',
   },
   variants: {
     ...variants,
     hideOptions: {
       true: {
-        borderTopRightRadius: '$1',
-        borderBottomRightRadius: '$1',
+        borderTopRightRadius: '$1 !important',
+        borderBottomRightRadius: '$1 !important',
       },
     },
   },
@@ -53,10 +53,10 @@ const OptionsSection = styled(IconButton, {
   h: '$14',
   p: '$4 $2',
   r: '$1',
-  borderTopLeftRadius: 0,
+  borderTopLeftRadius: '0 !important',
   borderColor: '$border_bright',
-  borderBottomLeftRadius: 0,
-  borderLeftWidth: 0,
+  borderBottomLeftRadius: '0 !important',
+  borderLeftWidth: '0 !important',
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -29,6 +29,7 @@ import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
+// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 // @ts-ignore: No implicit any
 import { APP_DATA, isMacOS } from '../../../common/constants';

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -6,6 +6,7 @@ import {
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPermissions,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -50,6 +51,7 @@ import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane'
 import { useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
+// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
@@ -93,6 +95,8 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -171,7 +175,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
-            {elements.hand_raise ? (
+            {!noAVPermissions ? (
               <ActionTile.Root
                 active={isHandRaised}
                 onClick={() => {

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const PreviousRoleInMetadata = () => {

package/src/Prebuilt/components/RaiseHand.tsx

@@ -4,17 +4,11 @@ import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { elements } = useRoomLayoutConferencingScreen();
-
-  if (!elements.hand_raise) {
-    return null;
-  }
-
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
       <IconButton

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -13,6 +13,7 @@ import { Flex, Text } from '../../..';
 import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
 import { RequestPrompt } from './RequestPrompt';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';