@100mslive/roomkit-react 0.1.15 → 0.1.16

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

@@ -2,7 +2,7 @@ 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, selectPeerNameByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, 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';
@@ -14,9 +14,10 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 // @ts-ignore
 import { useChatDraftMessage } from '../AppData/useChatState';
 // @ts-ignore
-import { useSubscribeChatSelector } from '../AppData/useUISettings';
+import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+import { useDefaultChatSelection } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
@@ -81,11 +82,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
   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 selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
+  const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+  const defaultSelection = useDefaultChatSelection();
+  const selection = selectedPeer.name || selectedRole || defaultSelection;
+  useEffect(() => {
+    if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
+      setRoleSelector(defaultSelection);
+    } else {
+      inputRef.current?.focus();
+    }
+  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector]);
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -94,8 +101,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
     try {
       if (selectedRole) {
         await hmsActions.sendGroupMessage(message, [selectedRole]);
-      } else if (selectedPeer) {
-        await hmsActions.sendDirectMessage(message, selectedPeer);
+      } else if (selectedPeer.id) {
+        await hmsActions.sendDirectMessage(message, selectedPeer.id);
       } else {
         await hmsActions.sendBroadcastMessage(message);
       }
@@ -104,8 +111,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
         onSend();
       }, 0);
     } catch (error) {
-      const err = error as Error;
-      ToastManager.addToast({ title: err.message });
+      const err = error as HMSException;
+      ToastManager.addToast({
+        title: err.message.startsWith('Invalid peer') ? `${selectedPeer.name} is not in this room` : err.message,
+      });
     }
   }, [selectedRole, selectedPeer, hmsActions, onSend]);
 
@@ -172,7 +181,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
           </Flex>
         ) : null}
       </Flex>
-      {!(selection === CHAT_SELECTOR.EVERYONE && !isPublicChatEnabled) && (
+      {selection && (
         <Flex align="center" css={{ gap: '$4', w: '100%' }}>
           <Flex
             align="center"

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

@@ -11,7 +11,6 @@ import {
 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
@@ -90,7 +89,7 @@ const SelectorHeader = React.memo(
 
 const Everyone = React.memo(({ active }: { active: boolean }) => {
   const unreadCount: number = useHMSStore(selectUnreadHMSMessagesCount);
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return (
     <SelectorItem
@@ -99,7 +98,7 @@ const Everyone = React.memo(({ active }: { active: boolean }) => {
       active={active}
       unreadCount={unreadCount}
       onClick={() => {
-        setPeerSelector('');
+        setPeerSelector({});
         setRoleSelector('');
       }}
     />
@@ -108,7 +107,7 @@ const Everyone = React.memo(({ active }: { active: boolean }) => {
 
 const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }) => {
   const unreadCount: number = useHMSStore(selectMessagesUnreadCountByRole(role));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return (
     <SelectorItem
@@ -116,7 +115,7 @@ const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }
       active={active}
       unreadCount={unreadCount}
       onClick={() => {
-        setPeerSelector('');
+        setPeerSelector({});
         setRoleSelector(role);
       }}
     />
@@ -125,7 +124,7 @@ const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }
 
 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 [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
 
   return (
@@ -134,7 +133,7 @@ const PeerItem = ({ peerId, name, active }: { name: string; peerId: string; acti
       active={active}
       unreadCount={unreadCount}
       onClick={() => {
-        setPeerSelector(peerId);
+        setPeerSelector({ id: peerId, name });
         setRoleSelector('');
       }}
     />
@@ -146,14 +145,15 @@ const VirtualizedSelectItemList = ({
   selectedRole,
   selectedPeerId,
   searchValue,
+  isPublicChatEnabled,
 }: {
   peers: HMSPeer[];
   selectedRole: string;
   selectedPeerId: string;
   searchValue: string;
+  isPublicChatEnabled: boolean;
 }) => {
   const roles = useFilteredRoles();
-  const isMobile = useMedia(cssConfig.media.md);
   const filteredPeers = useMemo(
     () =>
       peers.filter(
@@ -164,15 +164,22 @@ const VirtualizedSelectItemList = ({
   );
 
   const listItems = useMemo(() => {
-    const selectItems = !searchValue ? [<Everyone active={!selectedRole && !selectedPeerId} />] : [];
-
-    roles.length > 0 && !searchValue && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);
-    !searchValue &&
+    let selectItems: React.ReactNode[] = [];
+    if (isPublicChatEnabled && !searchValue) {
+      selectItems = [<Everyone active={!selectedRole && !selectedPeerId} />];
+    }
+    if (roles.length > 0 && !searchValue) {
+      selectItems.push(<SelectorHeader isHorizontalDivider={isPublicChatEnabled}>Roles</SelectorHeader>);
       roles.forEach(userRole =>
         selectItems.push(<RoleItem key={userRole} active={selectedRole === userRole} role={userRole} />),
       );
+    }
 
-    filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);
+    if (filteredPeers.length > 0) {
+      selectItems.push(
+        <SelectorHeader isHorizontalDivider={isPublicChatEnabled || roles.length > 0}>Participants</SelectorHeader>,
+      );
+    }
     filteredPeers.forEach(peer =>
       selectItems.push(
         <PeerItem key={peer.id} name={peer.name} peerId={peer.id} active={peer.id === selectedPeerId} />,
@@ -180,23 +187,14 @@ const VirtualizedSelectItemList = ({
     );
 
     return selectItems;
-  }, [searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
+  }, [isPublicChatEnabled, 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 (
-    <>
+    <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
       {listItems.map((item, index) => (
         <Box key={index}>{item}</Box>
       ))}
-    </>
+    </Dropdown.Group>
   );
 };
 
@@ -206,6 +204,7 @@ export const ChatSelector = ({ role, peerId }: { role: string; peerId: string })
   const [search, setSearch] = useState('');
 
   const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
+  const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
 
   return (
     <>
@@ -218,6 +217,7 @@ export const ChatSelector = ({ role, peerId }: { role: string; peerId: string })
         selectedRole={role}
         selectedPeerId={peerId}
         peers={isPrivateChatEnabled ? peers : []}
+        isPublicChatEnabled={isPublicChatEnabled}
         searchValue={search}
       />
     </>

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectPeerNameByID, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon, PeopleIcon, PersonIcon } from '@100mslive/react-icons';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon, GroupIcon, PersonIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';
 import { Sheet } from '../../../Sheet';
@@ -11,7 +10,7 @@ import { ChatSelector } from './ChatSelector';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
 import { useSubscribeChatSelector } from '../AppData/useUISettings';
-import { useFilteredRoles } from '../../common/hooks';
+import { useDefaultChatSelection, useFilteredRoles } from '../../common/hooks';
 import { CHAT_SELECTOR } from '../../common/constants';
 
 export const ChatSelectorContainer = () => {
@@ -21,10 +20,10 @@ export const ChatSelectorContainer = () => {
   const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
   const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
   const roles = useFilteredRoles();
-  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER_ID);
+  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
   const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
-  const selectorPeerName = useHMSStore(selectPeerNameByID(selectedPeer));
-  const selection = selectorPeerName || selectedRole || CHAT_SELECTOR.EVERYONE;
+  const defaultSelection = useDefaultChatSelection();
+  const selection = selectedPeer.name || selectedRole || defaultSelection;
 
   if (!(isPrivateChatEnabled || isPublicChatEnabled || roles.length > 0) && !isPrivateChatEnabled && !selection) {
     return null;
@@ -47,18 +46,18 @@ export const ChatSelectorContainer = () => {
             }}
           >
             <Text
-              variant="xs"
+              variant="caption"
               css={{
                 c: '$on_surface_high',
                 pr: '$2',
                 display: 'flex',
                 alignItems: 'center',
                 gap: '$1',
-                textTransform: 'capitalize',
+                textTransform: selection !== selectedPeer.name ? 'capitalize' : undefined,
               }}
             >
               {selection === CHAT_SELECTOR.EVERYONE ? (
-                <PeopleIcon width={16} height={16} />
+                <GroupIcon width={16} height={16} />
               ) : (
                 <PersonIcon width={16} height={16} />
               )}
@@ -73,7 +72,7 @@ export const ChatSelectorContainer = () => {
               asChild
               data-testid="participant_list_filter"
               css={{
-                border: '1px solid $border_bright',
+                background: '$primary_default',
                 r: '$0',
                 p: '$1 $2',
                 ml: '$6',
@@ -82,22 +81,22 @@ export const ChatSelectorContainer = () => {
             >
               <Flex align="center" css={{ c: '$on_surface_medium' }} gap="1">
                 <Text
-                  variant="xs"
+                  variant="caption"
                   css={{
                     c: '$on_surface_high',
                     pr: '$2',
                     display: 'flex',
                     alignItems: 'center',
                     gap: '$1',
-                    textTransform: 'capitalize',
+                    textTransform: selection !== selectedPeer.name ? 'capitalize' : undefined,
                   }}
                 >
                   {selection === CHAT_SELECTOR.EVERYONE ? (
-                    <PeopleIcon width={16} height={16} />
+                    <GroupIcon width={16} height={16} />
                   ) : (
                     <PersonIcon width={16} height={16} />
                   )}
-                  {selection}
+                  {selection || 'Search'}
                 </Text>
                 {selection && (
                   <ChevronDownIcon
@@ -119,7 +118,7 @@ export const ChatSelectorContainer = () => {
               align="start"
               sideOffset={8}
             >
-              <ChatSelector role={selectedRole} peerId={selectedPeer} />
+              <ChatSelector role={selectedRole} peerId={selectedPeer.id} />
             </Dropdown.Content>
           </Dropdown.Root>
         )}
@@ -148,7 +147,7 @@ export const ChatSelectorContainer = () => {
                 setOpen(false);
               }}
             >
-              <ChatSelector role={selectedRole} peerId={selectedPeer} />
+              <ChatSelector role={selectedRole} peerId={selectedPeer.id} />
             </Box>
           </Sheet.Content>
         </Sheet.Root>

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

@@ -67,7 +67,6 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
         />
       ) : null}
       <Flex
-        title={pinnedMessages[pinnedMessageIndex]?.text}
         css={{
           p: '$4',
           color: '$on_surface_medium',
@@ -95,7 +94,12 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
             },
           }}
         >
-          <Text variant="sm" css={{ color: '$on_surface_medium' }} {...swipeHandlers}>
+          <Text
+            variant="sm"
+            css={{ color: '$on_surface_medium' }}
+            {...swipeHandlers}
+            title={pinnedMessages[pinnedMessageIndex]?.text}
+          >
             <AnnotisedMessage
               message={`${currentPinnedMessage.slice(
                 0,
@@ -123,6 +127,7 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
               '&:hover .hide-on-hover': { display: 'none !important' },
               '&:hover .show-on-hover': { display: 'block !important' },
             }}
+            title="Unpin Message"
           >
             <UnpinIcon className="show-on-hover" style={{ display: 'none' }} height={20} width={20} />
             <PinIcon className="hide-on-hover" style={{ display: 'block' }} height={20} width={20} />

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -21,6 +21,7 @@ import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
+import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
@@ -175,6 +176,7 @@ export const ConferenceScreen = () => {
         <RoleChangeRequestModal />
         <HLSFailureModal />
         <ActivatedPIP />
+        <PreviousRoleInMetadata />
       </Flex>
     </>
   );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
-import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../..';
+import { ChatIcon } from '@100mslive/react-icons';
+import { Box, Flex, Text, Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 // @ts-ignore: No implicit Any
@@ -15,10 +15,33 @@ export const ChatToggle = () => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
   return (
-    <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-      <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
-        {countUnreadMessages === 0 ? <ChatIcon /> : <ChatUnreadIcon data-testid="chat_unread_btn" />}
-      </IconButton>
-    </Tooltip>
+    <Box
+      css={{
+        position: 'relative',
+      }}
+    >
+      <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
+        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+          <ChatIcon />
+        </IconButton>
+      </Tooltip>
+      {countUnreadMessages > 0 && (
+        <Flex
+          css={{
+            height: '$8',
+            p: '$4 4.5px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            top: '-$4',
+            right: '-$4',
+            borderRadius: '$space$14',
+            background: '$primary_default',
+          }}
+        >
+          <Text variant="overline">{countUnreadMessages > 99 ? '99+' : countUnreadMessages}</Text>
+        </Flex>
+      )}
+    </Box>
   );
 };

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

@@ -20,9 +20,9 @@ import { ScreenshareToggle } from '../ScreenShareToggle';
 import { VBToggle } from '../VirtualBackground/VBToggle';
 // @ts-ignore: No implicit Any
 import { ChatToggle } from './ChatToggle';
-// @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
 import { PollsToggle } from './PollsToggle';
+import { WhiteboardToggle } from './WhiteboardToggle';
 import { ConferencingScreenElements } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
@@ -105,6 +105,7 @@ export const Footer = ({
         )}
       </AppFooter.Center>
       <AppFooter.Right>
+        <WhiteboardToggle />
         {showPolls && <PollsToggle />}
         {!isMobile && elements?.chat && <ChatToggle />}
         {elements?.participant_list && <ParticipantCount />}

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

@@ -8,7 +8,6 @@ import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
 import { Loading } from '../../../Loading';
 import { Text } from '../../../Text';
-// @ts-ignore: No implicit Any
 import { Participant, ParticipantSearch } from './ParticipantList';
 import { ItemData, itemKey, ROW_HEIGHT } from './RoleAccordion';
 // @ts-ignore: No implicit Any