@100mslive/roomkit-react 0.1.18-alpha.0 → 0.1.18

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -107,16 +107,37 @@ export const SidePaneTabs = React.memo<{
         <>
           {hideTabs ? (
             <>
-              <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-                {showChat ? (
-                  chat_title
-                ) : (
-                  <span>
-                    Participants <ParticipantCount count={peerCount} />
-                  </span>
-                )}
-              </Text>
-
+              <Flex justify="between" css={{ w: '100%' }}>
+                <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
+                  {showChat ? (
+                    chat_title
+                  ) : (
+                    <span>
+                      Participants&nbsp;
+                      <ParticipantCount count={peerCount} />
+                    </span>
+                  )}
+                </Text>
+                <Flex>
+                  {showChatSettings ? <ChatSettings /> : null}
+                  {isOverlayChat && isChatOpen ? null : (
+                    <IconButton
+                      css={{ my: '$1', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+                      onClick={e => {
+                        e.stopPropagation();
+                        if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+                          toggleChat();
+                        } else {
+                          toggleParticipants();
+                        }
+                      }}
+                      data-testid="close_chat"
+                    >
+                      <CrossIcon />
+                    </IconButton>
+                  )}
+                </Flex>
+              </Flex>
               {showChat ? <Chat /> : <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />}
             </>
           ) : (
@@ -148,7 +169,8 @@ export const SidePaneTabs = React.memo<{
                       color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
                     }}
                   >
-                    Participants &nbsp; <ParticipantCount count={peerCount} />
+                    Participants&nbsp;
+                    <ParticipantCount count={peerCount} />
                   </Tabs.Trigger>
                 </Tabs.List>
                 {showChatSettings ? <ChatSettings /> : null}

package/src/Prebuilt/components/hooks/useChatBlacklist.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectLocalPeer, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
 import { SESSION_STORE_KEY } from '../../common/constants';
@@ -21,3 +21,9 @@ export const useChatBlacklist = (
 
   return { blacklistItem, blacklistedIDs };
 };
+
+export const useIsLocalPeerBlacklisted = () => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
+  return blacklistedPeerIDs?.includes(localPeer?.customerUserId);
+};

package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts

@@ -1,5 +1,11 @@
 import { useCallback } from 'react';
-import { HMSMessage, selectPeerNameByID, useHMSActions, useHMSVanillaStore } from '@100mslive/react-sdk';
+import {
+  HMSMessage,
+  selectPeerNameByID,
+  selectSessionStore,
+  useHMSActions,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
 // @ts-ignore
@@ -8,7 +14,6 @@ import { SESSION_STORE_KEY } from '../../common/constants';
 type PinnedMessage = {
   text: string;
   id: string;
-  authorId: string;
   pinnedBy: string;
 };
 
@@ -20,9 +25,9 @@ export const useSetPinnedMessages = () => {
   const vanillaStore = useHMSVanillaStore();
 
   const setPinnedMessages = useCallback(
-    async (pinnedMessages: PinnedMessage[] = [], message: HMSMessage, pinnedBy: string) => {
+    async (message: HMSMessage, pinnedBy: string) => {
       const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
-      const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.senderUserId || '' };
+      const newPinnedMessage = { text: '', id: message.id, pinnedBy };
 
       if (message && peerName) {
         newPinnedMessage['text'] = `${peerName}: ${message.message}`;
@@ -30,7 +35,8 @@ export const useSetPinnedMessages = () => {
         newPinnedMessage['text'] = message.message;
       }
 
-      if (newPinnedMessage && !pinnedMessages.find(pinnedMessage => pinnedMessage.id === newPinnedMessage.id)) {
+      const pinnedMessages = vanillaStore.getState(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+      if (!pinnedMessages?.find((pinnedMessage: PinnedMessage) => pinnedMessage.id === newPinnedMessage.id)) {
         await hmsActions.sessionStore
           .set(SESSION_STORE_KEY.PINNED_MESSAGES, [...pinnedMessages, newPinnedMessage].slice(-3)) // Limiting to maximum of 3 messages - FIFO
           .catch(err => ToastManager.addToast({ title: err.description }));
@@ -40,30 +46,32 @@ export const useSetPinnedMessages = () => {
   );
 
   const removePinnedMessage = useCallback(
-    async (pinnedMessages: PinnedMessage[] = [], indexToRemove: number) => {
+    async (indexToRemove: number) => {
+      const pinnedMessages = vanillaStore.getState(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
       if (pinnedMessages[indexToRemove]) {
         await hmsActions.sessionStore
           .set(
             SESSION_STORE_KEY.PINNED_MESSAGES,
-            pinnedMessages.filter((_, index: number) => index !== indexToRemove),
+            pinnedMessages.filter((_: PinnedMessage, index: number) => index !== indexToRemove),
           )
           .catch(err => ToastManager.addToast({ title: err.description }));
       }
     },
-    [hmsActions],
+    [hmsActions, vanillaStore],
   );
 
   const unpinBlacklistedMessages = useCallback(
-    async (pinnedMessages: PinnedMessage[] = [], blacklistedMessageIDSet: Set<string>) => {
+    async (blacklistedMessageIDSet: Set<string>) => {
+      const pinnedMessages = vanillaStore.getState(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
       const filteredPinnedMessages = pinnedMessages?.filter(
-        pinnedMessage => !blacklistedMessageIDSet?.has(pinnedMessage.id),
+        (pinnedMessage: PinnedMessage) => !blacklistedMessageIDSet?.has(pinnedMessage.id),
       );
 
       await hmsActions.sessionStore
         .set(SESSION_STORE_KEY.PINNED_MESSAGES, filteredPinnedMessages)
         .catch(err => ToastManager.addToast({ title: err.description }));
     },
-    [hmsActions],
+    [hmsActions, vanillaStore],
   );
 
   return { setPinnedMessages, removePinnedMessage, unpinBlacklistedMessages };

package/src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { selectLocalPeerID } from '@100mslive/hms-video-store';
+import { HMSNotificationTypes, useHMSNotifications, useHMSStore } from '@100mslive/react-sdk';
+
+export const useUnreadPollQuizPresent = () => {
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const notification = useHMSNotifications();
+  const [unreadPollQuiz, setUnreadPollQuiz] = useState(false);
+
+  useEffect(() => {
+    if (!notification) {
+      return;
+    }
+    if (notification.type !== HMSNotificationTypes.POLL_STARTED) {
+      return;
+    }
+    setUnreadPollQuiz(notification.data.startedBy !== localPeerID);
+  }, [localPeerID, notification]);
+  return { unreadPollQuiz, setUnreadPollQuiz };
+};