fix: conflict

100mslive · Feb 29, 2024 · 43415a7 · 43415a7
2 parents 60c3d0c + f5c03b5
commit 43415a7
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 16 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
@@ -2,16 +2,20 @@ import React, { MutableRefObject, useCallback, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { VariableSizeList } from 'react-window';
 import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
+import { match } from 'ts-pattern';
 import { selectHMSMessagesCount, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
-import { Flex } from '../../../Layout';
+import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit any
+import { EmojiReaction } from '../EmojiReaction';
 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 { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 export const Chat = () => {
@@ -21,6 +25,9 @@ export const Chat = () => {
   const vanillaStore = useHMSVanillaStore();
   const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
   const isMobile = useMedia(cssConfig.media.md);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
+
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
       if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
@@ -46,6 +53,7 @@ export const Chat = () => {
     >
       {isMobile && elements?.chat?.is_overlay ? null : <PinnedMessage />}
       <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
+
       <ChatPaused />
       <ChatBlocked />
       {isMobile && elements?.chat?.is_overlay ? <PinnedMessage /> : null}
@@ -54,6 +62,38 @@ export const Chat = () => {
           <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
         </ChatFooter>
       ) : null}
+      {(isMobileHLSStream || isLandscapeStream) && (
+        <Box
+          css={{
+            position: 'absolute',
+            ...match({ isLandscapeStream, isChatEnabled })
+              .with(
+                {
+                  isLandscapeStream: true,
+                  isChatEnabled: true,
+                },
+                () => ({ bottom: '$19', right: '$10' }),
+              )
+              .with(
+                {
+                  isLandscapeStream: true,
+                  isChatEnabled: false,
+                },
+                () => ({ bottom: '$20', right: '$10' }),
+              )
+              .with(
+                {
+                  isLandscapeStream: false,
+                  isChatEnabled: true,
+                },
+                () => ({ bottom: '$19', right: '$8' }),
+              )
+              .otherwise(() => ({})),
+          }}
+        >
+          <EmojiReaction />
+        </Box>
+      )}
     </Flex>
   );
 };

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
@@ -6,8 +6,6 @@ import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore
 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';
-// @ts-ignore: No implicit any
-import { EmojiReaction } from '../EmojiReaction';
 import { MoreSettings } from '../MoreSettings/MoreSettings';
 import { RaiseHand } from '../RaiseHand';
 // @ts-ignore: No implicit any
@@ -280,9 +278,6 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
-              <Box css={{ position: 'absolute', bottom: '$16', right: 0 }}>
-                <EmojiReaction />
-              </Box>
             </>
           )}
         </Flex>

diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
@@ -13,6 +13,7 @@ import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
 // import { ToastManager } from './Toast/ToastManager';
 import { Dropdown } from '../../Dropdown';
+import { Box } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
@@ -26,7 +27,6 @@ export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
-
   // const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -67,9 +67,11 @@ export const EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return (isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream) ? (
-    <EmojiCard sendReaction={sendReaction} />
-  ) : (
+
+  if ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+    return <EmojiCard sendReaction={sendReaction} />;
+  }
+  return (
     <Dropdown.Root open={open} onOpenChange={setOpen}>
       <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
         <IconButton
@@ -78,11 +80,17 @@ export const EmojiReaction = () => {
           }
         >
           <Tooltip title="Emoji reaction">
-            <EmojiIcon />
+            <Box>
+              <EmojiIcon />
+            </Box>
           </Tooltip>
         </IconButton>
       </Dropdown.Trigger>
-      <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
+      <Dropdown.Content
+        sideOffset={5}
+        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}
+        css={{ p: '$8', bg: '$surface_default' }}
+      >
         <EmojiCard sendReaction={sendReaction} />
       </Dropdown.Content>
     </Dropdown.Root>

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -14,13 +14,12 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         position: 'relative',
         '& video::cue': {
           color: 'white',
-          // textShadow: '0px 0px 4px #000',
           whiteSpace: 'pre-line',
-          fontSize: '$lg',
+          fontSize: '$sm',
           fontStyle: 'normal',
-          fontWeight: '$semiBold',
+          fontWeight: '$regular',
           lineHeight: '$sm',
-          letterSpacing: '0.5px',
+          letterSpacing: '0.25px',
         },
         '& video::-webkit-media-text-track-display': {
           padding: '0 $4',