feat: vb picker

packages/react-icons/src/BlurPersonHighIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgBlurPersonHighIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.95 9.5a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Zm-1.65 2.75a1.65 1.65 0 1 1 3.3 0 1.65 1.65 0 0 1-3.3 0Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.75 16.1A2.75 2.75 0 0 0 7 18.85v1.1a.55.55 0 1 0 1.1 0v-1.1a1.65 1.65 0 0 1 1.65-1.65h4.4a1.65 1.65 0 0 1 1.65 1.65v1.1a.55.55 0 1 0 1.1 0v-1.1a2.75 2.75 0 0 0-2.75-2.75h-4.4ZM5 14c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM5 10c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM2.5 10c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM5 6c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM21.5 10c0 .28-.22.5-.5.5s-.5-.22-.5-.5.22-.5.5-.5.5.22.5.5ZM15 6c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1ZM14.5 3c0 .28-.22.5-.5.5s-.5-.22-.5-.5.22-.5.5-.5.5.22.5.5ZM2.5 14c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM10.5 3c0 .28-.22.5-.5.5s-.5-.22-.5-.5.22-.5.5-.5.5.22.5.5ZM11 6c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1ZM17 14c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM17 10c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM17 6c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM20.5 14c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgBlurPersonHighIcon;

packages/react-icons/src/BlurPersonLowIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgBlurPersonLowIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M10 3c0-.28-.22-.5-.5-.5S9 2.72 9 3s.22.5.5.5.5-.22.5-.5ZM14 3c0-.28-.22-.5-.5-.5s-.5.22-.5.5.22.5.5.5.5-.22.5-.5ZM10 6c0-.28-.22-.5-.5-.5S9 5.72 9 6s.22.5.5.5.5-.22.5-.5ZM14 6c0-.28-.22-.5-.5-.5s-.5.22-.5.5.22.5.5.5.5-.22.5-.5ZM6 5.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5ZM6 9.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5ZM5.5 14c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.95 9.5a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Zm-1.65 2.75a1.65 1.65 0 1 1 3.3 0 1.65 1.65 0 0 1-3.3 0Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.75 16.1A2.75 2.75 0 0 0 7 18.85v1.1a.55.55 0 1 0 1.1 0v-1.1a1.65 1.65 0 0 1 1.65-1.65h4.4a1.65 1.65 0 0 1 1.65 1.65v1.1a.55.55 0 1 0 1.1 0v-1.1a2.75 2.75 0 0 0-2.75-2.75h-4.4ZM20.5 10c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM20.5 14c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM2.5 10c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM2.5 14c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM18 9.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5ZM18 13.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5ZM17.5 6c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgBlurPersonLowIcon;

packages/react-icons/src/SparkleIcon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+const SvgSparkleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12.098 3.903 10.44 8.944a1.734 1.734 0 0 1-1.106 1.106l-5.042 1.657 5.041 1.658a1.734 1.734 0 0 1 1.106 1.106l1.658 5.041 1.658-5.041a1.734 1.734 0 0 1 1.106-1.106l5.04-1.658-5.04-1.658a1.734 1.734 0 0 1-1.106-1.106l-1.658-5.041ZM6.027 3.903v3.469M18.168 16.043v3.469M4.292 5.637h3.469M16.434 17.778h3.468"
+      stroke="currentColor"
+      strokeWidth={1.171}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgSparkleIcon;

packages/react-icons/src/index.ts

@@ -30,6 +30,8 @@ export { default as BatteryFullIcon } from './BatteryFullIcon';
 export { default as BatteryPowerIcon } from './BatteryPowerIcon';
 export { default as BillIcon } from './BillIcon';
 export { default as BluetoothIcon } from './BluetoothIcon';
+export { default as BlurPersonHighIcon } from './BlurPersonHighIcon';
+export { default as BlurPersonLowIcon } from './BlurPersonLowIcon';
 export { default as BoltIcon } from './BoltIcon';
 export { default as BookIcon } from './BookIcon';
 export { default as BookmarkIcon } from './BookmarkIcon';
@@ -218,6 +220,7 @@ export { default as ShrinkIcon } from './ShrinkIcon';
 export { default as ShuffleIcon } from './ShuffleIcon';
 export { default as SlackIcon } from './SlackIcon';
 export { default as SolidCheckCircleIcon } from './SolidCheckCircleIcon';
+export { default as SparkleIcon } from './SparkleIcon';
 export { default as SpeakerIcon } from './SpeakerIcon';
 export { default as SpotlightIcon } from './SpotlightIcon';
 export { default as SquareMenuIcon } from './SquareMenuIcon';

packages/roomkit-react/src/Modal/Dialog.tsx

@@ -1,28 +1,20 @@
 import React, { ReactNode, useRef } from 'react';
 import { Root } from '@radix-ui/react-dialog';
 import { styled } from '@stitches/react';
-import { CSS } from '../Theme';
 import {
+  CustomDialogContent,
+  CustomDialogOverlay,
   DialogClose,
   DialogDefaultCloseIcon,
   DialogDescription,
   DialogTitle,
-  StyledDialogContent,
-  StyledDialogOverlay,
   StyledDialogPortal,
   StyledDialogTrigger,
 } from './DialogContent';
 import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector';
 
 const StyledDialog = styled(Root, {});
-const CustomDialogContent = ({ children, props = {}, css = {} }: { children: ReactNode; props?: any; css?: CSS }) => (
-  <StyledDialogContent css={{ ...css, position: 'absolute' }} {...props}>
-    {children}
-  </StyledDialogContent>
-);
-const CustomDialogOverlay = ({ css = {} }: { css?: CSS }) => (
-  <StyledDialogOverlay css={{ ...css, position: 'absolute' }} />
-);
+
 const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
   const dialogContainerSelector = useDialogContainerSelector();
   const containerRef = useRef<HTMLElement | null>(null);

packages/roomkit-react/src/Modal/DialogContent.tsx

@@ -17,19 +17,19 @@ export const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {
   appearance: 'none !important', // Needed for safari it shows white overlay
 });
 
-export const StyledDialogOverlay = styled(DialogPrimitive.Overlay, {
+export const CustomDialogOverlay = styled(DialogPrimitive.Overlay, {
   backgroundColor: 'rgba(0, 0, 0, 0.5);',
-  position: 'fixed',
+  position: 'absolute',
   inset: 0,
 });
 
 export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
 
-export const StyledDialogContent = styled(DialogPrimitive.Content, {
+export const CustomDialogContent = styled(DialogPrimitive.Content, {
   color: '$on_surface_medium',
   backgroundColor: '$surface_default',
   borderRadius: '8px',
-  position: 'fixed',
+  position: 'absolute',
   top: '50%',
   left: '50%',
   border: '$space$px solid $border_bright',

packages/roomkit-react/src/Prebuilt/common/constants.js

@@ -46,6 +46,8 @@ export const APP_DATA = {
   activeScreensharePeerId: 'activeScreensharePeerId',
   disableNotifications: 'disableNotifications',
   pollState: 'pollState',
+  background: 'background',
+  backgroundType: 'backgroundType',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
@@ -61,6 +63,7 @@ export const SIDE_PANE_OPTIONS = {
   CHAT: 'Chat',
   STREAMING: 'STREAMING',
   POLLS: 'POLLS',
+  VB: 'VB',
 };
 
 export const POLL_STATE = {

packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx

@@ -4,7 +4,6 @@ import {
   selectAvailableRoleNames,
   selectFullAppData,
   selectHLSState,
-  selectIsConnectedToRoom,
   selectLocalPeerRoleName,
   selectRolesMap,
   selectRoomState,
@@ -15,7 +14,7 @@ import {
 } from '@100mslive/react-sdk';
 import { normalizeAppPolicyConfig } from '../init/initUtils';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
 import { useSetAppDataByKey } from './useUISettings';
 import {
   APP_DATA,
@@ -26,6 +25,7 @@ import {
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
+import { VB_EFFECT } from '../VirtualBackground/constants';
 
 export const getAppDetails = appDetails => {
   try {
@@ -67,6 +67,8 @@ const initialAppData = {
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
   [APP_DATA.disableNotifications]: false,
+  [APP_DATA.background]: VB_EFFECT.NONE,
+  [APP_DATA.backgroundType]: VB_EFFECT.NONE,
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: '',
     [POLL_STATE.view]: '',
@@ -75,21 +77,12 @@ const initialAppData = {
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions();
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const sidePane = useSidepaneState();
-  const resetSidePane = useSidepaneReset();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
   const roleNames = useHMSStore(selectAvailableRoleNames);
   const rolesMap = useHMSStore(selectRolesMap);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const appData = useHMSStore(selectFullAppData);
 
-  useEffect(() => {
-    if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
-      resetSidePane();
-    }
-  }, [isConnected, sidePane, resetSidePane]);
-
   useEffect(() => {
     hmsActions.initAppData({
       ...initialAppData,

packages/roomkit-react/src/Prebuilt/components/AppData/useSidepane.js

@@ -60,7 +60,7 @@ export const usePollViewToggle = () => {
 };
 
 /**
- * reset's the sidepane value
+ * resets the sidepane value
  */
 export const useSidepaneReset = () => {
   const hmsActions = useHMSActions();

packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
@@ -21,6 +21,8 @@ import { RaiseHand } from '../RaiseHand';
 // @ts-ignore: No implicit Any
 import { ScreenshareToggle } from '../ScreenShareToggle';
 // @ts-ignore: No implicit Any
+import { VBToggle } from '../VirtualBackground/VBToggle';
+// @ts-ignore: No implicit Any
 import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
@@ -31,8 +33,6 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 import { useShowPolls } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
-// @ts-ignore: No implicit Any
-const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
 export const Footer = ({
   screenType,
@@ -82,11 +82,7 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
-        {isMobile ? null : (
-          <Suspense fallback={<></>}>
-            <VirtualBackground />
-          </Suspense>
-        )}
+        {isMobile ? null : <VBToggle />}
       </AppFooter.Left>
       <AppFooter.Center
         css={{

packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
   selectHandRaisedPeers,
@@ -96,11 +96,6 @@ export const ParticipantCount = () => {
   const peerCount = useHMSStore(selectPeerCount);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  useEffect(() => {
-    if (isParticipantsOpen && peerCount === 0) {
-      toggleSidepane();
-    }
-  }, [isParticipantsOpen, peerCount, toggleSidepane]);
 
   if (peerCount === 0) {
     return null;