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

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -2,22 +2,22 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon, CrossCircleIcon } from '@100mslive/react-icons';
-import { Box, Button, Flex, IconButton, Input, styled, Text } from '../../../../';
+import { Box, Button, Flex, IconButton, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
 import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
 import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
 import { QUESTION_TYPE } from '../../../common/constants';
 
-const TextArea = styled('textarea', {
-  backgroundColor: '$surface_brighter',
-  border: '1px solid $border_bright',
-  borderRadius: '$1',
-  mb: '$md',
-  color: '$on_surface_high',
-  resize: 'none',
-  p: '$2',
-  w: '100%',
-});
+// const TextArea = styled('textarea', {
+//   backgroundColor: '$surface_brighter',
+//   border: '1px solid $border_bright',
+//   borderRadius: '$1',
+//   mb: '$md',
+//   color: '$on_surface_high',
+//   resize: 'none',
+//   p: '$2',
+//   w: '100%',
+// });
 
 export const QuestionCard = ({
   pollID,
@@ -67,23 +67,21 @@ export const QuestionCard = ({
     setCurrentIndex(curr => Math.max(1, curr - 1));
   };
 
-  const [textAnswer, setTextAnswer] = useState('');
+  // const [textAnswer, setTextAnswer] = useState('');
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
 
-  const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
+  // const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
 
   const respondedToQuiz = isQuiz && localPeerResponse && !localPeerResponse.skipped;
 
   const isValidVote = useMemo(() => {
-    if (stringAnswerExpected) {
-      return textAnswer.length > 0;
-    } else if (type === QUESTION_TYPE.SINGLE_CHOICE) {
+    if (type === QUESTION_TYPE.SINGLE_CHOICE) {
       return singleOptionAnswer !== undefined;
     } else if (type === QUESTION_TYPE.MULTIPLE_CHOICE) {
       return multipleOptionAnswer.size > 0;
     }
-  }, [textAnswer, singleOptionAnswer, multipleOptionAnswer, type, stringAnswerExpected]);
+  }, [singleOptionAnswer, multipleOptionAnswer, type]);
 
   const handleVote = useCallback(async () => {
     if (!isValidVote) {
@@ -92,12 +90,11 @@ export const QuestionCard = ({
     await actions.interactivityCenter.addResponsesToPoll(pollID, [
       {
         questionIndex: index,
-        text: textAnswer,
         option: singleOptionAnswer,
         options: Array.from(multipleOptionAnswer),
       },
     ]);
-  }, [actions, index, pollID, isValidVote, textAnswer, singleOptionAnswer, multipleOptionAnswer]);
+  }, [actions, index, pollID, isValidVote, singleOptionAnswer, multipleOptionAnswer]);
 
   const handleSkip = useCallback(async () => {
     await actions.interactivityCenter.addResponsesToPoll(pollID, [
@@ -181,7 +178,7 @@ export const QuestionCard = ({
         <Text css={{ color: '$on_surface_high' }}>{text}</Text>
       </Box>
 
-      {type === QUESTION_TYPE.SHORT_ANSWER ? (
+      {/* {type === QUESTION_TYPE.SHORT_ANSWER ? (
         <Input
           disabled={!canRespond}
           placeholder="Enter your answer"
@@ -194,15 +191,15 @@ export const QuestionCard = ({
             cursor: localPeerResponse ? 'not-allowed' : 'text',
           }}
         />
-      ) : null}
+      ) : null} */}
 
-      {type === QUESTION_TYPE.LONG_ANSWER ? (
+      {/* {type === QUESTION_TYPE.LONG_ANSWER ? (
         <TextArea
           disabled={!canRespond}
           placeholder="Enter your answer"
           onChange={e => setTextAnswer(e.target.value)}
         />
-      ) : null}
+      ) : null} */}
 
       {type === QUESTION_TYPE.SINGLE_CHOICE ? (
         <SingleChoiceOptions

package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -51,7 +51,7 @@ export const MultipleChoiceOptions = ({
               </Checkbox.Root>
             ) : null}
 
-            {isStopped && correctOptionIndexes.includes(option.index) ? (
+            {isStopped && correctOptionIndexes?.includes(option.index) ? (
               <Flex css={{ color: '$on_surface_high' }}>
                 <CheckCircleIcon />
               </Flex>

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 useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = '' }) => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
+  return blacklistedPeerIDs?.includes(local ? localPeer?.customerUserId : peerCustomerUserId);
+};

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 };
+};

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Layout } from '@100mslive/types-prebuilt';
-import merge from 'lodash.merge';
+import { isArray, mergeWith } from 'lodash';
 // @ts-ignore: fix types
 import { useAuthToken } from '../../components/AppData/useUISettings';
 import { useFetchRoomLayout, useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
@@ -18,6 +18,14 @@ export const RoomLayoutContext = React.createContext<
   | undefined
 >(undefined);
 
+function customizer(objValue: any, srcValue: any) {
+  if (isArray(objValue) && isArray(srcValue)) {
+    return srcValue;
+  }
+  // default mergeWith behaviour is followed
+  return undefined;
+}
+
 export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
   children,
   roomLayoutEndpoint,
@@ -25,7 +33,8 @@ export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProv
 }) => {
   const authToken: string = useAuthToken();
   const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
-  const mergedLayout = authToken && layout ? merge(layout, overrideLayout) : layout;
+  const mergedLayout = authToken && layout ? mergeWith(layout, overrideLayout, customizer) : layout;
+
   return (
     <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole }}>
       {children}