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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.18",
+  "version": "0.1.19-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.27",
-    "@100mslive/hms-virtual-background": "1.11.27",
-    "@100mslive/react-icons": "0.8.27",
-    "@100mslive/react-sdk": "0.8.27",
+    "@100mslive/hls-player": "0.1.28-alpha.1",
+    "@100mslive/hms-virtual-background": "1.11.28-alpha.1",
+    "@100mslive/react-icons": "0.8.28-alpha.1",
+    "@100mslive/react-sdk": "0.8.28-alpha.1",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "bebaa35da830548dc943d08a9d3cfe2f472e23b1"
+  "gitHead": "5f85c1840b3852eee50dbd94689eac2aa7a1f327"
 }

package/src/Prebuilt/common/constants.ts

@@ -121,15 +121,15 @@ export enum INTERACTION_TYPE {
 export enum QUESTION_TYPE_TITLE {
   'single-choice' = 'Single Choice',
   'multiple-choice' = 'Multiple Choice',
-  'short-answer' = 'Short Answer',
-  'long-answer' = 'Long Answer',
+  // 'short-answer' = 'Short Answer',
+  // 'long-answer' = 'Long Answer',
 }
 
 export enum QUESTION_TYPE {
   SINGLE_CHOICE = 'single-choice',
   MULTIPLE_CHOICE = 'multiple-choice',
-  SHORT_ANSWER = 'short-answer',
-  LONG_ANSWER = 'long-answer',
+  // SHORT_ANSWER = 'short-answer',
+  // LONG_ANSWER = 'long-answer',
 }
 
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';

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

@@ -20,7 +20,7 @@ import { Tooltip } from '../../../Tooltip';
 import { ToastManager } from '../Toast/ToastManager';
 import { MwebChatOption } from './MwebChatOption';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useChatBlacklist } from '../hooks/useChatBlacklist';
+import { useChatBlacklist, useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
@@ -68,6 +68,8 @@ export const ChatActions = ({
     SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
   );
 
+  const isSenderBlocked = useIsPeerBlacklisted({ peerCustomerUserId: message.senderUserId });
+
   const updatePinnedMessages = useCallback(
     (messageID = '') => {
       const blacklistedMessageIDSet = new Set([...(blacklistedMessageIDs || []), messageID]);
@@ -140,7 +142,7 @@ export const ChatActions = ({
         }
       },
       color: '$alert_error_default',
-      show: !!can_block_user && !sentByLocalPeer,
+      show: !!can_block_user && !sentByLocalPeer && !isSenderBlocked,
     },
     remove: {
       text: 'Remove Partipant',

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/VirtualBackground/VBPicker.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-import { VirtualBackground, VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
+import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
 import {
   HMSRoomState,
   selectIsLargeRoom,
@@ -28,7 +28,7 @@ import { defaultMedia, vbPlugin } from './constants';
 const iconDims = { height: '40px', width: '40px' };
 const MAX_RETRIES = 2;
 
-export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
+export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBackgroundMedia[] }) => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions();
   const role = useHMSStore(selectLocalPeerRole);
@@ -46,7 +46,9 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
   const roomState = useHMSStore(selectRoomState);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const addedPluginToVideoTrack = useRef(false);
-  const mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
+  const mediaList = backgroundMedia.length
+    ? backgroundMedia.map((media: VirtualBackgroundMedia) => media?.url)
+    : defaultMedia;
 
   const inPreview = roomState === HMSRoomState.Preview;
   // Hidden in preview as the effect will be visible in the preview tile. Needed inside the room because the peer might not be on-screen

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/layouts/SidePane.tsx

@@ -12,7 +12,10 @@ import { Box, Flex } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 // @ts-ignore: No implicit Any
 import { useSidepaneReset } from '../components/AppData/useSidepane';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import {
+  useRoomLayoutConferencingScreen,
+  useRoomLayoutPreviewScreen,
+} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
 
@@ -28,6 +31,7 @@ const SidePane = ({
   const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
+  const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const resetSidePane = useSidepaneReset();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
@@ -37,7 +41,7 @@ const SidePane = ({
     ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker {...elements.virtual_background} />;
+    ViewComponent = <VBPicker backgroundMedia={preview_elements?.virtual_background?.background_media || []} />;
   }
 
   useEffect(() => {

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,17 @@ export const RoomLayoutContext = React.createContext<
   | undefined
 >(undefined);
 
+// The default merge in lodash merges the values of current layout and the changes.
+// This behaviour makes changes in array based values inconsistent since a union happens.
+// The customizer uses the new value provided if one of the values is an array
+function customizer(objValue: any, srcValue: any) {
+  if (isArray(objValue) || isArray(srcValue)) {
+    return srcValue;
+  }
+  // default merge behaviour is followed
+  return undefined;
+}
+
 export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
   children,
   roomLayoutEndpoint,
@@ -25,7 +36,7 @@ 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}