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

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

@@ -0,0 +1,158 @@
+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 { Dropdown } from '../../../Dropdown';
+import { Box, Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+import { ChatSelector } from './ChatSelector';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useSubscribeChatSelector } from '../AppData/useUISettings';
+import { useFilteredRoles } from '../../common/hooks';
+import { CHAT_SELECTOR } from '../../common/constants';
+
+export const ChatSelectorContainer = () => {
+  const [open, setOpen] = useState(false);
+  const isMobile = useMedia(cssConfig.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
+  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 selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
+  const selectorPeerName = useHMSStore(selectPeerNameByID(selectedPeer));
+  const selection = selectorPeerName || selectedRole || CHAT_SELECTOR.EVERYONE;
+
+  if (!(isPrivateChatEnabled || isPublicChatEnabled || roles.length > 0) && !isPrivateChatEnabled && !selection) {
+    return null;
+  }
+  return (
+    <>
+      <Flex align="center" css={{ mb: '$8', flex: '1 1 0', pl: '$2' }}>
+        <Text variant="xs" css={{ color: '$on_surface_medium' }}>
+          {selection ? 'To' : 'Choose Participant'}
+        </Text>
+
+        {isMobile ? (
+          <Flex
+            align="center"
+            css={{ c: '$on_surface_medium', border: '1px solid $border_bright', r: '$0', p: '$1 $2', ml: '$6' }}
+            gap="1"
+            onClick={e => {
+              setOpen(value => !value);
+              e.stopPropagation();
+            }}
+          >
+            <Text
+              variant="xs"
+              css={{
+                c: '$on_surface_high',
+                pr: '$2',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '$1',
+                textTransform: 'capitalize',
+              }}
+            >
+              {selection === CHAT_SELECTOR.EVERYONE ? (
+                <PeopleIcon width={16} height={16} />
+              ) : (
+                <PersonIcon width={16} height={16} />
+              )}
+              {selection || 'Search'}
+            </Text>
+            {selection &&
+              (open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />)}
+          </Flex>
+        ) : (
+          <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: '$6',
+              }}
+              tabIndex={0}
+            >
+              <Flex align="center" css={{ c: '$on_surface_medium' }} gap="1">
+                <Text
+                  variant="xs"
+                  css={{
+                    c: '$on_surface_high',
+                    pr: '$2',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '$1',
+                    textTransform: 'capitalize',
+                  }}
+                >
+                  {selection === CHAT_SELECTOR.EVERYONE ? (
+                    <PeopleIcon width={16} height={16} />
+                  ) : (
+                    <PersonIcon width={16} height={16} />
+                  )}
+                  {selection}
+                </Text>
+                {selection && (
+                  <ChevronDownIcon
+                    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 150ms ease' }}
+                    width={12}
+                    height={12}
+                  />
+                )}
+              </Flex>
+            </Dropdown.Trigger>
+
+            <Dropdown.Content
+              css={{
+                w: '$64',
+                overflow: 'hidden',
+                maxHeight: 'unset',
+                bg: '$surface_default',
+              }}
+              align="start"
+              sideOffset={8}
+            >
+              <ChatSelector role={selectedRole} peerId={selectedPeer} />
+            </Dropdown.Content>
+          </Dropdown.Root>
+        )}
+      </Flex>
+      {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' }}>Chat with</Text>
+              <Sheet.Close css={{ color: '$on_surface_medium' }}>
+                <CrossIcon />
+              </Sheet.Close>
+            </Sheet.Title>
+            <Box
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              <ChatSelector role={selectedRole} peerId={selectedPeer} />
+            </Box>
+          </Sheet.Content>
+        </Sheet.Root>
+      ) : null}
+    </>
+  );
+};

package/src/Prebuilt/components/Chat/{ChatStates.jsx → ChatStates.tsx}

@@ -9,8 +9,8 @@ import { SESSION_STORE_KEY } from '../../common/constants';
 export const ChatPaused = () => {
   const hmsActions = useHMSActions();
   const { elements } = useRoomLayoutConferencingScreen();
-  const { can_disable_chat } = elements?.chat.real_time_controls || false;
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy } =
+  const can_disable_chat = !!elements?.chat?.real_time_controls?.can_disable_chat;
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
     useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
 
   const localPeer = useHMSStore(selectLocalPeer);
@@ -19,7 +19,7 @@ export const ChatPaused = () => {
     async () =>
       await hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, {
         enabled: true,
-        updatedBy: { userName: localPeer.name, userId: localPeer?.customerUserId, peerId: localPeer.id },
+        updatedBy: { userName: localPeer?.name, userId: localPeer?.customerUserId, peerId: localPeer?.id },
         updatedAt: Date.now(),
       }),
     [hmsActions, localPeer],
@@ -39,7 +39,7 @@ export const ChatPaused = () => {
           variant="xs"
           css={{ color: '$on_surface_medium', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}
         >
-          Chat has been paused by {chatStateUpdatedBy?.peerId === localPeer.id ? 'you' : chatStateUpdatedBy?.userName}
+          Chat has been paused by {chatStateUpdatedBy?.peerId === localPeer?.id ? 'you' : chatStateUpdatedBy?.userName}
         </Text>
       </Box>
       {can_disable_chat ? (

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

@@ -1,32 +1,32 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { useMedia } from 'react-use';
 import { selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
-import { CrossIcon, PinIcon } from '@100mslive/react-icons';
+import { PinIcon, UnpinIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
+import { ArrowNavigation } from './ArrowNavigation';
 // @ts-ignore
 import { AnnotisedMessage } from './ChatBody';
-// @ts-ignore
-import { Navigation } from './Navigation';
-// @ts-ignore
+import { StickIndicator } from './StickIndicator';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 const PINNED_MESSAGE_LENGTH = 75;
 
 export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (index: number) => void }) => {
-  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES));
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
   const isMobile = useMedia(cssConfig.media.md);
 
-  const [hideOverflow, setHideOverflow] = useState(false);
-  const canOverflow = pinnedMessages?.[pinnedMessageIndex]?.text?.length > PINNED_MESSAGE_LENGTH || false;
-  const formattedPinnedMessage = hideOverflow
-    ? `${pinnedMessages?.[pinnedMessageIndex]?.text.slice(0, PINNED_MESSAGE_LENGTH)}... `
-    : pinnedMessages?.[pinnedMessageIndex]?.text;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const canUnpinMessage = !!elements?.chat?.allow_pinning_messages;
+
+  const [hideOverflow, setHideOverflow] = useState(true);
+  const currentPinnedMessage = pinnedMessages?.[pinnedMessageIndex]?.text || '';
+  const canOverflow = currentPinnedMessage.length > PINNED_MESSAGE_LENGTH;
 
-  const pinnedMessageRef = useRef(null);
   const showPreviousPinnedMessage = () => {
     const previousIndex = Math.max(pinnedMessageIndex - 1, 0);
     setHideOverflow(pinnedMessages[previousIndex].text.length > PINNED_MESSAGE_LENGTH);
@@ -44,19 +44,30 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
     onSwipedDown: () => showPreviousPinnedMessage(),
   });
 
+  // Scenario: User is on a particular index but an earlier message is removed by another peer
   useEffect(() => {
-    setHideOverflow(
-      !!(
-        pinnedMessages?.[pinnedMessageIndex]?.text?.length &&
-        pinnedMessages?.[pinnedMessageIndex]?.text.length > PINNED_MESSAGE_LENGTH
-      ),
-    );
+    const count = pinnedMessages?.length || 1;
+    if (pinnedMessageIndex >= count) {
+      setPinnedMessageIndex(count - 1);
+    }
   }, [pinnedMessageIndex, pinnedMessages]);
 
-  return pinnedMessages?.[pinnedMessageIndex]?.text ? (
-    <Flex ref={pinnedMessageRef} align="center" css={{ w: '100%', gap: '$4' }}>
+  if (!pinnedMessages || pinnedMessages.length === 0) {
+    return null;
+  }
+
+  return (
+    <Flex align="center" css={{ w: '100%', gap: '$4' }}>
+      {!isMobile ? (
+        <ArrowNavigation
+          index={pinnedMessageIndex}
+          total={pinnedMessages.length}
+          showPrevious={showPreviousPinnedMessage}
+          showNext={showNextPinnedMessage}
+        />
+      ) : null}
       <Flex
-        title={pinnedMessages[pinnedMessageIndex].text}
+        title={pinnedMessages[pinnedMessageIndex]?.text}
         css={{
           p: '$4',
           color: '$on_surface_medium',
@@ -70,14 +81,7 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
         align="center"
         justify="between"
       >
-        <Navigation
-          index={pinnedMessageIndex}
-          total={pinnedMessages.length}
-          showPrevious={showPreviousPinnedMessage}
-          showNext={showNextPinnedMessage}
-          isMobile={isMobile}
-        />
-        <PinIcon />
+        {isMobile ? <StickIndicator index={pinnedMessageIndex} total={pinnedMessages.length} /> : null}
 
         <Box
           css={{
@@ -92,25 +96,39 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
           }}
         >
           <Text variant="sm" css={{ color: '$on_surface_medium' }} {...swipeHandlers}>
-            <AnnotisedMessage message={formattedPinnedMessage} />
+            <AnnotisedMessage
+              message={`${currentPinnedMessage.slice(
+                0,
+                hideOverflow ? PINNED_MESSAGE_LENGTH : currentPinnedMessage.length,
+              )}`}
+            />
             {canOverflow ? (
               <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(prev => !prev)}>
-                &nbsp;{hideOverflow ? 'See more' : 'Collapse'}
+                &nbsp;{hideOverflow ? '... See more' : 'Collapse'}
               </span>
             ) : null}
           </Text>
         </Box>
 
-        <Flex
-          onClick={() => {
-            clearPinnedMessage(pinnedMessageIndex);
-            setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
-          }}
-          css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
-        >
-          <CrossIcon />
-        </Flex>
+        {canUnpinMessage ? (
+          <Flex
+            onClick={() => {
+              clearPinnedMessage(pinnedMessageIndex);
+              setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
+            }}
+            css={{
+              cursor: 'pointer',
+              color: '$on_surface_medium',
+              '&:hover': { color: '$on_surface_high' },
+              '&:hover .hide-on-hover': { display: 'none !important' },
+              '&:hover .show-on-hover': { display: 'block !important' },
+            }}
+          >
+            <UnpinIcon className="show-on-hover" style={{ display: 'none' }} height={20} width={20} />
+            <PinIcon className="hide-on-hover" style={{ display: 'block' }} height={20} width={20} />
+          </Flex>
+        ) : null}
       </Flex>
     </Flex>
-  ) : null;
+  );
 };

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Box, Flex } from '../../../Layout';
+
+export const StickIndicator = ({ total, index }: { total: number; index: number }) => {
+  const sticksCount = Math.min(3, total);
+
+  if (total < 2) {
+    return null;
+  }
+
+  return (
+    <Flex direction="column" css={{ gap: '$1' }}>
+      {[...Array(sticksCount)].map((_, i) => (
+        <Box
+          css={{
+            borderLeft: '2px solid',
+            height: '$4',
+            borderColor: i === index ? '$on_surface_high' : '$on_surface_low',
+          }}
+        />
+      ))}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Chat/useUnreadCount.ts

@@ -0,0 +1,19 @@
+import {
+  selectMessagesUnreadCountByPeerID,
+  selectMessagesUnreadCountByRole,
+  selectUnreadHMSMessagesCount,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+
+export const useUnreadCount = ({ role, peerId }: { role?: string; peerId?: string }) => {
+  let unreadCountSelector;
+  if (role) {
+    unreadCountSelector = selectMessagesUnreadCountByRole(role);
+  } else if (peerId) {
+    unreadCountSelector = selectMessagesUnreadCountByPeerID(peerId);
+  } else {
+    unreadCountSelector = selectUnreadHMSMessagesCount;
+  }
+
+  return useHMSStore(unreadCountSelector);
+};

package/src/Prebuilt/components/ChatSettings.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { selectLocalPeer, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { PauseCircleIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Flex } from '../../Layout';
+import { Popover } from '../../Popover';
+import { Text } from '../../Text';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { SESSION_STORE_KEY } from '../common/constants';
+
+export const ChatSettings = () => {
+  const hmsActions = useHMSActions();
+  const localPeer = useHMSStore(selectLocalPeer);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const canPauseChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
+  const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
+  const showPause = canPauseChat && isChatEnabled;
+
+  if (!showPause) {
+    return null;
+  }
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild css={{ px: '$4' }}>
+        <Flex
+          align="center"
+          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' }, cursor: 'pointer' }}
+        >
+          <SettingsIcon />
+        </Flex>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          align="end"
+          side="bottom"
+          sideOffset={2}
+          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>
+  );
+};

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

@@ -359,8 +359,9 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
         color: '$on_surface_medium',
         mt: inSidePane ? '$4' : '',
       }}
+      onClick={e => e.stopPropagation()}
     >
-      <SearchIcon style={{ position: 'absolute', left: isMobile ? '1.25rem' : '0.5rem' }} />
+      <SearchIcon style={{ position: 'absolute', left: '0.5rem' }} />
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}

package/src/Prebuilt/components/Header/ParticipantFilter.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';
+import { CHAT_SELECTOR } from '../../common/constants';
 
 export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
   const [open, setOpen] = useState(false);
@@ -26,7 +27,7 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
       >
         <Flex align="center">
           <Text variant="sm" css={{ ...textEllipsis(80) }}>
-            {selectionValue || 'Everyone'}
+            {selectionValue || CHAT_SELECTOR.EVERYONE}
           </Text>
           <Box css={{ ml: '$2', color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}

package/src/Prebuilt/components/Notifications/ChatNotifications.tsx

@@ -29,6 +29,6 @@ export const ChatNotifications = () => {
       title: `Chat ${chatState.enabled ? 'resumed' : 'paused'} by ${chatState.updatedBy?.userName}`,
     };
     ToastManager.addToast(notification);
-  }, [chatState]);
+  }, [chatState, localPeerId]);
   return <></>;
 };

package/src/Prebuilt/components/Preview/PreviewForm.tsx

@@ -10,6 +10,7 @@ import { PreviewSettings } from './PreviewJoin';
 
 const PreviewForm = ({
   name,
+  disabled,
   onChange,
   onJoin,
   enableJoin,
@@ -17,6 +18,7 @@ const PreviewForm = ({
   cannotPublishAudio = false,
 }: {
   name: string;
+  disabled?: boolean;
   onChange: (name: string) => void;
   onJoin: () => void;
   enableJoin: boolean;
@@ -48,6 +50,7 @@ const PreviewForm = ({
         <Input
           required
           id="name"
+          disabled={disabled}
           css={{ w: '100%', boxSizing: 'border-box' }}
           value={name}
           onChange={e => onChange(e.target.value.trimStart())}

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -178,6 +178,7 @@ const PreviewJoin = ({
           <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
           <PreviewForm
             name={name}
+            disabled={!!initialName}
             onChange={setName}
             enableJoin={enableJoin}
             onJoin={savePreferenceAndJoin}
@@ -187,7 +188,7 @@ const PreviewJoin = ({
         </Box>
       </Container>
       <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%', overflow: 'hidden' }}>
-        <SidePane screenType="default" />
+        <SidePane />
       </Box>
     </Flex>
   ) : (