@100mslive/roomkit-react 0.1.14-alpha.1 → 0.1.14-alpha.2

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
@@ -10,13 +10,13 @@ import { PaginatedParticipants } from './Footer/PaginatedParticipants';
 import { ParticipantList } from './Footer/ParticipantList';
 import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
 import { Tooltip } from '../../Tooltip';
+import { ChatSettings } from './ChatSettings';
 // @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { getFormattedCount } from '../common/utils';
-// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../common/constants';
 
 const tabTriggerCSS = {
@@ -40,9 +40,8 @@ const ParticipantCount = ({ count }: { count: number }) => {
 
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
-  screenType: keyof ConferencingScreen;
   hideControls?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls }) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
@@ -58,6 +57,7 @@ export const SidePaneTabs = React.memo<{
   const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
   const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
 
   useEffect(() => {
     if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
@@ -103,7 +103,7 @@ export const SidePaneTabs = React.memo<{
       }}
     >
       {isOverlayChat && isChatOpen && showChat ? (
-        <Chat screenType={screenType} />
+        <Chat />
       ) : (
         <>
           {hideTabs ? (
@@ -118,11 +118,7 @@ export const SidePaneTabs = React.memo<{
                 )}
               </Text>
 
-              {showChat ? (
-                <Chat screenType={screenType} />
-              ) : (
-                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
-              )}
+              {showChat ? <Chat /> : <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />}
             </>
           ) : (
             <Tabs.Root
@@ -133,55 +129,57 @@ export const SidePaneTabs = React.memo<{
                 size: '100%',
               }}
             >
-              <Tabs.List css={{ w: 'calc(100% - $12)', p: '$2', borderRadius: '$2', bg: '$surface_default' }}>
-                <Tabs.Trigger
-                  value={SIDE_PANE_OPTIONS.CHAT}
-                  onClick={toggleChat}
-                  css={{
-                    ...tabTriggerCSS,
-                    color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
-                  }}
-                >
-                  {chat_title}
-                </Tabs.Trigger>
-                <Tabs.Trigger
-                  value={SIDE_PANE_OPTIONS.PARTICIPANTS}
-                  onClick={toggleParticipants}
-                  css={{
-                    ...tabTriggerCSS,
-                    color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
-                  }}
-                >
-                  Participants &nbsp; <ParticipantCount count={peerCount} />
-                </Tabs.Trigger>
-              </Tabs.List>
+              <Flex css={{ w: '100%' }}>
+                <Tabs.List css={{ flexGrow: 1, borderRadius: '$2', bg: '$surface_default' }}>
+                  <Tabs.Trigger
+                    value={SIDE_PANE_OPTIONS.CHAT}
+                    onClick={toggleChat}
+                    css={{
+                      ...tabTriggerCSS,
+                      color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+                    }}
+                  >
+                    {chat_title}
+                  </Tabs.Trigger>
+                  <Tabs.Trigger
+                    value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+                    onClick={toggleParticipants}
+                    css={{
+                      ...tabTriggerCSS,
+                      color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+                    }}
+                  >
+                    Participants &nbsp; <ParticipantCount count={peerCount} />
+                  </Tabs.Trigger>
+                </Tabs.List>
+                {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>
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
                 <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
               </Tabs.Content>
               <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
-                <Chat screenType={screenType} />
+                <Chat />
               </Tabs.Content>
             </Tabs.Root>
           )}
         </>
       )}
-
-      {isOverlayChat && isChatOpen ? null : (
-        <IconButton
-          css={{ position: 'absolute', right: '$9', top: '$11', '@md': { top: '$8', right: '$6' } }}
-          onClick={e => {
-            e.stopPropagation();
-            if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-              toggleChat();
-            } else {
-              toggleParticipants();
-            }
-          }}
-          data-testid="close_chat"
-        >
-          <CrossIcon />
-        </IconButton>
-      )}
     </Flex>
   );
 });

package/src/Prebuilt/components/TileMenu/{TileMenuContent.jsx → TileMenuContent.tsx}

@@ -1,6 +1,10 @@
 import React, { Fragment } from 'react';
 import { useMedia } from 'react-use';
+import { HMSException } from '@100mslive/hms-video';
 import {
+  HMSSimulcastLayerDefinition,
+  HMSTrackID,
+  HMSVideoTrack,
   selectPermissions,
   selectSessionStore,
   selectTrackByID,
@@ -27,13 +31,24 @@ import { Slider } from '../../../Slider';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
 import { StyledMenuTile } from '../../../TileMenu';
+import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore
 import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
 import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
 
-export const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
-  trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
+export const isSameTile = ({
+  trackId,
+  videoTrackID,
+  audioTrackID,
+}: {
+  trackId: HMSTrackID;
+  videoTrackID: string;
+  audioTrackID: string;
+}) => trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
 
 const spacingCSS = { '@md': { my: '$8', fontWeight: '$semiBold', fontSize: 'sm' } };
 
@@ -42,15 +57,18 @@ const SpotlightActions = ({
   onSpotLightClick = () => {
     return;
   },
+}: {
+  peerId: string;
+  onSpotLightClick: () => void;
 }) => {
   const hmsActions = useHMSActions();
   const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
   const isTileSpotlighted = spotlightPeerId === peerId;
 
-  const setSpotlightPeerId = peer =>
+  const setSpotlightPeerId = (peerIdToSpotlight?: string) =>
     hmsActions.sessionStore
-      .set(SESSION_STORE_KEY.SPOTLIGHT, peer)
-      .catch(err => ToastManager.addToast({ title: err.description }));
+      .set(SESSION_STORE_KEY.SPOTLIGHT, peerIdToSpotlight)
+      .catch((err: HMSException) => ToastManager.addToast({ title: err.description }));
 
   return (
     <StyledMenuTile.ItemButton
@@ -70,7 +88,7 @@ const SpotlightActions = ({
   );
 };
 
-const PinActions = ({ audioTrackID, videoTrackID }) => {
+const PinActions = ({ audioTrackID, videoTrackID }: { videoTrackID: string; audioTrackID: string }) => {
   const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
 
   const isTilePinned = isSameTile({
@@ -105,20 +123,20 @@ const MinimiseInset = () => {
   );
 };
 
-const SimulcastLayers = ({ trackId }) => {
-  const track = useHMSStore(selectTrackByID(trackId));
+const SimulcastLayers = ({ trackId }: { trackId: HMSTrackID }) => {
+  const track: HMSVideoTrack = useHMSStore(selectTrackByID(trackId)) as HMSVideoTrack;
   const actions = useHMSActions();
   const bg = useDropdownSelection();
   if (!track?.layerDefinitions?.length || track.degraded || !track.enabled) {
     return null;
   }
-  const currentLayer = track.layerDefinitions.find(layer => layer.layer === track.layer);
+  const currentLayer = track.layerDefinitions.find((layer: HMSSimulcastLayerDefinition) => layer.layer === track.layer);
   return (
     <Fragment>
       <StyledMenuTile.ItemButton css={{ color: '$on_surface_medium', cursor: 'default' }}>
         Select maximum resolution
       </StyledMenuTile.ItemButton>
-      {track.layerDefinitions.map(layer => {
+      {track.layerDefinitions.map((layer: HMSSimulcastLayerDefinition) => {
         return (
           <StyledMenuTile.ItemButton
             key={layer.layer}
@@ -183,25 +201,36 @@ const SimulcastLayers = ({ trackId }) => {
   );
 };
 
-export const TileMenuContent = props => {
+export const TileMenuContent = ({
+  videoTrackID,
+  audioTrackID,
+  isLocal,
+  isScreenshare,
+  showSpotlight,
+  showPinAction,
+  peerID,
+  canMinimise,
+  closeSheetOnClick = () => {
+    return;
+  },
+  openNameChangeModal = () => {
+    return;
+  },
+}: {
+  videoTrackID: string;
+  audioTrackID: string;
+  isLocal: boolean;
+  isScreenshare: boolean;
+  showSpotlight: boolean;
+  showPinAction: boolean;
+  peerID: string;
+  canMinimise: boolean;
+  closeSheetOnClick: () => void;
+  openNameChangeModal: () => void;
+}) => {
   const actions = useHMSActions();
-  const { removeOthers } = useHMSStore(selectPermissions);
-  const {
-    videoTrackID,
-    audioTrackID,
-    isLocal,
-    isScreenshare,
-    showSpotlight,
-    showPinAction,
-    peerID,
-    canMinimise,
-    closeSheetOnClick = () => {
-      return;
-    },
-    openNameChangeModal = () => {
-      return;
-    },
-  } = props;
+  const removeOthers: boolean | undefined = useHMSStore(selectPermissions)?.removeOthers;
+  const { userName } = useHMSPrebuiltContext();
 
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
     audioTrackID,
@@ -215,22 +244,24 @@ export const TileMenuContent = props => {
   const isMobile = useMedia(cssConfig.media.md);
 
   return isLocal ? (
-    (showPinAction || canMinimise) && (
+    (showPinAction || canMinimise || !userName || showSpotlight) && (
       <>
         {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
         {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
         {canMinimise && <MinimiseInset />}
-        <StyledMenuTile.ItemButton
-          onClick={() => {
-            openNameChangeModal();
-            closeSheetOnClick();
-          }}
-        >
-          <PencilIcon height={20} width={20} />
-          <Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
-            Change Name
-          </Text>
-        </StyledMenuTile.ItemButton>
+        {!userName && (
+          <StyledMenuTile.ItemButton
+            onClick={() => {
+              openNameChangeModal();
+              closeSheetOnClick();
+            }}
+          >
+            <PencilIcon height={20} width={20} />
+            <Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
+              Change Name
+            </Text>
+          </StyledMenuTile.ItemButton>
+        )}
       </>
     )
   ) : (
@@ -271,7 +302,7 @@ export const TileMenuContent = props => {
               Volume ({volume})
             </Box>
           </Flex>
-          <Slider css={{ my: '0.5rem' }} step={5} value={[volume]} onValueChange={e => setVolume(e[0])} />
+          <Slider css={{ my: '0.5rem' }} step={5} value={[volume || 100]} onValueChange={e => setVolume?.(e[0])} />
         </StyledMenuTile.VolumeItem>
       ) : null}
 

package/src/Prebuilt/components/VirtualBackground/VBCollection.tsx

@@ -30,8 +30,9 @@ export const VBCollection = ({
         {title}
       </Text>
       <Box css={{ py: '$4', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '$8' }}>
-        {options.map(option => (
+        {options.map((option, index) => (
           <VBOption.Root
+            testid={option.type === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.type}
             key={option?.mediaURL || option?.title}
             {...option}
             isActive={

package/src/Prebuilt/components/VirtualBackground/VBOption.tsx

@@ -7,13 +7,16 @@ const Root = ({
   mediaURL,
   isActive,
   children,
+  testid = '',
 }: {
   onClick?: () => Promise<void>;
   mediaURL?: string;
   isActive: boolean;
   children?: React.JSX.Element[];
+  testid: string;
 }) => (
   <Flex
+    data-testid={testid}
     direction="column"
     align="center"
     css={{

package/src/Prebuilt/components/VirtualBackground/VBToggle.jsx

@@ -17,7 +17,7 @@ export const VBToggle = () => {
 
   return (
     <Tooltip side="top" disabled={isVBOpen} title="Configure Virtual Background">
-      <IconButton active={!isVBOpen} onClick={toggleVB}>
+      <IconButton active={!isVBOpen} onClick={toggleVB} data-testid="virtual_bg_btn">
         <VirtualBackgroundIcon />
       </IconButton>
     </Tooltip>

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
+import { selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
 import { SESSION_STORE_KEY } from '../../common/constants';
@@ -8,14 +8,16 @@ export const useChatBlacklist = (
   sessionStoreKey: SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST | SESSION_STORE_KEY.CHAT_PEER_BLACKLIST,
 ) => {
   const hmsActions = useHMSActions();
+  const blacklistedIDs = useHMSStore(selectSessionStore(sessionStoreKey));
 
   const blacklistItem = useCallback(
-    async (blacklistedIDs: string[], blacklistID: string) =>
+    async (blacklistID: string) => {
       await hmsActions.sessionStore
-        .set(sessionStoreKey, [...blacklistedIDs, blacklistID])
-        .catch(err => ToastManager.addToast({ title: err.description })),
-    [hmsActions, sessionStoreKey],
+        .set(sessionStoreKey, [...(blacklistedIDs || []), blacklistID])
+        .catch(err => ToastManager.addToast({ title: err.description }));
+    },
+    [hmsActions, sessionStoreKey, blacklistedIDs],
   );
 
-  return { blacklistItem };
+  return { blacklistItem, blacklistedIDs };
 };

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

@@ -54,14 +54,9 @@ export const useSetPinnedMessages = () => {
   );
 
   const unpinBlacklistedMessages = useCallback(
-    async (
-      pinnedMessages: PinnedMessage[] = [],
-      blacklistedPeerIDSet: Set<string>,
-      blacklistedMessageIDSet: Set<string>,
-    ) => {
+    async (pinnedMessages: PinnedMessage[] = [], blacklistedMessageIDSet: Set<string>) => {
       const filteredPinnedMessages = pinnedMessages?.filter(
-        pinnedMessage =>
-          !blacklistedMessageIDSet?.has(pinnedMessage.id) && !blacklistedPeerIDSet.has(pinnedMessage.authorId),
+        pinnedMessage => !blacklistedMessageIDSet?.has(pinnedMessage.id),
       );
 
       await hmsActions.sessionStore

package/src/Prebuilt/layouts/SidePane.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { Polls } from '../components/Polls/Polls';
 import { SidePaneTabs } from '../components/SidePaneTabs';
@@ -15,15 +14,12 @@ import { config as cssConfig } from '../../Theme';
 import { useSidepaneReset } from '../components/AppData/useSidepane';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { translateAcross } from '../../utils';
-// @ts-ignore: No implicit Any
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
 
 const SidePane = ({
-  screenType,
   tileProps,
   hideControls = false,
 }: {
-  screenType: keyof ConferencingScreen;
   tileProps?: TileCustomisationProps;
   hideControls?: boolean;
 }) => {
@@ -38,7 +34,7 @@ const SidePane = ({
     ViewComponent = <Polls />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
+    ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
     ViewComponent = <VBPicker {...elements.virtual_background} />;

package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts

@@ -36,6 +36,7 @@ export const defaultLayout: Layout = {
             chat_title: 'Chat',
             allow_pinning_messages: true,
             message_placeholder: 'Send a message...',
+            roles_whitelist: [],
             real_time_controls: {
               can_disable_chat: true,
               can_block_user: true,