From e5599fb8d084a62a5b38b9ff0287b8c2d50d4441 Mon Sep 17 00:00:00 2001
From: raviteja83 <ravi.theja@100ms.live>
Date: Mon, 4 Mar 2024 19:03:14 +0530
Subject: [PATCH 1/2] fix: pin message position

---
 .../roomkit-react/src/Prebuilt/components/Chat/Chat.tsx     | 5 +++--
 .../src/Prebuilt/components/Chat/EmptyChat.tsx              | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
index fab34ea08b..f80258d0d7 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
@@ -45,6 +45,7 @@ export const Chat = () => {
   if (!elements?.chat) {
     return null;
   }
+  const streaming = isMobileHLSStream || isLandscapeStream;
 
   return (
     <Flex
@@ -55,12 +56,12 @@ export const Chat = () => {
         gap: '$4',
       }}
     >
-      {isMobile && elements?.chat?.is_overlay ? null : <PinnedMessage />}
+      {isMobile && elements?.chat?.is_overlay && !streaming ? null : <PinnedMessage />}
       <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
 
       <ChatPaused />
       <ChatBlocked />
-      {isMobile && elements?.chat?.is_overlay ? <PinnedMessage /> : null}
+      {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
       {isChatEnabled ? (
         <ChatFooter onSend={scrollToBottom}>
           <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/EmptyChat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/EmptyChat.tsx
index 930c2805a0..12c5ccfc10 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/EmptyChat.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/EmptyChat.tsx
@@ -7,6 +7,7 @@ import { config as cssConfig } from '../../../Theme';
 import emptyChat from '../../images/empty-chat.svg';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
 export const EmptyChat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
@@ -18,8 +19,11 @@ export const EmptyChat = () => {
       elements.chat.private_chat_enabled ||
       (elements.chat.roles_whitelist && elements.chat.roles_whitelist.length)) &&
     !isLocalPeerBlacklisted;
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
+  const streaming = isMobileHLSStream || isLandscapeStream;
 
-  if (isMobile && elements?.chat?.is_overlay) return <></>;
+  if (isMobile && elements?.chat?.is_overlay && !streaming) return <></>;
 
   return (
     <Flex

From 94327504f46f98fc4a5f0e3fe8f0c4d960d7bf91 Mon Sep 17 00:00:00 2001
From: raviteja83 <ravi.theja@100ms.live>
Date: Mon, 4 Mar 2024 19:30:05 +0530
Subject: [PATCH 2/2] fix: emoji reactions for mweb streaming

---
 .../src/Prebuilt/components/Chat/Chat.tsx        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
index f80258d0d7..5da5d74bb3 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
@@ -71,7 +71,7 @@ export const Chat = () => {
         <Box
           css={{
             position: 'absolute',
-            ...match({ isLandscapeStream, isChatEnabled })
+            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled })
               .with(
                 {
                   isLandscapeStream: true,
@@ -86,6 +86,20 @@ export const Chat = () => {
                 },
                 () => ({ bottom: '$20', right: '$10' }),
               )
+              .with(
+                {
+                  isMobileHLSStream: true,
+                  isChatEnabled: false,
+                },
+                () => ({ bottom: '$19', right: '$8' }),
+              )
+              .with(
+                {
+                  isMobileHLSStream: true,
+                  isChatEnabled: true,
+                },
+                () => ({ bottom: '$17', right: '$8' }),
+              )
               .with(
                 {
                   isLandscapeStream: false,