@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.0

package/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Flex, IconButton, Tabs } from '../../..';
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+const tabTriggerCSS = {
+  color: '$on_surface_high',
+  p: '$4',
+  fontWeight: '$semiBold',
+  fontSize: '$sm',
+  w: '100%',
+  justifyContent: 'center',
+};
+
+export const ChatParticipantHeader = React.memo(({ activeTabValue = SIDE_PANE_OPTIONS.CHAT }) => {
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const [activeTab, setActiveTab] = useState(activeTabValue);
+  const peerCount = useHMSStore(selectPeerCount);
+
+  return (
+    <Flex
+      align="center"
+      css={{
+        color: '$on_primary_high',
+        h: '$16',
+      }}
+    >
+      <Flex css={{ w: '100%', bg: '$surface_default', borderRadius: '$2' }}>
+        <Tabs.Root value={activeTab} onValueChange={setActiveTab} css={{ w: '100%' }}>
+          <Tabs.List css={{ w: '100%', p: '$2' }}>
+            <Tabs.Trigger
+              value={SIDE_PANE_OPTIONS.CHAT}
+              onClick={toggleChat}
+              css={{
+                ...tabTriggerCSS,
+                color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+              }}
+            >
+              Chat
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+              onClick={toggleParticipants}
+              css={{
+                ...tabTriggerCSS,
+                color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+              }}
+            >
+              Participants ({peerCount})
+            </Tabs.Trigger>
+          </Tabs.List>
+        </Tabs.Root>
+      </Flex>
+      <IconButton
+        css={{ ml: 'auto' }}
+        onClick={e => {
+          e.stopPropagation();
+          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+            toggleChat();
+          } else {
+            toggleParticipants();
+          }
+        }}
+        data-testid="close_chat"
+      >
+        <CrossIcon />
+      </IconButton>
+    </Flex>
+  );
+});

package/src/Prebuilt/components/Chat/ChatSelector.jsx

@@ -1,6 +1,4 @@
-import React, { Fragment, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { FixedSizeList } from 'react-window';
+import React, { useMemo, useState } from 'react';
 import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
@@ -19,7 +17,11 @@ const ChatDotIcon = () => {
 
 const SelectorItem = ({ value, active, onClick, unreadCount }) => {
   return (
-    <Dropdown.Item data-testid="chat_members" css={{ align: 'center', px: '$10' }} onClick={onClick}>
+    <Dropdown.Item
+      data-testid="chat_members"
+      css={{ align: 'center', px: '$10', bg: '$surface_default' }}
+      onClick={onClick}
+    >
       <Text variant="sm">{value}</Text>
       <Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
         {unreadCount > 0 && (
@@ -89,7 +91,6 @@ const PeerItem = ({ onSelect, peerId, name, active }) => {
 };
 
 const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {
-  const [ref, { width, height }] = useMeasure();
   const roles = useFilteredRoles();
   const filteredPeers = useMemo(
     () =>
@@ -127,14 +128,12 @@ const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, search
   }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
 
   return (
-    <Dropdown.Group ref={ref} css={{ height: '$64', overflowY: 'auto' }}>
-      <FixedSizeList itemSize={52} itemCount={listItems.length} width={width} height={height}>
-        {({ index, style }) => (
-          <div style={style} key={index}>
-            {listItems[index]}
-          </div>
-        )}
-      </FixedSizeList>
+    <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
+      <Box>
+        {listItems.map((item, index) => (
+          <Box key={index}>{item}</Box>
+        ))}
+      </Box>
     </Dropdown.Group>
   );
 };
@@ -144,10 +143,10 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
   const [search, setSearch] = useState('');
 
   return (
-    <Fragment>
+    <>
       {peers.length > 0 && (
-        <Box css={{ px: '$8' }}>
-          <ParticipantSearch onSearch={setSearch} placeholder="Search participants" />
+        <Box css={{ px: '$4' }}>
+          <ParticipantSearch onSearch={setSearch} placeholder="Search for participants" />
         </Box>
       )}
       <VirtualizedSelectItemList
@@ -157,6 +156,6 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
         peers={peers}
         searchValue={search}
       />
-    </Fragment>
+    </>
   );
 };

package/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useMedia } from 'react-use';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+import { ChatSelector } from './ChatSelector';
+import { textEllipsis } from '../../../utils';
+
+export const ChatSelectorContainer = ({ onSelect, role, peerId, selection }) => {
+  const [open, setOpen] = useState(false);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  return (
+    <Flex align="center" css={{ mb: '$8' }}>
+      <Text variant="tiny" css={{ color: '$on_surface_medium', textTransform: 'uppercase' }}>
+        Send To
+      </Text>
+
+      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+        <Dropdown.Trigger
+          asChild
+          data-testid="participant_list_filter"
+          css={{
+            border: '1px solid $border_bright',
+            r: '$0',
+            p: '$1 $2',
+            ml: '$8',
+          }}
+          tabIndex={0}
+        >
+          <Flex align="center" css={{ c: '$on_surface_medium' }}>
+            <Text variant="tiny" css={{ ...textEllipsis(80), textTransform: 'uppercase', c: '$on_surface_high' }}>
+              {selection}
+            </Text>
+            {open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
+          </Flex>
+        </Dropdown.Trigger>
+
+        <Dropdown.Content
+          css={{
+            w: '$64',
+            overflow: 'hidden',
+            maxHeight: 'unset',
+            bg: '$surface_default',
+          }}
+          align="start"
+          sideOffset={8}
+        >
+          {isMobile ? (
+            <Sheet.Root open={open} onOpenChange={value => setOpen(value)}>
+              <Sheet.Content css={{ pt: '$8' }}>
+                <Sheet.Title
+                  css={{
+                    display: 'flex',
+                    w: '100%',
+                    justifyContent: 'space-between',
+                    px: '$10',
+                    pb: '$4',
+                    mb: '$8',
+                    borderBottom: '1px solid $border_bright',
+                  }}
+                >
+                  <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>Send message to</Text>
+                  <Sheet.Close css={{ color: '$on_surface_medium' }}>
+                    <CrossIcon />
+                  </Sheet.Close>
+                </Sheet.Title>
+                <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
+              </Sheet.Content>
+            </Sheet.Root>
+          ) : (
+            <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
+          )}
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Connection/TileConnection.jsx

@@ -1,26 +1,44 @@
 import React from 'react';
-import { styled, Text, textEllipsis } from '../../../';
+import { PinIcon, SpotlightIcon } from '@100mslive/react-icons';
+import { Flex, styled, Text, textEllipsis } from '../../../';
 import { ConnectionIndicator } from './ConnectionIndicator';
 
-const TileConnection = ({ name, peerId, hideLabel, width }) => {
+const TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned }) => {
   return (
     <Wrapper>
       {!hideLabel ? (
-        <Text
-          css={{
-            c: '$on_surface_high',
-            ...textEllipsis(width - 60),
-          }}
-          variant="xs"
-        >
-          {name}
-        </Text>
+        <>
+          <Flex align="center">
+            {pinned && (
+              <IconWrapper>
+                <PinIcon width="15" height="15" css={{ display: 'block' }} />
+              </IconWrapper>
+            )}
+            {spotlighted && (
+              <IconWrapper>
+                <SpotlightIcon width="15" height="15" css={{ display: 'block' }} />
+              </IconWrapper>
+            )}
+            <Text
+              css={{
+                c: '$on_surface_high',
+                verticalAlign: 'baseline',
+                ...textEllipsis(width - 60),
+              }}
+              variant="xs"
+            >
+              {name}
+            </Text>
+          </Flex>
+          <ConnectionIndicator isTile peerId={peerId} />
+        </>
       ) : null}
-      <ConnectionIndicator isTile peerId={peerId} />
     </Wrapper>
   );
 };
 
+const IconWrapper = styled('div', { c: '$on_surface_high', ml: '$3', mt: '$1' });
+
 const Wrapper = styled('div', {
   display: 'flex',
   alignItems: 'center',

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
+import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
 import {
@@ -6,35 +7,32 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  useHMSActions,
+  // useHMSActions,
   useHMSStore,
-  useRecordingStreaming,
+  // useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
-import { ToastManager } from './Toast/ToastManager';
+// 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';
-import { useHLSViewerRole } from './AppData/useUISettings';
 import { useDropdownList } from './hooks/useDropdownList';
-import { useIsFeatureEnabled } from './hooks/useFeatures';
-import { EMOJI_REACTION_TYPE, FEATURE_LIST } from '../common/constants';
+import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
 export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);
   useDropdownList({ open: open, name: 'EmojiReaction' });
-  const hmsActions = useHMSActions();
+  // const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
   const localPeerId = useHMSStore(selectLocalPeerID);
-  const hlsViewerRole = useHLSViewerRole();
-  const { isStreamingOn } = useRecordingStreaming();
-  const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);
+  // const { isStreamingOn } = useRecordingStreaming();
+  const isMobile = useMedia(cssConfig.media.md);
 
   const onEmojiEvent = useCallback(data => {
     window.showFlyingEmoji(data?.emojiId, data?.senderId);
@@ -51,8 +49,9 @@ export const EmojiReaction = () => {
       emojiId: emojiId,
       senderId: localPeerId,
     };
-    sendEvent(data, { roleNames: filteredRoles });
-    if (isStreamingOn) {
+    // TODO: RT find a way to figure out hls-viewer roles
+    sendEvent(data, { roleNames: roles });
+    /* if (isStreamingOn) {
       try {
         await hmsActions.sendHLSTimedMetadata([
           {
@@ -64,13 +63,15 @@ export const EmojiReaction = () => {
         console.log(error);
         ToastManager.addToast({ title: error.message });
       }
-    }
+    } */
   };
 
-  if (!isConnected || !isFeatureEnabled) {
+  if (!isConnected) {
     return null;
   }
-  return (
+  return isMobile ? (
+    <EmojiCard sendReaction={sendReaction} />
+  ) : (
     <Fragment>
       <Dropdown.Root open={open} onOpenChange={setOpen}>
         <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">

package/src/Prebuilt/components/Footer/ChatToggle.jsx

@@ -4,18 +4,12 @@ import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../common/constants';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const ChatToggle = () => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
-
-  if (!isFeatureEnabled) {
-    return;
-  }
 
   return (
     <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { config as cssConfig, Footer as AppFooter } from '../../..';
+// @ts-ignore: No implicit Any
+import { AudioVideoToggle } from '../AudioVideoToggle';
+// @ts-ignore: No implicit Any
+import { EmojiReaction } from '../EmojiReaction';
+// @ts-ignore: No implicit Any
+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';
+// @ts-ignore: No implicit Any
+import { ChatToggle } from './ChatToggle';
+// @ts-ignore: No implicit Any
+import { ParticipantCount } from './ParticipantList';
+
+export const Footer = ({
+  screenType,
+  elements,
+}: {
+  screenType: keyof ConferencingScreen;
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
+  return (
+    <AppFooter.Root
+      css={{
+        flexWrap: 'nowrap',
+        '@md': {
+          justifyContent: 'center',
+          gap: '$10',
+          position: 'relative',
+          zIndex: 20,
+        },
+      }}
+    >
+      <AppFooter.Left
+        css={{
+          '@md': {
+            w: 'unset',
+            p: '0',
+            gap: '$10',
+          },
+        }}
+      >
+        {isMobile ? <LeaveRoom screenType={screenType} /> : null}
+        <AudioVideoToggle />
+      </AppFooter.Left>
+      <AppFooter.Center
+        css={{
+          '@md': {
+            w: 'unset',
+            gap: '$10',
+          },
+        }}
+      >
+        {isMobile ? (
+          <>
+            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {elements?.chat && <ChatToggle />}
+            <MoreSettings elements={elements} screenType={screenType} />
+          </>
+        ) : (
+          <>
+            <ScreenshareToggle />
+            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {elements?.emoji_reactions && <EmojiReaction />}
+            <LeaveRoom screenType={screenType} />
+          </>
+        )}
+      </AppFooter.Center>
+      <AppFooter.Right>
+        {elements?.chat && <ChatToggle />}
+        <ParticipantCount />
+        <MoreSettings elements={elements} screenType={screenType} />
+      </AppFooter.Right>
+    </AppFooter.Root>
+  );
+};