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

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

@@ -14,7 +14,7 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { useChatDraftMessage } from '../AppData/useChatState';
 // @ts-ignore
 import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
-import { useIsLocalPeerBlacklisted } from '../hooks/useChatBlacklist';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection } from '../../common/hooks';
@@ -86,7 +86,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
-  const isLocalPeerBlacklisted = useIsLocalPeerBlacklisted();
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
 
   useEffect(() => {
     if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {

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

@@ -4,7 +4,7 @@ import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useIsLocalPeerBlacklisted } from '../hooks/useChatBlacklist';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 export const ChatPaused = () => {
@@ -55,7 +55,7 @@ export const ChatPaused = () => {
 };
 
 export const ChatBlocked = () => {
-  const isLocalPeerBlacklisted = useIsLocalPeerBlacklisted();
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
   if (!isLocalPeerBlacklisted) {
     return null;
   }

package/src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.jsx

@@ -262,9 +262,9 @@ export const isValidQuestion = ({ text, type, options, weight, isQuiz = false })
     return false;
   }
 
-  if (![QUESTION_TYPE.SINGLE_CHOICE, QUESTION_TYPE.MULTIPLE_CHOICE].includes(type)) {
-    return true;
-  }
+  // if (![QUESTION_TYPE.SINGLE_CHOICE, QUESTION_TYPE.MULTIPLE_CHOICE].includes(type)) {
+  //   return true;
+  // }
 
   const everyOptionHasText = options.length > 0 && options.every(option => option && isValidTextInput(option.text, 1));
   const hasCorrectAnswer = options.some(option => option.isCorrectAnswer);

package/src/Prebuilt/components/Polls/Voting/Leaderboard.tsx

@@ -78,7 +78,15 @@ export const Leaderboard = ({ pollID }: { pollID: string }) => {
       <Text variant="xs" css={{ color: '$on_surface_medium' }}>
         Based on score and time taken to cast the correct answer
       </Text>
-      <Box css={{ mt: '$8', gap: '$4', overflowY: 'auto', flex: '1 1 0', mr: '-$6', pr: '$6' }}>
+      <Box
+        css={{
+          mt: '$8',
+          overflowY: 'auto',
+          flex: '1 1 0',
+          mr: '-$6',
+          pr: '$6',
+        }}
+      >
         {pollLeaderboard?.entries &&
           pollLeaderboard.entries.map(question => (
             <LeaderboardEntry

package/src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx

@@ -21,7 +21,7 @@ export const LeaderboardEntry = ({
   maxPossibleScore: number;
 }) => {
   return (
-    <Flex align="center" justify="between">
+    <Flex align="center" justify="between" css={{ my: '$4' }}>
       <Flex align="center" css={{ gap: '$6' }}>
         <Flex
           align="center"
@@ -44,17 +44,17 @@ export const LeaderboardEntry = ({
             {userName}
           </Text>
 
-          <Text variant="sm">
-            {score}/{maxPossibleScore} points
+          <Text variant="sm" css={{ mt: '$2' }}>
+            {score} / {maxPossibleScore} points
           </Text>
         </Box>
       </Flex>
-      <Flex align="center" css={{ gap: '$6', color: '$on_surface_medium' }}>
-        {position === 1 ? <TrophyFilledIcon /> : null}
+      <Flex align="center" css={{ gap: '$4', color: '$on_surface_medium' }}>
+        {position === 1 ? <TrophyFilledIcon height={18} width={18} /> : null}
         <CheckCircleIcon height={16} width={16} />
         {questionCount ? (
           <Text variant="xs">
-            {correctResponses}/{questionCount}
+            {correctResponses} / {questionCount}
           </Text>
         ) : null}
       </Flex>

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/hooks/useChatBlacklist.ts

@@ -22,8 +22,8 @@ export const useChatBlacklist = (
   return { blacklistItem, blacklistedIDs };
 };
 
-export const useIsLocalPeerBlacklisted = () => {
+export const useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = '' }) => {
   const localPeer = useHMSStore(selectLocalPeer);
   const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
-  return blacklistedPeerIDs?.includes(localPeer?.customerUserId);
+  return blacklistedPeerIDs?.includes(local ? localPeer?.customerUserId : peerCustomerUserId);
 };

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}