@100mslive/roomkit-react 0.1.20-alpha.1 → 0.2.0

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.20-alpha.1",
+  "version": "0.2.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.29-alpha.1",
-    "@100mslive/hms-virtual-background": "1.11.29-alpha.1",
-    "@100mslive/react-icons": "0.8.29-alpha.1",
-    "@100mslive/react-sdk": "0.8.29-alpha.1",
+    "@100mslive/hls-player": "0.2.0",
+    "@100mslive/hms-virtual-background": "1.12.0",
+    "@100mslive/react-icons": "0.9.0",
+    "@100mslive/react-sdk": "0.9.0",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -100,9 +100,8 @@
     "@radix-ui/react-tooltip": "1.0.6",
     "@stitches/react": "^1.2.8",
     "emoji-mart": "^5.2.2",
-    "eventemitter2": "^6.4.7",
+    "eventemitter2": "^6.4.9",
     "lodash.merge": "^4.6.2",
-    "pusher-js": "^7.0.3",
     "qrcode.react": "^3.1.0",
     "react-draggable": "^4.4.5",
     "react-intersection-observer": "^9.4.3",
@@ -115,5 +114,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "19be8b8d757300a9405078f1ceea21ba95e3b9e1"
+  "gitHead": "4141fa5d88b73328867609b0ceaa5a5ac67135d0"
 }

package/src/Button/Button.tsx

@@ -139,10 +139,10 @@ const StyledButton = styled('button', {
   variants: {
     variant: {
       standard: getButtonVariants(
-        '$surface_brighter',
-        '$surface_bright',
-        '$surface_default',
-        '$surface_dim',
+        '$secondary_default',
+        '$secondary_bright',
+        '$secondary_dim',
+        '$secondary_disabled',
         '$on_surface_high',
         '$on_surface_low',
       ),

package/src/Input/Input.tsx

@@ -23,7 +23,7 @@ export const Input = styled('input', {
     color: '$on_surface_medium',
   },
   variants: {
-    alert_error_default: {
+    error: {
       true: {
         '&:focus': {
           boxShadow: '0 0 0 3px $colors$alert_error_default',

package/src/Prebuilt/App.tsx

@@ -25,6 +25,7 @@ import { Notifications } from './components/Notifications';
 import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
+import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { DialogContainerProvider } from '../context/DialogContext';
 import { Box } from '../Layout';
@@ -124,6 +125,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     // leave room when component unmounts
     useEffect(
       () => () => {
+        VBHandler.reset();
         reactiveStore?.current?.hmsActions.leave();
       },
       [],

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

@@ -7,6 +7,7 @@ import {
   EyeCloseIcon,
   PeopleRemoveIcon,
   PinIcon,
+  ReplyGroupIcon,
   ReplyIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
@@ -21,7 +22,7 @@ import { ToastManager } from '../Toast/ToastManager';
 import { MwebChatOption } from './MwebChatOption';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useChatBlacklist, useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
+import { usePinnedMessages } from '../hooks/usePinnedMessages';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 const iconStyle = { height: '1.125rem', width: '1.125rem' };
@@ -36,6 +37,7 @@ const tooltipBoxCSS = {
 export const ChatActions = ({
   showPinAction,
   onReply,
+  onReplyGroup,
   showReply,
   message,
   sentByLocalPeer,
@@ -45,6 +47,7 @@ export const ChatActions = ({
 }: {
   showPinAction: boolean;
   onReply: () => void;
+  onReplyGroup: () => void;
   showReply: boolean;
   message: HMSMessage;
   sentByLocalPeer: boolean;
@@ -53,16 +56,15 @@ export const ChatActions = ({
   setOpenSheet: (value: boolean) => void;
 }) => {
   const { elements } = useRoomLayoutConferencingScreen();
-  const { can_hide_message, can_block_user } = elements?.chat?.real_time_controls || {
-    can_hide_message: false,
-    can_block_user: false,
-  };
+  const { can_hide_message = false, can_block_user = false } = elements?.chat?.real_time_controls || {};
+  const { roles_whitelist = [] } = elements?.chat || {};
+
   const [open, setOpen] = useState(false);
   const actions = useHMSActions();
   const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
   const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
   const localPeerName = useHMSStore(selectLocalPeerName);
-  const { setPinnedMessages, unpinBlacklistedMessages } = useSetPinnedMessages();
+  const { setPinnedMessages, unpinBlacklistedMessages } = usePinnedMessages();
 
   const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
     SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
@@ -104,12 +106,19 @@ export const ChatActions = ({
     }
   > = {
     reply: {
-      text: message.recipientRoles?.length ? 'Reply to group' : 'Reply privately',
-      tooltipText: message.recipientRoles?.length ? 'Reply to group' : 'Reply privately',
+      text: 'Reply privately',
+      tooltipText: 'Reply privately',
       icon: <ReplyIcon style={iconStyle} />,
       onClick: onReply,
       show: showReply,
     },
+    replyGroup: {
+      text: 'Reply to group',
+      tooltipText: 'Reply to group',
+      icon: <ReplyGroupIcon style={iconStyle} />,
+      onClick: onReplyGroup,
+      show: !!message.senderRole && roles_whitelist.includes(message.senderRole),
+    },
     pin: {
       text: 'Pin message',
       tooltipText: 'Pin',
@@ -213,6 +222,7 @@ export const ChatActions = ({
           p: '$2',
           opacity: open ? 1 : 0,
           position: 'absolute',
+          top: 0,
           right: 0,
           zIndex: 1,
           '@md': { opacity: 1 },
@@ -225,6 +235,13 @@ export const ChatActions = ({
             </IconButton>
           </Tooltip>
         ) : null}
+        {options.replyGroup.show ? (
+          <Tooltip boxCss={tooltipBoxCSS} title={options.replyGroup.tooltipText}>
+            <IconButton data-testid="reply_group_message_btn" onClick={options.replyGroup.onClick}>
+              {options.replyGroup.icon}
+            </IconButton>
+          </Tooltip>
+        ) : null}
         {options.pin.show ? (
           <Tooltip boxCss={tooltipBoxCSS} title={options.pin.tooltipText}>
             <IconButton data-testid="pin_message_btn" onClick={options.pin.onClick}>

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

@@ -8,6 +8,7 @@ import {
   HMSRoleName,
   selectHMSMessages,
   selectLocalPeerID,
+  selectLocalPeerName,
   selectLocalPeerRoleName,
   selectPeerNameByID,
   selectSessionStore,
@@ -16,6 +17,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { SolidPinIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import { config as cssConfig, styled } from '../../../Theme';
@@ -25,6 +27,7 @@ import { EmptyChat } from './EmptyChat';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
+import { usePinnedBy } from '../hooks/usePinnedBy';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const formatTime = (date: Date) => {
@@ -45,13 +48,25 @@ function getRowHeight(index: number) {
 }
 
 const setRowHeight = (index: number, id: string, size: number) => {
-  if (rowHeights[index]?.id === id && rowHeights[index]?.size) {
+  if (rowHeights[index]?.id === id && rowHeights[index]?.size === size) {
     return;
   }
   listInstance?.resetAfterIndex(Math.max(index - 1, 0));
   Object.assign(rowHeights, { [index]: { size, id } });
 };
 
+const getMessageBackgroundColor = (
+  messageType: string,
+  selectedPeerID: string,
+  selectedRole: string,
+  isOverlay: boolean,
+) => {
+  if (messageType && !(selectedPeerID || selectedRole)) {
+    return isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default';
+  }
+  return '';
+};
+
 const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }) => {
   return (
     <Flex
@@ -166,7 +181,6 @@ const ChatMessage = React.memo(
     const rowRef = useRef<HTMLDivElement | null>(null);
     const isMobile = useMedia(cssConfig.media.md);
     const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
-    const roleWhiteList = elements?.chat?.roles_whitelist || [];
     const isOverlay = elements?.chat?.is_overlay && isMobile;
     const localPeerId = useHMSStore(selectLocalPeerID);
     const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -177,13 +191,7 @@ const ChatMessage = React.memo(
     });
     const [openSheet, setOpenSheet] = useState(false);
     const showPinAction = !!elements?.chat?.allow_pinning_messages;
-    let showReply = false;
-    if (message.recipientRoles && roleWhiteList.includes(message.recipientRoles[0])) {
-      showReply = true;
-    } else if (message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled) {
-      showReply = true;
-    }
-
+    const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
     useLayoutEffect(() => {
       if (rowRef.current) {
         setRowHeight(index, message.id, rowRef.current.clientHeight);
@@ -208,12 +216,7 @@ const ChatMessage = React.memo(
             flexWrap: 'wrap',
             position: 'relative',
             // Theme independent color, token should not be used for transparent chat
-            bg:
-              messageType && !(selectedPeer.id || selectedRole)
-                ? isOverlay
-                  ? 'rgba(0, 0, 0, 0.64)'
-                  : '$surface_default'
-                : undefined,
+            background: getMessageBackgroundColor(messageType, selectedPeer.id, selectedRole, !!isOverlay),
             r: '$1',
             p: '$4',
             userSelect: 'none',
@@ -231,6 +234,7 @@ const ChatMessage = React.memo(
             }
           }}
         >
+          <PinnedBy messageId={message.id} index={index} rowRef={rowRef} />
           <Text
             css={{
               color: isOverlay ? '#FFF' : '$on_surface_high',
@@ -258,7 +262,7 @@ const ChatMessage = React.memo(
                     variant="sub2"
                     css={{ color: isOverlay ? '#FFF' : '$on_surface_high', fontWeight: '$semiBold' }}
                   >
-                    {message.senderName}
+                    {message.sender === localPeerId ? `${message.senderName} (You)` : message.senderName}
                   </SenderName>
                 </Tooltip>
               )}
@@ -291,12 +295,13 @@ const ChatMessage = React.memo(
               message={message}
               sentByLocalPeer={message.sender === localPeerId}
               onReply={() => {
-                if (message.recipientRoles?.length) {
-                  setRoleSelector(message.recipientRoles[0]);
+                setRoleSelector('');
+                setPeerSelector({ id: message.sender, name: message.senderName });
+              }}
+              onReplyGroup={() => {
+                if (message.senderRole) {
+                  setRoleSelector(message.senderRole);
                   setPeerSelector({});
-                } else {
-                  setRoleSelector('');
-                  setPeerSelector({ id: message.sender, name: message.senderName });
                 }
               }}
               showReply={showReply}
@@ -424,3 +429,41 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
     return <VirtualizedChatMessages messages={filteredMessages} ref={listRef} scrollToBottom={scrollToBottom} />;
   },
 );
+
+const PinnedBy = ({
+  messageId,
+  index,
+  rowRef,
+}: {
+  messageId: string;
+  index: number;
+  rowRef?: React.MutableRefObject<HTMLDivElement | null>;
+}) => {
+  const pinnedBy = usePinnedBy(messageId);
+  const localPeerName = useHMSStore(selectLocalPeerName);
+
+  useLayoutEffect(() => {
+    if (rowRef?.current) {
+      if (pinnedBy) {
+        rowRef.current.style.background =
+          'linear-gradient(277deg, var(--hms-ui-colors-surface_default) 0%, var(--hms-ui-colors-surface_dim) 60.87%)';
+      } else {
+        rowRef.current.style.background = '';
+      }
+      setRowHeight(index, messageId, rowRef?.current.clientHeight);
+    }
+  }, [index, messageId, pinnedBy, rowRef]);
+
+  if (!pinnedBy) {
+    return null;
+  }
+
+  return (
+    <Flex align="center" css={{ gap: '$2', mb: '$2', color: '$on_surface_low' }}>
+      <SolidPinIcon height={12} width={12} />
+      <Text variant="xs" css={{ color: 'inherit' }}>
+        Pinned by {localPeerName === pinnedBy ? 'you' : pinnedBy}
+      </Text>
+    </Flex>
+  );
+};

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

@@ -214,6 +214,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 '&:valid ~ .send-msg': { color: '$on_surface_high' },
                 '& ~ .send-msg': { color: '$on_surface_low' },
                 '&::placeholder': { color: '$on_surface_medium' },
+                border: 'none',
               }}
               placeholder={message_placeholder}
               ref={inputRef}

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

@@ -11,7 +11,7 @@ import { ArrowNavigation } from './ArrowNavigation';
 import { AnnotisedMessage } from './ChatBody';
 import { StickIndicator } from './StickIndicator';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
+import { usePinnedMessages } from '../hooks/usePinnedMessages';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 const PINNED_MESSAGE_LENGTH = 75;
@@ -19,7 +19,7 @@ const PINNED_MESSAGE_LENGTH = 75;
 export const PinnedMessage = () => {
   const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES));
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
-  const { removePinnedMessage } = useSetPinnedMessages();
+  const { removePinnedMessage } = usePinnedMessages();
   const isMobile = useMedia(cssConfig.media.md);
 
   const { elements } = useRoomLayoutConferencingScreen();

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

@@ -5,12 +5,10 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   MusicIcon,
-  PencilDrawIcon,
   ShareScreenIcon,
   VideoPlayerIcon,
 } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
-import { useWhiteboardMetadata } from '../../plugins/whiteboard/useWhiteboardMetadata';
 import { useUISettings } from '../AppData/useUISettings';
 import { usePlaylistMusic } from '../hooks/usePlaylistMusic';
 import { useScreenshareAudio } from '../hooks/useScreenshareAudio';
@@ -57,16 +55,9 @@ export const AdditionalRoomState = () => {
   const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();
 
   const isVideoScreenSharingOn = !!screenShareVideoTrackId;
-  const { whiteboardOwner, amIWhiteboardOwner, toggleWhiteboard } = useWhiteboardMetadata();
   const shouldShowScreenShareState = isAudioOnly && isVideoScreenSharingOn;
   const shouldShowVideoState = isAudioOnly && isVideoPlayListPlaying;
-  if (
-    isPlaylistInactive &&
-    isAudioshareInactive &&
-    !shouldShowScreenShareState &&
-    !shouldShowVideoState &&
-    !whiteboardOwner
-  ) {
+  if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState) {
     return null;
   }
 
@@ -112,13 +103,6 @@ export const AdditionalRoomState = () => {
               </Flex>
             </Tooltip>
           )}
-          {whiteboardOwner && (
-            <Tooltip title="Whiteboard">
-              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
-                <PencilDrawIcon width={24} height={24} />
-              </Flex>
-            </Tooltip>
-          )}
           <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </Box>
@@ -190,27 +174,6 @@ export const AdditionalRoomState = () => {
             </Text>
           </Dropdown.Item>
         )}
-        {whiteboardOwner && (
-          <Dropdown.Item css={{ color: '$on_primary_high' }}>
-            <PencilDrawIcon width={24} height={24} />
-            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
-              Whiteboard Owner - {whiteboardOwner.name}
-              {amIWhiteboardOwner && '(You)'}
-            </Text>
-            {amIWhiteboardOwner && (
-              <Text
-                variant="sm"
-                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
-                onClick={e => {
-                  e.preventDefault();
-                  toggleWhiteboard();
-                }}
-              >
-                Stop
-              </Text>
-            )}
-          </Dropdown.Item>
-        )}
       </Dropdown.Content>
     </Dropdown.Root>
   );

package/src/Prebuilt/components/Header/StreamActions.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import { HMSRecordingState } from '@100mslive/hms-video';
+import { HMSRecordingState } from '@100mslive/hms-video-store';
 import {
   HMSRoomState,
   selectHLSState,

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx

@@ -1,5 +1,5 @@
 // @ts-check
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   selectLocalPeerRoleName,
   selectPermissions,
@@ -74,6 +74,14 @@ const AddMenu = () => {
   const { setPollState } = usePollViewState();
   const [interactionType, setInteractionType] = useState(INTERACTION_TYPE.POLL);
 
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [interactionType]);
+
   const handleCreate = id => {
     setPollState({
       [POLL_STATE.pollInView]: id,
@@ -117,7 +125,9 @@ const AddMenu = () => {
       <Flex direction="column">
         <Text variant="body2" css={{ mb: '$4' }}>{`Name this ${interactionType.toLowerCase()}`}</Text>
         <Input
+          ref={inputRef}
           type="text"
+          placeholder="Enter a name to continue"
           value={title}
           onChange={event => setTitle(event.target.value)}
           css={{

package/src/Prebuilt/components/Polls/CreateQuestions/{DeleteQuestionModal.jsx → DeleteQuestionModal.tsx}

@@ -5,7 +5,15 @@ import { Box, Flex } from '../../../../Layout';
 import { Dialog } from '../../../../Modal';
 import { Text } from '../../../../Text';
 
-export const DeleteQuestionModal = ({ open, setOpen, removeQuestion }) => {
+export const DeleteQuestionModal = ({
+  open,
+  setOpen,
+  removeQuestion,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  removeQuestion: () => void;
+}) => {
   return (
     <Dialog.Root open={open}>
       <Dialog.Overlay />