feat: bottom sheet prebuilt

apps/100ms-web/src/components/Header/ParticipantList.jsx

@@ -373,8 +373,8 @@ export const ParticipantSearch = ({ onSearch, placeholder }) => {
       </Box>
       <Input
         type="text"
-        placeholder={placeholder || "Find what you are looking for"}
-        css={{ w: "100%", pl: "$14" }}
+        placeholder={placeholder || "Search among participants"}
+        css={{ w: "100%", pl: "$14", bg: "$surface_bright" }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

packages/roomkit-react/src/Dropdown/Dropdown.tsx

@@ -53,7 +53,7 @@ const DropdownItem = styled(Item, {
   display: 'flex',
   alignItems: 'center',
   outline: 'none',
-  backgroundColor: '$surface_default',
+  backgroundColor: '$surface_dim',
   '&:hover': {
     cursor: 'pointer',
     bg: '$surface_bright',
@@ -74,7 +74,7 @@ const DropdownContent = styled(Content, {
   maxHeight: '$64',
   r: '$1',
   py: '$4',
-  backgroundColor: '$surface_default',
+  backgroundColor: '$surface_dim',
   overflowY: 'auto',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   zIndex: 20,

packages/roomkit-react/src/Popover/index.tsx

@@ -1,4 +1,4 @@
-import { Arrow, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
+import { Arrow, Close, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
 import { styled } from '../Theme';
 import { popoverAnimation } from '../utils/animations';
 
@@ -23,4 +23,5 @@ export const Popover = {
   Trigger: StyledTrigger,
   Portal: Portal,
   Arrow: StyledArrow,
+  Close: Close,
 };

packages/roomkit-react/src/Prebuilt/Prebuilt.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'UI Components/Prebuilt',
   component: HMSPrebuilt,
   argTypes: {
-    roomCode: { control: { type: 'text' }, defaultValue: 'tsj-obqh-lwx' },
+    roomCode: { control: { type: 'text' }, defaultValue: 'cuf-wywo-trf' },
     logo: { control: { type: 'object' }, defaultValue: undefined },
     typography: { control: { type: 'object' }, defaultValue: 'Roboto' },
   },
@@ -18,7 +18,7 @@ const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({ roomCode = '', log
 
 export const Example = PrebuiltRoomCodeStory.bind({});
 Example.args = {
-  roomCode: 'tsj-obqh-lwx',
+  roomCode: 'cuf-wywo-trf',
   options: {
     endpoints: {
       roomLayout: 'https://demo8271564.mockable.io/v2/layouts/ui',

packages/roomkit-react/src/Prebuilt/common/hooks.js

@@ -1,6 +1,8 @@
 // @ts-check
 import { useEffect, useRef, useState } from 'react';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { isInternalRole } from './utils';
 
 /**
@@ -45,3 +47,9 @@ export const useFilteredRoles = () => {
   const roles = useHMSStore(selectAvailableRoleNames).filter(role => !isInternalRole(role));
   return roles;
 };
+
+export const useShowStreamingUI = () => {
+  const layout = useRoomLayout();
+  const { join_form } = layout?.screens?.preview?.default?.elements || {};
+  return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
+};

packages/roomkit-react/src/Prebuilt/common/utils.js

@@ -83,3 +83,9 @@ export const getUpdatedHeight = (e, MINIMUM_HEIGHT) => {
   const sheetHeightInVH = Math.max(MINIMUM_HEIGHT, heightToPercentage > 80 ? 100 : heightToPercentage);
   return `${sheetHeightInVH}vh`;
 };
+
+export const getFormattedCount = num => {
+  const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
+  const formattedNum = formatter.format(num);
+  return formattedNum;
+};

packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -18,7 +18,7 @@ import { isMacOS } from '../common/constants';
 
 const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };
 
-export const AudioVideoToggle = () => {
+export const AudioVideoToggle = ({ hideOptions = false }) => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
   const { videoInput, audioInput } = allDevices;
 
@@ -77,6 +77,7 @@ export const AudioVideoToggle = () => {
           active={isLocalAudioEnabled}
           onClick={toggleAudio}
           key="toggleAudio"
+          hideOptions={hideOptions}
         />
       ) : null}
 
@@ -94,6 +95,7 @@ export const AudioVideoToggle = () => {
           key="toggleVideo"
           active={isLocalVideoEnabled}
           onClick={toggleVideo}
+          hideOptions={hideOptions}
         />
       ) : null}
 

packages/roomkit-react/src/Prebuilt/components/Chat/ChatSelector.jsx

@@ -10,7 +10,7 @@ import {
 } from '@100mslive/react-sdk';
 import { CheckIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';
-import { ParticipantSearch } from '../Header/ParticipantList';
+import { ParticipantSearch } from '../Footer/ParticipantList';
 import { useFilteredRoles } from '../../common/hooks';
 
 const ChatDotIcon = () => {

packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx

@@ -14,14 +14,13 @@ import {
 import { EmojiIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../Dropdown';
 import { Flex } from '../../Layout';
-import { Text } from '../../Text';
 import { styled } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useHLSViewerRole } from './AppData/useUISettings';
 import { useDropdownList } from './hooks/useDropdownList';
 import { useIsFeatureEnabled } from './hooks/useFeatures';
-import { EMOJI_REACTION_TYPE, FEATURE_LIST, HLS_TIMED_METADATA_DOC_URL } from '../common/constants';
+import { EMOJI_REACTION_TYPE, FEATURE_LIST } from '../common/constants';
 
 init({ data });
 
@@ -93,34 +92,6 @@ export const EmojiReaction = () => {
               ))}
             </Flex>
           ))}
-          <div style={{ textAlign: 'center' }}>
-            <Text
-              variant="sm"
-              inline={true}
-              css={{
-                color: '$on_primary_medium',
-              }}
-            >
-              Reactions will be timed for Live Streaming viewers.{' '}
-            </Text>
-            <Text
-              variant="sm"
-              inline={true}
-              css={{
-                color: '$primary_bright',
-                fontWeight: '$semiBold',
-              }}
-            >
-              <a
-                href={HLS_TIMED_METADATA_DOC_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ color: 'inherit', textDecoration: 'none' }}
-              >
-                Learn more.
-              </a>
-            </Text>
-          </div>
         </Dropdown.Content>
       </Dropdown.Root>
     </Fragment>

packages/roomkit-react/src/Prebuilt/components/Footer.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ConferencingFooter } from './Footer/ConferencingFooter';
 import { StreamingFooter } from './Footer/StreamingFooter';
-import { isStreamingKit } from '../common/utils';
+import { useShowStreamingUI } from '../common/hooks';
 
 export const Footer = () => {
-  return isStreamingKit() ? <StreamingFooter /> : <ConferencingFooter />;
+  const showStreamingUI = useShowStreamingUI();
+  return showStreamingUI ? <StreamingFooter /> : <ConferencingFooter />;
 };