@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.7

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.7-alpha.0",
+  "version": "0.1.7",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.16-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.16-alpha.0",
-    "@100mslive/react-icons": "0.8.16-alpha.0",
-    "@100mslive/react-sdk": "0.8.16-alpha.0",
+    "@100mslive/hls-player": "0.1.16",
+    "@100mslive/hms-virtual-background": "1.11.16",
+    "@100mslive/react-icons": "0.8.16",
+    "@100mslive/react-sdk": "0.8.16",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "02a796684045c2468c14db4cb894c56a17c6c2ba"
+  "gitHead": "c06edac3e71481de08e948ffe0affaf705564ad1"
 }

package/src/Input/Input.tsx

@@ -20,7 +20,7 @@ export const Input = styled('input', {
     border: '1px solid transparent',
   },
   '&::placeholder': {
-    color: '$on_surface_low',
+    color: '$on_surface_medium',
   },
   variants: {
     alert_error_default: {

package/src/Prebuilt/common/utils.js

@@ -88,3 +88,10 @@ export const formatTime = timeInSeconds => {
   const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
   return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
+
+export const getAttributeBoxSize = (width, height) => {
+  if (!width || !height) {
+    return '';
+  }
+  return width < 180 || height < 180 ? 'small' : 'medium';
+};

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

@@ -24,6 +24,7 @@ import { Tooltip } from '../../../Tooltip';
 import emptyChat from '../../images/empty-chat.svg';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+import { useUnreadCount } from './useUnreadCount';
 
 const formatTime = date => {
   if (!(date instanceof Date)) {
@@ -192,119 +193,127 @@ const SenderName = styled(Text, {
   fontWeight: '$semiBold',
 });
 
-const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
-  const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-  const rowRef = useRef(null);
-  useEffect(() => {
-    if (rowRef.current) {
-      setRowHeight(index, rowRef.current.clientHeight);
-    }
-  }, [index, setRowHeight]);
-  const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isOverlay = elements?.chat?.is_overlay && isMobile;
-  const hmsActions = useHMSActions();
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const permissions = useHMSStore(selectPermissions);
-  const messageType = getMessageType({
-    roles: message.recipientRoles,
-    receiver: message.recipientPeer,
-  });
-  // show pin action only if peer has remove others permission and the message is of broadcast type
-  const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
+const ChatMessage = React.memo(
+  ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
+    const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+    const rowRef = useRef(null);
+    useEffect(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current.clientHeight);
+      }
+    }, [index, setRowHeight]);
+    const isMobile = useMedia(cssConfig.media.md);
+    const { elements } = useRoomLayoutConferencingScreen();
+    const isOverlay = elements?.chat?.is_overlay && isMobile;
+    const hmsActions = useHMSActions();
+    const localPeerId = useHMSStore(selectLocalPeerID);
+    const permissions = useHMSStore(selectPermissions);
+    const messageType = getMessageType({
+      roles: message.recipientRoles,
+      receiver: message.recipientPeer,
+    });
+    // show pin action only if peer has remove others permission and the message is of broadcast type
+    const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
 
-  useEffect(() => {
-    if (message.id && !message.read && inView) {
-      hmsActions.setMessageRead(true, message.id);
-    }
-  }, [message.read, hmsActions, inView, message.id]);
+    useEffect(() => {
+      if (message.id && !message.read && inView) {
+        hmsActions.setMessageRead(true, message.id);
+      }
+    }, [message.read, hmsActions, inView, message.id]);
 
-  return (
-    <Box
-      ref={ref}
-      as="div"
-      css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
-      style={style}
-    >
-      <Flex
-        ref={rowRef}
-        align="center"
-        css={{
-          flexWrap: 'wrap',
-          // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
-          r: messageType ? '$1' : undefined,
-          px: messageType ? '$4' : '$2',
-          py: messageType ? '$4' : 0,
-          userSelect: 'none',
-        }}
-        key={message.time}
-        data-testid="chat_msg"
+    useEffect(() => {
+      if (isLast && inView && unreadCount >= 1) {
+        scrollToBottom(1);
+      }
+    }, [inView, isLast, scrollToBottom, unreadCount]);
+
+    return (
+      <Box
+        ref={ref}
+        as="div"
+        css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
+        style={style}
       >
-        <Text
+        <Flex
+          ref={rowRef}
+          align="center"
           css={{
-            color: isOverlay ? '#FFF' : '$on_surface_high',
-            fontWeight: '$semiBold',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
+            flexWrap: 'wrap',
+            // Theme independent color, token should not be used for transparent chat
+            bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
+            r: messageType ? '$1' : undefined,
+            px: messageType ? '$4' : '$2',
+            py: messageType ? '$4' : 0,
+            userSelect: 'none',
           }}
-          as="div"
+          key={message.time}
+          data-testid="chat_msg"
         >
-          <Flex align="baseline">
-            {message.senderName === 'You' || !message.senderName ? (
-              <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
-                {message.senderName || 'Anonymous'}
-              </SenderName>
-            ) : (
-              <Tooltip title={message.senderName} side="top" align="start">
+          <Text
+            css={{
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+              fontWeight: '$semiBold',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+            as="div"
+          >
+            <Flex align="baseline">
+              {message.senderName === 'You' || !message.senderName ? (
                 <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
-                  {message.senderName}
+                  {message.senderName || 'Anonymous'}
                 </SenderName>
-              </Tooltip>
-            )}
-            {!isOverlay ? (
-              <Text
-                as="span"
-                variant="xs"
-                css={{
-                  ml: '$4',
-                  color: '$on_surface_medium',
-                  flexShrink: 0,
-                }}
-              >
-                {formatTime(message.time)}
-              </Text>
-            ) : null}
-          </Flex>
-          <MessageType
-            hasCurrentUserSent={message.sender === localPeerId}
-            receiver={message.recipientPeer}
-            roles={message.recipientRoles}
-          />
-          {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
-        </Text>
-        <Text
-          variant="sm"
-          css={{
-            w: '100%',
-            mt: '$2',
-            wordBreak: 'break-word',
-            whiteSpace: 'pre-wrap',
-            userSelect: 'all',
-            color: isOverlay ? '#FFF' : '$on_surface_high',
-          }}
-          onClick={e => e.stopPropagation()}
-        >
-          <AnnotisedMessage message={message.message} />
-        </Text>
-      </Flex>
-    </Box>
-  );
-});
+              ) : (
+                <Tooltip title={message.senderName} side="top" align="start">
+                  <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
+                    {message.senderName}
+                  </SenderName>
+                </Tooltip>
+              )}
+              {!isOverlay ? (
+                <Text
+                  as="span"
+                  variant="xs"
+                  css={{
+                    ml: '$4',
+                    color: '$on_surface_medium',
+                    flexShrink: 0,
+                  }}
+                >
+                  {formatTime(message.time)}
+                </Text>
+              ) : null}
+            </Flex>
+            <MessageType
+              hasCurrentUserSent={message.sender === localPeerId}
+              receiver={message.recipientPeer}
+              roles={message.recipientRoles}
+            />
+            {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
+          </Text>
+          <Text
+            variant="sm"
+            css={{
+              w: '100%',
+              mt: '$2',
+              wordBreak: 'break-word',
+              whiteSpace: 'pre-wrap',
+              userSelect: 'all',
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            <AnnotisedMessage message={message.message} />
+          </Text>
+        </Flex>
+      </Box>
+    );
+  },
+);
 const ChatList = React.forwardRef(
-  ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+  ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
       if (listRef.current && listRef.current.scrollToItem) {
@@ -331,6 +340,9 @@ const ChatList = React.forwardRef(
             key={messages[index].id}
             message={messages[index]}
             setRowHeight={setRowHeight}
+            unreadCount={unreadCount}
+            isLast={index >= messages.length - 2}
+            scrollToBottom={scrollToBottom}
             onPin={() => setPinnedMessage(messages[index])}
           />
         )}
@@ -338,7 +350,7 @@ const ChatList = React.forwardRef(
     );
   },
 );
-const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom }, listRef) => {
+const VirtualizedChatMessages = React.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
   const rowHeights = useRef({});
 
   function getRowHeight(index) {
@@ -377,6 +389,7 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom },
             getRowHeight={getRowHeight}
             scrollToBottom={scrollToBottom}
             ref={listRef}
+            unreadCount={unreadCount}
           />
         )}
       </AutoSizer>
@@ -394,6 +407,7 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
   messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
+  const unreadCount = useUnreadCount({ role, peerId });
 
   if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (
@@ -425,7 +439,12 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
 
   return (
     <Fragment>
-      <VirtualizedChatMessages messages={messages} scrollToBottom={scrollToBottom} ref={listRef} />
+      <VirtualizedChatMessages
+        messages={messages}
+        scrollToBottom={scrollToBottom}
+        unreadCount={unreadCount}
+        ref={listRef}
+      />
     </Fragment>
   );
 });

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

@@ -327,7 +327,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$14', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -29,6 +29,7 @@ export const DesktopLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -38,7 +39,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
+      {showLeaveOptions ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -47,9 +48,7 @@ export const DesktopLeaveRoom = ({
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0,
             }}
-            onClick={() => {
-              leaveRoom({ endstream: false });
-            }}
+            onClick={() => setShowLeaveRoomAlert(true)}
           >
             <Tooltip title="Leave Room">
               <Box>
@@ -74,7 +73,7 @@ export const DesktopLeaveRoom = ({
               <Dropdown.Item
                 css={{
                   bg: '$surface_dim',
-                  color: '$on_surface_low',
+                  color: '$on_surface_medium',
                   '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
                 }}
                 onClick={() => leaveRoom({ endstream: false })}
@@ -92,42 +91,37 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {permissions?.endRoom || permissions?.hlsStreaming ? (
-                <Dropdown.Item
-                  css={{
-                    bg: '$alert_error_dim',
-                    color: '$alert_error_bright',
-                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+
+              <Dropdown.Item
+                css={{
+                  bg: '$alert_error_dim',
+                  color: '$alert_error_bright',
+                  '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                }}
+                data-testid="end_room_btn"
+              >
+                <LeaveCard
+                  title={showStream ? 'End Stream' : 'End Session'}
+                  subtitle={`The ${
+                    showStream ? 'stream' : 'session'
+                  } will end for everyone. You can't undo this action.`}
+                  bg=""
+                  titleColor="$alert_error_brighter"
+                  icon={<StopIcon height={24} width={24} />}
+                  onClick={() => {
+                    setOpen(false);
+                    setShowEndStreamAlert(true);
                   }}
-                  data-testid="end_room_btn"
-                >
-                  <LeaveCard
-                    title={showStream ? 'End Stream' : 'End Session'}
-                    subtitle={`The ${
-                      showStream ? 'stream' : 'session'
-                    } will end for everyone. You can't undo this action.`}
-                    bg=""
-                    titleColor="$alert_error_brighter"
-                    icon={<StopIcon height={24} width={24} />}
-                    onClick={() => {
-                      setOpen(false);
-                      setShowEndStreamAlert(true);
-                    }}
-                    css={{ p: 0 }}
-                  />
-                </Dropdown.Item>
-              ) : null}
+                  css={{ p: 0 }}
+                />
+              </Dropdown.Item>
             </Dropdown.Content>
           </Dropdown.Root>
         </Flex>
       ) : (
         <LeaveIconButton
           onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
+            setShowLeaveRoomAlert(true);
           }}
           key="LeaveRoom"
           data-testid="leave_room_btn"
@@ -154,16 +148,14 @@ export const DesktopLeaveRoom = ({
         </Dialog.Portal>
       </Dialog.Root>
 
-      {screenType === 'hls_live_streaming' ? (
-        <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-          <Dialog.Portal>
-            <Dialog.Overlay />
-            <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-              <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
-            </Dialog.Content>
-          </Dialog.Portal>
-        </Dialog.Root>
-      ) : null}
+      <Dialog.Root open={showLeaveRoomAlert} modal={false}>
+        <Dialog.Portal>
+          <Dialog.Overlay />
+          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
     </Fragment>
   );
 };

package/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx

@@ -30,6 +30,7 @@ export const MwebLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open, name: 'LeaveRoom' });
 
@@ -39,7 +40,7 @@ export const MwebLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' ? (
+      {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
@@ -70,36 +71,24 @@ export const MwebLeaveRoom = ({
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
 
-            {permissions?.endRoom || permissions?.hlsStreaming ? (
-              <LeaveCard
-                title={showStream ? 'End Stream' : 'End Session'}
-                subtitle={`The will end the ${
-                  showStream ? 'stream' : 'session'
-                } for everyone. You can't undo this action.`}
-                bg="$alert_error_dim"
-                titleColor="$alert_error_brighter"
-                css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
-                icon={<StopIcon height={24} width={24} />}
-                onClick={() => {
-                  setOpen(false);
-                  setShowEndStreamAlert(true);
-                }}
-              />
-            ) : null}
+            <LeaveCard
+              title={showStream ? 'End Stream' : 'End Session'}
+              subtitle={`The will end the ${
+                showStream ? 'stream' : 'session'
+              } for everyone. You can't undo this action.`}
+              bg="$alert_error_dim"
+              titleColor="$alert_error_brighter"
+              css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
+              icon={<StopIcon height={24} width={24} />}
+              onClick={() => {
+                setOpen(false);
+                setShowEndStreamAlert(true);
+              }}
+            />
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton
-          key="LeaveRoom"
-          data-testid="leave_room_btn"
-          onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
-          }}
-        >
+        <LeaveIconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => setShowLeaveRoomAlert(true)}>
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -116,13 +105,12 @@ export const MwebLeaveRoom = ({
           />
         </Sheet.Content>
       </Sheet.Root>
-      {screenType === 'hls_live_streaming' ? (
-        <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-          <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
-            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : null}
+
+      <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+          <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
+        </Sheet.Content>
+      </Sheet.Root>
     </Fragment>
   );
 };

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -170,7 +170,7 @@ const PreviewJoin = ({
           <PreviewTile name={name} error={previewError} />
         </Flex>
       ) : null}
-      <Box css={{ w: '100%', maxWidth: `${aspectRatio * 360}px` }}>
+      <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
         <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
         <PreviewForm
           name={name}
@@ -230,6 +230,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
             trackId={localPeer.videoTrack}
             data-testid="preview_tile"
           />
+
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={name} data-testid="preview_avatar_tile" />
@@ -239,8 +240,9 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
       ) : !error ? (
         <FullPageProgress />
       ) : null}
+
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator size="medium">
+        <StyledVideoTile.AudioIndicator>
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
@@ -255,7 +257,7 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
 
   return (
     <Flex
-      justify="between"
+      justify={hideSettings && isMobile ? 'center' : 'between'}
       css={{
         width: '100%',
         mt: '$8',

package/src/Prebuilt/components/RaiseHand.jsx

@@ -1,22 +1,15 @@
 import React from 'react';
-import { selectHasPeerHandRaised, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
+import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = () => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
-  const actions = useHMSActions();
-
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton
-        active={!isHandRaised}
-        onClick={() => {
-          isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
-        }}
-      >
+      <IconButton active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
         <HandIcon />
       </IconButton>
     </Tooltip>