@100mslive/roomkit-react 0.2.8-alpha.7 → 0.2.8-alpha.8

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.8-alpha.7",
+  "version": "0.2.8-alpha.8",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.8-alpha.7",
+    "@100mslive/hls-player": "0.2.8-alpha.8",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.8-alpha.7",
-    "@100mslive/react-icons": "0.9.8-alpha.7",
-    "@100mslive/react-sdk": "0.9.8-alpha.7",
+    "@100mslive/hms-virtual-background": "1.12.8-alpha.8",
+    "@100mslive/react-icons": "0.9.8-alpha.8",
+    "@100mslive/react-sdk": "0.9.8-alpha.8",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "48bc1b57113a4245b79055a80f4f1f5d3b8795aa"
+  "gitHead": "cddbc3f6a55bc8612229e7cfa865eb8946b564b2"
 }

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/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>
   );
 };

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

@@ -8,16 +8,16 @@ import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover,
 import { IconButton } from '../../../IconButton';
 import { MoreSettings } from '../MoreSettings/MoreSettings';
 import { RaiseHand } from '../RaiseHand';
-// @ts-ignore
+// @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, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
@@ -148,7 +148,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   }
 
   return (
-    <Box>
+    <Box css={{ position: 'relative' }}>
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
@@ -202,10 +202,12 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             align="center"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
+              minHeight: '$16',
               maxHeight: '$24',
               position: 'relative',
+              py: '$6',
               pl: '$8',
-              flexGrow: '1',
+              flexGrow: 1,
               r: '$1',
               '@md': {
                 minHeight: 'unset',
@@ -266,15 +268,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             </BaseIconButton>
           </Flex>
           {(isMwebHLSStream || isLandscapeHLSStream) && (
-            <Flex
-              css={{
-                alignItems: 'center',
-              }}
-              gap="1"
-            >
-              {noAVPermissions ? <RaiseHand /> : null}
-              <MoreSettings elements={elements} screenType={screenType} />
-            </Flex>
+            <>
+              <Flex
+                css={{
+                  alignItems: 'center',
+                }}
+                gap="1"
+              >
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
+                <MoreSettings elements={elements} screenType={screenType} />
+              </Flex>
+            </>
           )}
         </Flex>
       )}

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,6 +18,7 @@ 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 });
@@ -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 ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+    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/HMSVideo/HLSQualitySelector.tsx

@@ -14,6 +14,7 @@ export function HLSQualitySelector({
   onQualityChange,
   selection,
   isAuto,
+  containerRef,
 }: {
   open: boolean;
   onOpenChange: (value: boolean) => void;
@@ -21,9 +22,14 @@ export function HLSQualitySelector({
   onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
   selection: HMSHLSLayer;
   isAuto: boolean;
+  containerRef?: HTMLDivElement;
 }) {
   const isMobile = useMedia(config.media.md);
   const isLandscape = useIsLandscape();
+
+  if (layers.length === 0) {
+    return null;
+  }
   if (isMobile || isLandscape) {
     return (
       <Sheet.Root open={open} onOpenChange={onOpenChange}>
@@ -39,86 +45,87 @@ export function HLSQualitySelector({
             <SettingsIcon />
           </Flex>
         </Sheet.Trigger>
-
-        {layers.length > 0 && (
-          <Sheet.Content css={{ bg: '$surface_default', pb: '$1' }} onClick={() => onOpenChange(false)}>
-            <Sheet.Title
-              css={{
-                display: 'flex',
-                color: '$on_surface_high',
-                w: '100%',
-                justifyContent: 'space-between',
-                mt: '$8',
-                fontSize: '$md',
-                px: '$10',
-                pb: '$8',
-                borderBottom: '1px solid $border_bright',
-                alignItems: 'center',
-              }}
-            >
-              Quality
-              <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
-                <CrossIcon />
-              </Sheet.Close>
-            </Sheet.Title>
-            {layers.map(layer => {
-              return (
-                <Flex
-                  align="center"
-                  css={{
-                    w: '100%',
-                    bg: '$surface_default',
-                    '&:hover': {
-                      bg: '$surface_brighter',
-                    },
-                    cursor: 'pointer',
-                    gap: '$4',
-                    py: '$8',
-                    px: '$10',
-                  }}
-                  key={layer.width}
-                  onClick={() => onQualityChange(layer)}
-                >
-                  <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
-                    {getQualityText(layer)}
-                  </Text>
-                  <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
-                    {getBitrateText(layer)}
-                  </Text>
-                  {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
-                    <CheckIcon width="16px" height="16px" />
-                  )}
-                </Flex>
-              );
-            })}
-            <Flex
-              align="center"
-              css={{
-                w: '100%',
-                bg: '$surface_default',
-                '&:hover': {
-                  bg: '$surface_brighter',
-                },
-                cursor: 'pointer',
-                gap: '$4',
-                py: '$8',
-                px: '$10',
-              }}
-              key="auto"
-              onClick={() => onQualityChange({ height: 'auto' })}
-            >
-              <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
-                Auto
-              </Text>
-              {isAuto && <CheckIcon width="16px" height="16px" />}
-            </Flex>
-          </Sheet.Content>
-        )}
+        <Sheet.Content
+          container={containerRef}
+          css={{ bg: '$surface_default', pb: '$1' }}
+          onClick={() => onOpenChange(false)}
+        >
+          <Sheet.Title
+            css={{
+              display: 'flex',
+              color: '$on_surface_high',
+              w: '100%',
+              justifyContent: 'space-between',
+              mt: '$8',
+              fontSize: '$md',
+              px: '$10',
+              pb: '$8',
+              borderBottom: '1px solid $border_bright',
+              alignItems: 'center',
+            }}
+          >
+            Quality
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
+              <CrossIcon />
+            </Sheet.Close>
+          </Sheet.Title>
+          {layers.map(layer => {
+            return (
+              <Flex
+                align="center"
+                css={{
+                  w: '100%',
+                  bg: '$surface_default',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  cursor: 'pointer',
+                  gap: '$4',
+                  py: '$8',
+                  px: '$10',
+                }}
+                key={layer.width}
+                onClick={() => onQualityChange(layer)}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Flex>
+            );
+          })}
+          <Flex
+            align="center"
+            css={{
+              w: '100%',
+              bg: '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              cursor: 'pointer',
+              gap: '$4',
+              py: '$8',
+              px: '$10',
+            }}
+            key="auto"
+            onClick={() => onQualityChange({ height: 'auto' })}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Flex>
+        </Sheet.Content>
       </Sheet.Root>
     );
   }
   return (
-    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)}>
+    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)} modal={false}>
       <Dropdown.Trigger asChild data-testid="quality_selector">
         <Flex
           css={{
@@ -169,7 +176,7 @@ export function HLSQualitySelector({
           </Tooltip>
         </Flex>
       </Dropdown.Trigger>
-      {layers.length > 0 && (
+      <Dropdown.Portal container={containerRef}>
         <Dropdown.Content
           sideOffset={5}
           align="end"
@@ -232,7 +239,7 @@ export function HLSQualitySelector({
             {isAuto && <CheckIcon width="16px" height="16px" />}
           </Dropdown.Item>
         </Dropdown.Content>
-      )}
+      </Dropdown.Portal>
     </Dropdown.Root>
   );
 }

package/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',