@100mslive/roomkit-react 0.1.14-alpha.0 → 0.1.14-alpha.2

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

@@ -2,20 +2,22 @@ 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 { selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectLocalPeer, selectPeerNameByID, 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 { ToastManager } from '../Toast/ToastManager';
+import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // import { ChatSelectorContainer } from './ChatSelectorContainer';
 // @ts-ignore
 import { useChatDraftMessage } from '../AppData/useChatState';
 // @ts-ignore
-import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+import { useSubscribeChatSelector } from '../AppData/useUISettings';
 // @ts-ignore
-import { SESSION_STORE_KEY } from '../../common/constants';
+import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
   width: '100%',
@@ -69,17 +71,7 @@ function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
   );
 }
 
-export const ChatFooter = ({
-  role,
-  peerId,
-  onSend,
-  children /* onSelect, selection, screenType */,
-}: {
-  role: any;
-  peerId: string;
-  onSend: any;
-  children: ReactNode;
-}) => {
+export const ChatFooter = ({ onSend, children }: { onSend: () => void; children: ReactNode }) => {
   const hmsActions = useHMSActions();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
@@ -89,17 +81,21 @@ export const ChatFooter = ({
   const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
   const canDisableChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
-
+  const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
+  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER_ID);
+  const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
+  const selectorPeerName = useHMSStore(selectPeerNameByID(selectedPeer));
+  const selection = selectorPeerName || selectedRole || CHAT_SELECTOR.EVERYONE;
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
       return;
     }
     try {
-      if (role) {
-        await hmsActions.sendGroupMessage(message, [role]);
-      } else if (peerId) {
-        await hmsActions.sendDirectMessage(message, peerId);
+      if (selectedRole) {
+        await hmsActions.sendGroupMessage(message, [selectedRole]);
+      } else if (selectedPeer) {
+        await hmsActions.sendDirectMessage(message, selectedPeer);
       } else {
         await hmsActions.sendBroadcastMessage(message);
       }
@@ -111,7 +107,7 @@ export const ChatFooter = ({
       const err = error as Error;
       ToastManager.addToast({ title: err.message });
     }
-  }, [role, peerId, hmsActions, onSend]);
+  }, [selectedRole, selectedPeer, hmsActions, onSend]);
 
   useEffect(() => {
     const messageElement = inputRef.current;
@@ -129,122 +125,124 @@ export const ChatFooter = ({
 
   return (
     <Box>
-      {/* {screenType !== 'hls_live_streaming' ? (
-        <ChatSelectorContainer onSelect={onSelect} role={role} peerId={peerId} selection={selection} />
-      ) : null} */}
-      {canDisableChat ? (
-        <Flex align="center" justify="end" css={{ w: '100%', mb: '$4' }}>
-          <Popover.Root>
-            <Popover.Trigger asChild>
-              <IconButton css={{ border: '1px solid $border_bright' }}>
-                <VerticalMenuIcon height="16" width="16" />
-              </IconButton>
-            </Popover.Trigger>
-            <Popover.Portal>
-              <Popover.Content
-                align="end"
-                side="top"
-                onClick={() => {
-                  const chatState = {
-                    enabled: false,
-                    updatedBy: {
-                      peerId: localPeer?.id,
-                      userId: localPeer?.customerUserId,
-                      userName: localPeer?.name,
-                    },
-                    updatedAt: Date.now(),
-                  };
-                  hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, chatState);
-                }}
-                css={{
-                  backgroundColor: '$surface_default',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '$4',
-                  borderRadius: '$1',
-                  color: '$on_surface_high',
-                  cursor: 'pointer',
-                  '&:hover': { backgroundColor: '$surface_dim' },
-                }}
-              >
-                <PauseCircleIcon />
-                <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-                  Pause Chat
-                </Text>
-              </Popover.Content>
-            </Popover.Portal>
-          </Popover.Root>
-        </Flex>
-      ) : null}
-      <Flex align="center" css={{ gap: '$4', w: '100%' }}>
-        <Flex
-          align="center"
-          css={{
-            bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
-            minHeight: '$16',
-            maxHeight: '$24',
-            position: 'relative',
-            py: '$6',
-            pl: '$8',
-            flexGrow: 1,
-            r: '$1',
-            '@md': {
-              minHeight: 'unset',
-              h: '$14',
-              boxSizing: 'border-box',
-            },
-          }}
-        >
-          {children}
-          <TextArea
+      <Flex>
+        <ChatSelectorContainer />
+        {canDisableChat && isMobile && isOverlayChat ? (
+          <Flex align="center" justify="end" css={{ mb: '$4' }}>
+            <Popover.Root>
+              <Popover.Trigger asChild>
+                <IconButton css={{ border: '1px solid $border_bright' }}>
+                  <VerticalMenuIcon height="16" width="16" />
+                </IconButton>
+              </Popover.Trigger>
+              <Popover.Portal>
+                <Popover.Content
+                  align="end"
+                  side="top"
+                  onClick={() => {
+                    const chatState = {
+                      enabled: false,
+                      updatedBy: {
+                        peerId: localPeer?.id,
+                        userId: localPeer?.customerUserId,
+                        userName: localPeer?.name,
+                      },
+                      updatedAt: Date.now(),
+                    };
+                    hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, chatState);
+                  }}
+                  css={{
+                    backgroundColor: '$surface_default',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '$4',
+                    borderRadius: '$1',
+                    color: '$on_surface_high',
+                    cursor: 'pointer',
+                    '&:hover': { backgroundColor: '$surface_dim' },
+                  }}
+                >
+                  <PauseCircleIcon />
+                  <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+                    Pause Chat
+                  </Text>
+                </Popover.Content>
+              </Popover.Portal>
+            </Popover.Root>
+          </Flex>
+        ) : null}
+      </Flex>
+      {!(selection === CHAT_SELECTOR.EVERYONE && !isPublicChatEnabled) && (
+        <Flex align="center" css={{ gap: '$4', w: '100%' }}>
+          <Flex
+            align="center"
             css={{
-              c: '$on_surface_high',
-              '&:valid ~ .send-msg': { color: '$on_surface_high' },
-              '& ~ .send-msg': { color: '$on_surface_low' },
-              '&::placeholder': { color: '$on_surface_medium' },
+              bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
+              minHeight: '$16',
+              maxHeight: '$24',
+              position: 'relative',
+              py: '$6',
+              pl: '$8',
+              flexGrow: 1,
+              r: '$1',
+              '@md': {
+                minHeight: 'unset',
+                h: '$14',
+                boxSizing: 'border-box',
+              },
             }}
-            placeholder={message_placeholder}
-            ref={inputRef}
-            required
-            autoFocus={!isMobile}
-            onKeyPress={async event => {
-              if (event.key === 'Enter') {
-                if (!event.shiftKey) {
-                  event.preventDefault();
-                  await sendMessage();
-                }
-              }
-            }}
-            autoComplete="off"
-            aria-autocomplete="none"
-            onPaste={e => e.stopPropagation()}
-            onCut={e => e.stopPropagation()}
-            onCopy={e => e.stopPropagation()}
-          />
-          {!isMobile ? (
-            <EmojiPicker
-              onSelect={(emoji: any) => {
-                if (inputRef.current) {
-                  inputRef.current.value += ` ${emoji.native} `;
+          >
+            {children}
+            <TextArea
+              css={{
+                c: '$on_surface_high',
+                '&:valid ~ .send-msg': { color: '$on_surface_high' },
+                '& ~ .send-msg': { color: '$on_surface_low' },
+                '&::placeholder': { color: '$on_surface_medium' },
+              }}
+              placeholder={message_placeholder}
+              ref={inputRef}
+              required
+              autoFocus={!isMobile}
+              onKeyPress={async event => {
+                if (event.key === 'Enter') {
+                  if (!event.shiftKey) {
+                    event.preventDefault();
+                    await sendMessage();
+                  }
                 }
               }}
+              autoComplete="off"
+              aria-autocomplete="none"
+              onPaste={e => e.stopPropagation()}
+              onCut={e => e.stopPropagation()}
+              onCopy={e => e.stopPropagation()}
             />
-          ) : null}
-          <BaseIconButton
-            className="send-msg"
-            onClick={sendMessage}
-            css={{
-              ml: 'auto',
-              height: 'max-content',
-              mr: '$4',
-              '&:hover': { c: isMobile ? '' : '$on_surface_medium' },
-            }}
-            data-testid="send_msg_btn"
-          >
-            <SendIcon />
-          </BaseIconButton>
+            {!isMobile ? (
+              <EmojiPicker
+                onSelect={emoji => {
+                  if (inputRef.current) {
+                    inputRef.current.value += ` ${emoji.native} `;
+                  }
+                }}
+              />
+            ) : null}
+            <BaseIconButton
+              className="send-msg"
+              onClick={sendMessage}
+              css={{
+                ml: 'auto',
+                height: 'max-content',
+                mr: '$4',
+                '&:hover': { c: isMobile ? '' : '$on_surface_medium' },
+              }}
+              data-testid="send_msg_btn"
+            >
+              <SendIcon />
+            </BaseIconButton>
+          </Flex>
         </Flex>
-      </Flex>
+      )}
     </Box>
   );
 };

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

@@ -0,0 +1,225 @@
+import React, { useMemo, useState } from 'react';
+import { useMedia } from 'react-use';
+import {
+  HMSPeer,
+  selectMessagesUnreadCountByPeerID,
+  selectMessagesUnreadCountByRole,
+  selectRemotePeers,
+  selectUnreadHMSMessagesCount,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { CheckIcon, PeopleIcon } from '@100mslive/react-icons';
+import { Box, CSS, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../..';
+import { config as cssConfig } from '../../../Theme';
+// @ts-ignore
+import { ParticipantSearch } from '../Footer/ParticipantList';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
+import { useFilteredRoles } from '../../common/hooks';
+import { CHAT_SELECTOR } from '../../common/constants';
+
+const ChatDotIcon = () => {
+  return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;
+};
+
+const SelectorItem = ({
+  value,
+  active,
+  onClick,
+  unreadCount,
+  icon = undefined,
+}: {
+  value: string;
+  active: boolean;
+  onClick: () => void;
+  unreadCount: number;
+  icon?: React.JSX.Element;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
+  const Root = !isMobile
+    ? Dropdown.Item
+    : ({ children, ...rest }: { children: React.ReactNode; css: CSS }) => (
+        <Flex {...rest} css={{ p: '$6 $8', ...rest.css }}>
+          {children}
+        </Flex>
+      );
+  return (
+    <Root
+      data-testid="chat_members"
+      css={{ align: 'center', px: '$10', py: '$4', bg: '$surface_default' }}
+      onClick={onClick}
+    >
+      <Text
+        variant="sm"
+        css={{ display: 'flex', alignItems: 'center', gap: '$4', fontWeight: '$semiBold', color: '$on_surface_high' }}
+      >
+        {icon}
+        {value}
+      </Text>
+      <Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
+        {unreadCount > 0 && (
+          <Tooltip title={`${unreadCount} unread`}>
+            <Box css={{ mr: active ? '$3' : 0 }}>
+              <ChatDotIcon />
+            </Box>
+          </Tooltip>
+        )}
+        {active && <CheckIcon width={16} height={16} />}
+      </Flex>
+    </Root>
+  );
+};
+
+const SelectorHeader = React.memo(
+  ({ isHorizontalDivider = true, children }: { isHorizontalDivider?: boolean; children: React.ReactNode }) => {
+    return (
+      <Box css={{ flexShrink: 0 }}>
+        {isHorizontalDivider && <HorizontalDivider space={4} />}
+        <Text
+          variant="overline"
+          css={{ p: '$4 $10', fontWeight: '$semiBold', textTransform: 'uppercase', color: '$on_surface_medium' }}
+        >
+          {children}
+        </Text>
+      </Box>
+    );
+  },
+);
+
+const Everyone = React.memo(({ active }: { active: boolean }) => {
+  const unreadCount: number = useHMSStore(selectUnreadHMSMessagesCount);
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+  return (
+    <SelectorItem
+      value="Everyone"
+      icon={<PeopleIcon />}
+      active={active}
+      unreadCount={unreadCount}
+      onClick={() => {
+        setPeerSelector('');
+        setRoleSelector('');
+      }}
+    />
+  );
+});
+
+const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }) => {
+  const unreadCount: number = useHMSStore(selectMessagesUnreadCountByRole(role));
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+  return (
+    <SelectorItem
+      value={role}
+      active={active}
+      unreadCount={unreadCount}
+      onClick={() => {
+        setPeerSelector('');
+        setRoleSelector(role);
+      }}
+    />
+  );
+});
+
+const PeerItem = ({ peerId, name, active }: { name: string; peerId: string; active: boolean }) => {
+  const unreadCount: number = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+
+  return (
+    <SelectorItem
+      value={name}
+      active={active}
+      unreadCount={unreadCount}
+      onClick={() => {
+        setPeerSelector(peerId);
+        setRoleSelector('');
+      }}
+    />
+  );
+};
+
+const VirtualizedSelectItemList = ({
+  peers,
+  selectedRole,
+  selectedPeerId,
+  searchValue,
+}: {
+  peers: HMSPeer[];
+  selectedRole: string;
+  selectedPeerId: string;
+  searchValue: string;
+}) => {
+  const roles = useFilteredRoles();
+  const isMobile = useMedia(cssConfig.media.md);
+  const filteredPeers = useMemo(
+    () =>
+      peers.filter(
+        // search should be empty or search phrase should be included in name
+        peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),
+      ),
+    [peers, searchValue],
+  );
+
+  const listItems = useMemo(() => {
+    const selectItems = !searchValue ? [<Everyone active={!selectedRole && !selectedPeerId} />] : [];
+
+    roles.length > 0 && !searchValue && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);
+    !searchValue &&
+      roles.forEach(userRole =>
+        selectItems.push(<RoleItem key={userRole} active={selectedRole === userRole} role={userRole} />),
+      );
+
+    filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);
+    filteredPeers.forEach(peer =>
+      selectItems.push(
+        <PeerItem key={peer.id} name={peer.name} peerId={peer.id} active={peer.id === selectedPeerId} />,
+      ),
+    );
+
+    return selectItems;
+  }, [searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
+
+  if (!isMobile) {
+    return (
+      <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
+        {listItems.map((item, index) => (
+          <Box key={index}>{item}</Box>
+        ))}
+      </Dropdown.Group>
+    );
+  }
+  return (
+    <>
+      {listItems.map((item, index) => (
+        <Box key={index}>{item}</Box>
+      ))}
+    </>
+  );
+};
+
+export const ChatSelector = ({ role, peerId }: { role: string; peerId: string }) => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const peers = useHMSStore(selectRemotePeers);
+  const [search, setSearch] = useState('');
+
+  const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
+
+  return (
+    <>
+      {peers.length > 0 && isPrivateChatEnabled && (
+        <Box css={{ px: '$4' }}>
+          <ParticipantSearch onSearch={setSearch} placeholder="Search for participants" />
+        </Box>
+      )}
+      <VirtualizedSelectItemList
+        selectedRole={role}
+        selectedPeerId={peerId}
+        peers={isPrivateChatEnabled ? peers : []}
+        searchValue={search}
+      />
+    </>
+  );
+};