@100mslive/roomkit-react 0.2.8-alpha.1 → 0.2.8-alpha.11

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.8-alpha.1",
+  "version": "0.2.8-alpha.11",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.8-alpha.1",
+    "@100mslive/hls-player": "0.2.8-alpha.11",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.8-alpha.1",
-    "@100mslive/react-icons": "0.9.8-alpha.1",
-    "@100mslive/react-sdk": "0.9.8-alpha.1",
+    "@100mslive/hms-virtual-background": "1.12.8-alpha.11",
+    "@100mslive/react-icons": "0.9.8-alpha.11",
+    "@100mslive/react-sdk": "0.9.8-alpha.11",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -118,8 +118,9 @@
     "react-window": "^1.8.7",
     "recordrtc": "^5.6.2",
     "screenfull": "^5.1.0",
+    "ts-pattern": "4.3.0",
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "44ec4f466226ce1135b5b72556b212b9b10dae07"
+  "gitHead": "c02dfafa58072004d8d90ee521240e46452b564c"
 }

package/src/Button/Button.tsx

@@ -20,22 +20,22 @@ const getOutlinedVariants = (
   textDisabled: string,
 ) => {
   return {
-    bg: '$transparent',
+    bg: 'transparent',
     border: `solid $space$px $colors${base}`,
     c: text,
     '&[disabled]': {
       c: textDisabled,
-      bg: '$transparent',
+      bg: 'transparent',
       border: `solid $space$px $colors${disabled}`,
       cursor: 'not-allowed',
     },
     '&:not([disabled]):hover': {
       border: `solid $space$px $colors${hover}`,
-      bg: '$transparent',
+      bg: 'transparent',
     },
     '&:not([disabled]):active': {
       border: `solid $space$px $colors${active}`,
-      bg: '$transparent',
+      bg: 'transparent',
     },
     '&:not([disabled]):focus-visible': {
       boxShadow: `0 0 0 3px $colors${base}`,

package/src/Fieldset/Fieldset.tsx

@@ -5,7 +5,7 @@ const StyledFieldset = styled('fieldset', {
   alignItems: 'center',
   justifyContent: 'space-between',
   border: 'none',
-  backgroundColor: '$transparent',
+  backgroundColor: 'transparent',
 });
 
 export const Fieldset = StyledFieldset;

package/src/Input/PasswordInput.stories.tsx

@@ -25,7 +25,7 @@ const Template: ComponentStory<typeof PasswordInput.Root> = args => {
           showPassword={showPassword}
           onChange={e => setText(e.target.value)}
         />
-        <PasswordInput.Icons ref={ref} css={{ bg: '$transparent' }}>
+        <PasswordInput.Icons ref={ref} css={{ bg: 'transparent' }}>
           <PasswordInput.ShowIcon
             showPassword={showPassword}
             onClick={() => {

package/src/Pagination/StyledPagination.stories.tsx

@@ -41,7 +41,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
         disabled={disableLeft}
         onClick={prevPage}
         type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
       >
         <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>
@@ -54,7 +54,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
         disabled={disableRight}
         onClick={nextPage}
         type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
       >
         <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
       </StyledPagination.Chevron>

package/src/Prebuilt/IconButton.tsx

@@ -11,7 +11,7 @@ const IconButton = styled(BaseIconButton, {
     active: {
       true: {
         color: '$on_surface_high',
-        backgroundColor: '$transparent',
+        backgroundColor: 'transparent',
       },
       false: {
         border: '1px solid transparent',

package/src/Prebuilt/common/hooks.ts

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  parsedUserAgent,
   selectAvailableRoleNames,
   selectIsConnectedToRoom,
   selectPeerCount,
@@ -10,6 +12,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { config } from '../../Theme';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { CHAT_SELECTOR } from './constants';
@@ -100,3 +103,21 @@ export const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }
   }
   return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
 };
+
+export const useIsLandscape = () => {
+  const isMobile = parsedUserAgent.getDevice().type === 'mobile';
+  const isLandscape = useMedia(config.media.ls);
+  return isMobile && isLandscape;
+};
+
+export const useLandscapeHLSStream = () => {
+  const isLandscape = useIsLandscape();
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isLandscape && screenType === 'hls_live_streaming';
+};
+
+export const useMobileHLSStream = () => {
+  const isMobile = useMedia(config.media.md);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isMobile && screenType === 'hls_live_streaming';
+};

package/src/Prebuilt/components/AppData/useSidepane.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { match, P } from 'ts-pattern';
 import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { usePollViewState } from './useUISettings';
 import { APP_DATA, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../../common/constants';
@@ -45,13 +46,39 @@ export const usePollViewToggle = () => {
 
   const togglePollView = useCallback(
     id => {
-      id = typeof id === 'string' ? id : undefined;
-      const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ;
-      setPollState({
-        [POLL_STATE.pollInView]: id,
-        [POLL_STATE.view]: newView,
-      });
-      hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : '');
+      match({ id, isOpen, view })
+        .with(
+          {
+            id: P.string,
+          },
+          () => {
+            setPollState({
+              [POLL_STATE.pollInView]: id,
+              [POLL_STATE.view]: POLL_VIEWS.VOTE,
+            });
+            hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+          },
+        )
+        .with(
+          {
+            isOpen: true,
+            view: P.when(view => !!view),
+          },
+          () => {
+            setPollState({
+              [POLL_STATE.pollInView]: undefined,
+              [POLL_STATE.view]: null,
+            });
+            hmsActions.setAppData(APP_DATA.sidePane, '');
+          },
+        )
+        .otherwise(() => {
+          setPollState({
+            [POLL_STATE.pollInView]: undefined,
+            [POLL_STATE.view]: POLL_VIEWS.CREATE_POLL_QUIZ,
+          });
+          hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+        });
     },
     [hmsActions, view, setPollState, isOpen],
   );

package/src/Prebuilt/components/AuthToken.jsx

@@ -70,7 +70,7 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
             alignItems: 'center',
           }}
         >
-          <img src={errorImage} height={80} width={80} />
+          <img src={errorImage} height={80} width={80} alt="Token Error" />
           <Text variant="h4" css={{ textAlign: 'center', mb: '$4', mt: '$10' }}>
             {error.title}
           </Text>

package/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: '$20', right: '$8' }),
+              )
+              .otherwise(() => ({})),
+          }}
+        >
+          <EmojiReaction />
+        </Box>
+      )}
     </Flex>
   );
 };

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,22 +2,24 @@ 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';
-// @ts-ignore
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
+// @ts-ignore: No implicit any
 import { ToastManager } from '../Toast/ToastManager';
 import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useChatDraftMessage } from '../AppData/useChatState';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-// @ts-ignore
+// @ts-ignore: No implicit any
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
-import { useDefaultChatSelection } from '../../common/hooks';
+import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
@@ -77,7 +79,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
   const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
@@ -87,18 +89,21 @@ 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();
 
   useEffect(() => {
     if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
       setRoleSelector(defaultSelection);
     } else {
       // @ts-ignore
-      if (!elements?.chat?.disable_autofocus) {
+      if (!(isMobile || isLandscapeHLSStream) && !elements?.chat?.disable_autofocus) {
         inputRef.current?.focus();
       }
     }
-    // @ts-ignore
-  }, [defaultSelection, elements?.chat?.disable_autofocus, selectedPeer, selectedRole, setRoleSelector]);
+  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements?.chat]);
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -143,11 +148,11 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   }
 
   return (
-    <Box>
+    <Box css={{ position: 'relative' }}>
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
-          <Flex align="center" justify="end" css={{ mb: '$4' }}>
+          <Flex align="center" justify="end" css={{ mb: '$4' }} onClick={e => e.stopPropagation()}>
             <Popover.Root>
               <Popover.Trigger asChild>
                 <IconButton css={{ border: '1px solid $border_bright' }}>
@@ -209,6 +214,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 h: '$14',
                 boxSizing: 'border-box',
               },
+              ...(isLandscapeHLSStream ? { minHeight: '$14', py: 0 } : {}),
             }}
           >
             {children}
@@ -223,6 +229,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               placeholder={message_placeholder}
               ref={inputRef}
               required
+              autoFocus={!(isMobile || isLandscapeHLSStream)}
               onKeyPress={async event => {
                 if (event.key === 'Enter') {
                   if (!event.shiftKey) {
@@ -237,7 +244,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               onCut={e => e.stopPropagation()}
               onCopy={e => e.stopPropagation()}
             />
-            {!isMobile ? (
+            {!isMobile && !isLandscapeHLSStream ? (
               <EmojiPicker
                 onSelect={emoji => {
                   if (inputRef.current) {
@@ -260,6 +267,19 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               <SendIcon />
             </BaseIconButton>
           </Flex>
+          {(isMwebHLSStream || isLandscapeHLSStream) && (
+            <>
+              <Flex
+                css={{
+                  alignItems: 'center',
+                }}
+                gap="1"
+              >
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
+                <MoreSettings elements={elements} screenType={screenType} />
+              </Flex>
+            </>
+          )}
         </Flex>
       )}
     </Box>

package/src/Prebuilt/components/Chat/MwebChatOption.tsx

@@ -8,7 +8,7 @@ export const MwebChatOption = ({
   onClick,
   color = '$on_surface_high',
 }: {
-  icon: any;
+  icon: React.ReactNode;
   text: string;
   onClick: () => void | Promise<void>;
   color?: string;

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,10 +6,12 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { Footer } from './Footer/Footer';
+import { MoreSettings } from './MoreSettings/MoreSettings';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
 // @ts-ignore: No implicit Any
 import { ActivatedPIP } from './PIP/PIPComponent';
@@ -20,15 +22,19 @@ import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
+import { EmojiReaction } from './EmojiReaction';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
+import { RaiseHand } from './RaiseHand';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 // @ts-ignore: No implicit Any
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
@@ -47,12 +53,21 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   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);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
+
   const toggleControls = () => {
-    if (dropdownListRef.current?.length === 0 && isMobileDevice) {
+    if (dropdownListRef.current?.length === 0 && isMobileDevice && !isMwebHLSStream) {
       setHideControls(value => !value);
     }
   };
-  const autoRoomJoined = useRef(isPreviewScreenEnabled);
 
   useEffect(() => {
     let timeout: undefined | ReturnType<typeof setTimeout>;
@@ -105,6 +120,8 @@ export const ConferenceScreen = () => {
     return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
   }
 
+  const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
+
   return (
     <>
       {isHLSStarted ? (
@@ -113,13 +130,13 @@ export const ConferenceScreen = () => {
         </Box>
       ) : null}
       <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-        {!screenProps.hideSections.includes('header') && (
+        {!(screenProps.hideSections.includes('header') || isMwebHLSStream) && (
           <Box
             ref={headerRef}
             css={{
               h: '$18',
               transition: 'margin 0.3s ease-in-out',
-              marginTop: hideControls ? `-${headerRef.current?.clientHeight}px` : 'none',
+              marginTop: hideControlsForStreaming ? `-${headerRef.current?.clientHeight}px` : 'none',
               '@md': {
                 h: '$17',
               },
@@ -151,11 +168,11 @@ export const ConferenceScreen = () => {
             <VideoStreamingSection
               screenType={screenProps.screenType}
               elements={screenProps.elements}
-              hideControls={hideControls}
+              hideControls={hideControlsForStreaming}
             />
           ) : null}
         </Box>
-        {!screenProps.hideSections.includes('footer') && screenProps.elements && (
+        {!screenProps.hideSections.includes('footer') && screenProps.elements && !isMwebHLSStream && (
           <Box
             ref={footerRef}
             css={{
@@ -163,7 +180,7 @@ export const ConferenceScreen = () => {
               maxHeight: '$24',
               transition: 'margin 0.3s ease-in-out',
               bg: '$background_dim',
-              marginBottom: hideControls ? `-${footerRef.current?.clientHeight}px` : undefined,
+              marginBottom: hideControlsForStreaming ? `-${footerRef.current?.clientHeight}px` : undefined,
               '@md': {
                 maxHeight: 'unset',
                 bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
@@ -174,6 +191,30 @@ export const ConferenceScreen = () => {
             <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
           </Box>
         )}
+        {isMwebHLSStream && !showChat && (
+          <Flex
+            css={{
+              alignItems: 'center',
+              pr: '$4',
+              pb: '$4',
+              position: 'relative',
+            }}
+            justify="end"
+            gap="1"
+          >
+            {noAVPermissions ? <RaiseHand /> : null}
+            <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
+            <Box
+              css={{
+                position: 'absolute',
+                bottom: '100%',
+                mb: '$4',
+              }}
+            >
+              <EmojiReaction />
+            </Box>
+          </Flex>
+        )}
         <RoleChangeRequestModal />
         <HLSFailureModal />
         <ActivatedPIP />

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -7,9 +7,7 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  // useHMSActions,
   useHMSStore,
-  // useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
@@ -20,11 +18,12 @@ import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useDropdownList } from './hooks/useDropdownList';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
-export const EmojiReaction = () => {
+export const EmojiReaction = ({ showCard = false }) => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
@@ -33,6 +32,9 @@ export const EmojiReaction = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
 
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
@@ -65,24 +67,32 @@ export const EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return isMobile ? (
-    <EmojiCard sendReaction={sendReaction} />
-  ) : (
-    <Fragment>
-      <Dropdown.Root open={open} onOpenChange={setOpen}>
-        <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
-          <IconButton>
-            <Tooltip title="Emoji reaction">
-              <Box>
-                <EmojiIcon />
-              </Box>
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
-          <EmojiCard sendReaction={sendReaction} />
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Fragment>
+
+  if (showCard) {
+    return <EmojiCard sendReaction={sendReaction} />;
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={setOpen}>
+      <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
+        <IconButton
+          css={
+            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}
+          }
+        >
+          <Tooltip title="Emoji reaction">
+            <Box>
+              <EmojiIcon />
+            </Box>
+          </Tooltip>
+        </IconButton>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        sideOffset={5}
+        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}
+        css={{ p: '$8', bg: '$surface_default' }}
+      >
+        <EmojiCard sendReaction={sendReaction} />
+      </Dropdown.Content>
+    </Dropdown.Root>
   );
 };

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

@@ -12,7 +12,6 @@ import { EmojiReaction } from '../EmojiReaction';
 import { LeaveRoom } from '../Leave/LeaveRoom';
 // @ts-ignore: No implicit Any
 import { MoreSettings } from '../MoreSettings/MoreSettings';
-// @ts-ignore: No implicit Any
 import { RaiseHand } from '../RaiseHand';
 // @ts-ignore: No implicit Any
 import { ScreenshareToggle } from '../ScreenShareToggle';