@100mslive/roomkit-react 0.1.12 → 0.1.13

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

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
+import { useMedia } from 'react-use';
+import { 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 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 canOverflow = pinnedMessages?.[pinnedMessageIndex]?.text?.length > PINNED_MESSAGE_LENGTH || 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} />
+            {canOverflow ? (
+              <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(prev => !prev)}>
+                $nbsp;{hideOverflow ? 'See more' : 'Collapse'}
+              </span>
+            ) : null}
+          </Text>
+        </Box>
+
+        <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/Notifications/ChatNotifications.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { selectLocalPeerID, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
+import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
+// @ts-ignore
+import { ToastManager } from '../Toast/ToastManager';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+const NOTIFICATION_TIME_DIFFERENCE = 5000;
+
+export const ChatNotifications = () => {
+  const chatState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE));
+  const localPeerId = useHMSStore(selectLocalPeerID);
+
+  useEffect(() => {
+    if (!chatState || chatState.updatedBy?.peerId === localPeerId) {
+      return;
+    }
+
+    const showToast = Date.now() - chatState.updatedAt < NOTIFICATION_TIME_DIFFERENCE;
+
+    if (!showToast) {
+      return;
+    }
+
+    const notification = {
+      id: uuid(),
+      icon: chatState.enabled ? <ChatUnreadIcon /> : <ChatIcon />,
+      title: `Chat ${chatState.enabled ? 'resumed' : 'paused'} by ${chatState.updatedBy?.userName}`,
+    };
+    ToastManager.addToast(notification);
+  }, [chatState]);
+  return <></>;
+};

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -20,6 +20,7 @@ import { ToastBatcher } from '../Toast/ToastBatcher';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
+import { ChatNotifications } from './ChatNotifications';
 import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorModal } from './PermissionErrorModal';
@@ -186,6 +187,7 @@ export function Notifications() {
       <AutoplayBlockedModal />
       <PermissionErrorModal />
       <InitErrorModal />
+      <ChatNotifications />
     </>
   );
 }

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,6 +1,6 @@
 // @ts-check
 import React, { useCallback, useMemo, useState } from 'react';
-import { selectLocalPeerID, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, IconButton, Input, styled, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
@@ -38,9 +38,11 @@ export const QuestionCard = ({
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const localPeerResponse = responses?.find(response => response.peer?.peerid === localPeerID);
-  const isLocalPeerCreator = localPeerID === startedBy;
+  const localPeer = useHMSStore(selectLocalPeer);
+  const localPeerResponse = responses?.find(
+    response => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId,
+  );
+  const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const roleCanViewResponse =
     !rolesThatCanViewResponses ||

package/src/Prebuilt/components/Polls/Voting/TimedVoting.jsx

@@ -8,8 +8,9 @@ import { QuestionCard } from './QuestionCard';
  * @returns
  */
 export const TimedView = ({ poll }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const activeQuestion = poll.questions?.[currentIndex];
+  // backend question index starts at 1
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
   if (!activeQuestion) {
     return null;
   }

package/src/Prebuilt/components/Polls/common/VoteCount.jsx

@@ -19,10 +19,12 @@ export const VoteCount = ({ isQuiz, voteCount, isCorrectAnswer }) => {
           {isCorrectAnswer ? 'Correct' : 'Incorrect'}
         </Text>
       )}
-      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-        {voteCount}&nbsp;
-        {voteCount === 1 ? 'vote' : 'votes'}
-      </Text>
+      {voteCount ? (
+        <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+          {voteCount}&nbsp;
+          {voteCount === 1 ? 'vote' : 'votes'}
+        </Text>
+      ) : null}
     </Flex>
   );
 };

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}
@@ -188,7 +186,7 @@ const PreviewJoin = ({
           />
         </Box>
       </Container>
-      <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%' }}>
+      <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%', overflow: 'hidden' }}>
         <SidePane screenType="default" />
       </Box>
     </Flex>
@@ -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

@@ -58,6 +58,7 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
     </Button>
   );
 });
+
 export const ToastConfig = {
   PEER_LIST: {
     single: function (notification) {

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,15 @@ 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];
 
+  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
-  const showVideoTile = isVideoOn && isLargeRoom && roomState !== HMSRoomState.Preview;
+  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
 
   const clearVBState = () => {
-    setBackground(VB_EFFECT.NONE);
-    setBackgroundType(VB_EFFECT.NONE);
+    setBackground(HMSVirtualBackgroundTypes.NONE);
+    setBackgroundType(HMSVirtualBackgroundTypes.NONE);
   };
 
   useEffect(() => {
@@ -62,7 +71,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 +84,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;
@@ -108,8 +117,8 @@ export const VBPicker = () => {
   }
 
   return (
-    <Box css={{ maxHeight: '100%', overflowY: 'auto', pr: '$6' }}>
-      <Flex align="center" justify="between" css={{ w: '100%', position: 'sticky', top: 0 }}>
+    <Flex css={{ pr: '$6', size: '100%' }} direction="column">
+      <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
         <Text variant="h6" css={{ color: '$on_surface_high' }}>
           Virtual Background
         </Text>
@@ -126,40 +135,51 @@ export const VBPicker = () => {
           mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
           trackId={localPeer?.videoTrack}
           data-testid="preview_tile"
-          css={{ width: '100%', height: '16rem', position: 'sticky', top: '$17' }}
+          css={{ width: '100%', height: '16rem' }}
         />
       ) : null}
 
-      <VBCollection
-        title="Effects"
-        options={[
-          {
-            title: 'No effect',
-            icon: <CrossCircleIcon style={iconDims} />,
-            type: VB_EFFECT.NONE,
-            onClick: async () => await disableEffects(),
-          },
-          {
-            title: 'Blur',
-            icon: <BlurPersonHighIcon style={iconDims} />,
-            type: VB_EFFECT.BLUR,
-            onClick: async () => await addPlugin({ blurPower: 0.5 }),
-          },
-        ]}
-        activeBackgroundType={backgroundType || VB_EFFECT.NONE}
-        activeBackground={vbPlugin.background?.src || vbPlugin.background || VB_EFFECT.NONE}
-      />
+      <Box
+        css={{
+          mt: '$4',
+          overflowY: 'auto',
+          flex: '1 1 0',
+          mr: '-$10',
+          pr: '$10',
+        }}
+      >
+        <VBCollection
+          title="Effects"
+          options={[
+            {
+              title: 'No effect',
+              icon: <CrossCircleIcon style={iconDims} />,
+              type: HMSVirtualBackgroundTypes.NONE,
+              onClick: async () => await disableEffects(),
+            },
+            {
+              title: 'Blur',
+              icon: <BlurPersonHighIcon style={iconDims} />,
+              type: HMSVirtualBackgroundTypes.BLUR,
+              onClick: async () => await addPlugin({ blurPower: 0.5 }),
+            },
+          ]}
+          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,
-          mediaURL,
-          onClick: async () => await addPlugin({ mediaURL }),
-        }))}
-        activeBackgroundType={backgroundType || VB_EFFECT.NONE}
-        activeBackground={background?.src || background || VB_EFFECT.NONE}
-      />
-    </Box>
+        <VBCollection
+          title="Backgrounds"
+          options={mediaList.map(mediaURL => ({
+            type: HMSVirtualBackgroundTypes.IMAGE,
+            mediaURL,
+            onClick: async () => await addPlugin({ mediaURL }),
+          }))}
+          activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
+          activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
+        />
+      </Box>
+    </Flex>
   );
 };

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',