fix: show elements when chat is paused or peer is blocked

100mslive · May 21, 2024 · af33450 · af33450
1 parent 3469f23
commit af33450
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
@@ -10,17 +10,20 @@ import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit any
 import { EmojiReaction } from '../EmojiReaction';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const Chat = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const listRef = useRef<VariableSizeList | null>(null);
   const hmsActions = useHMSActions();
   const vanillaStore = useHMSVanillaStore();
@@ -29,6 +32,7 @@ export const Chat = () => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeStream = useLandscapeHLSStream();
   useSidepaneResetOnLayoutUpdate('chat', SIDE_PANE_OPTIONS.CHAT);
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
 
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
@@ -57,20 +61,27 @@ export const Chat = () => {
     >
       {isMobile && elements?.chat?.is_overlay && !streaming ? null : <PinnedMessage />}
       <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
-
-      <ChatPaused />
-      <ChatBlocked />
+      <Flex align="center" css={{ w: '100%', gap: '$2' }}>
+        <ChatPaused />
+        <ChatBlocked />
+        {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
+          <>
+            <RaiseHand css={{ bg: '$surface_default' }} />
+            <MoreSettings elements={elements} screenType={screenType} />
+          </>
+        )}
+      </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
       {isChatEnabled ? (
         <ChatFooter onSend={scrollToBottom}>
           <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
         </ChatFooter>
       ) : null}
-      {(isMobileHLSStream || isLandscapeStream) && (
+      {streaming && (
         <Box
           css={{
             position: 'absolute',
-            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled })
+            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled, isLocalPeerBlacklisted })
               .with(
                 {
                   isLandscapeStream: true,
@@ -96,13 +107,22 @@ export const Chat = () => {
                 {
                   isMobileHLSStream: true,
                   isChatEnabled: true,
+                  isLocalPeerBlacklisted: false,
                 },
                 () => ({ bottom: '$17', right: '$8' }),
               )
               .with(
                 {
                   isLandscapeStream: false,
                   isChatEnabled: true,
+                  isLocalPeerBlacklisted: true,
+                },
+                () => ({ bottom: '$18', right: '$8' }),
+              )
+              .with(
+                {
+                  isMobileHLSStream: true,
+                  isLocalPeerBlacklisted: true,
                 },
                 () => ({ bottom: '$20', right: '$8' }),
               )

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatStates.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatStates.tsx
@@ -30,7 +30,7 @@ export const ChatPaused = () => {
     <Flex
       align="center"
       justify="between"
-      css={{ borderRadius: '$1', bg: '$surface_default', p: '$4 $4 $4 $8', w: '100%' }}
+      css={{ borderRadius: '$1', bg: '$surface_default', p: '$2 $4 $2 $8', w: '100%' }}
     >
       <Box>
         <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>