feat: vb picker

apps/100ms-web/src/components/Preview/PreviewJoin.jsx

@@ -148,7 +148,7 @@ const Container = styled("div", {
   px: "$10",
 });
 
-export const PreviewTile = ({ name, error }) => {
+export const PreviewTile = ({ name, error, VB = false }) => {
   const localPeer = useHMSStore(selectLocalPeer);
   const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
@@ -175,7 +175,7 @@ export const PreviewTile = ({ name, error }) => {
       }}
       ref={borderAudioRef}
     >
-      {localPeer ? (
+      {localPeer || VB ? (
         <>
           <TileConnection name={name} peerId={localPeer.id} hideLabel={true} />
           <Video

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="#EFF0FA"
+    />
+    <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="#EFF0FA"
+    />
+  </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="#EFF0FA"
+      strokeWidth={1.171}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgSparkleIcon;

packages/react-icons/src/index.ts

@@ -29,6 +29,8 @@ export { default as BarIcon } from './BarIcon';
 export { default as BatteryFullIcon } from './BatteryFullIcon';
 export { default as BatteryPowerIcon } from './BatteryPowerIcon';
 export { default as BillIcon } from './BillIcon';
+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';
@@ -217,6 +219,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/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 = {
@@ -129,3 +132,6 @@ export const QUESTION_TYPE = {
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';
 
 export const DEFAULT_PORTAL_CONTAINER = '#prebuilt-container';
+
+// 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' };

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

@@ -25,6 +25,7 @@ import {
   SIDE_PANE_OPTIONS,
   UI_MODE_GRID,
   UI_SETTINGS,
+  VB_EFFECT,
 } from '../../common/constants';
 
 export const getAppDetails = appDetails => {
@@ -67,6 +68,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]: '',

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 '../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={{