@100mslive/roomkit-react 0.1.12-alpha.0 → 0.1.13-alpha.0

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

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
+import { useMedia } from 'react-use';
+import { selectPermissions, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
+import { CrossIcon, PinIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+// @ts-ignore
+import { AnnotisedMessage } from './ChatBody';
+// @ts-ignore
+import { Navigation } from './Navigation';
+// @ts-ignore
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+const PINNED_MESSAGE_LENGTH = 75;
+
+export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (index: number) => void }) => {
+  const permissions = useHMSStore(selectPermissions);
+  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+  const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  const [hideOverflow, setHideOverflow] = useState(false);
+
+  const formattedPinnedMessage = hideOverflow
+    ? `${pinnedMessages?.[pinnedMessageIndex]?.text.slice(0, PINNED_MESSAGE_LENGTH)}... `
+    : pinnedMessages?.[pinnedMessageIndex]?.text;
+
+  const pinnedMessageRef = useRef(null);
+  const showPreviousPinnedMessage = () => {
+    const previousIndex = Math.max(pinnedMessageIndex - 1, 0);
+    setHideOverflow(pinnedMessages[previousIndex].text.length > PINNED_MESSAGE_LENGTH);
+    setPinnedMessageIndex(previousIndex);
+  };
+
+  const showNextPinnedMessage = () => {
+    const nextIndex = Math.min(pinnedMessageIndex + 1, pinnedMessages.length - 1);
+    setHideOverflow(pinnedMessages[nextIndex].text.length > PINNED_MESSAGE_LENGTH);
+    setPinnedMessageIndex(nextIndex);
+  };
+
+  const swipeHandlers = useSwipeable({
+    onSwipedUp: () => showNextPinnedMessage(),
+    onSwipedDown: () => showPreviousPinnedMessage(),
+  });
+
+  useEffect(() => {
+    setHideOverflow(
+      !!(
+        pinnedMessages?.[pinnedMessageIndex]?.text?.length &&
+        pinnedMessages?.[pinnedMessageIndex]?.text.length > PINNED_MESSAGE_LENGTH
+      ),
+    );
+  }, [pinnedMessageIndex, pinnedMessages]);
+
+  return pinnedMessages?.[pinnedMessageIndex]?.text ? (
+    <Flex ref={pinnedMessageRef} align="center" css={{ w: '100%', gap: '$4' }}>
+      <Flex
+        title={pinnedMessages[pinnedMessageIndex].text}
+        css={{
+          p: '$4',
+          color: '$on_surface_medium',
+          bg: isMobile ? 'rgba(0, 0, 0, 0.64)' : '$surface_default',
+          r: '$1',
+          gap: '$4',
+          mb: '$8',
+          mt: '$8',
+          flexGrow: 1,
+        }}
+        align="center"
+        justify="between"
+      >
+        <Navigation
+          index={pinnedMessageIndex}
+          total={pinnedMessages.length}
+          showPrevious={showPreviousPinnedMessage}
+          showNext={showNextPinnedMessage}
+          isMobile={isMobile}
+        />
+        <PinIcon />
+
+        <Box
+          css={{
+            w: '100%',
+            maxHeight: '$18',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            wordBreak: 'break-word',
+            '& p span': {
+              color: '$primary_default',
+            },
+          }}
+        >
+          <Text variant="sm" css={{ color: '$on_surface_medium' }} {...swipeHandlers}>
+            <AnnotisedMessage message={formattedPinnedMessage} />
+            {hideOverflow ? (
+              <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(false)}>
+                See more
+              </span>
+            ) : null}
+          </Text>
+        </Box>
+        {permissions?.removeOthers && (
+          <Flex
+            onClick={() => {
+              clearPinnedMessage(pinnedMessageIndex);
+              setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
+            }}
+            css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+          >
+            <CrossIcon />
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  ) : null;
+};

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,10 +1,6 @@
 import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-} from '@100mslive/types-prebuilt';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
 import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
@@ -27,6 +23,7 @@ import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
 import { PollsToggle } from './PollsToggle';
+import { ConferencingScreenElements } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
@@ -39,7 +36,7 @@ export const Footer = ({
   elements,
 }: {
   screenType: keyof ConferencingScreen;
-  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+  elements: ConferencingScreenElements;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay;
@@ -82,7 +79,7 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
-        {isMobile ? null : <VBToggle />}
+        {!isMobile && elements.virtual_background ? <VBToggle /> : null}
       </AppFooter.Left>
       <AppFooter.Center
         css={{

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

@@ -61,7 +61,7 @@ export const AudioActions = () => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
 
   // don't show speaker selector where the API is not supported, and use
-  // a generic word("Audio") for Mic. In some cases(Chrome Android for e.g.) this changes both mic and speaker keeping them in sync.
+  // a generic word("Audio") for Mic. In some cases(Chrome Android for example) this changes both mic and speaker keeping them in sync.
   const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
   const { audioInput, audioOutput } = allDevices;
   let availableAudioDevices = audioInput;

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -19,7 +19,6 @@ import { useHMSPrebuiltContext } from '../../AppContext';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import SidePane from '../../layouts/SidePane';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
 // @ts-ignore: No implicit Any
@@ -36,13 +35,13 @@ import SettingsModal from '../Settings/SettingsModal';
 import { VBToggle } from '../VirtualBackground/VBToggle';
 // @ts-ignore: No implicit Any
 import PreviewForm from './PreviewForm';
+import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore: No implicit Any
 import { calculateAvatarAndAttribBoxSize, getFormattedCount } from '../../common/utils';
-// @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
 const getParticipantChipContent = (peerCount = 0) => {
@@ -111,9 +110,8 @@ const PreviewJoin = ({
     });
     join();
   }, [join, name, setPreviewPreference]);
-  const roomLayout = useRoomLayout();
-
-  const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
+  const { elements = {} } = useRoomLayoutPreviewScreen();
+  const { preview_header: previewHeader = {}, virtual_background } = elements || {};
   const aspectRatio = useLocalTileAspectRatio();
   useEffect(() => {
     if (authToken) {
@@ -177,7 +175,7 @@ const PreviewJoin = ({
           </Flex>
         ) : null}
         <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
-          <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
+          <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
           <PreviewForm
             name={name}
             onChange={setName}
@@ -266,7 +264,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
   );
 };
 
-export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) => {
+export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boolean; vbEnabled: boolean }) => {
   const isMobile = useMedia(cssConfig.media.md);
 
   return (
@@ -279,7 +277,7 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) =>
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {!isMobile ? <VBToggle /> : null}
+        {!isMobile && vbEnabled ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -11,6 +11,7 @@ import { Flex, Text } from '../../..';
 // @ts-ignore: No implicit Any
 import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
 import { RequestPrompt } from './RequestPrompt';
+import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
@@ -23,6 +24,8 @@ export const RoleChangeRequestModal = () => {
   const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
   const name = useHMSStore(selectLocalPeerName);
   const { sendEvent } = useCustomEvent({ type: ROLE_CHANGE_DECLINED });
+  const { elements = {} } = useRoomLayoutPreviewScreen();
+  const { virtual_background } = elements || {};
 
   useEffect(() => {
     if (!roleChangeRequest?.role) {
@@ -61,7 +64,7 @@ export const RoleChangeRequestModal = () => {
       >
         <PreviewTile name={name || ''} />
 
-        <PreviewControls hideSettings={true} />
+        <PreviewControls hideSettings={true} vbEnabled={!!virtual_background} />
       </Flex>
     </>
   );

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -29,7 +29,7 @@ const Settings = ({ setHide }) => {
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   // don't show speaker selector where the API is not supported, and use
-  // a generic word("Audio") for Mic. In some cases(Chrome Android for e.g.) this changes both mic and speaker keeping them in sync.
+  // a generic word("Audio") for Mic. In some cases(Chrome Android for example) this changes both mic and speaker keeping them in sync.
   const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID(videoTrackId);

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -50,6 +50,7 @@ export const SidePaneTabs = React.memo<{
   const [activeRole, setActiveRole] = useState('');
   const peerCount = useHMSStore(selectPeerCount);
   const { elements } = useRoomLayoutConferencingScreen();
+  const chat_title = elements?.chat?.chat_title || 'Chat';
   const showChat = !!elements?.chat;
   const showParticipants = !!elements?.participant_list;
   const hideTabs = !(showChat && showParticipants);
@@ -109,7 +110,7 @@ export const SidePaneTabs = React.memo<{
             <>
               <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
                 {showChat ? (
-                  'Chat'
+                  chat_title
                 ) : (
                   <span>
                     Participants <ParticipantCount count={peerCount} />
@@ -141,7 +142,7 @@ export const SidePaneTabs = React.memo<{
                     color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
                   }}
                 >
-                  Chat
+                  {chat_title}
                 </Tabs.Trigger>
                 <Tabs.Trigger
                   value={SIDE_PANE_OPTIONS.PARTICIPANTS}

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import {
+  ChatIcon,
   ChatUnreadIcon,
   ConnectivityIcon,
   HandIcon,
@@ -58,6 +59,7 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
     </Button>
   );
 });
+
 export const ToastConfig = {
   PEER_LIST: {
     single: function (notification) {
@@ -144,6 +146,24 @@ export const ToastConfig = {
       };
     },
   },
+  CHAT_PAUSED: {
+    single: notification => {
+      return {
+        title: `Chat paused by ${notification.data?.name}`,
+        icon: <ChatIcon />,
+        action: <ChatAction />,
+      };
+    },
+  },
+  CHAT_RESUMED: {
+    single: notification => {
+      return {
+        title: `Chat resumed by ${notification.data?.name}`,
+        icon: <ChatUnreadIcon />,
+        action: <ChatAction />,
+      };
+    },
+  },
   RECONNECTED: {
     single: () => {
       return {

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

@@ -1,13 +1,13 @@
 import React from 'react';
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import { Box } from '../../../Layout';
 import { Text } from '../../../Text';
 import { VBOption } from './VBOption';
-import { VB_EFFECT } from './constants';
 
 export const VBCollection = ({
   options,
   title,
-  activeBackgroundType = '',
+  activeBackgroundType = HMSVirtualBackgroundTypes.NONE,
   activeBackground = '',
 }: {
   options: {
@@ -19,7 +19,7 @@ export const VBCollection = ({
   }[];
   title: string;
   activeBackground: HTMLImageElement | string;
-  activeBackgroundType: string;
+  activeBackgroundType: HMSVirtualBackgroundTypes;
 }) => {
   if (options.length === 0) {
     return null;
@@ -35,7 +35,7 @@ export const VBCollection = ({
             key={option?.mediaURL || option?.title}
             {...option}
             isActive={
-              ([VB_EFFECT.NONE, VB_EFFECT.BLUR].includes(activeBackgroundType) &&
+              ([HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.BLUR].includes(activeBackgroundType) &&
                 option.type === activeBackgroundType) ||
               activeBackground === option?.mediaURL
             }

package/src/Prebuilt/components/VirtualBackground/{VBPicker.jsx → VBPicker.tsx}

@@ -1,4 +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 {
   HMSRoomState,
   selectIsLargeRoom,
@@ -15,22 +17,27 @@ import { BlurPersonHighIcon, CloseIcon, CrossCircleIcon } from '@100mslive/react
 import { Box, Flex, Video } from '../../../index';
 import { Text } from '../../../Text';
 import { VBCollection } from './VBCollection';
+// @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
+// @ts-ignore
 import { useUISettings } from '../AppData/useUISettings';
+// @ts-ignore
 import { SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
-import { defaultMedia, VB_EFFECT, vbPlugin } from './constants';
+import { defaultMedia, vbPlugin } from './constants';
 
 const iconDims = { height: '40px', width: '40px' };
 const MAX_RETRIES = 2;
 
-export const VBPicker = () => {
+export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions();
   const role = useHMSStore(selectLocalPeerRole);
   const [isVBSupported, setIsVBSupported] = useState(false);
   const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
   const localPeer = useHMSStore(selectLocalPeer);
+  // @ts-ignore
   const [background, setBackground] = useState(vbPlugin.background);
+  // @ts-ignore
   const [backgroundType, setBackgroundType] = useState(vbPlugin.backgroundType);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
@@ -39,13 +46,14 @@ export const VBPicker = () => {
   const roomState = useHMSStore(selectRoomState);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const addedPluginToVideoTrack = useRef(false);
+  const mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
 
   // 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
   const showVideoTile = isVideoOn && isLargeRoom && roomState !== HMSRoomState.Preview;
 
   const clearVBState = () => {
-    setBackground(VB_EFFECT.NONE);
-    setBackgroundType(VB_EFFECT.NONE);
+    setBackground(HMSVirtualBackgroundTypes.NONE);
+    setBackgroundType(HMSVirtualBackgroundTypes.NONE);
   };
 
   useEffect(() => {
@@ -62,7 +70,7 @@ export const VBPicker = () => {
 
   async function disableEffects() {
     if (vbPlugin) {
-      vbPlugin.setBackground(VB_EFFECT.NONE, VB_EFFECT.NONE);
+      vbPlugin.setBackground(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
       clearVBState();
     }
   }
@@ -75,18 +83,18 @@ export const VBPicker = () => {
         img.alt = 'VB';
         img.src = mediaURL;
         try {
-          await vbPlugin.setBackground(img, VB_EFFECT.MEDIA);
+          await vbPlugin.setBackground(img, HMSVirtualBackgroundTypes.IMAGE);
         } catch (e) {
           console.error(e);
           if (retries++ < MAX_RETRIES) {
-            await vbPlugin.setBackground(img, VB_EFFECT.MEDIA);
+            await vbPlugin.setBackground(img, HMSVirtualBackgroundTypes.IMAGE);
           }
         }
       } else if (blurPower) {
-        await vbPlugin.setBackground(VB_EFFECT.BLUR, VB_EFFECT.BLUR);
+        await vbPlugin.setBackground(HMSVirtualBackgroundTypes.BLUR, HMSVirtualBackgroundTypes.BLUR);
       }
-      setBackground(mediaURL || VB_EFFECT.BLUR);
-      setBackgroundType(mediaURL ? VB_EFFECT.MEDIA : VB_EFFECT.BLUR);
+      setBackground(mediaURL || HMSVirtualBackgroundTypes.BLUR);
+      setBackgroundType(mediaURL ? HMSVirtualBackgroundTypes.IMAGE : HMSVirtualBackgroundTypes.BLUR);
       if (role && !addedPluginToVideoTrack.current) {
         await hmsActions.addPluginToVideoTrack(vbPlugin, Math.floor(role.publishParams.video.frameRate / 2));
         addedPluginToVideoTrack.current = true;
@@ -136,29 +144,30 @@ export const VBPicker = () => {
           {
             title: 'No effect',
             icon: <CrossCircleIcon style={iconDims} />,
-            type: VB_EFFECT.NONE,
+            type: HMSVirtualBackgroundTypes.NONE,
             onClick: async () => await disableEffects(),
           },
           {
             title: 'Blur',
             icon: <BlurPersonHighIcon style={iconDims} />,
-            type: VB_EFFECT.BLUR,
+            type: HMSVirtualBackgroundTypes.BLUR,
             onClick: async () => await addPlugin({ blurPower: 0.5 }),
           },
         ]}
-        activeBackgroundType={backgroundType || VB_EFFECT.NONE}
-        activeBackground={vbPlugin.background?.src || vbPlugin.background || VB_EFFECT.NONE}
+        activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
+        // @ts-ignore
+        activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
       />
 
       <VBCollection
         title="Backgrounds"
-        options={defaultMedia.map(mediaURL => ({
-          type: VB_EFFECT.MEDIA,
+        options={mediaList.map(mediaURL => ({
+          type: HMSVirtualBackgroundTypes.IMAGE,
           mediaURL,
           onClick: async () => await addPlugin({ mediaURL }),
         }))}
-        activeBackgroundType={backgroundType || VB_EFFECT.NONE}
-        activeBackground={background?.src || background || VB_EFFECT.NONE}
+        activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
+        activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
       />
     </Box>
   );

package/src/Prebuilt/components/VirtualBackground/constants.ts

@@ -1,13 +1,5 @@
 import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 
-// Will support all media, setting to image here to test with current plugin interface
-export const VB_EFFECT = {
-  BLUR: 'blur',
-  BEAUTIFY: 'BEAUTIFY',
-  NONE: 'none',
-  MEDIA: 'image',
-};
-
 export const defaultMedia = [
   'https://assets.100ms.live/webapp/vb-mini/vb-1.jpg',
   'https://assets.100ms.live/webapp/vb-mini/vb-2.jpg',

package/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx

@@ -42,7 +42,16 @@ export const useAutoStartStreaming = () => {
       streamStartedRef.current = false;
       setHLSStarted(false);
     }
-  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI, isRTMPRunning]);
+  }, [
+    hmsActions,
+    isHLSRunning,
+    isHLSStarted,
+    setHLSStarted,
+    showStreamingUI,
+    isRTMPRunning,
+    isHLSRecordingOn,
+    isBrowserRecordingOn,
+  ]);
 
   useEffect(() => {
     if (!isHLSStarted && !isHLSRunning) {

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

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

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

@@ -0,0 +1,76 @@
+import { useCallback } from 'react';
+import { HMSMessage, selectPeerNameByID, useHMSActions, useHMSVanillaStore } from '@100mslive/react-sdk';
+// @ts-ignore
+import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+type PinnedMessage = {
+  text: string;
+  id: string;
+  authorId: string;
+  pinnedBy: string;
+};
+
+/**
+ * set pinned chat message by updating the session store
+ */
+export const useSetPinnedMessages = () => {
+  const hmsActions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
+  // const pinnedMessages: PinnedMessage[] = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+
+  const setPinnedMessages = useCallback(
+    async (pinnedMessages: PinnedMessage[] = [], message: HMSMessage, pinnedBy: string) => {
+      const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
+      const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.sender || '' };
+
+      if (message && peerName) {
+        newPinnedMessage['text'] = `${peerName}: ${message.message}`;
+      } else if (message) {
+        newPinnedMessage['text'] = message.message;
+      }
+
+      if (newPinnedMessage && !pinnedMessages.find(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 }));
+      }
+    },
+    [hmsActions, vanillaStore],
+  );
+
+  const removePinnedMessage = useCallback(
+    async (pinnedMessages: PinnedMessage[] = [], indexToRemove: number) => {
+      if (pinnedMessages[indexToRemove]) {
+        await hmsActions.sessionStore
+          .set(
+            SESSION_STORE_KEY.PINNED_MESSAGES,
+            pinnedMessages.filter((_, index: number) => index !== indexToRemove),
+          )
+          .catch(err => ToastManager.addToast({ title: err.description }));
+      }
+    },
+    [hmsActions],
+  );
+
+  const unpinBlacklistedMessages = useCallback(
+    async (
+      pinnedMessages: PinnedMessage[] = [],
+      blacklistedPeerIDSet: Set<string>,
+      blacklistedMessageIDSet: Set<string>,
+    ) => {
+      const filteredPinnedMessages = pinnedMessages?.filter(
+        pinnedMessage =>
+          !blacklistedMessageIDSet?.has(pinnedMessage.id) && !blacklistedPeerIDSet.has(pinnedMessage.authorId),
+      );
+
+      await hmsActions.sessionStore
+        .set(SESSION_STORE_KEY.PINNED_MESSAGES, filteredPinnedMessages)
+        .catch(err => ToastManager.addToast({ title: err.description }));
+    },
+    [hmsActions],
+  );
+
+  return { setPinnedMessages, removePinnedMessage, unpinBlacklistedMessages };
+};

package/src/Prebuilt/layouts/SidePane.tsx

@@ -41,7 +41,7 @@ const SidePane = ({
     ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker />;
+    ViewComponent = <VBPicker {...elements.virtual_background} />;
   }
 
   useEffect(() => {